/* ==========================================================================
   The Solar Agora at night — world view.
   Everything here is scoped to [data-view="world"]; the plain page is in
   site.css and stays untouched. Only tokens from site.css are used.
   ========================================================================== */

/* ---------- the stage: a pinned canvas behind the stations */
[data-view="world"] .agora-stage{
  display:block;position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;
  z-index:0;overflow:hidden;background:radial-gradient(90% 70% at 62% 38%,#16246A 0,#0B1440 55%,#03040F 100%);
}
[data-view="world"][data-weather="moon"] .agora-stage{background:radial-gradient(90% 70% at 62% 38%,#1B2B78 0,#0C1747 55%,#020310 100%)}
[data-view="world"][data-weather="ember"] .agora-stage{background:radial-gradient(90% 70% at 62% 38%,#151B55 0,#0A0F33 55%,#040408 100%)}
[data-view="world"][data-weather="fog"] .agora-stage{background:radial-gradient(90% 70% at 62% 38%,#22347E 0,#131F5C 55%,#060922 100%)}
/* a vignette: the edges of the night fall away */
[data-view="world"] .agora-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 60% 45%,transparent 55%,rgba(3,5,18,.62) 100%)}
.agora-labels{z-index:2}
.agora-loading{z-index:3}
.agora-canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline:none}
.exploring .agora-canvas{touch-action:none;cursor:grab}
.exploring .agora-canvas:active{cursor:grabbing}

.agora-loading{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:.6rem;padding-bottom:18vh;
  font-family:var(--mono);font-size:1.05rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2);pointer-events:none;
  transition:opacity var(--t-base) var(--out);
}
.agora-stage.ready .agora-loading{opacity:0}
.agora-spinner{width:22px;height:22px;border-radius:50%;border:2px solid rgba(228,231,246,.18);border-top-color:var(--gold);animation:agoraSpin .9s linear infinite}
@keyframes agoraSpin{to{transform:rotate(360deg)}}

/* ---------- header floats over the sky */
[data-view="world"] .has-world .head{position:fixed;left:0;right:0;background:color-mix(in srgb,var(--ink) 62%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--hair-2)}

/* ---------- stations become stops on a flight */
[data-view="world"] .station{
  background:transparent!important;color:var(--txt);min-height:128vh;min-height:128svh;padding:0;
  position:relative;z-index:1;pointer-events:none;display:block;
}
[data-view="world"] .station:last-of-type{min-height:112vh}
[data-view="world"] .st-card{
  --vis:0;
  position:sticky;top:calc(var(--head) + 2.5vh);
  width:min(33rem,calc(42vw));max-width:none;margin:0 0 0 max(var(--pad),2rem);
  max-height:calc(100vh - var(--head) - 5vh - 76px);max-height:calc(100svh - var(--head) - 5vh - 76px);overflow:auto;overscroll-behavior:contain;
  padding:clamp(1.2rem,2vw,1.8rem);gap:.85rem;
  background:linear-gradient(180deg,rgba(16,27,75,.82),rgba(8,14,44,.86));
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(228,231,246,.16);border-radius:var(--r);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(228,231,246,.08);
  opacity:var(--vis);transform:translateY(calc((1 - var(--vis)) * 28px));
  visibility:hidden;scrollbar-width:thin;
}
[data-view="world"] .st-card.is-on{pointer-events:auto;visibility:visible}
[data-view="world"] .st-card:not(.is-on){transition:visibility 0s linear .3s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){[data-view="world"] .st-card{background:var(--card)}}

/* the arrival card reads like the crest on a banner */
[data-view="world"] .st-approach .st-card{width:min(36rem,46vw);top:calc(var(--head) + 4vh)}
[data-view="world"] .st-approach .hero-title{color:#fff;font-size:clamp(3.4rem,7vw,6.4rem)}
[data-view="world"] .st-approach .hero-title .dot{color:var(--gold)}
[data-view="world"] .st-approach .st-lead,[data-view="world"] .st-assembly .st-lead{color:var(--txt-2)}
[data-view="world"] .st-approach .st-motto{color:var(--gold-ink)}
[data-view="world"] .st-approach .st-motto-alt{color:var(--txt-3)}
[data-view="world"] .st-approach .st-crest{background:none}
[data-view="world"] .st-approach .btn-line,[data-view="world"] .st-assembly .btn-line{color:var(--txt);border-color:var(--hair)}
[data-view="world"] .st-crest{width:min(210px,40vw)}
[data-view="world"] .st-assembly .h2{color:var(--txt)}
[data-view="world"] .st-assembly .st-team small,[data-view="world"] .st-assembly .st-facts dt{color:var(--txt-3)}
[data-view="world"] .st-assembly .prose a{color:var(--txt)}
[data-view="world"] .st-letter .st-sub{color:var(--gold-ink)}
[data-view="world"] .station .h2{font-size:clamp(2.2rem,3.6vw,3.2rem)}
[data-view="world"] .st-fact{background:var(--card)}
[data-view="world"] .prog-title{font-size:clamp(1.35rem,2vw,1.7rem)}
[data-view="world"] .st-row-t{font-size:1.3rem}

.w-only{display:none}
[data-view="world"] .w-only{display:block}
[data-view="world"] .st-play.w-only,[data-view="world"] .st-hint.w-only{display:flex}

.st-greet{font-size:.9375rem;color:var(--txt-2);font-style:italic}
.st-hint{align-items:center;gap:.6rem;font-family:var(--mono);font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.st-hint-mouse{width:18px;height:28px;border:2px solid currentColor;border-radius:10px;position:relative;flex:0 0 auto}
.st-hint-mouse::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:6px;margin-left:-1px;border-radius:2px;background:currentColor;animation:agoraWheel 1.8s var(--out) infinite}
@keyframes agoraWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{opacity:0}}

/* ---------- the play strip on each district */
.st-play{flex-direction:column;align-items:flex-start;gap:.6rem;margin-top:.35rem;padding-top:.9rem;border-top:1px dashed var(--hair);width:100%}
.st-act .glyph,.st-have .glyph{width:20px;height:20px}
.st-done{font-size:.9375rem;color:var(--gold-ink);font-weight:500}
.st-have{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:1rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--gold);border-radius:var(--r-pill);padding:.45rem .9rem .5rem}
.st-have[hidden],.st-play [hidden]{display:none}

/* ---------- bonus content behind the gate / the wild key */
[data-view="world"] [data-locked]{display:none}
[data-view="world"][data-gate="open"] [data-locked="gate"],[data-view="world"][data-wild="found"] [data-locked="wild"]{display:block;animation:agoraUnlock var(--t-slow) var(--out)}
@keyframes agoraUnlock{from{opacity:0;transform:translateY(12px)}}
.st-gate{font-size:.9375rem;padding:.75rem 1rem;border-radius:12px;background:var(--parch-2);color:var(--txt-2);width:100%}
[data-gate="open"] .st-gate{background:var(--gold);color:var(--ink);font-weight:600}

/* ---------- world UI: rail, dock, toast, dialog, labels */
.w-ui{display:none}
[data-view="world"] .w-ui{display:block}
.w-rail{position:fixed;right:max(12px,1.2vw);top:50%;translate:0 -50%;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.w-rail a{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;padding:.3rem .25rem;font-family:var(--mono);font-size:.9rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt)}
.w-rail-l{opacity:0;transform:translateX(6px);transition:opacity var(--t-fast) ease,transform var(--t-fast) var(--out);background:rgba(6,11,36,.8);border:1px solid var(--hair);padding:.25rem .6rem .28rem;border-radius:var(--r-pill);white-space:nowrap}
.w-rail-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--txt-2);background:rgba(6,11,36,.6);flex:0 0 auto;transition:transform var(--t-fast) var(--out),background-color var(--t-fast) ease}
.w-rail a.on .w-rail-dot{background:var(--gold);border-color:var(--gold);transform:scale(1.35);box-shadow:0 0 12px 2px rgba(220,243,106,.45)}
.w-rail a.on .w-rail-l,.w-rail a:hover .w-rail-l,.w-rail a:focus-visible .w-rail-l{opacity:1;transform:none}
.exploring .w-rail{opacity:.35}
@media (max-width:899px){.w-rail{display:none}}

.w-dock{position:fixed;left:max(var(--pad),2rem);bottom:1.1rem;z-index:30;display:flex;gap:.5rem;align-items:center}
.w-ring,.w-explore{
  display:inline-flex;align-items:center;gap:.6rem;min-height:48px;cursor:pointer;
  font-family:var(--mono);font-size:1rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--txt);
  background:rgba(8,14,44,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(228,231,246,.2);border-radius:var(--r-pill);padding:.45rem .95rem .45rem .6rem;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.7);transition:transform 140ms var(--out),border-color 160ms ease;
}
.w-ring:active,.w-explore:active{transform:scale(.97)}
.w-explore{padding-left:.8rem}
.w-explore svg{width:22px;height:22px}
.w-explore[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
@media (hover:hover) and (pointer:fine){.w-ring:hover,.w-explore:hover{border-color:var(--gold)}}
.w-ring-keys{display:flex;gap:2px}
.w-ring-keys i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(228,231,246,.07);color:rgba(228,231,246,.4)}
.w-ring-keys i .glyph{width:17px;height:17px}
.w-ring-keys i.on{background:var(--gold);color:var(--ink);box-shadow:0 0 10px 1px rgba(220,243,106,.5)}
.w-ring-keys i[data-slot="wild"]{border:1.5px dashed rgba(228,231,246,.35)}
.w-ring-keys i[data-slot="wild"].on{border-color:var(--gold-ink)}
.w-ring-keys i.press{animation:agoraPress var(--t-base) var(--out)}
@keyframes agoraPress{0%{transform:scale(1.8) rotate(-18deg)}60%{transform:scale(.92) rotate(4deg)}100%{transform:none}}
@media (max-width:899px){
  .w-dock{left:auto;right:.6rem;top:calc(var(--head) + .6rem);bottom:auto;flex-direction:column;align-items:flex-end}
  .w-ring-t,.w-explore span{display:none}
  .w-ring,.w-explore{padding:.4rem .5rem}
  .w-ring-keys i{width:24px;height:24px}
}

.w-toast{
  position:fixed;left:50%;bottom:1.25rem;z-index:35;translate:-50% 12px;opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:.8rem;max-width:min(92vw,34rem);
  background:var(--ink);color:var(--on-ink);border:1px solid rgba(220,243,106,.35);border-radius:var(--r-pill);padding:.55rem .6rem .55rem 1.2rem;
  font-size:.9375rem;box-shadow:0 14px 40px -16px rgba(0,0,0,.8);
  transition:opacity var(--t-fast) ease,translate var(--t-base) var(--out);
}
.w-toast.on{opacity:1;translate:-50% 0;pointer-events:auto}
.w-toast:not(:has(button)){padding-right:1.2rem}
.w-toast .btn{min-height:40px;padding:.5rem .9rem}
@media (max-width:899px){.w-toast{bottom:auto;top:calc(var(--head) + .6rem);max-width:calc(100vw - 5.5rem);left:.6rem;translate:0 -8px}.w-toast.on{translate:0 0}}

.agora-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.w-label{
  position:absolute;left:0;top:0;pointer-events:none;opacity:0;cursor:pointer;
  font-family:var(--mono);font-size:.95rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--txt);white-space:nowrap;
  background:rgba(6,11,36,.82);border:1px solid rgba(220,243,106,.55);border-radius:var(--r-pill);padding:.42rem .8rem .44rem .7rem;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.8);transition:opacity var(--t-fast) ease,border-color var(--t-fast) ease;
  display:inline-flex;align-items:center;gap:.45rem;
}
.w-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(220,243,106,.6)}
.w-label::after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-.5px;width:1px;height:10px;background:linear-gradient(rgba(220,243,106,.7),transparent)}
@media (hover:hover) and (pointer:fine){.w-label:hover{border-color:var(--gold)}}
.w-label.on{opacity:1;pointer-events:auto}

.w-keys{border:1px solid var(--hair);padding:0;border-radius:var(--r);max-width:min(30rem,calc(100vw - 2rem));width:100%;background:var(--parch);color:var(--txt);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.w-keys::backdrop{background:rgba(3,5,18,.66);backdrop-filter:blur(3px)}
.w-keys-in{padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.9rem}
.w-keys-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.w-keys h2{font-size:2.2rem}
.w-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:none;color:var(--txt);font-size:1.5rem;line-height:1;cursor:pointer}
.w-keys p{font-size:.9375rem;color:var(--txt-2)}
.w-keys-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.w-keys-list li{display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px solid var(--hair)}
.w-keys-list .glyph{width:24px;height:24px;color:var(--txt-3);flex:0 0 auto}
.w-keys-list li.on .glyph{color:var(--ink);background:var(--gold);border-radius:50%;padding:2px}
.w-keys-name{font-family:var(--display);font-stretch:var(--stretch);font-size:1.4rem;font-weight:600;flex:1;line-height:1}
.w-keys-go{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--gold-ink)}
.w-keys-state{font-size:.8125rem;color:var(--txt-3);min-width:6.5rem;text-align:right}
li.on .w-keys-state{color:var(--gold-ink);font-weight:600}
li.on .w-keys-go{display:none}
.w-keys-wild .lnk{margin-top:.4rem;background:none;border:0;cursor:pointer;padding:0 0 2px;white-space:normal;text-align:left}
[data-wild="found"] .w-keys-wild{display:none}
.w-keys-privacy{font-size:.8125rem!important;color:var(--txt-3)!important}
.w-keys-foot{display:flex;flex-wrap:wrap;gap:.5rem}

/* explore mode: the island takes the whole screen */
.exploring .station .st-card{opacity:0!important;visibility:hidden!important}
html.exploring{overflow:hidden}

/* ---------- small screens: cards become a bottom sheet over the island */
@media (max-width:899px){
  [data-view="world"] .station{min-height:120svh}
  [data-view="world"] .st-card,[data-view="world"] .st-approach .st-card{
    position:sticky;top:auto;bottom:.6rem;
    width:auto;margin:0 .6rem;max-height:54svh;
    padding:1.05rem 1.1rem 1.2rem;
  }
  [data-view="world"] .station{display:flex;flex-direction:column;justify-content:flex-end}
  [data-view="world"] .station .h2{font-size:2.2rem}
  [data-view="world"] .st-approach .hero-title{font-size:clamp(3rem,15vw,4.6rem)}
  [data-view="world"] .st-crest{width:120px}
  [data-view="world"] .st-approach .st-card{max-height:62svh}
}

@media (prefers-reduced-motion:reduce){
  .agora-spinner,.st-hint-mouse::after{animation:none}
  [data-view="world"] .st-card{transform:none}
}