/* Settings panel, weather status, story/market pop-ups, and roam controls. */

#configToggle{
  position:fixed;right:clamp(12px,3vw,32px);top:calc(18px + 1.5vh);z-index:9;
  width:44px;aspect-ratio:1;border:3px solid var(--navy);border-radius:50%;
  background:rgba(255,248,236,.94);color:var(--navy);font-family:'Fredoka',sans-serif;
  font-weight:700;font-size:1.25rem;box-shadow:0 5px 0 rgba(35,49,95,.2);
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s ease,transform .16s ease,background .16s ease;
}
#configToggle.on{opacity:1;pointer-events:auto}
#configToggle:hover{transform:translateY(-2px)}
#configToggle[aria-expanded="true"]{background:var(--mint)}

#configPanel{
  position:fixed;right:clamp(12px,3vw,32px);top:calc(70px + 1.5vh);z-index:10;
  width:min(318px,calc(100vw - 24px));padding:.75rem;border:3px solid var(--navy);
  border-radius:18px;background:rgba(255,248,236,.96);color:var(--navy);
  box-shadow:0 7px 0 rgba(35,49,95,.2),0 20px 34px rgba(10,16,40,.2);
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;
}
#configPanel.on{opacity:1;pointer-events:auto;transform:translateY(0)}
.config-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.config-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:#c94f36}
#configClose{
  width:30px;aspect-ratio:1;border:2px solid rgba(35,49,95,.75);border-radius:50%;background:#fff;color:var(--navy);
  font-family:'Fredoka',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;
}
.config-section{display:grid;gap:.44rem}
.config-section + .config-section{margin-top:.7rem;padding-top:.65rem;border-top:2px solid rgba(35,49,95,.14)}
.config-label{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-label)}
#modeControls{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:.42rem}
#modeControls button,#waypointSelect{
  height:36px;border:3px solid var(--navy);border-radius:999px;background:var(--cream);color:var(--navy);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.03em;
  box-shadow:0 5px 0 rgba(35,49,95,.2);cursor:pointer;
}
#modeControls button{grid-column:1 / -1;padding:0 .8rem}
#modeControls button.active{background:var(--mint)}
#waypointSelect{grid-column:1 / -1;width:100%;max-width:none;padding:0 .8rem}

#weatherControls{position:relative;width:100%}
.weather-select-row{
  width:100%;height:36px;border:3px solid var(--navy);border-radius:999px;background:rgba(255,255,255,.7);color:var(--navy);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.02em;
  box-shadow:0 5px 0 rgba(35,49,95,.18);cursor:pointer;padding:0 .68rem;
  display:flex;align-items:center;justify-content:space-between;gap:.35rem;
}
.weather-select-row span{flex:0 0 auto}
#weatherSelect{
  min-width:0;flex:1;border:0;background:transparent;color:#c94f36;text-align:right;
  font:inherit;cursor:pointer;outline:0;
}
#weatherSelect option{color:var(--navy);background:var(--cream)}

#weatherLive{
  position:relative;margin-top:.5rem;padding:.5rem 2.45rem .5rem .58rem;border:3px solid var(--navy);border-radius:14px;
  background:rgba(255,248,236,.92);color:var(--navy);
  box-shadow:0 5px 0 rgba(35,49,95,.16),0 14px 24px rgba(35,49,95,.12);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.63rem;line-height:1.25;
}
#weatherLive .status{display:block;color:#c94f36;letter-spacing:.07em;text-transform:uppercase}
#weatherLive.status-live .status{color:#2e7d6d}
#weatherLive.status-stale .status,#weatherLive.status-fallback .status{color:#8a5a36}
#weatherLive .why{display:block;margin-top:.28rem;color:#3e4a7d;font-size:.64rem;letter-spacing:.01em}
#weatherLive .stamp{display:block;margin-top:.3rem;color:var(--ink-label);font-size:.58rem;letter-spacing:.04em}
#weatherHelpToggle{
  position:absolute;right:.52rem;top:.46rem;width:26px;aspect-ratio:1;border:2px solid rgba(35,49,95,.78);
  border-radius:50%;background:#fff;color:var(--navy);font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:.82rem;line-height:1;cursor:pointer;
}
#weatherLive.help-open #weatherHelpToggle{background:var(--sun)}
#weatherLiveHelp{
  display:none;margin-top:.48rem;padding-top:.48rem;border-top:2px solid rgba(35,49,95,.14);
  color:#3e4a7d;font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:800;line-height:1.32;
}
#weatherLive.help-open #weatherLiveHelp{display:block}
#weatherLiveHelp p{margin:0 0 .42rem}
#weatherLiveHelp ul{margin:0;display:grid;gap:.24rem;list-style:none}
#weatherLiveHelp li{display:grid;grid-template-columns:4.8rem 1fr;gap:.35rem}
#weatherLiveHelp b{font-family:'Fredoka',sans-serif;color:var(--navy)}

#desktopControls{
  position:fixed;left:clamp(12px,3vw,32px);top:calc(18px + 1.5vh);z-index:9;
  width:min(250px,calc(100vw - 24px));padding:.8rem .9rem;border:3px solid var(--navy);
  border-radius:18px;background:rgba(255,248,236,.88);color:var(--navy);
  box-shadow:0 6px 0 rgba(35,49,95,.18),0 18px 32px rgba(35,49,95,.18);
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:.76rem;line-height:1.45;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;
}
#desktopControls.on{opacity:1;transform:translateY(0)}
#desktopControls .title{display:block;margin-bottom:.3rem;color:#c94f36;letter-spacing:.12em;text-transform:uppercase;font-size:.68rem}
#desktopControls kbd{
  display:inline-block;min-width:1.7rem;margin:.08rem .12rem;padding:.06rem .28rem;border:2px solid rgba(35,49,95,.55);
  border-radius:7px;background:#fff;color:var(--navy);text-align:center;box-shadow:0 2px 0 rgba(35,49,95,.16);
}

#touchControls{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;transition:opacity .3s ease}
#touchControls.on{opacity:1}
.touch-pad{
  position:absolute;width:108px;aspect-ratio:1;border:3px solid var(--navy);border-radius:50%;
  background:rgba(255,248,236,.52);box-shadow:0 6px 0 rgba(35,49,95,.18);
  pointer-events:auto;touch-action:none;
}
#movePad{left:18px;bottom:154px}
#lookPad{right:18px;bottom:154px}
.touch-knob{
  position:absolute;left:50%;top:50%;width:42px;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--coral);border:3px solid var(--navy);
  box-shadow:0 4px 0 rgba(35,49,95,.2);
}
.look-dot{
  position:absolute;left:50%;top:50%;width:14px;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--navy);
}
#altButtons{
  position:absolute;right:136px;bottom:158px;display:flex;flex-direction:column;gap:.55rem;
  pointer-events:auto;
}
#altButtons button{
  width:46px;aspect-ratio:1;border-radius:50%;border:3px solid var(--navy);
  background:var(--cream);color:var(--navy);font-family:'Fredoka',sans-serif;
  font-size:1.35rem;font-weight:700;box-shadow:0 4px 0 rgba(35,49,95,.2);
  pointer-events:auto;
}

.float-pop{
  position:fixed;left:50%;top:50%;z-index:12;width:min(92vw,520px);
  transform:translate(-50%,-48%) scale(.96);opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.float-pop.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.pop-card{
  background:var(--cream);border:4px solid var(--navy);border-radius:24px;padding:1.3rem 1.4rem 1.45rem;
  box-shadow:0 10px 0 rgba(35,49,95,.28),0 30px 60px rgba(10,16,40,.34);
}
.pop-card h3{font-family:'Fredoka',sans-serif;font-size:clamp(1.35rem,5vw,2rem);line-height:1.08;color:var(--navy)}
.pop-card p{margin-top:.7rem;color:var(--ink-soft);font-weight:700;line-height:1.55}
.pop-card .meta{display:block;margin-bottom:.5rem;font-family:'Fredoka',sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#c94f36}
.pop-card .stamp{display:block;margin-top:.6rem;font-size:.68rem;font-weight:800;color:var(--ink-label)}
.pop-close{
  position:absolute;right:14px;top:14px;width:36px;aspect-ratio:1;border-radius:50%;border:3px solid var(--navy);
  background:#fff;color:var(--navy);font-family:'Fredoka',sans-serif;font-size:1.15rem;font-weight:700;cursor:pointer;
  box-shadow:0 3px 0 rgba(35,49,95,.2);
}
#marketSpark{width:100%;height:170px;margin-top:.85rem;border:3px solid var(--navy);border-radius:16px;background:#10182f}