:root{
  --night:#07080d;
  --asphalt:#12212b;
  --sodium:#ff5a1f;
  --cyan:#00e5ff;
  --magenta:#ff2d78;
  --bio:#b6ff3d;
  --infect:#c2183a;
  --bone:#f2e6cf;
  --grime:0.18;
  --fury:0;
  --hp:1;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#04050a;overflow:hidden}
body{
  font-family:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  color:var(--bone);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
#game{position:fixed;inset:0;overflow:hidden;background:#04050a}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
#c:active{cursor:crosshair}

/* ---------- screen treatment ---------- */
#postfx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
#grime{
  position:absolute;inset:0;background-image:url(assets/screen_grime_overlay.webp);
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:var(--grime);mix-blend-mode:soft-light;
}
#vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 38%, rgba(2,3,7,0.55) 78%, rgba(1,2,6,0.94) 100%),
    linear-gradient(to bottom, rgba(3,4,8,0.5), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 78%, rgba(2,3,6,0.72));
  transition:box-shadow .6s ease;
}
#scanlines{
  position:absolute;inset:0;opacity:.13;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:overlay;
}
#rainoverlay{
  position:absolute;inset:-20%;opacity:.055;
  background-image:repeating-linear-gradient(103deg, rgba(190,225,255,.45) 0 .5px, rgba(0,0,0,0) .5px 11px);
  background-size:100% 170px;
  animation:rainfall .6s linear infinite;
  mix-blend-mode:screen;
}
@keyframes rainfall{from{background-position:0 -140px}to{background-position:0 0}}
#postfx::after{
  content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.8'/></svg>");
}
#hurtflash{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%, rgba(194,24,58,0) 35%, rgba(170,10,40,.55) 100%);transition:opacity .28s ease}
#hurtflash.on{opacity:1;transition:opacity .04s ease}
#rageflash{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%, rgba(194,24,58,0) 26%, rgba(194,24,58,.5) 90%);
}
body.overflowing #rageflash{animation:ragepulse 1.1s ease-in-out infinite}
body.overflowing #vignette{box-shadow:inset 0 0 26vmin 6vmin rgba(92,0,16,.72)}
body.lowhp #vignette{animation:hppulse 1.35s ease-in-out infinite}
@keyframes ragepulse{0%,100%{opacity:.22}50%{opacity:.85}}
@keyframes hppulse{0%,100%{box-shadow:inset 0 0 18vmin 2vmin rgba(60,0,10,.25)}50%{box-shadow:inset 0 0 24vmin 5vmin rgba(110,0,20,.55)}}

/* ---------- hud base ---------- */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;transition:opacity .9s ease}
#hud.hud-hidden{opacity:0}
#hud button{font-family:'Chakra Petch',sans-serif;pointer-events:auto;cursor:pointer}
.microlabel{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,230,207,.62);font-weight:600;line-height:1.1}
.microlabel.dim{color:rgba(242,230,207,.34)}
.dim{color:rgba(242,230,207,.42)}
.right{text-align:right}
.chev{color:var(--bio);letter-spacing:-2px}

/* title mark */
#titlemark{position:absolute;left:10px;top:8px;width:clamp(92px,13vw,170px);opacity:0;transform:translateY(-6px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
#titlemark.on{opacity:.94;transform:none}
#titlemark img{width:100%;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.8))}

/* top left */
#topleft{position:absolute;left:12px;top:clamp(70px,10.5vw,124px);display:flex;flex-direction:column;gap:8px;max-width:min(48vw,360px)}
#vitalblock{display:flex;gap:9px;align-items:flex-start;
  padding:8px 10px 8px 8px;
  background:linear-gradient(105deg,rgba(6,9,14,.82),rgba(6,9,14,.32) 88%,rgba(6,9,14,0));
  border-left:2px solid rgba(194,24,58,.5);
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);
}
.vialwrap{position:relative;height:clamp(64px,8.4vw,96px);width:auto;flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(194,24,58,.35))}
.vialwrap .vial{height:100%;width:auto;display:block}
.vial-empty{position:absolute;left:0;right:0;top:0;height:calc((1 - var(--hp)) * 100%);background:rgba(5,7,11,.9);border-bottom:1px solid rgba(255,90,31,.7);backdrop-filter:saturate(.3)}
.vial-glint{position:absolute;left:0;right:0;bottom:0;height:calc(var(--hp) * 100%);box-shadow:inset 0 -10px 14px -8px rgba(255,60,90,.55);pointer-events:none}
.vitalread{display:flex;flex-direction:column;gap:3px;min-width:92px}
.hpnum{font-family:'Staatliches',sans-serif;font-size:clamp(23px,3.1vw,34px);line-height:.9;color:var(--bone);letter-spacing:.04em;text-shadow:0 0 12px rgba(194,24,58,.4)}
.hpnum small{font-family:'Chakra Petch',sans-serif;font-size:10px;color:rgba(242,230,207,.38);letter-spacing:0}
.hpticks{height:5px;width:110px;max-width:100%;background:repeating-linear-gradient(90deg,rgba(242,230,207,.28) 0 6px,rgba(0,0,0,0) 6px 9px)}
.hpticks::after{content:"";display:block;height:100%;width:calc(var(--hp)*100%);background:linear-gradient(90deg,var(--infect),#ff6a4a);box-shadow:0 0 6px rgba(255,60,80,.5)}
.slotholder{margin-top:3px}
.weaponslot{margin-top:2px;width:min(140px,38vw);height:19px;border:1px solid rgba(242,230,207,.14);border-left:2px solid rgba(242,230,207,.3);
  display:flex;align-items:center;padding-left:5px;background:rgba(242,230,207,.03)}
.weaponslot span{font-size:8px;letter-spacing:.18em;color:rgba(242,230,207,.42)}

/* fury */
#furyblock{width:min(226px,52vw);padding:6px 9px 7px;background:linear-gradient(100deg,rgba(7,10,15,.82),rgba(7,10,15,.18));border-left:2px solid rgba(182,255,61,.34)}
.furyhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
#furyPct{font-family:'Staatliches',sans-serif;font-size:14px;letter-spacing:.06em;color:rgba(242,230,207,.7)}
.furybar{position:relative;height:11px;background:rgba(8,11,16,.9);border:1px solid rgba(242,230,207,.16);overflow:hidden;transform:skewX(-13deg)}
.furyfill{height:100%;width:calc(var(--fury)*1%);background:linear-gradient(90deg,#6b7c2a,var(--bio) 55%,#fff7a8);box-shadow:0 0 12px rgba(182,255,61,.55);transition:width .18s ease}
.furystripes{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(0,0,0,.42) 0 3px,rgba(0,0,0,0) 3px 9px);pointer-events:none}
#furyblock.full{border-left-color:var(--infect);box-shadow:0 0 22px rgba(194,24,58,.35)}
#furyblock.full .furyfill{background:linear-gradient(90deg,#ff3d1f,#ffd2a2);box-shadow:0 0 18px rgba(255,90,31,.8)}
#furyblock.full #furyPct{color:#ffd2a2}
#furyblock.full #furyPrompt{color:#ffb07a;animation:ragepulse 1s infinite}
#furyPrompt{margin-top:4px;font-size:8.5px;letter-spacing:.19em;color:rgba(242,230,207,.44)}
#syringeline{margin-top:5px}
#syringeBtn{display:flex;align-items:center;gap:6px;background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.22);color:rgba(220,250,255,.82);font-size:8.5px;letter-spacing:.16em;padding:3px 6px}
#syringeBtn:hover{background:rgba(0,229,255,.12)}
#syringeBtn b{font-family:'Staatliches';font-size:13px;color:var(--cyan)}
#syringeBtn em{font-style:normal;border:1px solid rgba(0,229,255,.35);padding:0 3px;font-size:8px;color:rgba(220,250,255,.6)}
#syringeBtn.empty{opacity:.4}
.syringeicon{width:7px;height:13px;background:linear-gradient(to bottom,transparent 0 25%,var(--cyan) 25% 70%,transparent 70%);border-left:1px solid var(--cyan);display:inline-block;transform:rotate(20deg)}
#actline{margin-top:2px;font-size:9px;letter-spacing:.16em;color:rgba(242,230,207,.62);padding-left:2px}
#actline b{color:var(--bone);letter-spacing:.18em}

/* top center */
#topcenter{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:min(560px,calc(100vw - 26px))}
#zoneLabel{font-size:9px;letter-spacing:.28em;color:rgba(242,230,207,.55);text-shadow:0 1px 4px #000;white-space:nowrap}
#zoneLabel b{color:var(--bio)}
.radio-hidden{opacity:0!important;transform:translateY(-6px);pointer-events:none}
#radio{display:flex;gap:8px;align-items:stretch;background:linear-gradient(100deg,rgba(4,8,9,.93),rgba(8,15,16,.72));border:1px solid rgba(182,255,61,.22);border-left:3px solid var(--bio);
  padding:6px 10px 6px 6px;max-width:min(560px,calc(100vw - 24px));box-shadow:0 4px 26px rgba(0,0,0,.6),inset 0 0 30px rgba(182,255,61,.04);
  transition:opacity .45s ease,transform .45s ease;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.radio-portrait{position:relative;width:44px;height:44px;flex:0 0 44px;overflow:hidden;border:1px solid rgba(182,255,61,.32);background:#060a08}
.radio-portrait img{width:100%;height:100%;object-fit:cover;display:none;filter:saturate(.85) contrast(1.05)}
.radio-portrait::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,rgba(0,0,0,0) 1px 3px);pointer-events:none}
.radio-portrait-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Staatliches';font-size:17px;letter-spacing:2px;color:rgba(182,255,61,.55);background:radial-gradient(circle,rgba(182,255,61,.08),rgba(0,0,0,0) 70%)}
.radio-led{width:6px;flex:0 0 6px;background:var(--bio);box-shadow:0 0 10px var(--bio);animation:blink 1.7s step-end infinite;margin:2px 0}
@keyframes blink{0%,70%{opacity:1}71%,100%{opacity:.25}}
.radiobody{min-width:0}
.radiometa{display:flex;gap:10px;font-size:7.5px;letter-spacing:.2em;color:rgba(182,255,61,.62);text-transform:uppercase}
.radiometa span:last-child{color:rgba(242,230,207,.3)}
#radioText{font-size:11px;line-height:1.35;letter-spacing:.03em;color:rgba(232,240,226,.9);margin-top:1px}
#radioText b{color:#e9ffcb;font-weight:600}

/* top right */
#topright{position:absolute;right:12px;top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.heatstrip{width:clamp(128px,20vw,214px);opacity:.5;filter:brightness(.62) sepia(.15) drop-shadow(0 2px 7px rgba(0,0,0,.8))}
.heatstrip img{width:100%;display:block}
.heatnote{font-size:8px;letter-spacing:.24em;color:rgba(242,230,207,.28);margin-top:-2px}
#countdown{display:flex;flex-direction:column;align-items:flex-end;margin-top:1px}
#countdown .microlabel{color:rgba(255,90,31,.55)}
#countdownVal{font-family:'Staatliches',sans-serif;font-size:18px;letter-spacing:.1em;color:rgba(255,154,96,.88);text-shadow:0 0 12px rgba(255,90,31,.35);line-height:1}
#topbuttons{display:flex;gap:5px;margin-top:4px;pointer-events:auto}
#topbuttons button{background:rgba(8,11,15,.68);border:1px solid rgba(242,230,207,.18);color:rgba(242,230,207,.66);font-size:8px;letter-spacing:.16em;padding:4px 7px}
#topbuttons button:hover{color:var(--bone);border-color:rgba(242,230,207,.45);background:rgba(20,26,32,.8)}
#soundBtn.off{color:rgba(242,230,207,.28)}

/* bottom legend */
#bottomlegend{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(4px,1vw,12px);
  padding:7px 12px;background:linear-gradient(to top,rgba(4,6,10,.9),rgba(8,12,17,.52));border-top:1px solid rgba(242,230,207,.16);border-bottom:1px solid rgba(242,230,207,.07);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%);max-width:calc(100vw - 24px)}
.legenditem{display:flex;align-items:center;gap:5px;font-size:8px;letter-spacing:.14em;color:rgba(242,230,207,.6);white-space:nowrap}
.legenditem img{height:24px;width:auto;filter:grayscale(.15) contrast(1.05)}
.legenditem b{color:rgba(242,230,207,.92);font-weight:600}
.legenditem.keye img{height:21px}
.legenditem.keye{opacity:.82}
.legenddiv{height:24px;display:flex;align-items:center;opacity:.42}
.legenddiv img{height:20px;width:14px;object-fit:cover}
.rageglyph{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid rgba(255,90,31,.5);color:#ffb07a;font-family:'Staatliches';font-size:13px;transform:rotate(-3deg)}
#controlsHint{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);font-size:8.5px;letter-spacing:.18em;color:rgba(242,230,207,.4);white-space:nowrap;transition:opacity 1s ease;text-shadow:0 1px 4px #000}

/* prompt */
#prompt{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 7px;background:rgba(4,8,10,.86);border:1px solid rgba(182,255,61,.38);border-left:3px solid var(--bio);
  color:#e9ffd0;font-size:10px;letter-spacing:.16em;box-shadow:0 0 26px rgba(182,255,61,.12);transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
#prompt.prompt-hidden{opacity:0;transform:translate(-50%,6px);pointer-events:none}
.promptkey{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid rgba(182,255,61,.7);font-family:'Staatliches';font-size:13px;color:var(--bio)}

/* zone card */
#zonecard{position:absolute;left:6%;top:29%;max-width:min(430px,60vw);padding:10px 14px 12px;border-left:2px solid var(--cyan);
  background:linear-gradient(100deg,rgba(3,8,12,.72),rgba(3,8,12,0));transition:opacity .7s ease,transform .7s ease;text-shadow:0 2px 10px #000}
#zonecard.zonecard-hidden{opacity:0;transform:translateX(-14px)}
.zkicker{font-size:8px;letter-spacing:.38em;color:rgba(0,229,255,.65)}
.zname{font-family:'Staatliches';font-size:clamp(24px,4.6vw,44px);line-height:.94;letter-spacing:.05em;color:var(--bone);margin:2px 0}
.zsub{font-size:8.5px;letter-spacing:.22em;color:rgba(242,230,207,.46)}

/* ---------- touch controls ---------- */
#touch{position:absolute;inset:0;z-index:12;pointer-events:none;display:none}
#stick{position:absolute;left:18px;bottom:22px;width:112px;height:112px;border-radius:50%;pointer-events:auto;
  background:radial-gradient(circle,rgba(8,13,18,.55) 0 38%,rgba(242,230,207,.06) 39% 100%);border:1px solid rgba(242,230,207,.16);
  box-shadow:inset 0 0 20px rgba(0,0,0,.6);touch-action:none}
#stickknob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(242,230,207,.35),rgba(30,42,52,.7) 70%);border:1px solid rgba(242,230,207,.3);box-shadow:0 2px 10px rgba(0,0,0,.5)}
#stickknob::after{content:"";position:absolute;inset:17px;border:1px solid rgba(0,229,255,.4);border-radius:50%}
#touchbtns{position:absolute;right:14px;bottom:18px;display:grid;grid-template-columns:repeat(2,auto);gap:8px;align-items:end;justify-items:end;pointer-events:none}
.tbtn{pointer-events:auto;touch-action:none;border:1px solid rgba(242,230,207,.24);background:rgba(6,10,15,.72);color:rgba(242,230,207,.88);
  font-family:'Staatliches';font-size:14px;letter-spacing:.1em;padding:12px 13px;min-width:68px;min-height:56px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow:0 3px 14px rgba(0,0,0,.45)}
.tbtn:active{background:rgba(0,229,255,.18);border-color:var(--cyan)}
.tbtn.big{grid-column:2;grid-row:2;min-width:86px;min-height:74px;font-size:17px;border-color:rgba(0,229,255,.4);color:#d9fbff;background:rgba(0,32,40,.6)}
.tbtn.rage{color:#ffb07a;border-color:rgba(255,90,31,.4)}
.tbtn.rage.ready{background:rgba(80,12,6,.7);border-color:var(--sodium);box-shadow:0 0 16px rgba(255,90,31,.4);animation:ragepulse 1s infinite}
.tbtn.ghost{min-width:52px;min-height:48px;font-size:13px;opacity:.8}
body.touchmode #bottomlegend,body.touchmode #controlsHint{display:none}
body.touchmode #touch{display:block}
body.touchmode #prompt{bottom:28%}
body.touchmode #syringeline{display:none}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(ellipse at 50% 45%,rgba(4,6,10,.3),rgba(2,3,6,.82));backdrop-filter:blur(2px);transition:opacity .35s ease}
.overlay.hidden{opacity:0;pointer-events:none}

/* title */
#titlecard{position:absolute;inset:0;z-index:28;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px 18px;background:
    radial-gradient(ellipse at 50% 38%,rgba(10,16,20,.55),rgba(3,4,8,.94) 72%),
    linear-gradient(to bottom,rgba(3,4,8,.96),rgba(3,4,8,.62) 45%,rgba(3,4,8,.97));
  transition:opacity 1.05s ease,transform 1.05s ease;overflow:auto}
#titlecard.gone{opacity:0;pointer-events:none;transform:scale(1.04)}
.tctopline{font-size:clamp(8px,1.2vw,11px);letter-spacing:.34em;color:rgba(182,255,61,.72);text-align:center}
.tctitle{width:min(78vw,600px);max-height:33vh;object-fit:contain;filter:drop-shadow(0 8px 40px rgba(0,0,0,.9)) drop-shadow(0 0 34px rgba(0,229,255,.1));margin-top:-4px}
.tcpremise{max-width:620px;text-align:center;color:rgba(232,224,208,.75);font-size:clamp(10.5px,1.35vw,13px);line-height:1.55;font-weight:300}
.tcpremise p{margin:0 0 5px}
.tcstats{display:flex;gap:clamp(12px,3vw,34px);flex-wrap:wrap;justify-content:center;margin:3px 0 1px}
.tcstats div{display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:5px;border-top:1px solid rgba(242,230,207,.16);min-width:96px}
.tcstats b{font-family:'Staatliches';font-size:clamp(13px,1.9vw,17px);letter-spacing:.1em;color:rgba(242,230,207,.9)}
.tcstats span{font-size:7.5px;letter-spacing:.18em;color:rgba(242,230,207,.4);text-align:center}
.tccontrols{display:flex;gap:7px 12px;flex-wrap:wrap;justify-content:center;max-width:640px;margin-top:2px}
.tccontrols span{font-size:8px;letter-spacing:.13em;color:rgba(242,230,207,.48)}
.tccontrols b{color:rgba(242,230,207,.88);font-weight:600}
#enterBtn{margin-top:5px;font-family:'Staatliches';font-size:clamp(16px,2.4vw,22px);letter-spacing:.16em;color:#0a0d0a;
  background:linear-gradient(100deg,var(--bio),#e9ff9a);border:0;padding:11px 26px 12px;position:relative;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);box-shadow:0 0 34px rgba(182,255,61,.24);cursor:pointer}
#enterBtn:hover{filter:brightness(1.08)}
#enterBtn em{font-style:normal;font-family:'Chakra Petch';font-size:8px;letter-spacing:.14em;opacity:.6;margin-left:8px;border:1px solid rgba(0,0,0,.35);padding:1px 4px;vertical-align:middle}
.tcline{font-size:8px;letter-spacing:.24em;color:rgba(242,230,207,.34);text-align:center;margin-top:2px}

/* case file */
.casepanel{width:min(880px,96vw);max-height:92vh;overflow:auto;background:#080c0f;
  border:1px solid rgba(242,230,207,.2);border-top:2px solid var(--bio);padding:clamp(14px,3vw,28px);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.casehead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border-bottom:1px solid rgba(242,230,207,.14);padding-bottom:10px;margin-bottom:14px}
.casekicker{font-size:8.5px;letter-spacing:.3em;color:rgba(182,255,61,.7)}
.casehead h2{margin:3px 0 0;font-family:'Staatliches';font-size:clamp(21px,3.4vw,30px);letter-spacing:.06em;font-weight:400;color:var(--bone);line-height:1}
#caseClose,#caseBtn,#pauseBtn,#soundBtn,#resumeBtn,#restartBtn{font-family:'Chakra Petch';letter-spacing:.16em}
#caseClose{background:transparent;border:1px solid rgba(242,230,207,.25);color:rgba(242,230,207,.6);font-size:8px;padding:5px 8px;white-space:nowrap}
.casegrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px)}
.casecol h3{font-size:9px;letter-spacing:.26em;color:rgba(255,90,31,.7);margin:0 0 5px;font-weight:600}
.casecol p{font-size:11px;line-height:1.5;color:rgba(232,224,208,.72);font-weight:300;margin:0 0 9px}
.hitlist{list-style:none;margin:0 0 10px;padding:0}
.hitlist li{display:flex;justify-content:space-between;gap:10px;padding:5px 7px;border-left:2px solid rgba(194,24,58,.45);background:rgba(194,24,58,.04);margin-bottom:3px;font-size:9.5px;letter-spacing:.13em}
.hitlist li span{color:rgba(242,230,207,.82)}
.hitlist li em{font-style:normal;color:rgba(242,230,207,.36);font-size:8px}
.hitlist li.apex{border-left-color:var(--magenta);background:rgba(255,45,120,.05)}
.hitlist li.apex em{color:rgba(255,120,165,.75)}
.actrow{display:flex;gap:10px;padding:6px 8px;border-left:2px solid rgba(242,230,207,.14);margin-bottom:5px;background:rgba(242,230,207,.02)}
.actrow b{font-family:'Staatliches';font-size:14px;letter-spacing:.08em;color:rgba(242,230,207,.45);min-width:44px}
.actrow span{font-size:9px;line-height:1.45;color:rgba(232,224,208,.5);font-weight:300}
.actrow span em{font-style:normal;display:block;font-weight:600;letter-spacing:.16em;color:rgba(242,230,207,.65);margin-bottom:1px}
.actrow.current{border-left-color:var(--bio);background:rgba(182,255,61,.04)}
.actrow.current b,.actrow.current span em{color:rgba(220,255,150,.9)}
.actrow.locked{opacity:.62}
.casefoot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(242,230,207,.12);margin-top:14px;padding-top:8px;font-size:8px;letter-spacing:.2em;color:rgba(242,230,207,.4);flex-wrap:wrap}

/* pause + death */
.pausepanel,.deathpanel{width:min(520px,94vw);text-align:center;background:#080c0f;border:1px solid rgba(242,230,207,.2);border-top:2px solid var(--sodium);padding:clamp(20px,4vw,36px)}
.pausepanel h2,.deathpanel h2{margin:4px 0 6px;font-family:'Staatliches';font-weight:400;font-size:clamp(30px,6vw,52px);letter-spacing:.09em;color:var(--bone);line-height:.95}
.pausepanel p,.deathpanel p{font-size:11px;line-height:1.5;color:rgba(232,224,208,.65);font-weight:300;margin:0 0 12px}
.pausectrl{font-size:8.5px;line-height:1.7;letter-spacing:.09em;color:rgba(242,230,207,.45);margin-bottom:16px;padding:8px;border-top:1px solid rgba(242,230,207,.12);border-bottom:1px solid rgba(242,230,207,.12)}
#resumeBtn,#restartBtn{font-size:11px;letter-spacing:.2em;padding:10px 20px;border:1px solid rgba(182,255,61,.5);background:rgba(182,255,61,.08);color:#ddffa8;cursor:pointer}
.deathpanel{border-top-color:var(--infect)}
.deathpanel h2{color:#ffb9b9;text-shadow:0 0 30px rgba(194,24,58,.4)}
.deathstats{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.deathstats div{display:flex;flex-direction:column;align-items:center;gap:2px}
.deathstats b{font-family:'Staatliches';font-size:26px;color:var(--bone);letter-spacing:.05em}
.deathstats span{font-size:7.5px;letter-spacing:.2em;color:rgba(242,230,207,.4)}

/* loading */
#loading{position:absolute;inset:0;z-index:40;background:#04050a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .6s ease}
#loading.gone{opacity:0;pointer-events:none}
.loadkicker{font-size:8px;letter-spacing:.34em;color:rgba(0,229,255,.6)}
.loadbar{width:min(260px,60vw);height:4px;background:rgba(242,230,207,.1);overflow:hidden}
#loadfill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--bio));box-shadow:0 0 12px rgba(0,229,255,.6);transition:width .2s ease}
#loadtext{font-family:'Staatliches';font-size:13px;letter-spacing:.24em;color:rgba(242,230,207,.5)}

/* ---------- responsive ---------- */
@media (max-width:720px){
  #titlemark{width:98px}
  #topleft{top:66px;gap:6px;max-width:62vw}
  #vitalblock{padding:6px 8px;gap:7px}
  .vialwrap{height:66px}
  .hpnum{font-size:26px}
  .hpticks{width:80px}
  .weaponslot{height:16px;width:118px}
  .weaponslot span{font-size:7px}
  #furyblock{width:min(200px,58vw);padding:5px 7px 6px}
  #actline{font-size:8px}
  .heatstrip{width:136px}
  #countdownVal{font-size:15px}
  #topbuttons button{font-size:7px;padding:3px 5px}
  #zoneLabel{display:none}
  #topcenter{top:8px;left:112px;right:8px;width:auto;transform:none;align-items:stretch}
  #radio{width:100%;max-width:none;padding:3px 6px 3px 4px;gap:5px}
  #radioText{font-size:8px;line-height:1.25;max-height:2.6em;overflow:hidden}
  .radiometa{font-size:6px;gap:6px}
  .radio-portrait{width:30px;height:30px;flex:0 0 30px}
  .radio-led{width:4px;flex-basis:4px}
  #topright{top:66px}
  #zonecard{top:22%;left:4%}
  .zname{font-size:26px}
  .casegrid{grid-template-columns:1fr}
  .casepanel{max-height:88vh}
  .tcpremise{font-size:10px;line-height:1.5}
  .tcstats{gap:10px}
  .tcstats div{min-width:80px}
  .tccontrols{display:none}
  #titlecard{gap:7px;justify-content:center}
  .tctitle{width:min(86vw,420px);max-height:30vh}
  #controlsHint{display:none}
  #bottomlegend{bottom:8px;gap:3px;padding:5px 6px}
  .legenditem{font-size:6.5px;gap:3px}
  .legenditem img{height:18px}
  .legenddiv img{height:15px}
  .legenddiv{height:18px}
  .rageglyph{width:16px;height:16px;font-size:10px}
}
@media (max-height:520px) and (orientation:landscape){
  #titlecard{gap:5px;padding:8px 22px}
  .tctitle{max-height:38vh;width:auto;max-width:34vw}
  .tcpremise{display:none}
  .tcstats{margin:0}
  .tccontrols{margin-top:0}
  #enterBtn{padding:7px 18px;font-size:15px}
  #topleft{top:58px}
  .vialwrap{height:56px}
  #titlemark{width:90px;top:4px}
  #bottomlegend{bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  #rainoverlay{animation:none}
  #postfx::after{opacity:.03}
}

/* additions */
#scrapline{margin-top:4px;font-size:8px;letter-spacing:.16em;color:rgba(242,230,207,.42)}
#scrapline b{font-family:'Staatliches';font-size:12px;color:rgba(242,230,207,.72);letter-spacing:.04em}
.dossier{list-style:none;margin:0 0 10px;padding:0}
.dossier li{padding:5px 7px;border-left:2px solid rgba(242,230,207,.12);background:rgba(242,230,207,.015);margin-bottom:3px}
.dossier b{display:block;font-size:8.5px;letter-spacing:.16em;color:rgba(242,230,207,.72);margin-bottom:2px;font-weight:600}
.dossier span{display:block;font-size:8.5px;line-height:1.42;color:rgba(232,224,208,.44);font-weight:300}
body.touchmode #syringeline{display:none}
body.touchmode #scrapline{display:none}
body.touchmode .slotholder{display:none}
body.touchmode #actline{display:none}
@media (max-width:720px){
  .radio-portrait{width:36px;height:36px;flex:0 0 36px}
  #radioText{font-size:9px}
}

/* death and pause sit on the bottom edge so the lit city stays visible above */
#death{
  align-items:flex-end;justify-content:center;padding:0;
  background:linear-gradient(to bottom, rgba(2,3,6,.10) 0%, rgba(2,3,6,.18) 34%, rgba(2,3,6,.62) 68%, rgba(2,3,6,.96) 100%);
  backdrop-filter:none;
}
#death .deathpanel{
  width:min(560px,100%);margin:0 auto;padding:16px 22px 18px;
  background:#080c0f;border:0;border-top:2px solid var(--infect);
  box-shadow:0 -18px 60px rgba(0,0,0,.65);
}
#death .deathpanel h2{font-size:clamp(26px,5vw,42px)}
#death .deathstats{margin-bottom:12px}
#death .deathstats b{font-size:23px}
#pause{
  align-items:flex-end;justify-content:center;padding:0;
  background:linear-gradient(to bottom, rgba(2,3,6,.16) 0%, rgba(2,3,6,.28) 38%, rgba(2,3,6,.9) 100%);
  backdrop-filter:none;
}
#pause .pausepanel{
  width:min(560px,100%);margin:0 auto;padding:16px 22px 18px;
  background:#080c0f;border:0;border-top:2px solid var(--sodium);
  box-shadow:0 -18px 60px rgba(0,0,0,.65);
}
@media (max-width:720px){
  #death .deathpanel{padding:12px 16px 14px}
  #death .deathpanel h2{font-size:30px}
  #pause .pausepanel{padding:12px 16px 14px}
}

/* case file: a quarantine dossier sheet over the live city */
#casefile{
  z-index:31;align-items:flex-end;justify-content:center;padding:0;
  background:linear-gradient(to bottom, rgba(2,3,6,.04) 0%, rgba(2,3,6,.18) 36%, rgba(2,3,6,.62) 70%, rgba(2,3,6,.92) 100%);
  backdrop-filter:none;
}
#casefile .casepanel{
  width:min(1000px,100%);max-height:52vh;overflow:auto;
  background:
    linear-gradient(rgba(0,229,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.028) 1px, transparent 1px),
    #080c0f;
  background-size:22px 22px;
  border:0;border-top:2px solid var(--cyan);
  padding:12px clamp(14px,3vw,24px) 18px;
  box-shadow:0 -24px 76px rgba(0,0,0,.75), 0 0 34px rgba(0,229,255,.10);
  position:relative;
}
#casefile .casepanel::before{
  content:"";display:block;height:5px;margin:-12px calc(-1 * clamp(14px,3vw,24px)) 10px;
  background:repeating-linear-gradient(115deg, var(--bio) 0 9px, #0b0d0c 9px 18px);opacity:.85;
}
#casefile .casehead{
  position:sticky;top:0;z-index:3;background:#080c0f;
  border-bottom:1px solid rgba(0,229,255,.22);padding:2px 0 8px;margin-bottom:10px;
}
#casefile .casehead h2{font-size:clamp(18px,2.6vw,25px)}
.casehead-faces{display:flex;gap:5px;margin-top:5px}
.casehead-faces img{width:30px;height:30px;object-fit:cover;border:1px solid rgba(0,229,255,.35);filter:saturate(.85)}
.caseactsline{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px;font-size:7.5px;letter-spacing:.14em;color:rgba(242,230,207,.35)}
.caseactsline .on{color:rgba(182,255,61,.9)}
#casefile .casecol h3{margin-top:8px}
#casefile .casegrid{gap:clamp(12px,2.4vw,26px)}
#casefile .actrow.locked{opacity:.78}
#casefile .casefoot{border-top-color:rgba(0,229,255,.18)}
.pauseactions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:2px}
#pauseCaseBtn{font-size:11px;letter-spacing:.18em;padding:10px 18px;border:1px solid rgba(0,229,255,.45);background:rgba(0,229,255,.07);color:#bdf7ff;cursor:pointer}
#pauseCaseBtn:hover{background:rgba(0,229,255,.14)}
.dossier li.withface{display:flex;gap:8px;align-items:flex-start}
.dossier li.withface > div{min-width:0}
.caseface{width:38px;height:38px;flex:0 0 38px;object-fit:cover;border:1px solid rgba(0,229,255,.28);filter:saturate(.8) contrast(1.04);background:#05080a}
@media (max-width:720px){
  #casefile .casepanel{max-height:46vh;padding:10px 14px 14px}
  #casefile .casehead h2{font-size:19px}
  .caseface{width:32px;height:32px;flex-basis:32px}
  .pauseactions button{flex:1 1 45%}
}

.radio-idle{opacity:.7}
.radio-idle .radio-led{animation-duration:3.4s}

.deathface{display:flex;gap:10px;align-items:center;text-align:left;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid rgba(242,230,207,.14)}
.deathface img{width:54px;height:54px;object-fit:cover;border:1px solid rgba(194,24,58,.55);filter:saturate(.9) contrast(1.04)}
.deathface b{display:block;font-family:'Staatliches';font-size:16px;letter-spacing:.08em;color:var(--bone);line-height:1}
.deathface span{display:block;font-family:'Chakra Petch';font-size:7.5px;letter-spacing:.16em;color:rgba(242,230,207,.42);margin-top:2px}

body.menu-open #touch{display:none!important}

/* ---------- boss bars, act card, apex victory ---------- */
#bossbars{display:flex;flex-direction:column;gap:4px;width:100%;max-width:560px;margin-top:2px}
#bossbars:empty{display:none}
.bossbar{position:relative;padding:5px 8px 6px;background:linear-gradient(100deg,rgba(10,4,8,.94),rgba(18,5,12,.74));border:1px solid rgba(255,45,120,.26);border-left:3px solid var(--magenta);transition:opacity .45s ease,transform .45s ease}
.bossbar.in{animation:bossin .35s ease}
.bossbar.out{opacity:0;transform:translateY(-5px)}
@keyframes bossin{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.bossname{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.bossname .bosstag{font-size:6.5px;letter-spacing:.24em;color:rgba(255,45,120,.7);white-space:nowrap}
.bossname b{font-family:'Staatliches';font-size:14px;letter-spacing:.12em;color:var(--bone);line-height:1;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bossname .bosshp{margin-left:auto;font-style:normal;font-size:7px;letter-spacing:.12em;color:rgba(242,230,207,.45);white-space:nowrap}
.bossmeter{height:8px;background:rgba(8,4,8,.9);border:1px solid rgba(242,230,207,.14);overflow:hidden;transform:skewX(-13deg)}
.bossfill{height:100%;width:100%;background:linear-gradient(90deg,var(--infect),var(--magenta) 62%,#ffb8cd);box-shadow:0 0 12px rgba(255,45,120,.6);transition:width .15s ease}
.bossbar.phase2{border-left-color:var(--infect);box-shadow:0 0 18px rgba(194,24,58,.28)}
.bossbar.phase2 .bossfill{background:linear-gradient(90deg,#7d0a1c,var(--infect) 55%,#ff6a5a)}

#actcard{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%);z-index:24;pointer-events:none;text-align:center;width:min(640px,94vw);padding:12px 20px 16px;background:linear-gradient(90deg,rgba(7,8,13,0),rgba(7,8,13,.92) 16%,rgba(7,8,13,.92) 84%,rgba(7,8,13,0));transition:opacity .85s ease,transform .85s ease}
#actcard.actcard-hidden{opacity:0;transform:translate(-50%,-44%)}
.acstripe{height:5px;background:repeating-linear-gradient(115deg,var(--bio) 0 10px,#0b0d0c 10px 20px);opacity:.8;margin:7px 0}
.ackicker{font-size:8px;letter-spacing:.36em;color:rgba(255,45,120,.8)}
.actitle{font-family:'Staatliches';font-size:clamp(34px,8vw,72px);letter-spacing:.14em;color:var(--bone);line-height:.92;text-shadow:0 0 34px rgba(255,45,120,.42)}
.acname{font-family:'Staatliches';font-size:clamp(19px,4vw,34px);letter-spacing:.2em;color:#ffb0c4;line-height:1}
.acnote{font-size:8.5px;letter-spacing:.3em;color:rgba(242,230,207,.58);margin-top:7px}

#victory{align-items:flex-end;justify-content:center;padding:0;background:linear-gradient(to bottom,rgba(2,3,6,.08) 0%,rgba(2,3,6,.2) 38%,rgba(2,3,6,.92) 100%);backdrop-filter:none}
#victory .victorypanel{width:min(560px,100%);margin:0 auto;padding:16px 22px 18px;text-align:center;background:#080c0f;border:0;border-top:2px solid var(--bio);box-shadow:0 -18px 60px rgba(0,0,0,.65)}
#victory .victorypanel h2{margin:4px 0 6px;font-family:'Staatliches';font-weight:400;font-size:clamp(28px,5.4vw,46px);letter-spacing:.09em;color:#e6ffc2;line-height:.95;text-shadow:0 0 30px rgba(182,255,61,.28)}
#victory .victorypanel p{font-size:11px;line-height:1.5;color:rgba(232,224,208,.66);font-weight:300;margin:0 0 12px}
#victoryBtn{font-family:'Chakra Petch';font-size:11px;letter-spacing:.2em;padding:10px 20px;border:1px solid rgba(182,255,61,.5);background:rgba(182,255,61,.08);color:#ddffa8;cursor:pointer}
#victoryBtn:hover{background:rgba(182,255,61,.16)}
@media (max-width:720px){
  .bossname b{font-size:12px}
  .bossname .bosstag{font-size:6px}
  .bossname .bosshp{display:none}
  #actcard{top:31%}
  #victory .victorypanel{padding:12px 16px 14px}
}