/* ===================== Shadow & Silk — noir UI ===================== */
:root{
  --ink:#0a0b0e; --ink2:#101218; --panel:#14161d; --panel2:#1b1e27;
  --edge:#2a2f3a; --edge-soft:#20242e;
  --fog:#c7ccd6; --fog-dim:#8b919e; --fog-faint:#5b616d;
  --silk:#b8273a;        /* blood / silk red */
  --silk-soft:#7d1c28;
  --neon:#39c2c9;        /* cold cyan neon */
  --neon-warm:#e0b352;   /* whiskey amber */
  --gold:#caa75a;
  --ok:#5fae7a; --warn:#cf8a3a; --bad:#b8273a;
  --rad:10px; --shadow:0 18px 50px rgba(0,0,0,.6);
  --serif:"Georgia","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 70% -10%, #16202b 0%, transparent 60%),
    radial-gradient(900px 600px at 10% 110%, #1a1213 0%, transparent 55%),
    var(--ink);
  color:var(--fog); font-family:var(--sans); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* atmospheric layers */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:60;
  background:radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.72) 100%);}
#rain{position:fixed;inset:0;pointer-events:none;z-index:55;opacity:.5;
  background-image:
    repeating-linear-gradient(101deg, rgba(180,200,220,.06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(99deg, rgba(180,200,220,.045) 0 1px, transparent 1px 12px);
  animation:rain 0.55s linear infinite;}
@keyframes rain{from{background-position:0 0,0 0}to{background-position:-30px 340px,18px 300px}}
body.calm-rain #rain{opacity:.22;animation-duration:1.1s}

/* ===================== screens ===================== */
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:28px;z-index:10;animation:fade .5s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===================== title ===================== */
.title-wrap{text-align:center;max-width:680px}
.game-title{font-family:var(--serif);font-size:clamp(46px,9vw,104px);letter-spacing:.04em;
  font-weight:400;line-height:.95;text-shadow:0 4px 30px rgba(0,0,0,.8);}
.game-title .amp{color:var(--silk);font-style:italic}
.tagline{margin:18px auto 30px;color:var(--fog-dim);font-family:var(--serif);
  font-style:italic;font-size:clamp(14px,2vw,18px);max-width:520px}
.title-menu{display:flex;flex-direction:column;gap:12px;max-width:330px;margin:0 auto}
.rating-note{margin-top:26px;color:var(--fog-faint);font-size:12px}

/* ===================== buttons ===================== */
.btn{appearance:none;cursor:pointer;background:var(--panel2);color:var(--fog);
  border:1px solid var(--edge);border-radius:var(--rad);padding:13px 18px;font-size:15px;
  font-family:var(--sans);transition:.18s;text-align:left;letter-spacing:.01em}
.btn:hover:not(:disabled){background:#232733;border-color:var(--neon);color:#fff;
  transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-major{background:linear-gradient(180deg,#2a2026,#1a1316);border-color:var(--silk-soft);
  font-weight:600}
.btn-major:hover:not(:disabled){border-color:var(--silk);box-shadow:0 0 24px rgba(184,39,58,.3)}
.btn.full{width:100%}
.row-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}

/* ===================== panels ===================== */
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  padding:30px;box-shadow:var(--shadow);width:100%}
.panel.narrow{max-width:620px;max-height:86vh;overflow:auto}
h2{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:14px;letter-spacing:.02em}
.muted{color:var(--fog-dim);line-height:1.65;margin-bottom:12px}
.small{font-size:12.5px}
.subtle{color:var(--fog-faint)}

/* ===================== settings toggles ===================== */
.set-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--edge-soft)}
.set-row:last-child{border-bottom:none}
.set-label{font-size:14.5px}
.set-desc{color:var(--fog-faint);font-size:12px;margin-top:3px;max-width:340px}
.seg{display:flex;border:1px solid var(--edge);border-radius:8px;overflow:hidden;flex:none}
.seg button{background:var(--ink2);color:var(--fog-dim);border:none;padding:7px 12px;
  cursor:pointer;font-size:12.5px}
.seg button.on{background:var(--silk-soft);color:#fff}

/* ===================== HUD ===================== */
#game-screen{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0}
#hud{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;
  background:linear-gradient(180deg,rgba(8,9,12,.95),rgba(8,9,12,.55));
  border-bottom:1px solid var(--edge-soft);z-index:20}
.hud-left{display:flex;gap:10px;align-items:center;min-width:0}
.hud-chip{font-size:12.5px;color:var(--neon);text-transform:uppercase;letter-spacing:.12em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
.hud-chip.subtle{color:var(--fog-faint);text-transform:none;letter-spacing:.02em;font-style:italic}
.hud-right{display:flex;gap:6px}
.hud-btn{background:transparent;border:1px solid var(--edge);color:var(--fog-dim);
  padding:7px 11px;border-radius:8px;cursor:pointer;font-size:12.5px;transition:.15s}
.hud-btn:hover{border-color:var(--neon);color:#fff}
.hud-btn.flash{animation:flash 1s ease 2}
@keyframes flash{50%{border-color:var(--silk);color:#fff;box-shadow:0 0 14px rgba(184,39,58,.4)}}

/* ===================== stage ===================== */
#stage{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.scene-art{height:38%;min-height:150px;background:#0c0e13 center/cover no-repeat;
  border-bottom:1px solid var(--edge-soft);position:relative;transition:background-image .6s}
.scene-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,11,14,.9) 100%)}
.scene-art.placeholder{display:flex;align-items:center;justify-content:center}
.scene-art.placeholder span{color:var(--fog-faint);font-family:var(--serif);font-style:italic;
  font-size:14px;letter-spacing:.1em;z-index:1}
.scene-body{flex:1;overflow:auto;padding:22px clamp(16px,5vw,60px) 40px;
  max-width:920px;margin:0 auto;width:100%}
.scene-body.flip{animation:sceneFade .45s ease}
@keyframes sceneFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* speaker portrait, floats over the lower art */
.portrait{position:absolute;left:clamp(8px,3vw,34px);top:calc(38% - 96px);height:150px;width:112px;
  object-fit:cover;border:1px solid var(--edge);border-radius:10px;z-index:5;
  box-shadow:0 14px 34px rgba(0,0,0,.7);background:#0c0e13;
  filter:contrast(1.05) saturate(.9);animation:portraitIn .5s ease}
.portrait.hidden{display:none}
@keyframes portraitIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:680px){.portrait{height:104px;width:78px;top:calc(38% - 70px)}}

/* narrative prose */
.prose{font-family:var(--serif);font-size:clamp(16px,2.1vw,19px);line-height:1.75;
  color:var(--fog);margin-bottom:16px;animation:fade .5s}
.prose.dim{color:var(--fog-dim)}
.prose em{color:var(--neon-warm);font-style:italic}
.line-vo{border-left:2px solid var(--silk-soft);padding-left:14px;color:var(--fog-dim);font-style:italic}

/* speaker bar */
#speaker-bar{padding:8px 16px;background:rgba(8,9,12,.9);border-top:1px solid var(--edge-soft);
  font-family:var(--serif);font-style:italic;color:var(--gold);font-size:13px;letter-spacing:.05em}

/* choices / tactics */
.choices{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.choice{display:flex;gap:12px;align-items:flex-start;background:var(--panel2);
  border:1px solid var(--edge);border-radius:var(--rad);padding:13px 15px;cursor:pointer;
  transition:.16s;text-align:left;width:100%;color:var(--fog);font-size:15px;line-height:1.45}
.choice:hover{border-color:var(--neon);background:#232733;transform:translateX(3px)}
.choice .tac{flex:none;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  padding:3px 8px;border-radius:20px;border:1px solid var(--edge);color:var(--fog-faint);
  margin-top:1px;min-width:74px;text-align:center}
.tac.press{color:#e08a8a;border-color:#5a2a2a}
.tac.charm{color:#d8a0c8;border-color:#5a2a50}
.tac.threaten{color:#e0655a;border-color:#6a2a22}
.tac.bargain{color:var(--neon-warm);border-color:#5a4a22}
.tac.empathize{color:#7fb8c2;border-color:#2a4a52}
.tac.silence{color:#9aa0ac;border-color:#3a3f4a}
.tac.lie{color:#9a7fc2;border-color:#3a2a52}
.tac.reveal{color:var(--neon);border-color:#1c5a5e}
.tac.act{color:var(--gold);border-color:#5a4a22}
.choice.locked{opacity:.4;cursor:not-allowed;border-style:dashed}
.choice.locked:hover{transform:none;border-color:var(--edge);background:var(--panel2)}
.choice .req{display:block;font-size:11px;color:var(--fog-faint);font-style:italic;margin-top:3px}

/* continue prompt */
.continue-row{margin-top:22px;display:flex;justify-content:flex-end}

/* ===================== investigation ===================== */
.investigate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;margin-top:18px}
.poi{background:var(--panel2);border:1px solid var(--edge);border-radius:var(--rad);
  padding:14px;cursor:pointer;transition:.16s;position:relative}
.poi:hover{border-color:var(--neon);transform:translateY(-2px)}
.poi.found{border-color:var(--silk-soft)}
.poi h4{font-family:var(--serif);font-weight:400;font-size:16px;margin-bottom:5px}
.poi p{color:var(--fog-faint);font-size:12.5px;line-height:1.4}
.poi .tag{position:absolute;top:8px;right:10px;font-size:10px;color:var(--silk);
  text-transform:uppercase;letter-spacing:.1em}
.objective-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.obj-pill{font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid var(--edge);
  color:var(--fog-dim)}
.obj-pill.done{border-color:var(--ok);color:var(--ok);text-decoration:line-through;opacity:.7}

/* ===================== combat ===================== */
.combat-log{font-family:var(--serif);font-size:16px;line-height:1.7;color:var(--fog);
  margin-bottom:8px;min-height:120px}
.combat-log .hit{color:var(--silk)}
.combat-log .you{color:var(--neon)}
.health-row{display:flex;gap:20px;margin:14px 0;flex-wrap:wrap}
.meter{flex:1;min-width:180px}
.meter label{font-size:12px;color:var(--fog-dim);text-transform:uppercase;letter-spacing:.1em}
.bar{height:9px;background:var(--ink2);border:1px solid var(--edge);border-radius:6px;
  overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--silk),var(--neon-warm));
  transition:width .4s}
.bar.enemy i{background:linear-gradient(90deg,#6a2a22,var(--silk))}

/* ===================== overlay ===================== */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,7,.78);backdrop-filter:blur(3px);padding:24px;animation:fade .25s}
.overlay-card{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  width:min(980px,96vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.overlay-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;
  border-bottom:1px solid var(--edge-soft)}
.btn-x{background:transparent;border:none;color:var(--fog-dim);font-size:20px;cursor:pointer;
  width:36px;height:36px;border-radius:8px}
.btn-x:hover{background:var(--panel2);color:#fff}
.overlay-body{padding:22px;overflow:auto}

/* evidence list */
.ev-item{border:1px solid var(--edge-soft);border-radius:var(--rad);padding:14px 16px;
  margin-bottom:10px;background:var(--panel2)}
.ev-item h4{font-family:var(--serif);font-weight:400;font-size:17px;display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.ev-state{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;
  border-radius:20px;border:1px solid var(--edge);color:var(--fog-faint);flex:none}
.ev-state.collected{color:var(--neon);border-color:#1c5a5e}
.ev-state.shown{color:var(--neon-warm);border-color:#5a4a22}
.ev-state.destroyed,.ev-state.lost{color:var(--bad);border-color:var(--silk-soft)}
.ev-item p{color:var(--fog-dim);font-size:13.5px;line-height:1.55;margin-top:6px}
.ev-points{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.ev-points span{font-size:11px;color:var(--fog-faint);border:1px solid var(--edge-soft);
  border-radius:6px;padding:2px 7px}
.empty-note{color:var(--fog-faint);font-style:italic;font-family:var(--serif);text-align:center;
  padding:30px}

/* case board */
.board-states{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.board-state{font-size:11px;padding:5px 10px;border-radius:20px;border:1px solid var(--edge);
  color:var(--fog-faint)}
.board-state.cur{border-color:var(--silk);color:var(--silk)}
.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.board-grid{grid-template-columns:1fr}}
.board-col h3{font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:10px;
  color:var(--gold);border-bottom:1px solid var(--edge-soft);padding-bottom:6px}
.pin{background:var(--panel2);border:1px solid var(--edge);border-left:3px solid var(--silk-soft);
  border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:13.5px}
.pin .who{color:var(--fog-faint);font-size:11px;font-style:italic;margin-top:3px}
.deduction{background:linear-gradient(180deg,#1a1a14,#15140f);border:1px solid #4a4222;
  border-radius:8px;padding:12px 14px;margin-bottom:10px}
.deduction h4{font-family:var(--serif);font-weight:400;color:var(--gold);font-size:15px;margin-bottom:4px}
.deduction p{font-size:13px;color:var(--fog-dim);line-height:1.5}
.deduction.locked{opacity:.55;border-color:var(--edge-soft);background:var(--panel2)}
.deduction.locked h4{color:var(--fog-faint)}
.question{font-size:13px;color:var(--fog-dim);padding:8px 0;border-bottom:1px dashed var(--edge-soft);
  font-style:italic;font-family:var(--serif)}
.deduce-btn{margin-top:6px;font-size:12px;padding:6px 10px}

/* jack state */
.stat-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--edge-soft)}
.stat-row b{color:var(--fog)}
.stat-val{color:var(--neon-warm)}
.rel-card{border:1px solid var(--edge-soft);border-radius:var(--rad);padding:12px 14px;margin-bottom:10px;
  background:var(--panel2)}
.rel-card h4{font-family:var(--serif);font-weight:400;font-size:16px;margin-bottom:8px}
.rel-bars{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.rel-line{font-size:12px;color:var(--fog-dim);display:flex;justify-content:space-between}

/* menu list */
.menu-list{display:flex;flex-direction:column;gap:10px}

/* toast */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--silk-soft);border-radius:10px;
  padding:13px 20px;z-index:80;box-shadow:var(--shadow);opacity:0;transition:.3s;
  font-size:14px;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .t-title{color:var(--silk);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  display:block;margin-bottom:3px}
/* field pager skin — sickly green LCD */
.toast.pager{border-color:#0f6e56;background:#0b130f;font-family:"Courier New",monospace;
  box-shadow:0 0 18px rgba(15,110,86,.35),var(--shadow)}
.toast.pager .t-title{color:#6fe39a;letter-spacing:.2em}
.toast.pager{color:#6fe39a;text-shadow:0 0 6px rgba(80,200,120,.4);letter-spacing:.06em}
body.reduce-bloom .toast.pager{text-shadow:none;box-shadow:var(--shadow)}

.hidden{display:none !important}
.row{display:flex;gap:10px;flex-wrap:wrap}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--edge);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--silk-soft)}

/* reduced motion / accessibility */
body.reduce-motion #rain{animation:none;opacity:.18}
body.reduce-motion *{animation-duration:.001s !important}
body.high-contrast{--fog:#fff;--fog-dim:#cfd4dd;--panel2:#222631}

/* ===================== Case Board — the string wall ===================== */
.cb-wall{position:relative;height:460px;margin:18px 0 10px}
.cb-strings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.cb-line{stroke-linecap:round}
.cb-line.solid{stroke:var(--silk);stroke-width:2.2}
.cb-line.loose{stroke:var(--silk-soft);stroke-width:1.8;stroke-dasharray:6 6;opacity:.85}
.cb-card{position:absolute;transform:translate(-50%,-50%);width:128px;background:var(--panel2);
  border:1px solid var(--edge);border-radius:8px;padding:11px 11px 12px;cursor:pointer;z-index:3;
  text-align:left;color:var(--fog);transition:transform .15s,border-color .15s}
.cb-card:hover:not(.gone){border-color:var(--neon);transform:translate(-50%,-50%) translateY(-2px)}
.cb-pin{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;
  background:var(--silk);border:1px solid var(--silk-soft);transform:translateX(-50%);
  box-shadow:0 2px 5px rgba(0,0,0,.6)}
.cb-name{display:block;font-family:var(--serif);font-size:13.5px;line-height:1.25}
.cb-meta{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fog-faint);margin-top:5px}
.cb-card.risk{border-color:var(--silk-soft)}
.cb-card.risk:after{content:"";position:absolute;right:-4px;bottom:-4px;width:30px;height:30px;
  border-radius:50%;background:radial-gradient(circle,rgba(184,39,58,.6),transparent 70%);pointer-events:none}
.cb-card.gone{opacity:.55;cursor:default;border-style:dashed}
.cb-burn{position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,0,0,.75),transparent 62%)}
.cb-burn:before,.cb-burn:after{content:"";position:absolute;top:50%;left:50%;width:135%;height:6px;
  background:rgba(10,11,14,.92)}
.cb-burn:before{transform:translate(-50%,-50%) rotate(24deg)}
.cb-burn:after{transform:translate(-50%,-50%) rotate(-24deg)}
.cb-ded{position:absolute;transform:translate(-50%,-50%);width:152px;z-index:4;
  background:linear-gradient(180deg,#1a1a14,#15140f);border:1px solid #4a4222;border-radius:8px;padding:9px 11px}
.cb-ded.loose{border-color:var(--edge-soft);background:var(--panel2);border-style:dashed}
.cb-ded-title{font-family:var(--serif);color:var(--gold);font-size:13px;line-height:1.3;cursor:pointer}
.cb-ded.loose .cb-ded-title{color:var(--fog-faint);cursor:default}
.cb-ded-text{font-size:11.5px;color:var(--fog-dim);line-height:1.45;margin-top:6px;display:none}
.cb-ded.show-text .cb-ded-text{display:block}
.cb-foot{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.cb-col h3{font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:10px;color:var(--gold);
  border-bottom:1px solid var(--edge-soft);padding-bottom:6px}
@media(max-width:720px){.cb-foot{grid-template-columns:1fr}.cb-wall{height:540px}}

/* ===================== Evidence Inspection — the long look ===================== */
.li-stage{position:relative;height:230px;border-radius:10px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;
  background:radial-gradient(150px 130px at 50% 45%,rgba(224,179,82,.16),transparent 70%),#070809}
.li-wrap.lit .li-stage{background:
  radial-gradient(220px 200px at 60% 42%,rgba(57,194,201,.14),transparent 72%),
  radial-gradient(150px 140px at 50% 45%,rgba(224,179,82,.2),transparent 70%),#070809}
.li-obj{width:240px;min-height:140px;background:linear-gradient(180deg,#23252c,#1a1c22);
  border:1px solid var(--edge);border-radius:6px;padding:16px;transition:transform .4s;
  box-shadow:0 18px 40px rgba(0,0,0,.7)}
.li-objname{font-family:var(--serif);font-size:16px;color:var(--fog);margin-bottom:8px}
.li-objdesc{font-size:12px;color:var(--fog-faint);line-height:1.5;font-family:var(--serif)}
.li-rail{display:flex;gap:6px;flex-wrap:wrap;padding:12px 0 4px}
.li-tool{background:transparent;border:1px solid var(--edge);color:var(--fog-dim);border-radius:7px;
  padding:7px 11px;font-size:12px;cursor:pointer;font-family:var(--sans);transition:.14s}
.li-tool:hover{border-color:var(--neon);color:#fff}
.li-tool.on{border-color:var(--gold);color:var(--gold)}
.li-vo{border-left:2px solid var(--silk-soft);padding-left:13px;color:var(--neon-warm);font-style:italic;
  font-family:var(--serif);font-size:14.5px;line-height:1.6;margin:6px 0 14px;min-height:46px}
.li-points{display:flex;flex-direction:column;gap:8px}
.li-point{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--edge-soft);border-radius:8px;padding:10px 13px;background:var(--panel2);
  cursor:pointer;color:var(--fog);font-size:13.5px;font-family:var(--serif)}
.li-point:hover{border-color:var(--neon)}
.li-point.marked{border-color:var(--gold)}
.li-point .tick{color:var(--fog-faint);flex:none}
.li-point.marked .tick{color:var(--gold)}
.li-point.hidden-pt{display:none}
.li-wrap.lit .li-point.hidden-pt{display:flex}
.li-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.li-compare{background:var(--ink2);border:1px solid var(--edge);color:var(--fog);border-radius:8px;
  padding:9px 10px;font-family:var(--sans);font-size:13px}
.li-cmp-note{font-size:12.5px;color:var(--fog-dim);font-style:italic;margin-top:10px;line-height:1.5;
  font-family:var(--serif)}

/* ===================== Pause — the open case folder ===================== */
.pf-tabs{display:flex;gap:3px;flex-wrap:wrap;padding-left:6px}
.pf-tab{background:var(--panel2);border:1px solid var(--edge);border-bottom:none;border-radius:7px 7px 0 0;
  padding:8px 13px;font-size:12.5px;color:var(--fog-dim);cursor:pointer;position:relative;top:1px;
  font-family:var(--sans)}
.pf-tab:hover{color:#fff}
.pf-tab.on{background:#d8d2c2;color:#23201a;top:0;padding-bottom:9px}
.pf-folder{background:linear-gradient(180deg,#d8d2c2,#cdc6b4);border:1px solid #b3ab95;
  border-radius:0 10px 10px 10px;min-height:300px;display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden}
.pf-folder:before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:1px;
  background:rgba(60,52,38,.18)}
.pf-page{padding:20px 22px;color:#3a352a}
.pf-page.left{border-right:1px dashed rgba(60,52,38,.2)}
.pf-h{font-family:var(--serif);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#7a3038;
  margin:0 0 14px;border-bottom:1px solid rgba(60,52,38,.25);padding-bottom:6px}
.pf-row{margin-bottom:14px}
.pf-row .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a8067}
.pf-row .v{font-family:var(--serif);font-size:15px;color:#23201a;margin-top:2px}
.pf-led{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.pf-led span{font-size:10px;padding:2px 8px;border-radius:20px;border:1px solid #b3ab95;color:#8a8067}
.pf-led span.cur{border-color:#7a3038;color:#7a3038;font-weight:600}
.pf-note{font-family:var(--serif);font-style:italic;color:#6d6450;font-size:13px;line-height:1.6}
.pf-list{list-style:none;margin:0;padding:0}
.pf-list li{display:flex;justify-content:space-between;font-family:var(--serif);font-size:13.5px;
  padding:8px 0;border-bottom:1px dashed rgba(60,52,38,.2);color:#3a352a}
.pf-list li .st{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8a8067}
.pf-list li .st.vis{color:#3b6d11}
.pf-list li .st.here{color:#7a3038;font-weight:600}
.pf-pbtn{background:#23201a;border:1px solid #3a352a;color:#e8e2d2;border-radius:7px;padding:10px 15px;
  font-size:13px;cursor:pointer;font-family:var(--sans);transition:.15s;margin-top:6px}
.pf-pbtn:hover{background:#3a352a}
.pf-pbtn.danger{background:#7a3038;border-color:#5a1e24}
.pf-pbtn.danger:hover{background:#9a2530}
.pf-stamp{position:absolute;right:16px;bottom:14px;font-family:var(--serif);font-size:13px;
  letter-spacing:.18em;color:rgba(122,48,56,.7);border:2px solid rgba(122,48,56,.6);border-radius:5px;
  padding:4px 10px;transform:rotate(-9deg);pointer-events:none}
@media(max-width:680px){.pf-folder{grid-template-columns:1fr}
  .pf-page.left{border-right:none;border-bottom:1px dashed rgba(60,52,38,.2)}}

/* settings — category groups */
.set-group-h{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--gold);letter-spacing:.04em;
  margin:22px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--edge-soft)}
.set-group-h:first-child{margin-top:0}

/* ===================== Injury Mirror — the man in the glass ===================== */
.mr-stage{position:relative;display:flex;gap:18px;align-items:stretch;
  background:radial-gradient(150px 150px at 20% 42%,rgba(224,179,82,.13),transparent 70%),var(--ink2);
  border:1px solid var(--edge);border-radius:12px;padding:18px;margin-bottom:18px}
.mr-mirror{position:relative;width:178px;height:208px;flex:none;border-radius:80px 80px 12px 12px;
  background:radial-gradient(110px 140px at 50% 36%,#1a1d24,#0b0d11 72%);
  border:6px solid #15171c;overflow:hidden;box-shadow:inset 0 0 36px rgba(0,0,0,.8)}
.mr-bust{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:118px;height:172px;transition:transform .4s}
.mr-head{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:66px;height:76px;
  border-radius:33px 33px 30px 30px;background:linear-gradient(180deg,#2b2f38,#171a20)}
.mr-eyes{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:40px;display:flex;justify-content:space-between}
.mr-eyes span{width:13px;height:4px;border-radius:3px;background:#0a0b0e}
.mr-shoulder{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:118px;height:86px;
  border-radius:56px 56px 0 0;background:linear-gradient(180deg,#23262d,#121419)}
.mr-bars{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(96deg,transparent 0 24px,rgba(0,0,0,.4) 24px 30px)}
.mr-bruise{position:absolute;left:40%;top:36px;width:28px;height:22px;border-radius:50%;z-index:3;
  background:radial-gradient(circle,rgba(125,90,138,.6),transparent 70%)}
.mr-blood{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:56px;height:56px;z-index:3;
  background:radial-gradient(circle at 60% 0,rgba(125,28,40,.7),transparent 60%)}
.mr-mark{position:absolute;width:14px;height:14px;border-radius:50%;border:1px solid var(--silk);z-index:4;
  background:rgba(184,39,58,.25);transform:translate(-50%,-50%)}
.mr-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.mr-vo{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.6;color:var(--neon-warm);
  border-left:2px solid var(--silk-soft);padding-left:13px;margin-bottom:12px}
.mr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mr-tag{font-size:11px;color:var(--fog-dim);border:1px solid var(--edge);border-radius:20px;padding:3px 10px}
.mr-bearing{font-size:12px;color:var(--fog-faint);font-style:italic;font-family:var(--serif);margin-bottom:10px}
.mr-cyl{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fog-faint)}
.mr-cyl b{display:flex;gap:3px}
.mr-cyl i{width:10px;height:10px;border-radius:50%;border:1px solid #3a3f4a;background:#0e1014;display:inline-block}
.mr-cyl i.r{background:#8b919e;border-color:#aab0bc}
.mr-aside{font-family:var(--serif);font-style:italic;color:var(--fog-faint);font-size:12.5px;
  line-height:1.6;margin-bottom:18px}
.mr-stage.broken .mr-bust{transform:translateX(-50%) translateY(8px) rotate(-4deg)}
.mr-stage.dangerous .mr-eyes span{height:3px;background:#5a1118}
@media(max-width:560px){.mr-stage{flex-direction:column;align-items:center}}

/* ===================== Main Menu — rain window + file-folder tabs ===================== */
#title-screen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(520px 360px at 82% 6%,rgba(57,194,201,.16),transparent 60%),
    radial-gradient(460px 340px at 10% 98%,rgba(184,39,58,.14),transparent 60%);
  animation:titleGlow 7s ease-in-out infinite}
#title-screen::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 15px,rgba(6,8,11,.42) 15px 21px);
  opacity:.55;mix-blend-mode:multiply}
@keyframes titleGlow{0%,100%{opacity:.8}50%{opacity:1}}
body.reduce-motion #title-screen::before{animation:none}
.title-wrap{position:relative;z-index:2}
.title-menu .btn{text-align:left;padding-left:18px;background:linear-gradient(180deg,#23242a,#191a1f);
  border-left:3px solid var(--silk-soft);transition:transform .18s,border-color .18s,background .18s}
.title-menu .btn:hover:not(:disabled){transform:translateX(8px);border-left-color:var(--neon)}
.title-menu .btn.btn-major{border-left-color:var(--silk)}
.title-menu .btn:disabled{border-left-color:var(--edge)}

/* ===================== Answering Machine — the tape remembers ===================== */
.am-head{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(180deg,#1c1d22,#141519);
  border:1px solid var(--edge);border-radius:10px;margin-bottom:12px}
.am-led{width:11px;height:11px;border-radius:50%;background:#3a3f4a;flex:none}
.am-led.blink{background:var(--silk);box-shadow:0 0 9px rgba(184,39,58,.8);animation:amBlink 1.1s infinite}
@keyframes amBlink{50%{opacity:.25;box-shadow:none}}
.am-new{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e08a8a}
.am-counter{margin-left:auto;font-family:"Courier New",monospace;font-size:20px;color:var(--neon);
  background:var(--ink);border:1px solid var(--edge-soft);border-radius:5px;padding:2px 11px;letter-spacing:.1em}
.am-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.am-msg{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;
  border:1px solid var(--edge-soft);border-radius:9px;background:var(--panel2);cursor:pointer;
  color:var(--fog);transition:.14s}
.am-msg:hover{border-color:var(--neon)}
.am-msg.sel{border-color:var(--gold);background:#191b21}
.am-msg.heard{opacity:.55}
.am-mi{flex:none;width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.05em}
.am-mi.client{background:rgba(57,194,201,.12);color:var(--neon)}
.am-mi.threat{background:rgba(184,39,58,.14);color:#e0655a}
.am-mi.lead{background:rgba(224,179,82,.14);color:var(--neon-warm)}
.am-mi.missed{background:rgba(139,145,158,.12);color:var(--fog-dim)}
.am-who{font-family:var(--serif);font-size:14.5px;display:flex;flex-direction:column;gap:2px}
.am-sub{font-size:11px;color:var(--fog-faint);font-family:var(--sans)}
.am-tag{margin-left:auto;flex:none;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;border:1px solid var(--edge);color:var(--fog-faint)}
.am-tag.threat{color:#e0655a;border-color:#6a2a22}
.am-tag.lead{color:var(--neon-warm);border-color:#5a4a22}
.am-tag.client{color:var(--neon);border-color:#1c5a5e}
.am-read{border-top:1px solid var(--edge-soft);padding-top:14px}
.am-readhead{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-faint);margin-bottom:8px}
.am-transcript{font-family:var(--serif);font-size:14.5px;line-height:1.7;color:var(--fog);min-height:48px}

/* ===================== In-scene HUD — nearly invisible ===================== */
/* objective/location whisper fades after a beat; full again on hover or scene change */
.hud-left{transition:opacity .8s}
body.hud-quiet #hud .hud-left{opacity:.28}
#hud:hover .hud-left{opacity:1}
body.reduce-motion #hud .hud-left{opacity:1}

/* diegetic state cues — injury (warm red) + DeMarco's attention (cold cyan). No bars. */
#cue-injury,#cue-threat{position:fixed;inset:0;pointer-events:none;z-index:57;transition:box-shadow .7s}
body:not(.in-game) #cue-injury,body:not(.in-game) #cue-threat{box-shadow:none !important}
body.in-game.inj-1 #cue-injury{box-shadow:inset 0 0 80px 8px rgba(184,39,58,.16)}
body.in-game.inj-2 #cue-injury{box-shadow:inset 0 0 95px 14px rgba(184,39,58,.26)}
body.in-game.inj-3 #cue-injury{box-shadow:inset 0 0 115px 20px rgba(184,39,58,.40)}
body.in-game.inj-4 #cue-injury{box-shadow:inset 0 0 135px 28px rgba(184,39,58,.55)}
body.in-game.threat-1 #cue-threat{box-shadow:inset 0 0 70px 8px rgba(57,194,201,.14)}
body.in-game.threat-2 #cue-threat{box-shadow:inset 0 0 90px 14px rgba(57,194,201,.24)}
body.in-game.threat-3 #cue-threat{box-shadow:inset 0 0 110px 20px rgba(57,194,201,.34)}
body.reduce-motion #cue-injury,body.reduce-motion #cue-threat{transition:none}

/* ===================== accessibility wiring ===================== */
/* immersive mode — hide dialogue/combat tactic pills (intent must live in the text) */
body.immersive .tac{display:none}
/* reduce neon bloom — calm the glows for photosensitivity */
body.reduce-bloom #cue-threat{display:none}
body.reduce-bloom #title-screen::before{animation:none;opacity:.4}
body.reduce-bloom .hud-btn.flash,body.reduce-bloom #messages-btn.flash{animation:none}
body.reduce-bloom .game-title{text-shadow:none}
/* explicit status readout in the injury mirror (cognitive aid) */
.mr-explicit{font-size:11px;color:var(--fog-dim);font-family:var(--sans);letter-spacing:.02em;
  border-top:1px solid var(--edge-soft);padding-top:8px;margin-top:4px}