/* BRASA — night-forest interface. System fonts only, no external assets. */
:root{
  --bg:#0b1517;--bg2:#0f1f22;--panel:#14272a;--panel2:#1a3134;--line:#2b4649;--line2:#3a585a;
  --text:#f3ead9;--muted:#aebdb5;--dim:#8a9e96;
  --ember:#ff8f3f;--ember2:#ffb566;--flame:#ffdb94;--ember-ink:#241206;
  --danger:#ff7c68;--danger-bg:#3a1c19;--good:#a5d99c;--good-bg:#17311f;
  --wood:#e6ad78;--food:#bcd98d;--heart:#ff8c7c;--gold:#f7c66c;
  --r:16px;--r-sm:12px;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Noto Serif",serif;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background:var(--bg);color-scheme:dark;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;
  background:radial-gradient(120% 55% at 50% 108%,#3a1d0c 0%,#1a1612 38%,transparent 70%),linear-gradient(#0c1a1d,#0a1315 60%,#0b1517);
  background-attachment:fixed;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l)}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:10px}
svg.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
button .icon,button svg{pointer-events:none}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:10px;top:-100px;z-index:100;background:var(--text);color:var(--bg);padding:12px;border-radius:8px}.skip:focus{top:10px}

/* Top bar */
.topbar{max-width:1040px;margin:0 auto;padding:6px 14px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px}
.brand{display:flex;align-items:center;gap:8px;padding:6px 4px;min-height:48px;font-weight:800;letter-spacing:.2em;font-size:15px}
.brand .icon{color:var(--ember);width:24px;height:24px;filter:drop-shadow(0 0 6px #ff8f3f88)}
.toolbar{display:flex;gap:2px;align-items:center}
.iconbtn{display:grid;place-items:center;min-width:48px;min-height:48px;border-radius:50%;color:var(--muted)}
.iconbtn:hover{color:var(--text);background:#ffffff0d}
.iconbtn.lang{font-size:12px;font-weight:800;letter-spacing:.08em}
main{max-width:1040px;margin:0 auto;padding:0 14px 28px;outline:none}

/* Buttons */
.btn{min-height:54px;border-radius:14px;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;width:100%;transition:transform .12s,filter .12s,background .15s}
.btn:active:not(:disabled){transform:scale(.98)}
.btn-primary{background:linear-gradient(180deg,var(--ember2),var(--ember));color:var(--ember-ink);box-shadow:0 6px 24px -8px #ff8f3fb0,inset 0 1px 0 #ffffff55}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:disabled{filter:grayscale(.7) brightness(.6);box-shadow:none}
.btn-secondary{background:var(--panel2);border:1px solid var(--line2);color:var(--text)}
.btn-secondary:hover{background:#21393c}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--muted);min-height:48px;font-size:14px;font-weight:600}
.btn-ghost:hover{color:var(--text);border-color:var(--line2)}
.linkbtn{min-height:44px;padding:0 10px;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#aebdb566}
.linkbtn:hover{color:var(--text)}

/* Scene */
.scene{position:relative;overflow:hidden;border-radius:var(--r);background:#13262c;isolation:isolate;box-shadow:0 18px 40px -24px #000,inset 0 0 0 1px #ffffff10}
.scene canvas{display:block;width:100%;height:100%}
.scene-tag{position:absolute;left:12px;top:10px;display:flex;gap:6px;align-items:center;font-size:12px;font-weight:600;color:#e7eee6;background:#0b151799;padding:5px 10px 5px 8px;border-radius:20px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.scene-tag .icon{width:16px;height:16px}

/* Home */
.home{max-width:460px;margin:0 auto;text-align:center;padding-top:4px}
.home .kicker{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.home h1{font-family:var(--serif);font-weight:500;font-size:clamp(52px,17vw,76px);letter-spacing:.12em;line-height:1;margin:8px 0 0 .12em;color:var(--flame);text-shadow:0 0 28px #ff8f3f66,0 0 2px #ffb566}
.home .tagline{font-family:var(--serif);font-size:clamp(18px,5.4vw,22px);margin:10px 0 16px;color:var(--text)}
.home .scene{aspect-ratio:16/10;margin-bottom:16px}
.home .pitch{font-size:15px;line-height:1.55;color:var(--muted);margin:0 auto 18px;max-width:380px}
.home .modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-height:64px;padding:11px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.mode-btn:hover{border-color:var(--line2);background:var(--panel2)}
.mode-btn b{display:flex;gap:7px;align-items:center;font-size:15px}
.mode-btn b .icon{width:18px;height:18px;color:var(--ember2)}
.mode-btn small{font-size:12px;color:var(--muted);line-height:1.35}
.home .resume{margin-bottom:10px}
.home .facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:18px 0 4px;font-size:13px;color:var(--muted)}
.home .facts span{display:inline-flex;gap:5px;align-items:center}
.home .facts .icon{width:15px;height:15px;color:var(--dim)}
.records{display:flex;justify-content:center;gap:8px;margin:14px 0 0;flex-wrap:wrap}
.records span{font-size:13px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px 12px}
.records b{color:var(--gold)}
.home .links{margin-top:10px;display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.warn{font-size:13px;color:var(--danger);border:1px solid #6b3129;background:var(--danger-bg);border-radius:10px;padding:10px 12px;margin:12px 0;text-align:left;line-height:1.45}

/* Game layout */
.game{max-width:1040px;margin:0 auto}
.run-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px}
.run-title .kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.run-title h1{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.1;white-space:nowrap}
.run-title h1 small{font-family:inherit;font-size:15px;color:var(--muted);margin-left:4px}
.track{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.node{position:relative;width:30px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--dim);border:1px solid var(--line);background:#0e1c1f}
.node.done{background:#23403c;border-color:#2f5550;color:#cfe0d6}
.node.lost{background:#3a1c19;border-color:#6b3129;color:var(--danger)}
.node.now{background:var(--ember);border-color:var(--ember2);color:var(--ember-ink);box-shadow:0 0 14px -2px #ff8f3fb0}
.node .bk{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--bg);display:grid;place-items:center}
.node .bk .icon{width:12px;height:12px;color:var(--dim);stroke-width:2.2}
.node .bk.lit .icon{color:var(--flame);filter:drop-shadow(0 0 3px var(--ember))}
.node .bk.missed .icon{opacity:.45}
.play{display:grid;grid-template-columns:1fr;gap:12px}
.stage{display:flex;flex-direction:column;gap:10px}
.game .scene{aspect-ratio:21/9}
.phase-camp .scene,.phase-dawn .scene{aspect-ratio:2/1}

/* HUD */
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.res{position:relative;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line);min-height:58px}
.res .icon{width:24px;height:24px}
.res.wood .icon{color:var(--wood)}.res.food .icon{color:var(--food)}.res.hp .icon{color:var(--heart)}
.res .val{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.res .max{font-size:12px;color:var(--dim);font-weight:600;margin-left:2px}
.res .lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.res.low{border-color:#7a3b31;background:linear-gradient(0deg,#2c1716,var(--panel))}
.res.low .val{color:var(--danger)}
.res.bump{animation:bump .42s ease-out}
.float{position:absolute;right:8px;top:4px;font-size:15px;font-weight:800;pointer-events:none;animation:floatUp 1.1s ease-out forwards;text-shadow:0 1px 3px #000}
.float.up{color:var(--good)}.float.down{color:var(--danger)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}

/* Tonight / forecast panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.tonight-head{display:flex;align-items:center;gap:10px}
.tonight-head .wx{width:36px;height:36px;border-radius:10px;background:#0f1f22;display:grid;place-items:center;color:#cfe0f0;flex-shrink:0}
.tonight-head .wx .icon{width:22px;height:22px}
.tonight-head h2{font-size:15px;font-weight:700;line-height:1.25}
.tonight-head h2 small{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.tonight-head .beacon-here{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--gold);border:1px solid #6d5427;background:#2a2114;border-radius:20px;padding:5px 9px;white-space:nowrap}
.tonight-head .beacon-here .icon{width:15px;height:15px}
.needs{display:grid;gap:8px;margin-top:11px}
.need{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 10px;font-size:14px}
.need .nlabel{display:flex;gap:6px;align-items:center;font-weight:600;min-width:0}
.need .nlabel .icon{width:18px;height:18px}
.need.heat .nlabel .icon{color:var(--ember2)}.need.food .nlabel .icon{color:var(--food)}
.need .state{font-size:13px;font-weight:700;white-space:nowrap}
.need .state.ok{color:var(--good)}.need .state.short{color:var(--danger)}
.bar{grid-column:1/-1;height:8px;border-radius:6px;background:#0c191b;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0a}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#d8612b,var(--ember2));transition:width .25s ease-out}
.need.food .bar i{background:linear-gradient(90deg,#6f9a53,var(--food))}
.bar i.full{box-shadow:0 0 10px #ffb56688}
.later{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted)}
.later span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.later .icon{width:14px;height:14px}
.later .bkmini{color:var(--gold)}
.goal-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.goal-row span{display:inline-flex;gap:5px;align-items:center}
.goal-row b{color:var(--text)}
.goal-row .icon{width:16px;height:16px;color:var(--gold)}
.perks{display:flex;flex-wrap:wrap;gap:6px}
.perkchip{display:inline-flex;gap:6px;align-items:center;min-height:36px;padding:4px 11px 4px 8px;border-radius:20px;border:1px solid #5b4a2a;background:#241f14;color:#f0dcae;font-size:13px;font-weight:600}
.perkchip .icon{width:16px;height:16px;color:var(--gold)}

/* Decisions */
.decisions{display:flex;flex-direction:column;gap:10px;min-width:0}
.phase-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.phase-title h2{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.15}
.pips{display:flex;gap:5px;align-items:center;font-size:13px;color:var(--muted);white-space:nowrap}
.pips i{width:9px;height:9px;border-radius:50%;background:var(--ember);box-shadow:0 0 6px #ff8f3f99}
.pips i.used{background:var(--line2);box-shadow:none}
.cards{display:flex;flex-direction:column;gap:9px}
.card{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-areas:"icon title" "icon desc" "icon deltas";column-gap:12px;align-items:center;text-align:left;width:100%;min-height:78px;padding:12px 14px 12px 12px;border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);transition:transform .12s,border-color .15s,background .15s}
.card:hover:not(:disabled){border-color:#58807a}
.card:active:not(:disabled){transform:scale(.985);background:var(--panel2)}
.card:disabled{opacity:.5}
.card .cicon{grid-area:icon;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#0e1d20;color:#cfe3d8;align-self:start}
.card .cicon .icon{width:26px;height:26px}
.card.hard .cicon{color:#ffc2a6}.card.rest .cicon{color:var(--heart)}.card.memory .cicon,.card.lookout .cicon{color:var(--gold)}
.card .ctitle{grid-area:title;font-size:16px;font-weight:700;line-height:1.25;padding-right:22px}
.card .cdesc{grid-area:desc;font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px}
.card .deltas{grid-area:deltas;margin-top:7px}
.card .key{position:absolute;right:10px;top:10px;font-size:11px;font-weight:700;color:var(--dim);border:1px solid var(--line);border-radius:6px;min-width:20px;height:20px;display:grid;place-items:center}
.card .cnote{grid-column:2;font-size:12px;color:var(--danger);margin-top:5px;font-weight:600}
.deltas{display:flex;gap:6px;flex-wrap:wrap}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:800;padding:3px 8px 3px 7px;border-radius:8px;background:var(--good-bg);color:var(--good);font-variant-numeric:tabular-nums}
.delta .icon{width:15px;height:15px}
.delta.neg{background:var(--danger-bg);color:var(--danger)}
.delta.score{background:#2a2114;color:var(--gold)}
.enter .card{animation:cardIn .26s ease-out both}
.enter .card:nth-child(2){animation-delay:.04s}.enter .card:nth-child(3){animation-delay:.08s}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.help-line{font-size:13px;line-height:1.5;color:var(--muted)}

/* Coach tips */
.tip{position:relative;display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:14px;background:#2a1b0f;border:1px solid #8a4b1f;color:#ffe3c2;font-size:14px;line-height:1.45;animation:cardIn .3s ease-out both}
.tip .icon{color:var(--ember2);width:20px;height:20px;margin-top:1px}
.tip p{flex:1}
.tip button{flex-shrink:0;min-height:44px;min-width:48px;margin:-8px -6px -8px 0;padding:0 10px;border-radius:10px;background:#ff8f3f22;color:var(--flame);font-size:13px;font-weight:700}

/* Camp */
.fuel{padding:14px}
.fuel-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fuel-top strong{font-size:15px}
.fuel-top span{font-size:13px;color:var(--muted)}
.stepper{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 8px}
.stepper button{width:58px;height:58px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);font-size:28px;font-weight:500;display:grid;place-items:center;line-height:1}
.stepper button:active:not(:disabled){transform:scale(.94);background:#23403f}
.stepper button:disabled{opacity:.35}
.fuel-num{text-align:center;min-width:92px}
.fuel-num b{display:block;font-family:var(--serif);font-size:44px;font-weight:500;line-height:1;color:var(--flame);font-variant-numeric:tabular-nums}
.fuel-num small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.auto{display:block;margin:2px auto 0;min-height:40px;padding:0 12px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.beacon-toggle{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 14px 12px 12px;border-radius:var(--r);border:1px solid #6d5427;background:linear-gradient(180deg,#2c2416,#211b11);min-height:72px}
.beacon-toggle .cicon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#15110a;color:var(--gold)}
.beacon-toggle .cicon .icon{width:26px;height:26px}
.beacon-toggle b{display:block;font-size:15px;color:#ffe7b8}
.beacon-toggle small{display:block;font-size:13px;color:#d8c49d;margin-top:2px;line-height:1.35}
.switch{width:50px;height:30px;border-radius:20px;background:#3a3222;border:1px solid #6d5427;position:relative;flex-shrink:0;transition:background .15s}
.switch:after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#bba577;transition:transform .15s}
.beacon-toggle[aria-checked="true"]{border-color:var(--gold);box-shadow:0 0 22px -8px #f7c66c}
.beacon-toggle[aria-checked="true"] .switch{background:var(--ember)}
.beacon-toggle[aria-checked="true"] .switch:after{transform:translateX(20px);background:#fff4dc}
.beacon-toggle[aria-checked="true"] .cicon{background:#ff8f3f33;color:var(--flame)}
.beacon-toggle:disabled{opacity:.55}
.outcome{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-sm);padding:12px;font-size:14px;line-height:1.45;background:var(--good-bg);color:#d5f0cf;border:1px solid #2d5536}
.outcome .icon{width:20px;height:20px;margin-top:1px;flex-shrink:0}
.outcome.warn-o{background:var(--danger-bg);color:#ffd9d2;border-color:#6b3129}
.outcome.fatal{background:#4a1612;color:#fff0ec;border-color:#b0493b}
.outcome small{display:block;color:inherit;opacity:.85;font-size:13px;margin-top:2px}
.sticky-cta{position:sticky;bottom:calc(10px + var(--safe-b));z-index:5}
.sticky-cta .btn{box-shadow:0 10px 30px -6px #000c,0 6px 24px -8px #ff8f3fb0}

/* Story panels (dawn, end) */
.story{padding:18px 16px}
.story .kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.story h2{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.15;margin:6px 0 8px}
.story p{font-size:15px;line-height:1.55;color:var(--muted)}
.report{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:6px 10px;border-radius:10px;background:#0f1f22;border:1px solid var(--line);color:var(--text)}
.chip .icon{width:15px;height:15px}
.chip.bad{color:var(--danger);border-color:#6b3129;background:var(--danger-bg)}
.chip.good{color:var(--good);border-color:#2d5536;background:var(--good-bg)}
.chip.gold{color:var(--gold);border-color:#6d5427;background:#2a2114}
.story .btn{margin-top:14px}
.end-hero{text-align:center;padding:22px 16px 18px}
.end-hero .emblem{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#ff8f3f44,transparent 70%);color:var(--flame)}
.end-hero .emblem .icon{width:36px;height:36px}
.end-hero.lost .emblem{background:radial-gradient(circle,#6a8a9a33,transparent 70%);color:#b8cad3}
.end-hero h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.1}
.end-hero p{font-size:15px;line-height:1.55;color:var(--muted);margin-top:8px}
.big-score{margin:16px 0 2px;font-family:var(--serif);font-size:56px;line-height:1;color:var(--flame);text-shadow:0 0 24px #ff8f3f55;font-variant-numeric:tabular-nums}
.big-score-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.record{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--ember-ink);background:var(--gold);padding:5px 12px;border-radius:20px}
.record.plain{background:none;color:var(--muted);border:1px solid var(--line);font-weight:600}
.breakdown{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.breakdown td{padding:8px 2px;border-bottom:1px solid var(--line)}
.breakdown td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.breakdown td.muted{color:var(--muted);text-align:right;font-weight:500;padding-right:10px;white-space:nowrap}
.breakdown tr.zero td{color:var(--dim)}
.breakdown tr.total td{border-bottom:0;font-weight:800;font-size:16px;padding-top:10px}
.lesson{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r-sm);background:#10262a;border:1px solid #2b4d52;font-size:14px;line-height:1.5;color:#d6e6e8}
.lesson .icon{color:#9cc9d6;width:20px;height:20px;margin-top:1px;flex-shrink:0}
.badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.end-actions{display:grid;gap:10px}
.end-actions .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seedline{font-size:12px;line-height:1.6;color:var(--dim);margin:16px 0 0;text-align:center;overflow-wrap:anywhere}

/* Night transition & damage flash */
.veil{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(60% 40% at 50% 60%,#2a170b,#05090a 70%);color:var(--flame);opacity:0;animation:veil 1s ease-in-out forwards;cursor:pointer}
.veil div{text-align:center;font-family:var(--serif);font-size:28px}
.veil small{display:block;font-family:system-ui,sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.veil .icon{width:40px;height:40px;margin-bottom:10px}
@keyframes veil{0%{opacity:0}25%{opacity:1}72%{opacity:1}100%{opacity:0}}
.hurt-flash{position:fixed;inset:0;z-index:40;pointer-events:none;box-shadow:inset 0 0 90px 20px #ff3b2a88;animation:hurt .6s ease-out forwards}
@keyframes hurt{from{opacity:1}to{opacity:0}}

/* Toast */
#notice{position:fixed;left:50%;top:calc(8px + var(--safe-t));transform:translateX(-50%);z-index:60;max-width:min(92vw,440px);width:max-content;padding:10px 16px;border-radius:12px;background:#1e3437f2;border:1px solid var(--line2);color:var(--text);font-size:14px;line-height:1.4;box-shadow:0 10px 30px -10px #000;pointer-events:none;text-align:center}
#notice:empty{display:none}

/* Dialog */
dialog{border:1px solid var(--line2);border-radius:20px;background:#112225;color:var(--text);padding:22px 20px 20px;width:min(460px,calc(100vw - 24px));max-height:min(86vh,720px);max-height:min(86dvh,720px);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 80px #000c}
dialog::backdrop{background:#030809cc}
dialog h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;margin:0 44px 12px 0}
dialog .close{position:absolute;top:10px;right:8px}
dialog h3{font-size:15px;margin:18px 0 6px;color:var(--flame)}
dialog p{font-size:14px;color:var(--muted);line-height:1.6;margin:8px 0}
dialog .rule{display:flex;align-items:flex-start;gap:12px;margin:14px 0}
dialog .rule .icon{color:var(--ember2);margin-top:2px;width:24px;height:24px}
dialog .rule p{margin:0}
dialog .rule b{color:var(--text)}
dialog .buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
dialog .btn{margin-top:16px}
dialog .buttons .btn{margin-top:0}
.share-text{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace;padding:12px;background:#0b1719;border:1px solid var(--line);border-radius:12px;user-select:all;-webkit-user-select:all}
.kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;border:1px solid var(--line2);border-radius:5px;font-size:12px;margin:0 2px;color:var(--text)}

/* Small phones */
@media (max-width:360px){
  main{padding:0 10px 24px}.topbar{padding:4px 8px 0}
  .brand{font-size:14px;letter-spacing:.16em}
  .iconbtn{min-width:44px;min-height:44px}
  .node{width:27px;height:32px;font-size:12px}.track{gap:3px}
  .run-title h1{font-size:22px}.run-title h1 small{font-size:13px}
  .res{padding:8px 7px;gap:6px}.res .icon{width:20px;height:20px}.res .val{font-size:20px}.res .lbl{font-size:10px;letter-spacing:.04em}
  .card{padding:11px 12px 11px 10px;column-gap:10px;grid-template-columns:38px 1fr}.card .cicon{width:38px;height:38px}
  .card .ctitle{font-size:15px}
  .home .modes{grid-template-columns:1fr}
  .stepper{gap:12px}
}
@media (max-height:700px) and (max-width:700px){
  .game .scene{aspect-ratio:3/1}
  .phase-camp .scene,.phase-dawn .scene{aspect-ratio:3/1}
  .home .scene{aspect-ratio:2/1}
}
/* Tablet / desktop: two columns, decisions on the right */
@media (min-width:820px){
  main{padding:8px 24px 40px}
  .play{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
  .stage{position:sticky;top:12px}
  .game .scene,.phase-camp .scene,.phase-dawn .scene{aspect-ratio:16/10}
  .run-title h1{font-size:30px}
  .node{width:36px;height:38px}
  .sticky-cta{position:static}
}
/* Phone landscape: keep it usable, scene shrinks */
@media (orientation:landscape) and (max-height:520px){
  .play{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .game .scene,.phase-camp .scene,.phase-dawn .scene{aspect-ratio:21/9}
  .home{max-width:640px}.home .scene{aspect-ratio:3/1}
  .sticky-cta{position:static}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-delay:0s!important;transition:none!important;scroll-behavior:auto!important}
  .veil{display:none}
}
@media (hover:none){.card:hover:not(:disabled){border-color:var(--line)}}

/* Compact needs meters (shared by the day forecast and the camp) */
.needs.two{grid-template-columns:1fr 1fr;gap:10px 14px}
.need{display:block;font-size:14px}
.need .nrow{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px}
.need .nlabel{display:flex;gap:6px;align-items:center;font-weight:600;min-width:0;white-space:nowrap}
.need .nlabel b{font-size:16px}
.need .state{display:inline-flex;gap:4px;align-items:center;font-variant-numeric:tabular-nums}
.need .state .icon{width:17px;height:17px}
.need .bar{display:block}
.need .nsub{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.3}
.need .nsub.short{color:var(--danger);font-weight:600}
.later{justify-content:space-between}
.decisions .goal-row{margin-top:2px;padding:0 2px}
@media (max-width:819px){
  .phase-day .scene{aspect-ratio:3/1}
  .phase-camp .scene{aspect-ratio:5/2}
}
@media (max-width:360px){.needs.two{gap:10px}.need .nlabel{font-size:13px}.need .nsub{font-size:11.5px}}
.run-title{min-width:0;flex:1 1 auto}
.run-title .kicker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-title .kicker .ph{color:var(--ember2)}
.track{flex-shrink:0}
#notice{top:calc(62px + var(--safe-t))}
@media (max-width:360px){.run-title .kicker{letter-spacing:.08em;font-size:10px}}
@media (hover:none) and (pointer:coarse){.card .key{display:none}.card .ctitle{padding-right:0}}