/* Blood Detective — noir theme. Ported from design/ui-mockups/ui-kit-demo.html.
   Pure CSS/SVG visual system: works with zero AI raster (assets/img is empty at build time). */

:root{
  --bg:#0b0b0e; --panel:#141419; --panel2:#0e0e12; --ink:#ece7da; --ink-dim:#8f897c;
  --blood:#8a0303; --neon:#ff2438; --brass:#c9a24b; --brass-dim:#7a6532;
  --line:#2a2a31; --good:#6fae7a; --cold:#5b7fa6;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:#000;color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
body{overflow:hidden;position:fixed;inset:0;}

/* ---------- global FX overlays ---------- */
#grain{position:fixed;inset:0;pointer-events:none;z-index:990;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:985;
  box-shadow:inset 0 0 160px 40px rgba(0,0,0,.85);}
/* red-tear flash: the FX3/FX10 blood pulse */
#tear{position:fixed;inset:0;pointer-events:none;z-index:986;opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,36,56,0),rgba(138,3,3,.55) 92%);}
#tear.go{animation:tear .55s ease;}
@keyframes tear{0%{opacity:0;}18%{opacity:1;}100%{opacity:0;}}
#tear.breathe{animation:breathe 2.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:0;}50%{opacity:.5;}}
#flash{position:fixed;inset:0;z-index:988;background:#fff;opacity:0;pointer-events:none;}
#flash.go{animation:flashWhite .4s ease;}
@keyframes flashWhite{0%{opacity:0;}12%{opacity:.85;}100%{opacity:0;}}

/* ---------- app frame ---------- */
#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;z-index:1;}
#boot{margin:auto;color:var(--ink-dim);letter-spacing:.3em;text-transform:uppercase;font-size:13px;}

/* ---------- STAGE (bg + sprites + fx) ---------- */
#stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:#000;}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:filter .6s ease, opacity .5s ease;transform:scale(1.06);}
#bg.night{filter:brightness(.5) saturate(.7) hue-rotate(-8deg);}
#bg.enter{animation:bgIn .8s ease;}
@keyframes bgIn{from{opacity:0;transform:scale(1.12);}to{opacity:1;transform:scale(1.06);}}
#bg.ph{background:radial-gradient(120% 80% at 50% 0%, #23232c 0%, #121218 55%, #08080b 100%);}
#bg.ph::after{content:attr(data-scene);position:absolute;left:50%;top:calc(52px + var(--safe-t));
  transform:translateX(-50%);color:#3a3a44;font-size:11px;letter-spacing:.25em;text-transform:uppercase;}

#sprites{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  gap:2vw;padding:0 4vw calc(30vh + var(--safe-b));pointer-events:none;}
.sprite{position:relative;max-height:64vh;display:flex;flex-direction:column;align-items:center;
  transition:opacity .4s ease, transform .4s ease, filter .4s ease;opacity:.5;transform:translateY(8px);}
.sprite.active{opacity:1;transform:translateY(0);}
.sprite.dim{opacity:.32;filter:brightness(.5) grayscale(.4);}
.sprite img{max-height:60vh;max-width:42vw;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.7));}
.sprite.step-back{transform:translateY(0) scale(.94);opacity:.8;}
.sprite.push-in{transform:translateY(0) scale(1.06);}
.sprite .ph-sprite{width:34vw;max-width:210px;height:44vh;max-height:330px;
  border:1px solid var(--brass-dim);border-radius:6px;
  background:linear-gradient(180deg,rgba(30,30,38,.7),rgba(12,12,18,.85));
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:14px;box-shadow:inset 0 0 40px rgba(0,0,0,.8);position:relative;}
.sprite .ph-sprite::before{content:"";position:absolute;top:16%;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#2c2c36,#15151b);border:1px solid var(--line);}
.sprite .ph-name{color:var(--brass);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,0,0,.55);padding:4px 10px;border:1px solid var(--brass-dim);z-index:1;}
.sprite .ph-mood{color:var(--ink-dim);font-size:10px;letter-spacing:.14em;margin-top:5px;text-transform:uppercase;z-index:1;}

/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l));
  background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);}
#hud .title{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);flex:0 0 auto;}
#hud .spacer{flex:1;}
.hud-btn{background:rgba(10,10,14,.6);color:var(--ink-dim);border:1px solid var(--line);
  width:40px;height:40px;border-radius:6px;font-size:16px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:.15s;font-family:inherit;position:relative;}
.hud-btn:hover,.hud-btn:active{border-color:var(--brass);color:var(--brass);}
.hud-btn .badge{position:absolute;top:-6px;right:-6px;background:var(--blood);color:#fff;
  font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;padding:0 4px;letter-spacing:0;}
#lead-meter{position:absolute;top:var(--safe-t);left:0;height:3px;width:0;background:transparent;z-index:41;
  transition:width .8s ease, background .8s ease;pointer-events:none;}

/* ---------- DIALOGUE ---------- */
#dialogue{position:absolute;left:0;right:0;bottom:0;z-index:30;
  padding:0 calc(14px + var(--safe-r)) calc(16px + var(--safe-b)) calc(14px + var(--safe-l));
  transition:opacity .3s ease;}
.diag{position:relative;margin:0 auto;max-width:680px;
  background:linear-gradient(180deg,rgba(22,22,28,.96),rgba(10,10,16,.97));
  border:1px solid var(--line);padding:18px 22px 20px;min-height:112px;
  box-shadow:0 -6px 30px rgba(0,0,0,.6);cursor:pointer;}
.diag::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--blood),transparent);}
.diag .who{color:var(--neon);letter-spacing:.2em;text-transform:uppercase;font-size:12px;
  margin-bottom:9px;min-height:14px;}
.diag .txt{line-height:1.72;font-size:17px;}
.diag.thought .txt{font-style:italic;color:#c8c2b4;}
.diag.thought .who{color:var(--brass-dim);}
.diag.note{border-left:3px solid var(--brass);background:linear-gradient(180deg,rgba(20,18,14,.96),rgba(10,9,7,.97));}
.diag.note .who{color:var(--brass);}
.diag.note .txt{color:#b7ad97;font-size:15px;}
.cursor{display:inline-block;width:8px;height:16px;background:var(--ink);margin-left:3px;
  vertical-align:-2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.tap-hint{position:absolute;right:16px;bottom:10px;color:var(--brass);font-size:20px;
  animation:bob 1.1s ease-in-out infinite;opacity:.8;}
@keyframes bob{50%{transform:translateY(4px);}}

/* ---------- CHOICES ---------- */
#choices{position:absolute;left:0;right:0;bottom:0;z-index:35;display:flex;flex-direction:column;
  gap:10px;align-items:center;
  padding:0 calc(16px + var(--safe-r)) calc(22px + var(--safe-b)) calc(16px + var(--safe-l));}
#choices .prompt{max-width:640px;width:100%;font-style:italic;color:var(--ink);font-size:15px;
  border-left:2px solid var(--blood);padding:6px 0 6px 14px;margin-bottom:4px;
  background:linear-gradient(90deg,rgba(0,0,0,.6),transparent);}
.choice{width:100%;max-width:640px;background:linear-gradient(180deg,rgba(20,20,26,.95),rgba(12,12,18,.96));
  color:var(--ink);border:1px solid var(--brass-dim);padding:15px 18px;text-align:left;
  font-family:inherit;font-size:16px;line-height:1.5;cursor:pointer;transition:.15s;}
.choice:hover,.choice:active{border-color:var(--brass);color:#fff;
  box-shadow:0 0 18px rgba(201,162,75,.22);transform:translateX(3px);}
.choice.tone-menace{border-color:var(--blood);}
.choice.tone-menace:hover{border-color:var(--neon);box-shadow:0 0 18px rgba(255,36,56,.3);}
.choice .tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin-right:8px;vertical-align:1px;}

/* ---------- OVERLAY (minigames / casefile / hub / endings) ---------- */
#overlay{position:absolute;inset:0;z-index:60;display:none;
  background:rgba(4,4,6,.9);
  padding:calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
#overlay.show{display:block;}
.ov-wrap{max-width:700px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;}
.ov-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:18px;}
.ov-head .h{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);}
.ov-head .sub{color:var(--ink-dim);font-size:12px;letter-spacing:.06em;}
.ov-close{background:transparent;border:1px solid var(--line);color:var(--ink-dim);
  width:36px;height:36px;border-radius:6px;cursor:pointer;font-size:16px;font-family:inherit;flex:0 0 auto;}
.ov-close:hover{border-color:var(--brass);color:var(--brass);}

/* ---------- ART DECO FRAME ---------- */
.frame{position:relative;background:#0e0e13;border:2px solid var(--brass-dim);
  box-shadow:inset 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.9),0 6px 20px rgba(0,0,0,.6);}
.frame .corner{position:absolute;width:24px;height:24px;stroke:var(--brass);fill:none;stroke-width:1.4;opacity:.9;}
.frame .tl{top:5px;left:5px;} .frame .tr{top:5px;right:5px;transform:scaleX(-1);}
.frame .bl{bottom:5px;left:5px;transform:scaleY(-1);} .frame .br{bottom:5px;right:5px;transform:scale(-1,-1);}
.frame .inner{position:absolute;inset:8px;border:1px solid var(--brass-dim);opacity:.5;pointer-events:none;}
.frame .pad{position:absolute;inset:12px;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;}
.frame .pad img{max-width:100%;max-height:100%;object-fit:contain;}
.prop-ph{width:70%;aspect-ratio:1;border:1px solid var(--brass-dim);border-radius:4px;
  background:radial-gradient(circle at 40% 35%,#2a2a33,#131318);display:flex;align-items:center;
  justify-content:center;color:var(--brass-dim);font-size:26px;}

/* ---------- CASE FILE ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:14px;}
.ev-cell{cursor:pointer;transition:transform .15s;}
.ev-cell:hover{transform:translateY(-4px);}
.ev-cell .frame{aspect-ratio:1;}
.ev-cell .en{font-size:11px;text-align:center;color:var(--ink-dim);margin-top:6px;letter-spacing:.04em;line-height:1.3;}
.ev-cell.core .frame{border-color:var(--brass);}
.ev-detail{display:flex;gap:18px;align-items:flex-start;padding:6px 0;flex-wrap:wrap;}
.ev-detail .frame{width:150px;height:150px;flex:0 0 auto;}
.ev-detail .meta{flex:1;min-width:220px;}
.ev-detail .meta .n{color:var(--brass);letter-spacing:.1em;text-transform:uppercase;font-size:13px;margin-bottom:8px;}
.ev-detail .meta .d{line-height:1.7;font-size:15px;color:#cfc9bb;}
.empty-note{color:var(--ink-dim);font-style:italic;text-align:center;padding:40px 0;}

/* ---------- HUB ---------- */
.hub-intro{font-style:italic;color:#cfc9bb;line-height:1.7;margin-bottom:22px;font-size:16px;}
.spot{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:linear-gradient(180deg,rgba(20,20,26,.9),rgba(12,12,18,.95));
  border:1px solid var(--brass-dim);color:var(--ink);padding:16px 18px;margin-bottom:12px;
  cursor:pointer;font-family:inherit;font-size:16px;transition:.15s;}
.spot:hover{border-color:var(--brass);transform:translateX(3px);box-shadow:0 0 16px rgba(201,162,75,.18);}
.spot .ic{width:30px;text-align:center;font-size:18px;color:var(--brass);flex:0 0 auto;}
.spot .lbl{flex:1;}
.spot.done{opacity:.5;}
.spot.done .lbl::after{content:" ✓";color:var(--good);}
.spot.locked{opacity:.4;cursor:not-allowed;border-style:dashed;}
.spot.locked:hover{transform:none;box-shadow:none;border-color:var(--brass-dim);}
.spot.wait{border-color:var(--blood);margin-top:10px;}
.spot.wait .ic{color:var(--neon);}
.spot.wait:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- BLOOD MEMORY ---------- */
.bm-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;flex:1;justify-content:center;}
.bm-top{display:flex;align-items:center;gap:20px;width:100%;max-width:520px;justify-content:space-between;}
.bm-instr{font-style:italic;color:#cfc9bb;font-size:15px;flex:1;line-height:1.5;}
.bm-vial{flex:0 0 auto;}
.bm-grid{display:grid;gap:10px;width:min(90vw,440px);}
.bm-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#1a1a20,#101015);border:1px solid var(--brass-dim);
  color:var(--ink);font-size:min(7vw,30px);cursor:pointer;transition:.12s;position:relative;overflow:hidden;}
.bm-cell::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(138,3,3,.5),transparent 70%);opacity:0;transition:opacity .2s;}
.bm-cell:hover{border-color:var(--brass);}
.bm-cell.hit{border-color:var(--brass);color:var(--brass);pointer-events:none;animation:cellHit .35s ease;}
.bm-cell.hit::after{opacity:1;}
@keyframes cellHit{0%{transform:scale(1);}40%{transform:scale(.9);}100%{transform:scale(1);}}
.bm-cell.miss{animation:shake .35s;border-color:var(--neon);}
.bm-cell.living{background:linear-gradient(180deg,#2a1416,#170a0c);}
.bm-cell.living.hit::after{background:radial-gradient(circle,rgba(255,36,56,.6),transparent 70%);}
.bm-next{color:var(--ink-dim);font-size:14px;letter-spacing:.1em;}
.bm-next b{color:var(--neon);font-size:20px;}

/* ---------- SCENE SEARCH ---------- */
.ss-stage{position:relative;width:100%;aspect-ratio:3/4;max-height:60vh;margin:0 auto;
  border:1px solid var(--line);overflow:hidden;background-size:cover;background-position:center;}
.ss-stage.ph{background:radial-gradient(120% 90% at 50% 20%,#20202a,#0c0c11);}
.ss-hot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;}
.ss-hot .ping{position:absolute;inset:0;border-radius:50%;border:1px solid var(--brass);opacity:0;}
.ss-hot.hint .ping{animation:ping 1.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(.6);opacity:.8;}100%{transform:scale(1.5);opacity:0;}}
.ss-hot.found{pointer-events:none;}
.ss-hot.found .dot{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brass);
  background:radial-gradient(circle,rgba(201,162,75,.25),transparent 70%);}
.ss-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
.ss-count{color:var(--ink-dim);font-size:13px;letter-spacing:.08em;}
.ss-count b{color:var(--brass);}
.ss-flavor{min-height:52px;margin-top:12px;padding:12px 16px;border-left:2px solid var(--brass-dim);
  background:rgba(0,0,0,.4);font-style:italic;color:#cfc9bb;line-height:1.6;font-size:15px;
  opacity:0;transition:opacity .3s;}
.ss-flavor.show{opacity:1;}

/* ---------- INTERROGATION ---------- */
.int-wrap{display:flex;flex-direction:column;gap:14px;flex:1;}
.fear-row{display:flex;align-items:center;gap:12px;}
.fear-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);flex:0 0 auto;}
.fear-track{flex:1;height:10px;background:#15151b;border:1px solid var(--line);position:relative;overflow:hidden;}
.fear-fill{height:100%;width:0;background:linear-gradient(90deg,var(--brass-dim),var(--neon));transition:width .5s ease;}
.fear-track.spike{animation:shake .3s;}
.fear-thresh{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--blood);opacity:.7;}
.int-say{padding:14px 18px;background:linear-gradient(180deg,rgba(22,22,28,.9),rgba(10,10,16,.95));
  border:1px solid var(--line);border-top:2px solid var(--blood);line-height:1.7;font-size:16px;min-height:80px;}
.int-say .react{color:var(--ink-dim);font-style:italic;font-size:14px;display:block;margin-bottom:6px;}
.int-topics{display:flex;flex-direction:column;gap:9px;}
.int-topic{background:linear-gradient(180deg,rgba(20,20,26,.9),rgba(12,12,18,.95));
  border:1px solid var(--brass-dim);color:var(--ink);padding:13px 16px;text-align:left;
  font-family:inherit;font-size:15px;cursor:pointer;transition:.15s;display:flex;justify-content:space-between;gap:10px;}
.int-topic:hover{border-color:var(--brass);}
.int-topic.done{opacity:.55;}
.int-topic.done::after{content:"✓";color:var(--good);}
.int-topic.locked{opacity:.35;cursor:not-allowed;border-style:dashed;}
.int-tones{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px;}
.tone-btn{flex:1;min-width:88px;background:transparent;border:1px solid var(--brass-dim);color:var(--ink);
  padding:11px 8px;letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-family:inherit;
  cursor:pointer;transition:.15s;}
.tone-btn:hover{border-color:var(--brass);color:var(--brass);}
.tone-btn.menace{border-color:var(--blood);color:#e0b8b8;}
.tone-btn.menace:hover{border-color:var(--neon);color:var(--neon);}
.tone-btn:disabled{opacity:.3;cursor:not-allowed;}
.tone-btn .ct{display:block;font-size:10px;color:var(--ink-dim);margin-top:3px;letter-spacing:0;}
.int-evrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.int-ev{background:rgba(20,20,26,.9);border:1px solid var(--brass-dim);color:var(--ink-dim);
  padding:7px 11px;font-size:12px;cursor:pointer;font-family:inherit;letter-spacing:.04em;transition:.15s;}
.int-ev:hover{border-color:var(--brass);color:var(--brass);}
.int-actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;}
.breakthrough{border-color:var(--brass)!important;box-shadow:0 0 20px rgba(201,162,75,.4)!important;}

/* ---------- DEDUCTION ---------- */
.ded-q{font-style:italic;color:var(--ink);font-size:17px;margin-bottom:20px;
  border-left:2px solid var(--blood);padding-left:14px;}
.deck{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.dcard{width:120px;cursor:pointer;transition:transform .16s;position:relative;}
.dcard .frame{width:120px;height:120px;}
.dcard .name{font-size:11px;text-align:center;margin-top:8px;letter-spacing:.04em;color:var(--ink-dim);line-height:1.3;}
.dcard:hover{transform:translateY(-6px);}
.dcard:hover .frame{border-color:var(--brass);}
.dcard.sel .frame{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 0 22px rgba(201,162,75,.4);}
.dcard.correct .frame{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass),0 0 30px rgba(201,162,75,.7);animation:pulse .5s ease;}
.dcard.wrong{animation:shake .35s;}
.dcard.wrong .frame{border-color:var(--neon);box-shadow:0 0 0 2px var(--neon),0 0 30px rgba(255,36,56,.7);}
@keyframes pulse{50%{transform:translateY(-6px) scale(1.05);}}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}
.ded-hint{margin-top:18px;padding:12px 16px;border-left:2px solid var(--neon);background:rgba(40,8,10,.5);
  color:#e8c9c9;font-size:14px;line-height:1.6;display:none;}
.ded-hint.show{display:block;}
.ded-progress{text-align:center;color:var(--ink-dim);font-size:12px;letter-spacing:.2em;margin-top:22px;}

/* ---------- VERDICT ---------- */
.verdict-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;text-align:center;min-height:70vh;}
.verdict-prompt{font-size:20px;letter-spacing:.04em;line-height:1.6;max-width:520px;color:var(--ink);}
.verdict-narr{font-style:italic;color:#cfc9bb;line-height:1.8;max-width:560px;font-size:16px;}
.verdict-choices{display:flex;flex-direction:column;gap:12px;width:100%;max-width:460px;}
.verdict-opt{background:linear-gradient(180deg,rgba(20,20,26,.95),rgba(12,12,18,.96));
  border:1px solid var(--brass-dim);color:var(--ink);padding:18px;font-family:inherit;font-size:16px;
  cursor:pointer;transition:.18s;line-height:1.5;}
.verdict-opt:hover{border-color:var(--brass);transform:scale(1.02);}
.split{display:flex;width:100%;max-width:640px;gap:0;min-height:200px;}
.split-half{flex:1;padding:26px 18px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;
  justify-content:center;gap:10px;border:1px solid var(--line);}
.split-half .st{font-size:12px;letter-spacing:.2em;text-transform:uppercase;}
.split-half .tx{font-size:17px;line-height:1.5;}
.split-cold{background:linear-gradient(180deg,rgba(20,30,44,.6),rgba(10,14,22,.8));}
.split-cold .st{color:var(--cold);}
.split-cold:hover{background:linear-gradient(180deg,rgba(30,44,66,.8),rgba(14,20,32,.9));flex:1.3;}
.split-crimson{background:linear-gradient(180deg,rgba(50,6,8,.7),rgba(24,4,6,.85));}
.split-crimson .st{color:var(--neon);}
.split-crimson:hover{background:linear-gradient(180deg,rgba(80,8,10,.9),rgba(36,4,6,.95));flex:1.3;}

/* ---------- ENDING ---------- */
#ending{position:absolute;inset:0;z-index:70;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;background:#000;
  padding:calc(30px + var(--safe-t)) 24px calc(30px + var(--safe-b));}
#ending.show{display:flex;animation:fadeIn 1.6s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
#ending .drop{width:3px;height:0;background:var(--blood);margin-bottom:26px;animation:drop 1.4s ease .6s forwards;}
@keyframes drop{to{height:60px;}}
#ending .etitle{font-size:30px;letter-spacing:.14em;text-transform:uppercase;font-weight:normal;margin:0 0 14px;color:var(--ink);}
#ending .esub{color:var(--ink-dim);font-style:italic;font-size:17px;line-height:1.7;max-width:520px;margin-bottom:10px;}
#ending .enote{color:#6a6558;font-size:13px;line-height:1.7;max-width:520px;margin:18px 0 30px;
  border-top:1px solid var(--line);padding-top:18px;}
#ending .ebtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ---------- TITLE (cinematic cover) ---------- */
#title{position:absolute;inset:0;z-index:80;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 30%,#1a1216 0%,#0a0a0e 60%,#050506 100%);}
#title.hide{display:none;}
/* full-bleed cover art + detective cutout, sharing one slow ken-burns so they stay locked */
#title .title-bg,#title .title-fg{position:absolute;inset:0;background-size:cover;background-position:50% 46%;
  background-repeat:no-repeat;transform:scale(1.04);transform-origin:50% 42%;
  animation:kenburns 32s ease-in-out infinite alternate;}
#title .title-bg{z-index:1;}
/* detective cut out of the same cover — sits ABOVE the title so text runs behind the figure */
#title .title-fg{z-index:6;pointer-events:none;}
@keyframes kenburns{from{transform:scale(1.04) translateY(0);}to{transform:scale(1.09) translateY(-0.9%);}}
/* rain over the art, under the text */
.rain-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;}
.rain-lightning{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, #d6e2ff 0%, #9fb2dc 55%, transparent 100%);
  opacity:0;mix-blend-mode:screen;}
.rain-lightning.flash{animation:bolt .8s ease;}
@keyframes bolt{0%{opacity:0;}5%{opacity:.5;}9%{opacity:.12;}15%{opacity:.68;}26%{opacity:.05;}100%{opacity:0;}}
/* legibility scrim: dark at top (title) & bottom (menu), art breathes in the middle */
#title .title-scrim{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,7,.72) 0%,rgba(4,4,7,.22) 24%,transparent 42%,
    transparent 54%,rgba(4,4,7,.42) 76%,rgba(4,4,7,.9) 100%);}

/* ---- title block: top, over the cloudy sky ---- */
#title .title-top{position:absolute;top:16%;left:0;right:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;
  animation:titleIn 1.5s ease both;}
@keyframes titleIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}
#title .brand{margin:0;line-height:.94;font-weight:normal;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;}
#title .brand .b1{font-size:min(17vw,76px);letter-spacing:.14em;text-indent:.14em;color:#cf2230;
  text-shadow:0 0 26px rgba(255,36,56,.55),0 0 7px rgba(138,3,3,.95);animation:brandGlow 4.5s ease-in-out infinite;}
#title .brand .b2{font-size:min(11.5vw,50px);letter-spacing:.36em;text-indent:.36em;color:var(--ink);
  margin-top:.05em;text-shadow:0 2px 18px rgba(0,0,0,.92);}
@keyframes brandGlow{0%,100%{text-shadow:0 0 22px rgba(255,36,56,.42),0 0 6px rgba(138,3,3,.9);}
  50%{text-shadow:0 0 36px rgba(255,36,56,.72),0 0 11px rgba(138,3,3,1);}}
#title .title-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0 12px;}
#title .title-rule i{display:block;width:min(15vw,60px);height:1px;background:linear-gradient(90deg,transparent,var(--brass-dim));}
#title .title-rule i:last-child{background:linear-gradient(90deg,var(--brass-dim),transparent);}
#title .title-rule span{color:var(--blood);font-size:10px;text-shadow:0 0 8px var(--neon);}
#title .tag{color:#c2bbac;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  font-size:min(3.1vw,12px);text-shadow:0 1px 9px rgba(0,0,0,.95);}

/* ---- menu: bottom, over the wet street ---- */
#title .title-menu{position:absolute;left:0;right:0;bottom:calc(60px + var(--safe-b));z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:2px;}
.menu-item{position:relative;background:none;border:0;cursor:pointer;font-family:inherit;
  color:#d8d2c5;text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;font-size:16px;
  padding:13px 24px;transition:color .2s,letter-spacing .2s;text-shadow:0 1px 11px rgba(0,0,0,.96);
  opacity:0;animation:menuIn .6s ease forwards;}
.menu-item:nth-of-type(1){animation-delay:.7s;} .menu-item:nth-of-type(2){animation-delay:.86s;}
@keyframes menuIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.menu-item::before{content:"◆";position:absolute;left:4px;top:50%;transform:translateY(-50%) scale(.4);
  color:var(--neon);font-size:8px;opacity:0;transition:.22s;text-shadow:0 0 8px var(--neon);}
.menu-item::after{content:"";position:absolute;left:50%;right:50%;bottom:8px;height:1px;
  background:var(--blood);box-shadow:0 0 8px var(--neon);transition:left .28s,right .28s;}
.menu-item:hover,.menu-item:active{color:#fff;letter-spacing:.37em;}
.menu-item:hover::after,.menu-item:active::after{left:24%;right:24%;}
.menu-item:hover::before{opacity:1;transform:translateY(-50%) scale(1);}
.menu-item.primary{color:#f2e8de;font-size:18px;}
.menu-item:disabled{opacity:.26;cursor:not-allowed;pointer-events:none;}
.menu-item:disabled::after{display:none;}
#title .foot{position:absolute;bottom:calc(18px + var(--safe-b));left:0;right:0;z-index:7;text-align:center;
  color:#6d685b;font-size:11px;letter-spacing:.14em;text-shadow:0 1px 6px rgba(0,0,0,.9);}

/* .big-btn kept for the in-game menu overlay */
.big-btn{background:transparent;color:var(--ink);border:1px solid var(--brass-dim);padding:16px 20px;
  letter-spacing:.18em;text-transform:uppercase;font-size:14px;font-family:inherit;cursor:pointer;transition:.15s;}
.big-btn:hover,.big-btn:active{border-color:var(--brass);color:var(--brass);box-shadow:0 0 18px rgba(201,162,75,.25);}
.big-btn.primary{border-color:var(--blood);color:#e8d0d0;}
.big-btn.primary:hover{border-color:var(--neon);color:#fff;box-shadow:0 0 22px rgba(255,36,56,.3);}
.big-btn:disabled{opacity:.35;cursor:not-allowed;}
@media (prefers-reduced-motion: reduce){.rain-lightning{display:none;}
  #title .title-bg,#title .title-fg,#title .title-top,.menu-item,#title .brand .b1{animation:none;}
  .menu-item{opacity:1;}}

/* toast */
#toast{position:absolute;left:50%;top:calc(64px + var(--safe-t));transform:translateX(-50%) translateY(-20px);
  z-index:50;background:rgba(14,14,19,.95);border:1px solid var(--brass);color:var(--brass);
  padding:11px 20px;font-size:13px;letter-spacing:.08em;opacity:0;transition:.3s;pointer-events:none;
  display:flex;align-items:center;gap:10px;max-width:90vw;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast .ti{font-size:16px;}

/* screen shake / tilt / freeze */
#app.shake{animation:appShake .4s;}
@keyframes appShake{0%,100%{transform:translate(0,0);}25%{transform:translate(-4px,2px);}
  50%{transform:translate(3px,-3px);}75%{transform:translate(-2px,3px);}}
#app.tilt #stage{transform:rotate(1.6deg) scale(1.05);transition:transform .8s ease;}
#app.freeze #bg,#app.freeze #sprites{filter:grayscale(1) contrast(1.2);transition:filter .2s;}

.hidden{display:none!important;}

/* desktop: phone-shaped, centered without transform (keeps #app.shake intact) */
@media (min-width:820px){
  #app{left:calc(50% - 240px);right:auto;width:480px;box-shadow:0 0 80px rgba(0,0,0,.95);border-left:1px solid #17171d;border-right:1px solid #17171d;}
}