/* BLUVERSE HOMEWORLD — iter 9 — witness theater + stage plates + map board (no external fonts/requests) */
:root{
  --bg:#0a0a12; --panel:#12121a; --panel2:#171724;
  --border:rgba(34,211,238,.25); --border2:rgba(124,58,237,.3);
  --accent:#22d3ee; --accent-2:#a78bfa;
  --text:#e8e8f0; --muted:#8b8fa3; --gold:#fbbf24; --danger:#ef4444; --ok:#22c55e;
  --scrap:#f59e0b; --signal:#22d3ee; --spark:#fde047;
  --mono:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,Menlo,monospace;
  --sans:system-ui,'Segoe UI',Inter,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(34,211,238,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.035) 1px,transparent 1px);background-size:44px 44px}
.wrap{max-width:1000px;margin:0 auto;padding:18px 14px 60px;position:relative}

header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:16px;flex-wrap:wrap}
h1{font-family:var(--mono);letter-spacing:.06em;font-size:1.5rem;color:var(--accent);text-shadow:0 0 24px rgba(34,211,238,.45)}
h1 .cy{color:var(--accent-2)}
.tag{color:var(--muted);font-size:.82rem;margin-top:2px}
.navlinks{display:flex;gap:14px;font-family:var(--mono);font-size:.78rem}
.navlinks a{color:var(--accent);text-decoration:none}
.navlinks a:hover,.navlinks a:focus-visible{text-decoration:underline}

.screen{display:none}
.screen.active{display:block}

.btn{background:var(--panel2);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.9rem;padding:12px 22px;border-radius:10px;cursor:pointer;transition:all .15s;min-height:44px}
.btn:hover{border-color:var(--accent);box-shadow:0 0 18px rgba(34,211,238,.3);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,rgba(34,211,238,.25),rgba(124,58,237,.22));border-color:var(--accent)}
.btn.small{padding:8px 14px;font-size:.75rem;min-height:38px}
.btn.danger{border-color:rgba(239,68,68,.4)}
.btn.danger:hover{border-color:var(--danger);box-shadow:0 0 14px rgba(239,68,68,.3)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===== title / command-bridge shell ===== */
#title{text-align:center;padding:40px 0}
#title .titleHero{position:relative;width:min(100%,560px);height:220px;margin:0 auto 18px;overflow:hidden;border:1px solid rgba(34,211,238,.34);border-radius:18px;background:radial-gradient(circle at 50% 48%,rgba(124,58,237,.2),transparent 32%),radial-gradient(circle at 50% 52%,#111827 0%,#090b16 58%,#06070d 100%);box-shadow:inset 0 0 42px rgba(34,211,238,.08),0 0 34px rgba(124,58,237,.12);isolation:isolate}
#title .titleHero::before{content:'';position:absolute;inset:0;opacity:.65;background-image:radial-gradient(circle at 18% 26%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 76% 22%,#a78bfa 0 1px,transparent 1.5px),radial-gradient(circle at 86% 76%,#22d3ee 0 1px,transparent 1.5px),radial-gradient(circle at 24% 79%,#fff 0 1px,transparent 1.5px);background-size:160px 120px,220px 170px,190px 150px,260px 180px}
#title .titleHero::after{content:'';position:absolute;inset:-40% 0;background:linear-gradient(180deg,transparent 44%,rgba(34,211,238,.13) 50%,transparent 56%);transform:translateY(-28%);animation:titleScan 7s linear infinite;pointer-events:none}
#title .titleWorld{position:absolute;z-index:2;left:50%;top:50%;width:82px;height:82px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 31% 27%,#d8b4fe 0 4%,#8b5cf6 18%,#4c1d95 52%,#160d2d 100%);box-shadow:0 0 18px rgba(167,139,250,.75),0 0 50px rgba(124,58,237,.38);}
#title .titleWorld::before{content:'';position:absolute;inset:-13px;border:1px solid rgba(167,139,250,.55);border-radius:50%;box-shadow:0 0 18px rgba(167,139,250,.22)}
#title .titleWorld::after{content:'';position:absolute;left:13%;right:11%;top:39%;height:9px;border-top:1px solid rgba(224,231,255,.35);border-bottom:1px solid rgba(34,211,238,.25);transform:rotate(-18deg);opacity:.7}
#title .titleWorld span{position:absolute;left:18%;top:21%;width:11px;height:7px;border-radius:50%;background:#fef3c7;box-shadow:18px 30px 0 -2px #22d3ee,38px 10px 0 -3px #fbbf24;opacity:.8}
#title .titleOrbit{position:absolute;z-index:1;left:50%;top:50%;border:1px solid rgba(34,211,238,.34);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}
#title .titleOrbitOne{width:330px;height:112px}
#title .titleOrbitTwo{width:430px;height:154px;transform:translate(-50%,-50%) rotate(29deg);border-color:rgba(167,139,250,.32)}
#title .titleOrbitThree{width:520px;height:198px;transform:translate(-50%,-50%) rotate(-43deg);border-color:rgba(251,191,36,.18);border-style:dashed}
#title .titlePing{position:absolute;z-index:3;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);animation:titlePing 3.8s ease-in-out infinite}
#title .titlePingOne{left:21%;top:38%;animation-delay:-.6s}
#title .titlePingTwo{right:18%;top:31%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation-delay:-1.8s}
#title .titlePingThree{right:26%;bottom:25%;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2);animation-delay:-3s}
#title .titleReadout{position:absolute;z-index:3;bottom:12px;color:rgba(226,232,240,.62);font-family:var(--mono);font-size:.53rem;letter-spacing:.16em}
#title .titleReadoutLeft{left:18px}
#title .titleReadoutRight{right:18px;color:rgba(34,211,238,.68)}
#title .titleTelemetry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,560px);margin:0 auto 24px}
#title .titleTelemetry>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:9px 8px;border:1px solid rgba(34,211,238,.2);border-radius:9px;background:rgba(18,18,26,.74);box-shadow:inset 0 0 16px rgba(34,211,238,.035)}
#title .titleTelemetry span,#title .titleTelemetry small{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;color:var(--muted)}
#title .titleTelemetry b{font-family:var(--mono);font-size:.7rem;color:var(--accent);white-space:nowrap}
#title .titleTelemetry small{font-size:.48rem;color:rgba(167,139,250,.8);white-space:nowrap}
@keyframes titleScan{0%{transform:translateY(-28%)}100%{transform:translateY(28%)}}
@keyframes titlePing{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.45)}}
#title .big{font-family:var(--mono);font-size:clamp(1.9rem,6vw,3.3rem);color:var(--accent);text-shadow:0 0 40px rgba(34,211,238,.55);letter-spacing:.04em}
#title .big span{color:var(--accent-2)}
#title p.sub{color:var(--muted);margin:8px 0 4px;font-family:var(--mono);font-size:.85rem}
#title p.motto{color:var(--gold);font-family:var(--mono);letter-spacing:.18em;font-size:.9rem;margin:14px 0 12px}
/* iter 30: the build now tracks live, so the version is player-visible */
#title p.gameVersion{color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;margin:0 0 26px}
#title p.gameVersion b{color:var(--accent)}
#title .menu,#how .menu{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:10px}
.plaque{margin-top:38px;display:inline-block;border:1px solid var(--border);border-radius:10px;padding:10px 18px;color:var(--muted);font-size:.78rem;font-family:var(--mono);max-width:560px}
.plaque b{color:var(--gold)}

/* ===== how ===== */
.howto{max-width:640px;margin:0 auto;color:var(--muted);line-height:1.65;font-size:.92rem;padding:14px 0}
.howto h3{color:var(--accent);font-family:var(--mono);margin:18px 0 6px;font-size:.95rem}
.howto b{color:var(--text)}
.howto .howList{margin:6px 0 4px;padding-left:20px;list-style:none}
.howto .howList li{position:relative;margin:0 0 7px}
.howto .howList li::before{content:'▸';position:absolute;left:-16px;color:var(--accent)}
/* iter 30: player-facing update log — native <details>, no JS, keyboard and
   screen-reader accessible for free. Iteration numbers are the version language. */
.updates{border:1px solid var(--border);border-radius:10px;padding:2px 14px;margin:8px 0 4px;background:rgba(148,163,184,.04)}
.updates>summary{cursor:pointer;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--accent);padding:10px 2px}
.updates>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.updates[open]>summary{border-bottom:1px solid var(--border);margin-bottom:8px}
.updates .howList{padding-bottom:10px}

/* ===== resource bar ===== */
#resBar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.res{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.res .ricon{font-size:1.4rem}
.rnums{font-family:var(--mono);font-size:.85rem;line-height:1.35}
.rnums .rname{display:block;font-size:.62rem;letter-spacing:.14em;color:var(--muted)}
.rnums b{font-size:1.05rem}
.rnums .cap{color:var(--muted);font-size:.75rem;margin-left:3px}
.rnums .rate{display:block;font-size:.72rem;color:var(--ok)}
.r-scrap .rnums b{color:var(--scrap)}
.r-signal .rnums b{color:var(--signal)}
.r-spark .rnums b{color:var(--spark)}
.res.full .rate{color:var(--danger)}

/* ===== planet scene ===== */
#scene{background:radial-gradient(120% 100% at 50% 0%,#0d1322 0%,#070a14 70%);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:12px}
#planetScene{display:block;width:100%;height:auto}
#planetScene .stage{display:none}
#planetScene .stage.on{display:inline}
#planetScene .scaffold{display:none}
#planetScene g.building .scaffold{display:inline;animation:blink 1.6s ease-in-out infinite}
#planetScene .pulse{animation:corePulse 3s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.9}50%{opacity:.35}}
@keyframes corePulse{0%,100%{opacity:.9}50%{opacity:.55}}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.25}}
#stars circle{fill:#dbeafe}
#stars circle.tw{animation:twinkle 4s ease-in-out infinite}
#cityLights circle{fill:#fcd34d;opacity:0;transition:opacity .6s}
#cityLights circle.on{opacity:.85}
@media (prefers-reduced-motion:reduce){
  #planetScene .pulse,#stars circle.tw,#planetScene g.building .scaffold{animation:none}
}

/* command bridge — Cycle/Play and Watch/Live share a campaign, not a clock */
#playModeBridge{background:linear-gradient(135deg,rgba(17,34,54,.96),rgba(24,18,42,.94));border:1px solid rgba(34,211,238,.35);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:inset 0 0 28px rgba(34,211,238,.04)}
.modeBridgeHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.modeBridgeHead h2{font-family:var(--mono);font-size:.9rem;letter-spacing:.12em;color:var(--accent);margin-bottom:5px}
.modeBridgeHead .briefIntro{margin:0;max-width:720px}
.modeBridgeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.modeCard{display:flex;gap:10px;min-width:0;border:1px solid rgba(167,139,250,.28);border-radius:11px;padding:12px;background:rgba(8,12,22,.58)}
.modeCard.modeCycle{border-color:rgba(34,211,238,.35)}
.modeCard.modeWatch{border-color:rgba(251,191,36,.42);background:linear-gradient(135deg,rgba(52,35,23,.48),rgba(8,12,22,.62))}
.modeIcon{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.35);border-radius:9px;color:var(--accent);font:1.35rem var(--mono);box-shadow:0 0 16px rgba(34,211,238,.12)}
.modeWatch .modeIcon{border-color:rgba(251,191,36,.5);color:var(--gold);box-shadow:0 0 16px rgba(251,191,36,.12)}
.modeCard h3{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;color:var(--text);margin-bottom:5px}
.modeCard p{color:var(--muted);font-size:.78rem;line-height:1.45}
.modeCard p b{color:var(--text)}
.modeMeta{display:block;margin-top:8px;color:var(--accent-2);font:.58rem var(--mono);letter-spacing:.12em}
.modeWatch .modeMeta{color:var(--gold)}
.modeLinks{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.modeLink{display:inline-flex;align-items:center;min-height:34px;padding:7px 10px;border:1px solid rgba(251,191,36,.52);border-radius:7px;color:var(--gold);font:.64rem var(--mono);letter-spacing:.08em;text-decoration:none;background:rgba(251,191,36,.06)}
.modeLink:hover,.modeLink:focus-visible{border-color:var(--gold);box-shadow:0 0 14px rgba(251,191,36,.18);text-decoration:none}
.modeLinkAlt{border-color:rgba(167,139,250,.5);color:var(--accent-2);background:rgba(167,139,250,.06)}
.modeLinkAlt:hover,.modeLinkAlt:focus-visible{border-color:var(--accent-2);box-shadow:0 0 14px rgba(167,139,250,.18)}
.modeBoundary{margin-top:10px;padding-top:9px;border-top:1px solid rgba(167,139,250,.2);color:var(--muted);font:.68rem/1.5 var(--mono)}
.modeBoundary b{color:var(--gold)}

@media (max-width: 700px){
  .modeBridgeHead{display:block}
  .modeBridgeHead .briefStamp{display:inline-block;margin-top:8px}
  .modeBridgeGrid{grid-template-columns:1fr}
}

/* ===== iter 44: campaign spine / six jobs, one persistent world + Cycle Dock ===== */
#campaignSpine{position:relative;overflow:hidden;border:1px solid rgba(34,211,238,.28);border-radius:14px;padding:14px;margin:14px 0 16px;background:
  radial-gradient(80% 120% at 50% 0%,rgba(34,211,238,.09),transparent 62%),
  linear-gradient(135deg,rgba(11,30,44,.94),rgba(23,17,40,.94));
  box-shadow:inset 0 0 34px rgba(34,211,238,.035)}
#campaignSpine::before{content:'';position:absolute;left:7%;right:7%;top:148px;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.45) 12%,rgba(167,139,250,.4) 50%,rgba(251,191,36,.4) 88%,transparent);pointer-events:none}
.spineHead{position:relative;z-index:1}
.spineHead h2{color:var(--accent)}
.spineRail{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;list-style:none}
.spineNode{position:relative;display:flex;flex-direction:column;min-width:0;min-height:188px;padding:11px 9px 10px;border:1px solid rgba(167,139,250,.28);border-radius:10px;background:rgba(7,12,23,.82);box-shadow:0 8px 20px rgba(0,0,0,.14);transition:transform .15s,border-color .15s,box-shadow .15s}
.spineNode:hover,.spineNode:focus-within{transform:translateY(-2px);border-color:rgba(34,211,238,.7);box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 18px rgba(34,211,238,.09)}
.spineNode::before{content:attr(data-step);position:absolute;right:7px;top:7px;color:rgba(226,232,240,.34);font:.55rem var(--mono);letter-spacing:.08em}
.spineGlyph{display:grid;place-items:center;width:32px;height:32px;margin-bottom:8px;border:1px solid rgba(34,211,238,.42);border-radius:9px;font-size:1.15rem;background:rgba(34,211,238,.06);filter:drop-shadow(0 0 7px rgba(34,211,238,.2))}
.spineEyebrow{font:.53rem var(--mono);letter-spacing:.16em;color:var(--accent-2);margin-bottom:4px}
.spineNode h3{font:.78rem var(--mono);letter-spacing:.1em;color:var(--text);margin-bottom:6px}
.spineNode p{font-size:.67rem;line-height:1.45;color:var(--muted);margin:0 0 8px}
.spineNode a{display:inline-flex;align-items:center;align-self:flex-start;min-height:28px;margin-top:auto;padding:5px 6px;border:1px solid rgba(34,211,238,.35);border-radius:6px;color:var(--accent);font:.54rem var(--mono);letter-spacing:.06em;text-decoration:none;background:rgba(34,211,238,.04)}
.spineNode a:hover,.spineNode a:focus-visible{border-color:var(--accent);box-shadow:0 0 12px rgba(34,211,238,.16);text-decoration:none}
.spineLinks{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:auto}
.spineLinks a{margin-top:0}
.spineStatus{display:block;margin-top:7px;color:var(--accent);font:.49rem/1.35 var(--mono);letter-spacing:.07em}
.spineLive{border-color:rgba(34,197,94,.38)}
.spineLive .spineGlyph,.spineGround .spineGlyph{border-color:rgba(34,197,94,.48);background:rgba(34,197,94,.06)}
.spineJourney{border-color:rgba(167,139,250,.4)}
.spineJourney .spineGlyph,.spineMemory .spineGlyph{border-color:rgba(167,139,250,.54);background:rgba(167,139,250,.07)}
.spineOrbit{border-color:rgba(251,191,36,.46)}
.spineOrbit .spineGlyph,.spinePressure .spineGlyph{border-color:rgba(251,191,36,.56);background:rgba(251,191,36,.07)}
.spineGround{border-color:rgba(34,197,94,.38)}
.spinePressure{border-color:rgba(248,113,113,.42)}
.spinePressure .spineStatus{color:#fca5a5}
.spineMemory{border-color:rgba(167,139,250,.42);background:linear-gradient(135deg,rgba(31,19,54,.72),rgba(7,12,23,.84))}
.spineMemory .spineStatus{color:var(--gold)}
.spineBoundary{position:relative;z-index:1;margin:11px 0 0;padding-top:10px;border-top:1px solid rgba(167,139,250,.2);color:var(--muted);font:.67rem/1.5 var(--mono)}
.spineBoundary b{color:var(--gold)}

@media (max-width: 860px){
  #campaignSpine::before{top:185px}
  .spineRail{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 700px){
  #campaignSpine::before{display:none}
  .spineRail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spineNode{min-height:176px}
}

@media (prefers-reduced-motion:reduce){
  .spineNode{transition:none}
  .spineNode:hover,.spineNode:focus-within{transform:none}
}

/* ===== cycle controls ===== */
#cycleRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cycchip{font-family:var(--mono);font-size:.85rem;color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:9px 14px;background:var(--panel)}
.cycchip b{color:var(--accent)}
#cycleRow .spacer{flex:1}
#buildStatus{font-family:var(--mono);font-size:.78rem;color:var(--gold);border:1px dashed rgba(251,191,36,.35);border-radius:8px;padding:7px 12px;margin-bottom:14px}
#buildStatus.idle{color:var(--muted);border-color:var(--border)}

/* ===== structure cards ===== */
#structGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:16px}
.scard{background:var(--panel);border:1px solid var(--border2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.scard header{border:none;margin:0;padding:0;display:flex;align-items:center;gap:8px}
.scard .sicon{font-size:1.3rem}
.scard h3{font-family:var(--mono);font-size:.9rem;color:var(--text);letter-spacing:.03em}
.scard .lvl{color:var(--accent);font-size:.78rem;margin-left:6px}
.scard .stag{color:var(--muted);font-size:.76rem;line-height:1.4}
.scard .seffect{font-family:var(--mono);font-size:.75rem;color:var(--ok)}

/* ===== iter 4: OGame-style stage plates on structure cards ===== */
.splate{
  height:52px;border-radius:8px;margin:2px 0 6px;position:relative;overflow:hidden;
  border:1px solid var(--border);background:linear-gradient(180deg,#0e1420 0%,#0a0e18 100%);
}
.splate::before{content:'';position:absolute;inset:0;opacity:.55;background:
  radial-gradient(80% 120% at 20% 80%,rgba(34,211,238,.12),transparent 55%),
  radial-gradient(60% 80% at 80% 30%,rgba(167,139,250,.1),transparent 50%)}
.splate .plate-sil{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-size:1.35rem;filter:drop-shadow(0 0 6px rgba(34,211,238,.35));opacity:.85}
.splate .plate-label{position:absolute;top:5px;left:8px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.splate .plate-bars{position:absolute;bottom:6px;right:8px;display:flex;gap:3px}
.splate .plate-bars i{display:block;width:5px;height:10px;border-radius:1px;background:rgba(139,143,163,.35)}
.splate[data-tier="0"] .plate-label{color:var(--muted)}
.splate[data-tier="1"]{border-color:rgba(34,211,238,.35);box-shadow:inset 0 -12px 24px -10px rgba(34,211,238,.15)}
.splate[data-tier="1"] .plate-bars i:nth-child(-n+1){background:var(--accent)}
.splate[data-tier="2"]{border-color:rgba(34,211,238,.5);box-shadow:inset 0 -14px 28px -8px rgba(34,211,238,.22)}
.splate[data-tier="2"] .plate-bars i:nth-child(-n+2){background:var(--accent)}
.splate[data-tier="3"]{border-color:rgba(167,139,250,.55);box-shadow:inset 0 -16px 32px -8px rgba(167,139,250,.25)}
.splate[data-tier="3"] .plate-bars i:nth-child(-n+3){background:var(--accent-2)}
.splate[data-tier="4"]{border-color:rgba(251,191,36,.55);box-shadow:inset 0 -18px 36px -6px rgba(251,191,36,.28)}
.splate[data-tier="4"] .plate-bars i{background:var(--gold)}
.scard[data-tier="3"],.scard[data-tier="4"]{border-color:rgba(167,139,250,.4)}
.scard .seffect .next{color:var(--muted)}
.scard .scost{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.scard .scost .c-scrap{color:var(--scrap)} .scard .scost .c-signal{color:var(--signal)} .scard .scost .c-spark{color:var(--spark)}
.scard .why{font-size:.7rem;font-family:var(--mono);color:var(--danger);min-height:1em}
.scard .build{margin-top:auto}
.scard.maxed .build{display:none}

/* ===== milestones + log ===== */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#milestonePanel,#logPanel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.twocol h2{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent-2);border-bottom:1px solid var(--border2);padding-bottom:6px;margin-bottom:8px}
#milestones{list-style:none}
#milestones li{font-size:.78rem;font-family:var(--mono);color:var(--muted);padding:4px 0;line-height:1.4}
#milestones li.done{color:var(--ok)}
#milestones li.locked{color:#475569}
#log{font-family:var(--mono);font-size:.72rem;color:var(--muted);max-height:190px;overflow-y:auto;line-height:1.6}
#log .good{color:var(--ok)} #log .info{color:var(--accent)} #log .warn{color:var(--gold)}
#log .cyc{color:#475569}

/* ===== overlay ===== */
#overlay{position:fixed;inset:0;background:rgba(6,6,12,.9);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
#overlay.show{display:flex}
#overlay .box{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:32px 36px;text-align:center;max-width:480px;box-shadow:0 0 40px rgba(34,211,238,.2)}
#overlay h2{font-family:var(--mono);color:var(--accent);margin-bottom:12px;letter-spacing:.1em}
#overlay p{color:var(--muted);font-size:.92rem;margin-bottom:22px;line-height:1.65;text-align:left}

/* iter 36 — the save-destructive action gets an in-world, keyboard-safe door */
#resetOverlay{position:fixed;inset:0;background:rgba(6,6,12,.92);display:none;align-items:center;justify-content:center;z-index:120;padding:16px}
#resetOverlay:not([hidden]){display:flex}
#resetOverlay .resetBox{background:var(--panel);border:1px solid var(--danger);border-radius:14px;padding:28px 30px;width:min(100%,520px);box-shadow:0 0 40px rgba(239,68,68,.18)}
#resetOverlay h2{font-family:var(--mono);color:var(--danger);margin-bottom:12px;letter-spacing:.1em}
#resetOverlay p{color:var(--muted);font-size:.92rem;margin-bottom:22px;line-height:1.65}
.resetBtns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.resetBtns .btn{flex:1 1 11rem}

footer{margin-top:40px;border-top:1px solid var(--border);padding-top:14px;color:var(--muted);font-size:.75rem;font-family:var(--mono);text-align:center}
footer a{color:var(--accent)}

/* ===== tabs (iter 2) ===== */
#tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{background:var(--panel);border:1px solid var(--border);color:var(--muted);font-family:var(--mono);font-size:.82rem;padding:10px 18px;border-radius:10px 10px 0 0;cursor:pointer;min-height:44px}
.tab[aria-selected="true"]{color:var(--accent);border-color:var(--accent);background:var(--panel2);box-shadow:0 0 14px rgba(34,211,238,.2)}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===== ship locker / dock (HW-VIS-01) ===== */
#viewDock{padding-bottom:4px}
.dockIntro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 12px}
.dockIntro h2{font-family:var(--mono);font-size:1rem;letter-spacing:.12em;color:var(--accent-2);margin:0 0 6px}
.dockIntro p:not(.eyebrow){color:var(--muted);font-size:.84rem;line-height:1.55;max-width:680px;margin:0}
.dockIntro .eyebrow{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;color:var(--gold);margin:0 0 5px}
.dockSummary{font-family:var(--mono);font-size:.72rem;line-height:1.55;color:var(--text);border:1px solid rgba(34,211,238,.35);border-radius:9px;padding:8px 10px;margin-bottom:12px;background:rgba(34,211,238,.05)}
.dockRoster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.dockHull{background:var(--panel);border:1px solid var(--border2);border-radius:10px;padding:11px;min-width:0}
.dockHullHead{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.dockHullHead>span{font-size:1.25rem;line-height:1}
.dockHull h3{font-family:var(--mono);font-size:.82rem;color:var(--text);margin:0}
.dockMeta{color:var(--muted);font-size:.68rem;line-height:1.45;min-height:3.9em;margin:0 0 9px}
.dockFacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.dockFacts div{background:var(--panel2);border:1px solid var(--border);border-radius:7px;padding:6px;min-width:0}
.dockFacts dt{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:var(--muted);line-height:1.25}
.dockFacts dd{font-family:var(--mono);font-size:.86rem;color:var(--accent);margin:3px 0 0;line-height:1.1}
.dockFlights{background:var(--panel);border:1px solid var(--border2);border-radius:10px;padding:11px;margin-bottom:12px}
.dockFlights h2{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent-2);border-bottom:1px solid var(--border2);padding-bottom:6px;margin:0 0 8px}
.dockFlight{font-family:var(--mono);font-size:.7rem;color:var(--text);line-height:1.5;padding:7px 8px;border-bottom:1px dashed var(--border)}
.dockFlight:last-child{border-bottom:0}
.dockBoundary{font-family:var(--mono);font-size:.7rem;line-height:1.55;color:var(--gold);border:1px dashed rgba(251,191,36,.4);border-radius:8px;padding:8px 10px;margin:0 0 12px;background:rgba(251,191,36,.04)}
.dockActions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.dockActions .btn{flex:1 1 220px}

/* ===== shipyard + research panels ===== */
#yardPanel,#researchPanel{background:var(--panel);border:1px solid var(--border2);border-radius:12px;padding:12px;margin-bottom:16px}
#yardPanel h2,#researchPanel h2,#viewMap h2{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent-2);border-bottom:1px solid var(--border2);padding-bottom:6px;margin-bottom:8px}
.panelSub{color:var(--muted);letter-spacing:0;font-size:.7rem;margin-left:8px}
.hangar{font-family:var(--mono);font-size:.75rem;color:var(--text);margin-bottom:8px}
.crewStatus{font-family:var(--mono);font-size:.75rem;color:var(--gold);border:1px dashed rgba(251,191,36,.35);border-radius:8px;padding:6px 10px;margin-bottom:10px}
.crewStatus.idle{color:var(--muted);border-color:var(--border)}
.panelRows{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.yardRow,.resRow{background:var(--panel2);border:1px solid var(--border2);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:5px}
.yrHead{font-family:var(--mono);font-size:.85rem}
.fcmeta{color:var(--muted);font-size:.68rem;font-family:var(--mono)}
.yardRow .scost,.resRow .scost{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.yardRow .scost .c-scrap,.resRow .scost .c-scrap,.siteFacts .c-scrap{color:var(--scrap)}
.yardRow .scost .c-signal,.resRow .scost .c-signal,.siteFacts .c-signal{color:var(--signal)}
.yardRow .scost .c-spark,.resRow .scost .c-spark,.siteFacts .c-spark{color:var(--spark)}
.yrOrder{display:flex;align-items:center;gap:8px;margin-top:auto}
.yrOrder label{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.yrOrder input,.fcrow input{width:74px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.9rem;padding:8px;border-radius:8px;min-height:40px}
.yrOrder input:focus-visible,.fcrow input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.yardRow.lockedRow{opacity:.6}
.yardRow.lockedRow .yrOrder{display:none}
.yrLock{color:var(--muted)}
.resRow .lvl{color:var(--accent);font-size:.75rem;margin-left:6px}
.resRow .btn{margin-top:auto;align-self:flex-start}

/* ===== starmap (iter 4 campaign board) ===== */
#mapWrap,#mapWrap.mapBoard{background:#05070e;border:1px solid rgba(34,211,238,.35);border-radius:14px;overflow:hidden;margin-bottom:10px;box-shadow:inset 0 0 60px rgba(34,211,238,.06),0 0 28px rgba(124,58,237,.08)}
#starmap{display:block;width:100%;height:auto}
.mring{fill:none;stroke:rgba(34,211,238,.32);stroke-width:1.25;stroke-dasharray:5 6}
.mring.locked{stroke:rgba(139,143,163,.18);stroke-dasharray:2 8}
#mapHome text{fill:var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.mapsite{cursor:pointer}
.mapsite .siteCore{stroke-width:1.8}
.mapsite.k-derelict .siteCore{fill:#173042;stroke:#38bdf8}
.mapsite.k-outpost .siteCore{fill:#3b1d1d;stroke:#f87171}
.mapsite.k-bastion .siteCore{fill:#2d1b3d;stroke:#c084fc;stroke-width:2.5}
.mapsite .siteHalo{fill:none;stroke:currentColor;stroke-width:1;opacity:.35}
.mapsite.k-derelict{color:#38bdf8}
.mapsite.k-outpost{color:#f87171}
.mapsite.k-bastion{color:#c084fc}
.mapsite text{fill:var(--muted);font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.mapsite.sel .siteCore{stroke:var(--gold);stroke-width:3}
.mapsite.sel .siteHalo{stroke:var(--gold);opacity:.7}
.mapsite.sel text{fill:var(--gold)}
.mapsite.unscouted .siteCore{opacity:.65;stroke-dasharray:3 2}
.mapsite.cleared .siteCore{fill:#111;stroke:#475569;opacity:.5}
.mapsite.cleared text{opacity:.5}
.mapsite.outofrange{opacity:.3}
.mapsite.enroute .siteCore{animation:blink 1.6s ease-in-out infinite}
.flightPath{fill:none;stroke:rgba(251,191,36,.55);stroke-width:1.5;stroke-dasharray:4 5;opacity:.85}
.flightDot{fill:#fbbf24}
@keyframes flightPulse{0%,100%{opacity:.9}50%{opacity:.35}}
.flightDot.pulse{animation:flightPulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.mapsite.enroute .siteCore,.flightDot.pulse{animation:none}}

#momChip{font-family:var(--mono);font-size:.78rem;color:var(--gold);border:1px solid rgba(251,191,36,.5);border-radius:8px;padding:7px 12px;margin-bottom:8px;background:rgba(251,191,36,.07)}
.maptwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.maptwo section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;min-width:0}
.maptwo h2.mt{margin-top:14px}
.ringGroup{margin-bottom:10px}
.ringGroup h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--muted);margin:6px 0}
.sitebtn{display:block;width:100%;text-align:left;margin-bottom:6px;font-size:.72rem}
.sitebtn.sel{border-color:var(--gold);box-shadow:0 0 10px rgba(251,191,36,.25)}
.sitebtn.cleared{opacity:.5}
.sitebtn.k-bastion{border-color:rgba(192,132,252,.5)}
.mapHint{color:var(--muted);font-size:.78rem;line-height:1.5;font-family:var(--mono)}
#sitePanel h3{font-family:var(--mono);font-size:.9rem;color:var(--text);margin-bottom:4px}
.siteKind{color:var(--muted);font-size:.76rem;line-height:1.4;margin-bottom:6px}
.siteFacts{font-family:var(--mono);font-size:.76rem;color:var(--muted);line-height:1.6;margin-bottom:8px}
.siteFacts b{color:var(--text)}
.composer{border-top:1px solid var(--border2);padding-top:8px}
.composer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent);margin-bottom:8px}
.fcrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.fcrow label{font-size:.78rem;font-family:var(--mono)}
.fcrow .fcmeta{display:block}
.launchMath{font-family:var(--mono);font-size:.72rem;color:var(--accent);line-height:1.5;margin:8px 0 4px}
.launchAction{font-family:var(--mono);font-size:.68rem;line-height:1.45;margin:4px 0 8px;padding:6px 8px;border-left:2px solid var(--border2);color:var(--muted)}
.launchAction.ready{border-left-color:#86efac;color:#bbf7d0;background:rgba(34,197,94,.08)}
.launchAction.held{border-left-color:#fca5a5;color:#fecaca;background:rgba(239,68,68,.07)}
.composer .why{margin-bottom:6px}
.why{font-size:.7rem;font-family:var(--mono);color:var(--danger);min-height:1em}
.missionRow{font-family:var(--mono);font-size:.74rem;color:var(--text);border:1px dashed var(--border);border-radius:8px;padding:6px 8px;margin-bottom:6px;line-height:1.4}

/* ===== mission reports ===== */
#reportOverlay{position:fixed;inset:0;background:rgba(6,6,12,.9);display:none;align-items:center;justify-content:center;z-index:60;padding:16px}
#reportOverlay.show{display:flex}
#reportOverlay .repBox{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:22px 24px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 0 40px rgba(34,211,238,.2)}
#reportOverlay h2{font-family:var(--mono);color:var(--accent);margin-bottom:12px;letter-spacing:.1em;text-align:center}
.repCard{border:1px solid var(--border2);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--panel2)}
.repCard.rep-win{border-color:rgba(34,197,94,.45)}
.repCard.rep-loss{border-color:rgba(239,68,68,.45)}
.repCard h3{font-family:var(--mono);font-size:.82rem;color:var(--text);margin-bottom:6px}
.repLine{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.6}
.repMath{color:var(--accent)}
.repGood{color:var(--ok)}
.repBad{color:var(--danger)}
.repWarn{color:var(--gold)}
#reportBtn{display:block;margin:6px auto 0}
#log .bad{color:var(--danger)}

/* ===== iter 3: scene glow tiers (pure CSS richness as the colony grows) ===== */
#scene{transition:box-shadow 1s ease,border-color 1s ease}
#scene[data-glow="1"]{box-shadow:inset 0 -30px 70px -40px rgba(252,211,77,.10)}
#scene[data-glow="2"]{box-shadow:inset 0 -40px 90px -40px rgba(252,211,77,.16)}
#scene[data-glow="3"]{box-shadow:inset 0 -50px 110px -40px rgba(252,211,77,.22),0 0 24px rgba(34,211,238,.08)}
#scene[data-glow="4"]{box-shadow:inset 0 -60px 130px -40px rgba(252,211,77,.3),0 0 34px rgba(34,211,238,.14);border-color:rgba(34,211,238,.4)}
#scene[data-glow="5"]{box-shadow:inset 0 -70px 150px -36px rgba(254,240,138,.4),0 0 48px rgba(253,224,71,.22);border-color:rgba(253,224,71,.45)}
#scene[data-glow="4"] #cityLights circle.on,#scene[data-glow="5"] #cityLights circle.on{opacity:1}

/* ===== iter 3: the Beacon on the summit ===== */
#sg-beacon .bframe{opacity:.35}
#sg-beacon.lit .bframe{opacity:0}
@keyframes beamShimmer{0%,100%{opacity:.5}50%{opacity:.3}}
@keyframes lampGlow{0%,100%{opacity:1}50%{opacity:.7}}
#sg-beacon .beam{animation:beamShimmer 5s ease-in-out infinite}
#sg-beacon .lamp{animation:lampGlow 3.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#sg-beacon .beam,#sg-beacon .lamp{animation:none}}

/* ===== iter 3: Beacon panel ===== */
#beaconPanel{background:var(--panel);border:1px solid rgba(253,224,71,.28);border-radius:12px;padding:12px;margin-bottom:16px}
#beaconPanel h2{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--gold);border-bottom:1px solid var(--border2);padding-bottom:6px;margin-bottom:8px}
#beaconBody .stag{color:var(--muted);font-size:.78rem;line-height:1.5;margin-bottom:8px}
#beaconBody .scost{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:6px}
#beaconBody .scost .c-scrap{color:var(--scrap)} #beaconBody .scost .c-signal{color:var(--signal)} #beaconBody .scost .c-spark{color:var(--spark)}
.beaconReqs{list-style:none;margin-bottom:4px}
.beaconReqs li{font-family:var(--mono);font-size:.76rem;color:var(--muted);padding:3px 0;line-height:1.4}
.beaconReqs li.done{color:var(--ok)}
.beaconStage{font-family:var(--mono);font-size:.9rem;color:var(--gold);margin-bottom:4px}
#beaconBody .why{margin-bottom:6px}

/* ===== iter 3: cycle-button micro-feedback (pure CSS pulse; state never depends on it) ===== */
@keyframes cyclePulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}100%{box-shadow:0 0 0 14px rgba(34,211,238,0)}}
#cycleRow .btn.fb{animation:cyclePulse .45s ease-out 1}
@media (prefers-reduced-motion:reduce){#cycleRow .btn.fb{animation:none}}

/* ===== iter 3: stats view ===== */
#statsPanel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
#statsPanel h2{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent-2);border-bottom:1px solid var(--border2);padding-bottom:6px;margin-bottom:8px}
#statRows,#finaleStats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 16px}
.statRow{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.78rem;border-bottom:1px dashed rgba(139,143,163,.2);padding:5px 0}
.statRow .statLabel{color:var(--muted)}
.statRow b{color:var(--accent)}
.endlessNote{margin-top:12px;font-family:var(--mono);font-size:.76rem;color:var(--gold);border:1px solid rgba(251,191,36,.4);border-radius:8px;padding:8px 12px;line-height:1.6;background:rgba(251,191,36,.06)}

/* ===== iter 3: FIRST LIGHT finale ===== */
#finaleOverlay{position:fixed;inset:0;background:radial-gradient(120% 120% at 50% 100%,rgba(60,48,6,.94) 0%,rgba(8,8,14,.97) 60%);display:none;align-items:center;justify-content:center;z-index:70;padding:16px;overflow-y:auto}
#finaleOverlay.show{display:flex}
.finaleBeam{position:absolute;left:50%;top:0;bottom:0;width:120px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(254,240,138,.28),rgba(254,240,138,.03));pointer-events:none}
.finaleBox{position:relative;background:var(--panel);border:1px solid var(--gold);border-radius:14px;padding:28px 30px;max-width:600px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 0 60px rgba(253,224,71,.3)}
.finaleBox h2{font-family:var(--mono);color:var(--gold);letter-spacing:.22em;text-align:center;margin-bottom:14px;text-shadow:0 0 24px rgba(253,224,71,.6)}
.finaleText{color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:10px}
.finaleText b{color:var(--text)}
.finaleThesis{font-family:var(--mono);color:var(--gold);font-size:1.02rem;text-align:center;letter-spacing:.08em;margin:16px 0}
#finaleStats{margin:10px 0 14px}
.finaleEndless{font-family:var(--mono);font-size:.76rem;color:var(--gold);border:1px solid rgba(251,191,36,.4);border-radius:8px;padding:8px 12px;line-height:1.6;background:rgba(251,191,36,.06);margin-bottom:16px}
.finaleEndless b{color:var(--gold)}
#finaleBtn{display:block;margin:0 auto}

/* ===== iter 3: save code (export / import) ===== */
#portOverlay{position:fixed;inset:0;background:rgba(6,6,12,.9);display:none;align-items:center;justify-content:center;z-index:65;padding:16px}
#portOverlay.show{display:flex}
.portBox{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:24px 26px;max-width:560px;width:100%;box-shadow:0 0 40px rgba(34,211,238,.2)}
.portBox h2{font-family:var(--mono);color:var(--accent);letter-spacing:.1em;margin-bottom:10px;text-align:center}
.portHint{color:var(--muted);font-size:.8rem;line-height:1.6;margin-bottom:10px}
#portText{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:.7rem;border-radius:8px;padding:8px;resize:vertical}
#portText:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.portMsg{font-family:var(--mono);font-size:.74rem;color:var(--gold);min-height:1.2em;margin:8px 0}
.portBtns{display:flex;gap:8px;flex-wrap:wrap}

/* ===== iter 3: misc ===== */
.mapGuide{border:1px dashed rgba(251,191,36,.4);border-radius:8px;padding:8px 12px;margin-bottom:10px;color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== iter 11: world network route contract / smallest multi-base seam ===== */
#worldPanel{border:1px solid rgba(34,211,238,.24);border-radius:10px;padding:12px 14px;margin:14px 0;background:rgba(8,18,30,.64)}
#worldPanel h2{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--accent);margin-bottom:10px}
.worldRoster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.worldNode{position:relative;border:1px solid var(--border);border-radius:8px;padding:10px 11px;background:var(--panel2);min-height:86px}
.worldNode.active{border-color:rgba(34,197,94,.42);box-shadow:inset 0 0 18px rgba(34,197,94,.05)}
.worldNode.locked{border-style:dashed;border-color:rgba(251,191,36,.38);opacity:.88}
.worldNode h3{font-family:var(--mono);font-size:.78rem;color:var(--text);margin:0 0 6px}
.worldState{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--accent-2);border:1px solid rgba(34,211,238,.34);border-radius:4px;padding:2px 5px;margin-bottom:6px}
.worldNode.locked .worldState{color:var(--gold);border-color:rgba(251,191,36,.38)}
.worldMeta{font-family:var(--mono);font-size:.63rem;line-height:1.45;color:var(--muted)}
.worldNote{font-size:.74rem;color:var(--muted);line-height:1.55;margin:10px 0 0}
.worldWitness{list-style:none;margin:9px 0 0;padding:0;border-top:1px solid rgba(34,211,238,.14)}
.worldWitnessBeat{position:relative;margin:0;padding:7px 0 7px 13px;border-bottom:1px dashed rgba(139,143,163,.16)}
.worldWitnessBeat::before{content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(251,191,36,.38)}
.worldWitnessBeat.ready::before{background:var(--ok);box-shadow:0 0 8px rgba(34,197,94,.38)}
.worldWitnessTop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.worldWitnessTitle{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--text)}
.worldWitnessCycle{font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;color:var(--gold);white-space:nowrap}
.worldWitnessDetail{font-size:.62rem;line-height:1.35;color:var(--muted);margin:3px 0 0}

/* ===== iter 23: visible battle-readiness brief ===== */
#battleBrief{border:1px solid rgba(248,113,113,.28);border-radius:10px;padding:14px;margin:14px 0 16px;background:linear-gradient(135deg,rgba(42,18,25,.82),rgba(8,18,30,.64))}
#battleBrief .briefHead h2{color:#fca5a5}
.battleSummary{font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--gold);border:1px dashed rgba(251,191,36,.32);border-radius:8px;padding:8px 10px;margin:0 0 10px;background:rgba(251,191,36,.04)}
.battleControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;border:1px solid rgba(248,113,113,.18);border-radius:8px;background:rgba(18,18,26,.56)}
.battleControls label{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--muted)}
.battleControls select{min-width:12rem;max-width:100%;border:1px solid var(--border2);border-radius:6px;padding:6px 8px;background:#171722;color:var(--text);font:inherit;font-size:.72rem}
.battleFleetSource{font-size:.64rem;color:var(--muted);line-height:1.35}
.battleGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.battleCell{min-width:0;border:1px solid var(--border2);border-radius:8px;padding:9px 10px;background:rgba(18,18,26,.76)}
.battleCellLabel{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.11em;color:var(--muted);margin-bottom:4px}
.battleCellValue{display:block;font-family:var(--mono);font-size:.76rem;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.battleCellDetail{display:block;font-size:.62rem;line-height:1.35;color:var(--muted);margin-top:4px}
.battleBranches{margin-top:10px;border-top:1px solid rgba(248,113,113,.16);padding-top:9px}
.battleBranchesTitle{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;color:#fca5a5;margin-bottom:6px}
.battleBranchList{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.battleBranch{font-family:var(--mono);font-size:.58rem;color:var(--accent-2);border:1px solid rgba(125,211,252,.22);border-radius:999px;padding:4px 7px;background:rgba(125,211,252,.04)}
.battleNote{font-size:.68rem;line-height:1.5;color:var(--muted);border-top:1px solid rgba(248,113,113,.16);padding-top:9px;margin:10px 0 0}

/* ===== iter 12: Fable systems brief / presentation-only roadmap ===== */
#systemsBrief{border:1px solid rgba(167,139,250,.28);border-radius:10px;padding:14px;margin:14px 0 16px;background:linear-gradient(135deg,rgba(22,18,42,.82),rgba(8,18,30,.64))}
.briefHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.briefHead h2{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--accent-2);margin:0 0 6px}
.briefIntro{color:var(--muted);font-size:.75rem;line-height:1.55;max-width:62ch;margin:0}
.briefStamp{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--gold);border:1px solid rgba(251,191,36,.35);border-radius:999px;padding:5px 8px;white-space:nowrap}
.briefGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.briefCard{display:flex;gap:9px;min-width:0;border:1px solid var(--border2);border-radius:9px;padding:10px;background:rgba(18,18,26,.76)}
.briefCard h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--text);margin:0 0 5px}
.briefCard p{font-size:.71rem;line-height:1.5;color:var(--muted);margin:0}
.briefCard b{color:var(--text)}
.briefIcon{font-size:1.35rem;line-height:1;filter:drop-shadow(0 0 8px rgba(167,139,250,.28))}
.briefMeta{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;color:var(--accent);margin-top:8px}
.briefBoarding{border-color:rgba(248,113,113,.28)}
.briefResearch{border-color:rgba(125,211,252,.28)}
.briefWorld{border-color:rgba(167,139,250,.34)}
.briefFoot{font-size:.7rem;line-height:1.55;color:var(--muted);border-top:1px solid rgba(167,139,250,.16);padding-top:10px;margin:12px 0 0}

/* ===== iter 4: mission theater (skippable; no wall-clock) ===== */
#theaterOverlay{position:fixed;inset:0;background:rgba(4,6,12,.94);display:none;align-items:center;justify-content:center;z-index:62;padding:16px}
#theaterOverlay.show{display:flex}
.theaterBox{background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:18px 20px 20px;max-width:520px;width:100%;box-shadow:0 0 48px rgba(34,211,238,.22)}
.theaterCanvas{position:relative;height:160px;border-radius:10px;overflow:hidden;border:1px solid var(--border);margin-bottom:12px;
  background:radial-gradient(120% 100% at 50% 100%,#152038 0%,#070a14 70%)}
.theaterCanvas .t-bg{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff6,transparent),radial-gradient(1px 1px at 40% 70%,#fff5,transparent),radial-gradient(1px 1px at 85% 55%,#fff7,transparent)}
.theaterCanvas .t-homeworld{position:absolute;left:18px;bottom:18px;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3b82f6,#0f2744 70%);box-shadow:0 0 16px rgba(34,211,238,.45);border:2px solid #22d3ee}
.theaterCanvas .t-ship{position:absolute;font-size:1.6rem;opacity:0;filter:drop-shadow(0 0 8px rgba(34,211,238,.5))}
.theaterCanvas.mode-probe .t-probe{opacity:1;animation:probeArc 2.2s ease-in-out infinite}
.theaterCanvas.mode-combat .t-fleet{opacity:1;left:30%;top:40%;animation:fleetPush 1.8s ease-in-out infinite}
.theaterCanvas.mode-combat .t-burst{opacity:1;right:22%;top:36%;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.9),rgba(239,68,68,.3) 50%,transparent 70%);animation:burstPop 1.2s ease-out infinite}
.theaterCanvas.mode-loss .t-wreck{opacity:1;right:28%;top:42%;width:28px;height:8px;background:#64748b;transform:rotate(-20deg);
  box-shadow:0 0 12px rgba(239,68,68,.5);animation:wreckFade 2s ease-in-out infinite}
.theaterCanvas.mode-loss .t-burst{opacity:.7;right:30%;top:36%;width:24px;height:24px;border-radius:50%;background:rgba(239,68,68,.5)}
.theaterCanvas.mode-hauler .t-hauler{opacity:1;animation:haulerHome 2.4s ease-in-out infinite}
.theaterCanvas.mode-hauler .t-loot{opacity:1;left:70px;bottom:28px;width:10px;height:10px;border-radius:2px;background:var(--scrap);
  box-shadow:14px 0 0 var(--signal),28px 0 0 var(--spark);animation:lootBlink 1.5s ease-in-out infinite}
/* iter 6 — defense module theater: raiders descend, the grid answers */
.theaterCanvas .t-raiders{position:absolute;font-size:1.3rem;opacity:0;letter-spacing:.4em;filter:drop-shadow(0 0 8px rgba(239,68,68,.6))}
.theaterCanvas .t-grid{position:absolute;font-size:1.5rem;opacity:0;left:30px;bottom:52px;filter:drop-shadow(0 0 10px rgba(244,114,182,.7))}
.theaterCanvas.mode-defense .t-raiders,.theaterCanvas.mode-breach .t-raiders{opacity:1;animation:raidersIn 2.2s ease-in infinite}
.theaterCanvas.mode-defense .t-grid,.theaterCanvas.mode-breach .t-grid{opacity:1;animation:gridPulse 1.1s ease-in-out infinite}
.theaterCanvas.mode-defense .t-burst{opacity:1;left:38%;top:34%;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,114,182,.9),rgba(34,211,238,.3) 55%,transparent 75%);animation:burstPop 1s ease-out infinite}
.theaterCanvas.mode-breach{background:radial-gradient(120% 100% at 50% 100%,#3b1220 0%,#0c0710 70%)}
.theaterCanvas.mode-breach .t-burst{opacity:1;left:20%;bottom:22%;top:auto;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,rgba(239,68,68,.9),rgba(251,191,36,.35) 55%,transparent 75%);animation:burstPop 1.3s ease-out infinite}
@keyframes raidersIn{0%{right:6%;top:8%;transform:rotate(15deg)}100%{right:55%;top:52%;transform:rotate(15deg)}}
@keyframes gridPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#defenseStatus{font-family:var(--mono);font-size:.78rem;color:var(--accent-2);border:1px dashed rgba(244,114,182,.4);border-radius:8px;padding:7px 12px;margin-bottom:8px}
#defenseStatus.alert{color:#fca5a5;border-color:rgba(239,68,68,.65);background:rgba(239,68,68,.08)}
@keyframes probeArc{0%{left:60px;bottom:40px;transform:rotate(-20deg)}50%{left:55%;bottom:70%;transform:rotate(10deg)}100%{left:78%;bottom:55%;transform:rotate(25deg)}}
@keyframes fleetPush{0%{transform:translateX(0)}50%{transform:translateX(40px)}100%{transform:translateX(0)}}
@keyframes burstPop{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.4);opacity:0}}
@keyframes wreckFade{0%,100%{opacity:.9}50%{opacity:.35}}
@keyframes haulerHome{0%{right:10%;top:30%;transform:rotate(10deg)}100%{left:70px;bottom:55px;right:auto;top:auto;transform:rotate(-15deg)}}
@keyframes lootBlink{0%,100%{opacity:.9}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .theaterCanvas .t-ship,.theaterCanvas .t-burst,.theaterCanvas .t-wreck,.theaterCanvas .t-loot,
  .theaterCanvas .t-raiders,.theaterCanvas .t-grid{animation:none!important}
  .theaterCanvas.mode-probe .t-probe{left:50%;bottom:50%;opacity:1}
  .theaterCanvas.mode-combat .t-fleet,.theaterCanvas.mode-hauler .t-hauler{opacity:1;left:45%;top:40%}
  .theaterCanvas.mode-loss .t-wreck{opacity:1;right:30%;top:45%}
  .theaterCanvas.mode-defense .t-raiders,.theaterCanvas.mode-breach .t-raiders{opacity:1;right:40%;top:30%}
}
.theaterBeat{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;color:var(--accent-2);text-align:center;margin-bottom:4px}
#theaterTitle{font-family:var(--mono);color:var(--accent);text-align:center;font-size:1.05rem;letter-spacing:.08em;margin-bottom:8px}
.theaterCaption{color:var(--muted);font-size:.88rem;line-height:1.55;text-align:center;min-height:2.8em;margin-bottom:10px}
.theaterWitness{color:var(--gold);font-family:var(--mono);font-size:.73rem;line-height:1.55;text-align:center;min-height:2.4em;margin:0 4px 10px;padding:7px 9px;border:1px dashed rgba(251,191,36,.38);border-radius:8px;background:rgba(251,191,36,.05)}
.theaterSkipPref{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-bottom:12px;cursor:pointer}
.theaterWitnessPref{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:.7rem;color:var(--gold);margin:-4px 0 12px;cursor:pointer}
.theaterSkipPref input{width:16px;height:16px;accent-color:var(--accent)}
.theaterWitnessPref input{width:16px;height:16px;accent-color:var(--gold)}
.theaterBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== iter 31: THE BATTLE DECK — roster tokens, tape ledger, pace ===== */
/* Advance Wars beat: countable hulls that grey out on the volley they died. */
.theaterRoster{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:-4px 0 10px}
.theaterRoster[hidden]{display:none}
.theaterRoster .tokGroup{display:flex;gap:3px}
.theaterRoster .tok{font-size:1.05rem;line-height:1;opacity:1;filter:drop-shadow(0 0 5px rgba(34,211,238,.45));transition:opacity .35s ease,filter .35s ease}
.theaterRoster .tok.lost{opacity:.22;filter:grayscale(1)}
/* cosmetic bars — never carry a number, never announced */
.theaterMeters{display:flex;flex-direction:column;gap:4px;margin:-6px 0 10px}
.theaterMeters .tMeter{height:5px;border-radius:3px;background:rgba(148,163,184,.16);overflow:hidden}
.theaterMeters .tMeterFill{display:block;height:100%;width:0;transition:width .35s ease}
.theaterMeters .strike .tMeterFill{background:linear-gradient(90deg,var(--accent),var(--gold))}
.theaterMeters .wall .tMeterFill{background:linear-gradient(90deg,#f472b6,#ef4444)}
/* THE TAPE — the canonical text record of the battle */
.theaterTapeWrap{margin:0 0 12px}
.theaterTapeLabel{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--accent-2);margin-bottom:4px;text-align:center}
.theaterTape{list-style:decimal;margin:0;padding:8px 10px 8px 28px;max-height:118px;overflow-y:auto;
  border:1px solid var(--border);border-radius:8px;background:rgba(8,12,22,.7);
  font-family:var(--mono);font-size:.66rem;line-height:1.6;color:var(--text)}
.theaterTape li{margin:0 0 2px}
.theaterTape li:last-child{color:var(--accent)}
/* THE UNRESOLVED-GOAL LAW, on screen */
.theaterOpen{font-family:var(--mono);font-size:.68rem;line-height:1.55;color:#fca5a5;text-align:left;
  margin:0 0 10px;padding:7px 9px;border:1px dashed rgba(239,68,68,.5);border-radius:8px;background:rgba(239,68,68,.07)}
.theaterOpen[hidden]{display:none}
.theaterPace{display:flex;align-items:center;gap:6px;justify-content:center;margin:0 0 10px;flex-wrap:wrap}
.theaterPaceLabel{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted)}
.theaterPace .btn.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px rgba(34,211,238,.28)}
/* the durable artifact on the report card */
.repTape{margin-top:8px;border:1px solid var(--border);border-radius:8px;background:rgba(8,12,22,.5)}
.repTape>summary{cursor:pointer;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;color:var(--accent-2);padding:6px 9px}
.repTapeList{list-style:decimal;margin:0;padding:0 10px 8px 30px;font-family:var(--mono);font-size:.65rem;line-height:1.6;color:var(--muted)}
.repTapeOpen{margin:0 9px 9px}
@media (prefers-reduced-motion:reduce){
  .theaterRoster .tok,.theaterMeters .tMeterFill{transition:none!important}
}

/* ===== iter 7: BOARDING ACTIONS (6x6 interior, perfect information) ===== */
#boardOverlay{position:fixed;inset:0;background:rgba(4,6,12,.95);display:none;align-items:center;justify-content:center;z-index:66;padding:16px;overflow-y:auto}
#boardOverlay.show{display:flex}
.boardBox{background:var(--panel);border:1px solid var(--accent-2);border-radius:14px;padding:18px 20px 20px;max-width:560px;width:100%;max-height:94vh;overflow-y:auto;box-shadow:0 0 48px rgba(167,139,250,.25)}
.boardBox h2{font-family:var(--mono);color:var(--accent-2);letter-spacing:.12em;text-align:center;margin-bottom:6px;font-size:1.05rem}
.boardSub{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:10px}

/* the telegraph panel — Into the Breach law, stated in words as well as colour */
.boardIntent{border:1px solid rgba(251,191,36,.4);border-radius:8px;padding:8px 10px;margin-bottom:10px;background:rgba(251,191,36,.05)}
.bIntentHead{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--gold);margin-bottom:4px}
.bIntentRow{font-family:var(--mono);font-size:.7rem;color:var(--muted);line-height:1.55}
.bIntentRow.bi-fire{color:#fca5a5}
.bIntentRow.bi-charge{color:var(--gold)}
.bIntentRow.bi-move{color:var(--accent)}

.boardGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:10px}
.boardGrid:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bcell{aspect-ratio:1/1;min-height:44px;padding:0;background:#0d1220;border:1px solid var(--border);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;font-family:var(--mono);
  color:var(--text);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.bcell:disabled{cursor:default;opacity:.75}
.bcell:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bcell.bobj{border-color:rgba(253,224,71,.6);background:linear-gradient(180deg,#1c1a0e 0%,#0d1220 100%);
  box-shadow:inset 0 0 16px rgba(253,224,71,.18)}
.bcell.btrap{border-color:rgba(239,68,68,.45);background:repeating-linear-gradient(45deg,#170d12,#170d12 4px,#0d1220 4px,#0d1220 8px)}
.bcell.btrap-spent{border-color:rgba(139,143,163,.25);opacity:.6}
.bcell.bmarine{border-color:var(--accent);box-shadow:0 0 10px rgba(34,211,238,.25)}
.bcell.bsel{border-color:var(--gold);border-width:2px;box-shadow:0 0 14px rgba(251,191,36,.45)}
.bcell.bdef{border-color:rgba(248,113,113,.55);background:#1a0f14}
.bcell.bdef-warden{border-color:rgba(192,132,252,.6)}
.bcell.bact{border-style:dashed;border-color:rgba(34,211,238,.55)}
/* telegraphed threat — colour is a HINT, the words above are the source of truth */
.bcell.tel-move{box-shadow:inset 0 0 0 2px rgba(34,211,238,.45)}
.bcell.tel-strike{box-shadow:inset 0 0 0 2px rgba(248,113,113,.4)}
.bcell.tel-charge{background-image:linear-gradient(180deg,rgba(251,191,36,.12),rgba(251,191,36,0))}
.bcell.tel-fire{background-image:linear-gradient(180deg,rgba(239,68,68,.28),rgba(239,68,68,.05))}

.boardParty{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bmarineBtn{background:var(--panel2);border:1px solid var(--border);color:var(--text);font-family:var(--mono);
  font-size:.66rem;padding:7px 9px;border-radius:8px;cursor:pointer;min-height:38px}
.bmarineBtn.sel{border-color:var(--gold);box-shadow:0 0 10px rgba(251,191,36,.3)}
.bmarineBtn.dead{opacity:.4;text-decoration:line-through}
.bmarineBtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.boardHint{font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.5;margin-bottom:8px}
.boardLog{font-family:var(--mono);font-size:.68rem;color:var(--muted);line-height:1.6;
  border-top:1px dashed var(--border2);padding-top:6px;min-height:2.4em;margin-bottom:8px}
.boardOutcome{border:1px solid rgba(34,197,94,.4);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--panel2)}
.boardOutcome h3{font-family:var(--mono);font-size:.82rem;color:var(--text);margin-bottom:6px}
.boardBtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* the RAZE / BOARD choice on the report card */
.repChoice{border-top:1px dashed var(--border2);margin-top:8px;padding-top:8px}
.repHandoff{color:#c4b5fd}
.repChoiceBtns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}

/* held sites read as YOURS on the map and the list */
.mapsite.held .siteCore{fill:#1d2f18;stroke:#86efac;opacity:1;stroke-dasharray:none}
.mapsite.held text{fill:#86efac;opacity:1}
.sitebtn.held{border-color:rgba(134,239,172,.55);opacity:1}

/* ===== mobile ===== */
@media (max-width:640px){
  .wrap{padding:12px 10px 50px}
  #resBar{gap:6px}
  .res{min-width:0;padding:6px 8px;gap:6px}
  .res .ricon{font-size:1.1rem}
  .rnums{font-size:.75rem}
  .rnums b{font-size:.9rem}
  .twocol{grid-template-columns:1fr}
  #cycleRow .btn{flex:1}
  #cycleRow .spacer{display:none}
  .btn.small{min-height:44px}
  .cycchip{width:100%;text-align:center}
  #structGrid{grid-template-columns:1fr}
  #tabs .tab{flex:1;text-align:center;padding:10px 6px}
  #tabs .tab{font-size:.68rem;line-height:1.2}
  .maptwo{grid-template-columns:1fr}
  .worldRoster{grid-template-columns:1fr}
  .panelRows{grid-template-columns:1fr}
  .dockIntro{display:block}
  .dockIntro .briefStamp{display:inline-block;margin-top:8px}
  .dockRoster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dockActions .btn{flex-basis:100%}
  .briefHead{display:block}
  .briefStamp{display:inline-block;margin-top:8px}
  .battleControls select{flex:1;min-width:10rem}
  .briefGrid{grid-template-columns:1fr}
  .battleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mapsite text{font-size:11px}
  .fcrow{flex-wrap:wrap}
  .fcrow input{min-height:44px}
  .yrOrder input{min-height:44px}
  .boardBox{padding:14px 12px 16px}
  .bcell{font-size:1rem;min-height:40px}
  .bmarineBtn{flex:1 1 46%;min-height:44px}
  .boardBtns .btn{flex:1}
  #resetOverlay .resetBox{padding:22px 18px}
  .resetBtns .btn{flex-basis:100%}
  #title{padding-top:24px}
  #title .big{font-size:clamp(1.35rem,6.2vw,2.4rem);letter-spacing:0;line-height:1.15;max-width:100%}
  #title p.sub{padding:0 10px;line-height:1.45}
  #title .titleHero{height:190px;border-radius:14px}
  #title .titleOrbitOne{width:280px;height:96px}
  #title .titleOrbitTwo{width:350px;height:126px}
  #title .titleOrbitThree{width:420px;height:162px}
  #title .titleTelemetry{grid-template-columns:1fr;max-width:280px;margin-bottom:22px}
  #title .titleTelemetry>div{padding:8px 10px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;text-align:left}
  #title .titleTelemetry span{grid-row:span 2}
  #title .titleTelemetry small{grid-column:2}
}
/* the boarding grid never animates, so reduced motion only has to kill transitions */
@media (prefers-reduced-motion:reduce){
  .bcell{transition:none}
  #title .titleHero::after,#title .titlePing{animation:none}
}

/* Command deck ITER 39 — playable controls precede the project notebook. */
html{scroll-padding-top:90px}
#commandBar{display:contents}
#commandBar #cycleRow{position:sticky;top:0;z-index:20;padding:10px 12px;margin:0 0 8px;background:rgba(7,10,20,.98);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.32)}
#commandBar #buildStatus{margin:0 0 12px;font-size:.78rem}
#commandBar #defenseStatus,#commandBar #momChip{margin:6px 0}
.colonyHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 8px}
.colonyHeading h2{font-size:1.2rem;margin:4px 0}
.colonyHeading .eyebrow{font-size:.64rem;color:var(--accent);letter-spacing:.14em}
.colonyJumps{display:flex;gap:8px;flex-wrap:wrap}
.colonyJumps a{font:600 .67rem var(--mono);color:var(--accent);padding:10px;border:1px solid var(--border);border-radius:7px;text-decoration:none}
.colonyJumps a:focus-visible,.homeworldReference summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.colonyHint{color:var(--muted);font-size:.86rem;line-height:1.6;margin-bottom:12px;max-width:78ch}
#viewHome #planetScene{display:block;width:100%;height:210px}
#structGrid,#beaconPanel,#homeworldReference{scroll-margin-top:16px}
.homeworldReference{margin:22px 0;border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:0 14px}
.homeworldReference>summary{cursor:pointer;padding:18px 0;color:var(--accent);font:600 .8rem var(--mono);line-height:1.6}
.homeworldReference>summary span{display:block;color:var(--muted);font:400 .78rem var(--sans);margin:4px 0 0 17px}
.homeworldReference[open]>summary{border-bottom:1px solid var(--border);margin-bottom:14px}
@media(max-width:560px){
  html{scroll-padding-top:150px}
  #commandBar #cycleRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:6px}
  #commandBar #cycleRow .spacer{display:none}
  #commandBar #cycleRow .btn{width:auto;min-height:38px;padding:8px 5px;font-size:.68rem;white-space:normal}
  #commandBar #cycleRow .cycchip{width:auto;font-size:.7rem;padding:8px 4px}
  #commandBar #buildStatus{font-size:.7rem}
  #tabs{gap:4px}
  #tabs .tab{flex:1;padding:10px 4px;font-size:.64rem;min-width:0}
  .colonyHeading{margin-top:12px;gap:8px}
  .colonyHeading h2{font-size:1.03rem}
  .colonyHint{font-size:.8rem}
  #viewHome #planetScene{height:100px}
  #resBar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #resBar .res{min-width:0;padding:8px;gap:0}
  #resBar .ricon{display:none}
  #resBar .rnums{min-width:0;overflow-wrap:anywhere}
  #resBar .rnums b{display:block;font-size:.92rem}
  #resBar .rnums .rname{font-size:.54rem;letter-spacing:.08em}
  #resBar .rnums .cap{font-size:.65rem;margin-left:0}
  #resBar .rnums .rate{font-size:.63rem}
}
/* Short screens keep the full viewport available to focus and dialogs. */
@media(max-height:700px){
  html{scroll-padding-top:16px}
  #commandBar #cycleRow{position:static}
}