:root{
  --ink:#0d0f12; --hull:#171b20; --line:#3a424d; --steel:#a3adb9; --paper:#f1ebde;
  --red:#c8281f; --red-deep:#8a1812; --amber:#f5ad3d; --yellow:#ffd23e;
  --vh:100vh;
}
@supports (height:100dvh){ :root{ --vh:100dvh; } }
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);overflow:hidden}
body{font:400 17px/1.5 Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

#app{position:fixed;inset:0;height:var(--vh);overflow:hidden;background:#000}

/* ---------- backdrops ---------- */
.stage{position:absolute;left:0;right:0;top:0;height:calc(100% - 118px);overflow:hidden}
.bg{position:absolute;inset:-3%;background-size:cover;background-repeat:no-repeat;background-position:var(--fx,50%) var(--fy,40%);
  opacity:0;transition:opacity 1.1s ease, background-position 1.6s cubic-bezier(.2,.7,.2,1);filter:saturate(1.08) contrast(1.04);
  animation:push 26s ease-in-out infinite alternate}
.bg.on{opacity:1}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,11,.62) 0%,transparent 17%,transparent 52%,rgba(13,15,18,.8) 82%,var(--ink) 100%)}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- HUD ---------- */
.hud{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px}
.loc{font:600 11px/1.3 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 3px #000;max-width:46%}
.loc b{display:block;color:var(--amber);font-weight:700}
.loc b::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--red);margin-right:.6em;box-shadow:0 0 8px var(--red);animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:.25}}
.hud-r{display:flex;align-items:center;gap:8px}
.pips{display:flex;align-items:center;gap:6px;background:rgba(8,9,11,.72);border:1px solid var(--line);border-radius:3px;padding:7px 9px 6px}
.pips em{font:600 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--steel);margin-right:2px}
.pip{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe2a6,var(--amber) 55%,#a86a12);box-shadow:0 0 9px rgba(245,173,61,.8);transition:all .5s}
.pip.spent{background:#2a2f36;box-shadow:inset 0 1px 2px #000}
.pips.flash{animation:flash .9s ease}
@keyframes flash{30%{border-color:var(--amber);box-shadow:0 0 18px rgba(245,173,61,.6)}}
.icon{width:36px;height:34px;display:grid;place-items:center;background:rgba(8,9,11,.72);border:1px solid var(--line);border-radius:3px;cursor:pointer;padding:0}
.icon svg{width:18px;height:18px;stroke:var(--paper);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.off svg{stroke:#5d6672}
.icon:focus-visible,.opt:focus-visible,.go:focus-visible,.seg button:focus-visible,.row:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- dialogue ---------- */
.panel{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 14px calc(14px + env(safe-area-inset-bottom));max-height:62%;display:flex;flex-direction:column}
.box{position:relative;background:linear-gradient(180deg,rgba(26,30,36,.95),rgba(14,16,20,.97));border:1px solid var(--line);border-top:3px solid var(--red);border-radius:4px;
  padding:20px 16px 14px;box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);cursor:pointer;min-height:132px}
.plate{position:absolute;left:12px;top:-15px;font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#2a1c05;
  background:linear-gradient(180deg,#f3cf7a,#b98a2e);padding:6px 10px 5px;border-radius:2px;box-shadow:0 1px 0 #6d4d12,0 0 14px rgba(245,173,61,.35)}
.plate small{font-weight:600;letter-spacing:.12em;opacity:.75;margin-left:.6em}
.plate.narr{background:var(--hull);color:var(--steel);border:1px solid var(--line);box-shadow:none}
.plate.you{background:var(--red);color:#fff;box-shadow:0 1px 0 var(--red-deep)}
.line{margin:0;font-size:17px;line-height:1.5;min-height:4.5em;white-space:pre-wrap}
.line.narr{font-style:italic;color:#d9d2c3}
.more{position:absolute;right:12px;bottom:8px;font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);animation:rec 1.2s steps(1) infinite}

.opts{display:flex;flex-direction:column;gap:7px;margin-top:9px;overflow:auto}
.opt{display:flex;align-items:center;gap:10px;text-align:left;background:rgba(20,23,28,.95);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:3px;padding:11px 12px;cursor:pointer;
  font:500 16px/1.25 Barlow,sans-serif;animation:rise .35s ease both}
.opt:active{background:#262b33}
.opt i{font:700 12px/1 "Barlow Condensed",sans-serif;font-style:normal;color:var(--amber);letter-spacing:.1em}
.opt.tool{border-left-color:var(--red)}
.opt.tool u{margin-left:auto;text-decoration:none;font:600 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ff9a90;white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.say{display:flex;gap:7px;margin-top:2px;animation:rise .35s ease both}
.say input{flex:1;min-width:0;font:500 16px/1.2 Barlow,sans-serif;color:#fff;background:#0b0d10;border:1px solid var(--line);border-radius:3px;padding:11px 12px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.say input::placeholder{color:#6b7480}
.say input:focus{outline:0;border-color:var(--amber)}
.say button{width:44px;border:1px solid var(--line);background:var(--hull);border-radius:3px;display:grid;place-items:center;cursor:pointer;padding:0}
.say button svg{width:18px;height:18px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint{font-size:12.5px;line-height:1.4;color:var(--steel);margin:8px 2px 0}

/* ---------- full screens ---------- */
.screen{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px calc(22px + env(safe-area-inset-bottom));overflow:auto;
  background:linear-gradient(180deg,rgba(8,9,11,.35) 0%,rgba(8,9,11,.1) 30%,rgba(13,15,18,.9) 62%,var(--ink) 80%)}
.screen.solid{background:rgba(10,12,15,.94);justify-content:flex-start;backdrop-filter:blur(6px)}
.kicker{font:600 12px/1.3 "Barlow Condensed",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin:0 0 8px;text-shadow:0 1px 3px #000}
h1{font:400 clamp(54px,17vw,104px)/.9 Anton,Impact,sans-serif;text-transform:uppercase;color:var(--yellow);margin:0 0 14px;text-shadow:.045em .045em 0 #000,0 0 30px rgba(0,0,0,.5)}
h2{font:400 30px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px}
.tag{font:600 19px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:0 0 18px;text-shadow:0 2px 4px #000}
.go{display:block;width:100%;font:700 19px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--red);border:0;border-radius:3px;padding:17px 16px 16px;
  cursor:pointer;box-shadow:0 4px 0 var(--red-deep),0 0 24px rgba(200,40,31,.35)}
.go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-deep)}
.go.ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--paper);margin-top:10px}
.fine{font-size:12.5px;line-height:1.45;color:var(--steel);margin:14px 0 0}
.wrap{width:100%;max-width:520px;margin:0 auto}
.lab{font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);margin:20px 0 8px}
.row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#12151a;border:1px solid var(--line);border-radius:3px;padding:12px 13px;margin-bottom:7px;cursor:pointer}
.row .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none}
.row.sel{border-color:var(--amber)}
.row.sel .dot{border-color:var(--amber);background:radial-gradient(circle,var(--amber) 45%,transparent 50%)}
.row b{display:block;font:600 17px/1.2 Barlow,sans-serif}
.row span{display:block;font-size:13px;color:var(--steel);line-height:1.35}
.row u{margin-left:auto;text-decoration:none;font:600 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
.seg{display:flex;gap:6px}
.seg button{flex:1;background:#12151a;border:1px solid var(--line);border-radius:3px;padding:11px 6px 10px;cursor:pointer;font:600 14px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.seg button.sel{border-color:var(--amber);color:var(--amber)}
.card{background:linear-gradient(180deg,#1b2026,#12151a);border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:4px;padding:16px 16px 6px;margin:14px 0 16px}
.card dt{font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:0 0 5px}
.card dd{margin:0 0 14px;font-size:16.5px;line-height:1.4}
.x{position:absolute;right:14px;top:12px}

/* ---------- wide screens ---------- */
@media (min-aspect-ratio:1/1){
  .stage{height:100%}
  .stage::after{background:linear-gradient(180deg,rgba(8,9,11,.5) 0%,transparent 16%,transparent 50%,rgba(8,9,11,.78) 100%)}
  .panel{left:50%;right:auto;transform:translateX(-50%);width:min(760px,92vw);padding-bottom:26px;max-height:70%}
  .opts{flex-direction:row;flex-wrap:wrap}
  .opt{flex:1 1 46%}
  .say{flex:1 1 100%}
  .screen{padding:32px clamp(24px,5vw,64px) 40px}
  .screen:not(.solid) .wrap{margin:0}
  .screen.solid{justify-content:flex-start}
  .screen.solid .wrap{margin:auto}
  .loc{font-size:13px}
  h1{font-size:clamp(64px,8vw,112px)}
}
@media (prefers-reduced-motion:reduce){ .bg{animation:none} .more,.loc b::before{animation:none} }

/* ---------- app additions ---------- */
.field{display:block;width:100%;font:500 16px/1.2 Barlow,sans-serif;color:#fff;background:#0b0d10;border:1px solid var(--line);border-radius:3px;padding:12px;margin-bottom:7px}
.field:focus{outline:0;border-color:var(--amber)}
.seg{flex-wrap:wrap}
.seg button{flex:1 1 30%}
.status{font-size:13.5px;color:var(--amber);margin:2px 0 8px;min-height:1.2em}
.status.bad{color:#ff9a90}
.sub{display:none}.sub.on{display:block}
.thinking{display:inline-block;letter-spacing:.3em;color:var(--amber);animation:rec 1s steps(1) infinite}
.save{white-space:pre-wrap;font:400 13px/1.5 ui-monospace,Menlo,monospace;background:#0b0d10;border:1px solid var(--line);border-radius:3px;padding:12px;margin:0 0 12px;max-height:40vh;overflow:auto}
.say button.rec svg{stroke:var(--red)}
.screen.solid{padding-top:52px}

.note{position:absolute;left:12px;right:12px;top:58px;z-index:9;background:rgba(40,12,10,.96);border:1px solid var(--red);border-radius:3px;padding:10px 12px;font-size:13.5px;line-height:1.4;color:#ffd9d4}

.say button.mic[aria-pressed="true"]{border-color:var(--amber)}
.say button.mic.rec{border-color:var(--red);box-shadow:0 0 14px rgba(200,40,31,.55);animation:rec 1.4s steps(1) infinite}

/* ---------- opening orders ---------- */
.screen.brief{background:linear-gradient(180deg,rgba(6,7,9,.9),rgba(6,7,9,.78) 45%,rgba(6,7,9,.94));justify-content:center;overflow:hidden;padding-top:20px}
.crawl{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 24%,#000 78%,transparent 97%);mask-image:linear-gradient(180deg,transparent 4%,#000 24%,#000 78%,transparent 97%)}
.roll{position:absolute;left:0;right:0;top:100%;margin:0 auto;max-width:560px;padding:0 26px;text-align:center}
.roll h2{font:400 clamp(44px,13vw,76px)/.92 Anton,Impact,sans-serif;color:var(--yellow);margin:0 0 10px;text-shadow:.04em .04em 0 #000}
.roll .ep{font:600 17px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin:0 0 44px}
.roll p{font:500 clamp(20px,5.4vw,25px)/1.5 "Barlow Condensed",sans-serif;letter-spacing:.03em;color:var(--paper);margin:0 0 30px}
.roll p.kicker{font-size:12px;letter-spacing:.3em;color:var(--amber);margin:0 0 12px}
.roll p.motto{color:var(--amber);text-transform:uppercase;letter-spacing:.2em;font-size:17px;margin-top:44px}
.crawl.still{overflow:auto;-webkit-mask-image:none;mask-image:none}
.crawl.still .roll{position:static;padding:70px 26px 90px}
.skip{position:absolute;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:3;font:600 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);background:rgba(8,9,11,.72);border:1px solid var(--line);border-radius:3px;padding:10px 12px 9px;cursor:pointer}
.screen.brief .wrap{position:relative;z-index:2;margin:auto}

.pickbox{border:1px solid var(--line);border-radius:3px;background:#12151a;margin-bottom:7px}
.pickbox summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:13px;font:600 16px/1.3 Barlow,sans-serif}
.pickbox summary::-webkit-details-marker{display:none}
.pickbox summary u{margin-left:auto;text-decoration:none;font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.pickbox[open]{padding:0 10px 10px}
.pickbox[open] summary{padding:13px 3px}
.pickbox[open] summary u{visibility:hidden}

/* ---------- talk mode mic ---------- */
.dock{display:flex;flex-direction:column;align-items:center;gap:7px;margin:12px 0 2px}
.dock span{font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.bigmic{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;background:#14171c;border:2px solid var(--line);transition:all .3s}
.bigmic svg{width:28px;height:28px;stroke:#6b7480;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.bigmic.armed{border-color:#6d4d12}.bigmic.armed svg{stroke:#b98a2e}
.bigmic.rec{border-color:var(--red);background:#2a0f0d;box-shadow:0 0 0 6px rgba(200,40,31,.18),0 0 26px rgba(200,40,31,.6);animation:pulse 1.6s ease-in-out infinite}
.bigmic.rec svg{stroke:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 11px rgba(200,40,31,.1),0 0 34px rgba(200,40,31,.75)}}
.say.quiet{opacity:.75;margin-top:8px}
.say.quiet input{padding:8px 11px;font-size:14px}

/* ---------- mission briefing card ---------- */
.card.orders{padding:18px 18px 4px}
.card.orders p{margin:0 0 14px;font-size:17px;line-height:1.5}
#orders h2,#how h2{margin-bottom:10px}
.go em{display:block;font:600 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.24em;font-style:normal;color:#ffd9d4;margin-top:6px}

.card.brief{padding:18px 18px 4px}
.card.brief p{margin:0 0 14px;font-size:17px;line-height:1.5}
#how .row{margin-bottom:8px}