/* PACK PROTOCOL — styles.css */
:root{
  --bg:#0b0907; --ink:#f6efe0; --muted:#b9ad97;
  --gold:#f4b740; --amber:#e98a2b; --cream:#f5ecd8;
  --red:#ff5a4d; --blue:#8fd0ff; --chaos:#ff8a3c;
  --st-stealth:#5fa8d3; --st-takedown:#e98a2b; --st-position:#4fb286; --st-chaos:#e0556e; --st-utility:#c9b687;
  --panel:rgba(18,14,10,.82); --panel2:rgba(12,9,7,.9);
  --shadow:0 18px 50px rgba(0,0,0,.6);
  --disp:'Anton','Bebas Neue','Arial Narrow',Impact,system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;font-family:var(--body);color:var(--ink);user-select:none;-webkit-user-select:none}
#game{position:fixed;inset:0;overflow:hidden}
#shake{position:absolute;inset:0;will-change:transform}

/* ---------- stage ---------- */
.stage{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease;transform:scale(1.08);will-change:opacity,transform}
.stage.show{opacity:1}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 45%,rgba(0,0,0,.55) 100%);z-index:3}
@keyframes kbA{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2.5%,-1.8%)}}
@keyframes kbB{from{transform:scale(1.12) translate(2%,1%)}to{transform:scale(1.03) translate(-1.5%,0)}}
@keyframes kbC{from{transform:scale(1.04) translate(-1.5%,1.5%)}to{transform:scale(1.14) translate(1.5%,-1.5%)}}
.stage.kb-a{animation:kbA 22s ease both}.stage.kb-b{animation:kbB 24s ease both}.stage.kb-c{animation:kbC 20s ease both}

#fx-canvas{position:absolute;inset:0;z-index:60;pointer-events:none}
#pop-layer{position:absolute;inset:0;z-index:70;pointer-events:none}

/* ---------- fade / flash ---------- */
#fade{position:absolute;inset:0;background:#000;opacity:0;z-index:90;pointer-events:none;transition:opacity .42s ease}
#fade.on{opacity:1}
.fx-flash{position:absolute;inset:0;animation:flash .35s ease forwards;mix-blend-mode:screen}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.fx-pop{position:absolute;transform:translate(-50%,-50%);font-family:var(--disp);font-size:34px;letter-spacing:1px;color:#fff;text-shadow:0 3px 10px rgba(0,0,0,.7);animation:pop 1.1s cubic-bezier(.2,.8,.2,1) forwards;will-change:transform,opacity}
.fx-pop.big{font-size:46px}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}18%{opacity:1;transform:translate(-50%,-90%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}

/* ---------- top meters ---------- */
#board{position:absolute;inset:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .45s ease}
#board.on{opacity:1;pointer-events:auto}
#topbar{position:absolute;top:0;left:0;right:0;padding:12px 18px 26px;
  background:linear-gradient(180deg,rgba(5,4,3,.96) 40%,rgba(5,4,3,.6) 80%,transparent);z-index:25;backdrop-filter:blur(3px);
  border-bottom:1px solid rgba(244,183,64,.12)}
#meters{display:flex;gap:16px;align-items:stretch;justify-content:center}
/* big tactical gauges */
.gauge{flex:1;max-width:440px;background:rgba(8,6,4,.6);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 12px 10px;position:relative}
.gauge.loot{border-color:rgba(244,183,64,.45);box-shadow:0 0 0 1px rgba(244,183,64,.15),0 6px 18px rgba(0,0,0,.4)}
.gauge.susp{border-color:rgba(255,90,77,.4)}
.gauge:before,.gauge:after{content:'';position:absolute;width:9px;height:9px;border-color:inherit;opacity:.7}
.gauge:before{top:-1px;left:-1px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.gauge:after{bottom:-1px;right:-1px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}
.gauge.susp:before{border-color:var(--red)}.gauge.susp:after{border-color:var(--red)}
.gauge-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.gauge-name{font-family:var(--disp);letter-spacing:2px;font-size:15px;color:var(--muted);text-shadow:0 1px 4px #000}
.gauge.loot .gauge-name{color:var(--gold)}.gauge.susp .gauge-name{color:var(--red)}
.gauge-name em{font-style:normal;font-family:var(--body);font-size:9px;letter-spacing:2px;opacity:.6;margin-left:7px;text-transform:uppercase}
.gauge-val{font-family:var(--disp);line-height:1}
.gauge-val b{font-size:30px;color:#fff;text-shadow:0 2px 8px #000}
.gauge-val i{font-style:normal;font-size:15px;color:var(--muted);margin-left:3px}
.bar{height:18px;border-radius:6px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.bar i{display:block;height:100%;width:0;border-radius:5px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
#loot-fill{background:linear-gradient(90deg,#b5701f,var(--gold));box-shadow:0 0 16px rgba(244,183,64,.7)}
#susp-fill{background:linear-gradient(90deg,#8a2f2a,#ff7a5a)}
#susp-bar.danger i{background:linear-gradient(90deg,#c0392b,#ff5a4d);box-shadow:0 0 16px rgba(255,90,77,.7)}
#susp-bar.critical{animation:pulseRed .8s infinite}
@keyframes pulseRed{0%,100%{filter:none}50%{filter:brightness(1.5)}}
.hud-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:130px}
.turn-badge{font-family:var(--disp);letter-spacing:2px;font-size:13px;color:var(--cream);background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);padding:4px 14px;border-radius:4px}
.turn-badge b{color:var(--gold);font-size:16px}
.chip{font-family:var(--disp);letter-spacing:1px;font-size:12px;color:var(--muted);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);padding:4px 11px;border-radius:4px}
.chip.stealth.has{color:var(--blue);border-color:rgba(143,208,255,.6);box-shadow:0 0 14px rgba(143,208,255,.3)}
.chip b{color:#fff}
#chaos-wrap{display:none}#chaos-wrap.on{display:flex;gap:2px}
.chaos-tok{filter:drop-shadow(0 0 5px rgba(255,138,60,.8))}
#objective{position:absolute;top:96px;left:0;right:0;text-align:center;font-family:var(--disp);letter-spacing:3px;font-size:18px;color:var(--cream);text-shadow:0 2px 12px rgba(0,0,0,.95);pointer-events:none;z-index:26}

/* viewfinder corner brackets (tactical chrome) */
#hud-frame{position:absolute;inset:10px;pointer-events:none;z-index:23}
#hud-frame span{position:absolute;width:26px;height:26px;opacity:.5}
#hud-frame span:nth-child(1){top:0;left:0;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
#hud-frame span:nth-child(2){top:0;right:0;border-top:2px solid var(--gold);border-right:2px solid var(--gold)}
#hud-frame span:nth-child(3){bottom:0;left:0;border-bottom:2px solid var(--gold);border-left:2px solid var(--gold)}
#hud-frame span:nth-child(4){bottom:0;right:0;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}

/* ---------- threats ---------- */
#threats-label{position:absolute;top:130px;left:0;right:0;text-align:center;font-family:var(--disp);letter-spacing:3px;font-size:13px;color:var(--red);text-shadow:0 2px 8px #000;z-index:22;display:none}
#threats{position:absolute;top:150px;left:0;right:0;display:flex;justify-content:center;gap:18px;z-index:22;flex-wrap:wrap;padding:0 16px}
.threat{width:230px;background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.threat-art{height:120px;background-size:cover;background-position:center}
.threat-info{padding:8px 11px 11px}
.threat-name{font-family:var(--disp);font-size:20px;letter-spacing:1px}
.threat.boss .threat-name{color:var(--red)}
.threat-sub{font-size:11px;color:var(--muted);margin-bottom:6px;min-height:14px}
.threat-intent{font-family:var(--disp);letter-spacing:1px;color:var(--red);font-size:16px}
.threat-intent.negated{color:var(--blue)}
.threat-tele{font-size:11.5px;color:#d9cdb6;margin-top:3px;font-style:italic;line-height:1.3}
.threat.targetable{cursor:crosshair;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 24px rgba(244,183,64,.5);animation:tgt 1s infinite}
.threat.targetable:hover{transform:translateY(-4px) scale(1.03)}
.threat.mounted{border-color:var(--red);box-shadow:0 0 0 2px var(--red),0 0 30px rgba(255,60,60,.5)}
@keyframes tgt{0%,100%{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(244,183,64,.4)}50%{box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(244,183,64,.8)}}

/* ---------- hand ---------- */
#hand-area{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;gap:0;padding:0 0 10px;z-index:24;perspective:1400px;min-height:230px;
  background:linear-gradient(0deg,rgba(6,5,4,.9),transparent)}
#hand{display:flex;justify-content:center;align-items:flex-end;gap:-10px}
.card{width:150px;height:212px;margin:0 -8px;cursor:pointer;transition:transform .18s;will-change:transform}
.card-inner{position:relative;width:100%;height:100%;border-radius:13px;overflow:hidden;transform-style:preserve-3d;transition:transform .18s cubic-bezier(.2,.8,.2,1);
  background:#1a140e;border:2px solid var(--st-utility);box-shadow:0 10px 24px rgba(0,0,0,.55)}
.card.arch-STEALTH .card-inner{border-color:var(--st-stealth)}
.card.arch-TAKEDOWN .card-inner{border-color:var(--st-takedown)}
.card.arch-POSITION .card-inner{border-color:var(--st-position)}
.card.arch-CHAOS .card-inner{border-color:var(--st-chaos)}
.card.arch-UTILITY .card-inner{border-color:var(--st-utility)}
.card-art{position:absolute;top:0;left:0;right:0;height:56%;background-size:cover;background-position:center}
.card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#15100b 100%)}
.card-glare{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:overlay}
/* tactical corner brackets on every card */
.card-inner::after{content:'';position:absolute;inset:5px;z-index:7;pointer-events:none;opacity:.4;mix-blend-mode:screen;
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-size:11px 2px,2px 11px,11px 2px,2px 11px,11px 2px,2px 11px,11px 2px,2px 11px;
  background-position:top left,top left,top right,top right,bottom left,bottom left,bottom right,bottom right}
.card-cost{position:absolute;top:6px;left:6px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a6,var(--gold));color:#2a1c06;font-family:var(--disp);font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.6);z-index:6}
.card-arch-tag{position:absolute;top:calc(56% - 13px);left:0;right:0;text-align:center;font-family:var(--disp);font-size:10px;letter-spacing:3px;color:#fff;text-shadow:0 1px 3px #000;z-index:6}
.card-body{position:absolute;bottom:0;left:0;right:0;height:46%;padding:8px 9px;display:flex;flex-direction:column}
.card-name{font-family:var(--disp);font-size:15px;letter-spacing:.5px;line-height:1;color:var(--cream)}
.card-text{font-size:10.5px;line-height:1.25;color:#e7dcc6;margin-top:4px;flex:1}
.card-flavor{font-size:8.5px;line-height:1.2;color:#94886f;font-style:italic;opacity:.85}
.card.locked{filter:grayscale(.7) brightness(.55);cursor:not-allowed}
.card.locked .card-inner{border-color:#3a3128}
.card.forced .card-inner{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 28px rgba(244,183,64,.6);animation:tgt 1.1s infinite}
.card.selected .card-inner{box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(244,183,64,.7)}
.card:not(.locked):hover{z-index:30}

/* hand right rail */
#hand-rail{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:26}
#end-turn{font-family:var(--disp);letter-spacing:2px;font-size:18px;padding:13px 26px;border:none;border-radius:30px;color:#2a1c06;
  background:linear-gradient(180deg,#ffe092,var(--amber));cursor:pointer;box-shadow:0 8px 20px rgba(233,138,43,.45);opacity:.5;transition:.2s}
#end-turn.ready{opacity:1}#end-turn.ready:hover{transform:translateY(-2px) scale(1.04)}
#end-turn:disabled{cursor:default}
#stamina{display:flex;gap:5px}
.pip{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25)}
.pip.lit{background:radial-gradient(circle at 35% 30%,#fff3cf,var(--gold));box-shadow:0 0 8px rgba(244,183,64,.7)}
#hand-left{position:absolute;left:18px;bottom:18px;z-index:26;font-family:var(--disp);letter-spacing:1px;font-size:12px;color:var(--muted);text-align:left}
#hand-left span{color:var(--ink)}

/* ---------- narrator ---------- */
#narrator{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;gap:16px;align-items:flex-end;
  padding:18px 22px 22px;background:linear-gradient(0deg,rgba(5,4,3,.96),rgba(5,4,3,.5) 70%,transparent);
  transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1);cursor:pointer}
#narrator.on{transform:translateY(0)}
.nar-portrait{width:92px;height:92px;border-radius:14px;background-size:cover;background-position:center top;border:2px solid var(--gold);box-shadow:0 8px 20px rgba(0,0,0,.6);flex:none}
.nar-body{flex:1;max-width:1000px}
.nar-name{font-family:var(--disp);letter-spacing:3px;font-size:18px;color:var(--gold)}
.nar-text{font-size:19px;line-height:1.4;color:var(--ink);margin-top:4px;min-height:28px;text-shadow:0 1px 4px #000}
#narrator.tone-break .nar-name{color:var(--red)}
#narrator.tone-break .nar-text{color:#ffd0c8}
#narrator:after{content:'click to continue';position:absolute;right:22px;bottom:8px;font-size:10px;letter-spacing:2px;color:var(--muted);opacity:.6}

/* ---------- banner ---------- */
#banner{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .35s}
#banner.on{opacity:1}
.banner-card{text-align:center;padding:22px 50px;background:rgba(8,6,4,.7);backdrop-filter:blur(4px);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:scale(.9);animation:bIn .5s forwards}
@keyframes bIn{to{transform:scale(1)}}
.banner-title{font-family:var(--disp);font-size:52px;letter-spacing:4px;color:var(--gold);text-shadow:0 4px 18px rgba(0,0,0,.8)}
.banner-sub{font-size:16px;color:var(--ink);margin-top:6px;letter-spacing:1px}

/* ---------- menu ---------- */
.overlay{position:absolute;inset:0;z-index:85;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(120% 100% at 50% 30%,transparent 30%,rgba(0,0,0,.65));opacity:0;transition:opacity .5s}
.overlay.on{opacity:1}.hidden{display:none!important}
#menu-title{font-family:var(--disp);font-size:clamp(56px,11vw,150px);letter-spacing:6px;line-height:.85;color:var(--cream);text-shadow:0 6px 30px rgba(0,0,0,.8),0 0 40px rgba(244,183,64,.15)}
#menu-sub{font-family:var(--disp);font-size:clamp(20px,3.5vw,40px);letter-spacing:10px;color:var(--gold);margin-top:6px}
#menu-tag{font-size:15px;letter-spacing:2px;color:var(--muted);margin-top:18px;max-width:560px}
#menu-stats{font-size:12px;letter-spacing:2px;color:var(--muted);margin-top:8px;height:16px}
.btn{font-family:var(--disp);letter-spacing:3px;font-size:24px;padding:16px 42px;margin-top:30px;border:none;border-radius:40px;color:#2a1c06;
  background:linear-gradient(180deg,#ffe092,var(--amber));cursor:pointer;box-shadow:0 10px 30px rgba(233,138,43,.5);transition:.2s}
.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 40px rgba(244,183,64,.6)}
#menu-cta{position:absolute;bottom:18px;font-size:12px;letter-spacing:3px;color:var(--muted)}
.menu-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:30px}
.menu-btns .btn{margin-top:0}

/* ---------- how to play ---------- */
#howto{background:rgba(4,3,2,.82);backdrop-filter:blur(6px);z-index:87;padding:18px}
.howto-card{position:relative;width:min(820px,94vw);max-height:90vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#171009,#0d0907);
  border:1px solid rgba(244,183,64,.3);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden}
.howto-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25)}
.howto-head h2{font-family:var(--disp);letter-spacing:4px;font-size:28px;color:var(--gold)}
#howto-close{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:16px;cursor:pointer}
#howto-close:hover{background:rgba(255,255,255,.1)}
.howto-body{padding:18px 24px;overflow-y:auto;text-align:left}
.howto-lede{font-size:15px;line-height:1.55;color:var(--ink);margin-bottom:16px}
.howto-grid{display:flex;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.howto-box{flex:1;min-width:230px;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}
.howto-box.gold{border-color:rgba(244,183,64,.5)}.howto-box.red{border-color:rgba(255,90,77,.5)}
.howto-box h3{font-family:var(--disp);letter-spacing:1px;font-size:18px;margin-bottom:5px}
.howto-box.gold h3{color:var(--gold)}.howto-box.red h3{color:var(--red)}
.howto-box p{font-size:13px;line-height:1.45;color:#dbcfb8}
.howto-h{font-family:var(--disp);letter-spacing:2px;font-size:18px;color:var(--cream);margin:18px 0 8px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.howto-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.howto-list li{font-size:13.5px;line-height:1.5;color:#e7dcc6;padding-left:18px;position:relative}
.howto-list li:before{content:'▸';position:absolute;left:0;color:var(--gold)}
.howto-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hc{padding:11px 13px;border-radius:10px;background:rgba(0,0,0,.3);border-left:3px solid #888}
.hc b{font-family:var(--disp);letter-spacing:2px;font-size:14px;display:block;margin-bottom:3px}
.hc span{font-size:12.5px;line-height:1.4;color:#cfc3ac}
.hc.stealth{border-left-color:var(--st-stealth)}.hc.stealth b{color:var(--st-stealth)}
.hc.takedown{border-left-color:var(--st-takedown)}.hc.takedown b{color:var(--st-takedown)}
.hc.position{border-left-color:var(--st-position)}.hc.position b{color:var(--st-position)}
.hc.chaos{border-left-color:var(--st-chaos)}.hc.chaos b{color:var(--st-chaos)}
.howto-run{font-size:13.5px;line-height:1.6;color:#e7dcc6}
.howto-tip{margin-top:14px;padding:11px 14px;border-radius:10px;background:rgba(244,183,64,.1);border:1px solid rgba(244,183,64,.3);font-size:13.5px;color:#f6e6c4}
#howto-got{align-self:center;margin:14px auto 18px}
@media (max-width:640px){.howto-cards{grid-template-columns:1fr}.howto-head h2{font-size:22px}}

/* map */
#map-choices{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.map-node{width:300px;text-align:left;padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:var(--panel);color:var(--ink);cursor:pointer;transition:.2s}
.map-node:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 14px 36px rgba(244,183,64,.3)}
.mn-label{font-family:var(--disp);font-size:26px;letter-spacing:1px;color:var(--gold)}
.mn-sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.4}
#map-title{font-family:var(--disp);font-size:clamp(34px,6vw,64px);letter-spacing:4px;color:var(--cream)}
#map-sub{font-size:14px;letter-spacing:2px;color:var(--muted);margin-top:6px}

/* cold open */
#coldopen{position:absolute;inset:0;z-index:88;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .5s}
#coldopen.on{opacity:1}
.co-line{font-size:clamp(18px,3vw,30px);color:var(--cream);letter-spacing:1px;max-width:760px;text-align:center;min-height:40px;line-height:1.4;font-style:italic}
.co-title{margin-top:30px;font-family:var(--disp);font-size:clamp(50px,11vw,150px);letter-spacing:6px;color:var(--gold);opacity:0;transform:scale(1.5)}
.co-title.slam{animation:slam .5s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes slam{0%{opacity:0;transform:scale(1.6)}60%{opacity:1;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}

/* loading */
#loading{position:absolute;inset:0;z-index:95;background:#0b0907;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
#loading .lt{font-family:var(--disp);font-size:40px;letter-spacing:6px;color:var(--gold)}
#loading .ls{font-size:12px;letter-spacing:3px;color:var(--muted)}
#load-track{width:240px;height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
#load-bar{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--gold));transition:width .25s}

/* cashout */
#endscreen{z-index:86}
.end-grade{font-family:var(--disp);font-size:clamp(90px,16vw,190px);line-height:.8;text-shadow:0 6px 30px rgba(0,0,0,.7)}
.grade-S{color:#ffd76a}.grade-A{color:#9be37a}.grade-B{color:#8fd0ff}.grade-C{color:#d9cdb6}.grade-F{color:#ff6a5a}
#end-title{font-family:var(--disp);letter-spacing:6px;font-size:24px;color:var(--muted)}
#end-lines{max-width:600px;margin:18px 0;font-size:15px;line-height:1.6;color:var(--ink)}
.end-reward{color:var(--gold);margin-top:10px}.end-share{color:var(--muted);font-style:italic;margin-top:10px}
.end-btns{display:flex;gap:16px;margin-top:10px}
.btn.small{font-size:18px;padding:12px 28px}.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.3);box-shadow:none}

/* mute */
#mute-btn{position:absolute;top:14px;right:16px;z-index:50;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:var(--panel);color:#fff;font-size:18px;cursor:pointer}
#mute-btn.muted{opacity:.6}

@media (max-width:760px){
  .card{width:108px;height:154px}.nar-portrait{width:64px;height:64px}.nar-text{font-size:15px}
  .threat{width:46%}#threats{gap:10px}.banner-title{font-size:34px}
  #objective{font-size:14px;top:58px}
}