:root{--gold:#c7a35d;--line:#806434;--cream:#f1e5cf;--muted:#aaa;--black:#030403}
*{box-sizing:border-box} html,body{margin:0;width:100%;min-height:100%;min-height:-webkit-fill-available;background:var(--black);color:#eee;font-family:Georgia,'Times New Roman',serif}
body{overflow-x:hidden} button{font:inherit}
.screen{display:none;min-height:100vh;background:#030403;animation:fade .38s ease}.screen.active{display:block}
.cover{position:fixed;transition:opacity .28s ease;inset:0;z-index:100;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 25%,#1b1f19,#050605 58%,#000)}
.coverCard{width:min(700px,92vw);padding:34px 24px;border:none;text-align:center;background:#050605f2;box-shadow:0 22px 80px #000}
.kicker,.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.22em} .coverTitle{font-size:clamp(38px,10vw,68px);line-height:.92;color:var(--cream);margin:13px 0}
.case{color:#d9bb79;letter-spacing:.15em;margin:20px 0 9px} .sub{color:#aaa;line-height:1.5;font-size:14px}
.btn{border:1px solid #a27d3d;background:linear-gradient(#302614,#110d07);color:#f1dca8;padding:15px 20px;letter-spacing:.13em;min-height:60px}
.top{position:absolute;z-index:7;top:max(16px,env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:space-between;gap:12px;color:#d5b36d;font-size:10px;letter-spacing:.11em;text-shadow:0 2px 7px #000}
.statsHead{text-align:right;line-height:1.45}
.statBars{width:min(245px,48vw);display:grid;gap:5px;text-align:left;text-shadow:0 2px 7px #000}
.statBarRow{display:grid;grid-template-columns:74px 1fr 28px;gap:6px;align-items:center}
.statBarLabel{font-size:8px;letter-spacing:.11em;color:#d8c5a0;white-space:nowrap}
.statBarTrack{height:7px;border:1px solid #5d4a2a;background:#090909;overflow:hidden;box-shadow:inset 0 0 6px #000}
.statBarFill{display:block;height:100%;width:0;transition:width .75s cubic-bezier(.2,.75,.25,1);box-shadow:0 0 8px currentColor}
.statBarFill.sanity{background:linear-gradient(90deg,#6d1414,#b84b36);color:#b84b36}
.statBarFill.awareness{background:linear-gradient(90deg,#24445c,#5e9ebd);color:#5e9ebd}
.statBarFill.wisdom{background:linear-gradient(90deg,#6e5222,#d0a34f);color:#d0a34f}
.statBarValue{font-size:9px;color:#efe0bf;text-align:right;font-variant-numeric:tabular-nums}
.scoreMiniTrack{height:7px;border:1px solid #5d4a2a;background:#090909;margin:8px 5px 2px;overflow:hidden}
.scoreMiniFill{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.2,.75,.25,1)}
.scoreMiniFill.sanity{background:linear-gradient(90deg,#6d1414,#b84b36)}
.scoreMiniFill.awareness{background:linear-gradient(90deg,#24445c,#5e9ebd)}
.scoreMiniFill.wisdom{background:linear-gradient(90deg,#6e5222,#d0a34f)}
@media(max-width:430px){.statBars{width:48vw}.statBarRow{grid-template-columns:61px 1fr 24px;gap:4px}.statBarLabel{font-size:7px}.statBarValue{font-size:8px}.statBarTrack{height:6px}}
.hero{height:62vh;min-height:440px;position:relative;overflow:hidden;background:#080808}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05) 54%,rgba(3,4,3,.45) 76%,#030403 100%)}
.content{position:relative;z-index:5;padding:0 18px 36px;margin:-70px auto 0;max-width:760px} h1{font-weight:400;color:var(--cream);font-size:clamp(34px,9vw,50px);line-height:1;margin:8px 0 14px}
.panel{border:1px solid var(--line);background:#050605f2;padding:16px} .story{font-size:clamp(16px,4.2vw,21px);line-height:1.42;margin:0 0 14px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:9px} .choice{border:1px solid #745c31;background:#060606ee;color:#e6cca0;padding:13px 10px;text-align:left;min-height:96px}
.choice b{display:block;font-size:13px;line-height:1.15} .choice small{color:#999;font-size:10px;display:block;margin-top:7px}
.stageText{font-size:clamp(17px,4.5vw,24px);font-style:italic;line-height:1.4;text-align:center;margin:0 0 14px} .pending{display:none;border:1px solid #68542e;padding:8px;color:#caae71;font-size:10px;margin-bottom:12px;text-align:center}
.scoreGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0} .scoreCard{border:1px solid #6d5730;background:#070706;padding:10px 4px;text-align:center}
.scoreCard span{font-size:9px;color:#aaa;letter-spacing:.08em} .scoreCard strong{display:block;color:#e7cf9c;font-size:20px;margin-top:4px} .delta{font-size:11px!important;color:#d6ad61!important}
.lesson{border-top:1px solid #514225;margin-top:15px;padding-top:14px;color:#c8c0b1;font-size:14px;line-height:1.45} .final{place-items:center;padding:24px;background:radial-gradient(circle,#162019,#030403 65%)}.screen.final{display:none}.screen.final.active{display:grid}
.sound{position:fixed;z-index:120;right:12px;bottom:max(12px,env(safe-area-inset-bottom));border:1px solid var(--line);background:#060606e8;color:#d9ba75;padding:10px 13px;border-radius:30px;font-size:11px}
.progress{position:fixed;z-index:110;left:12px;bottom:max(12px,env(safe-area-inset-bottom));color:#bca36e;font-size:10px;background:#050605d9;border:1px solid #554626;padding:8px 10px;border-radius:20px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(max-width:440px){.hero{height:57vh;min-height:410px}.content{padding-left:14px;padding-right:14px}.choices{gap:7px}.choice{min-height:91px;padding:11px 8px}}
@media(min-width:700px){.hero{height:auto;min-height:0;background:#030403;display:flex;align-items:center;justify-content:center;padding:0;overflow:visible}.hero img{width:auto;height:auto;max-width:100%;max-height:72vh;object-fit:contain;object-position:center center;image-rendering:auto}.content{margin-top:-92px}}

.gateBox{margin-top:18px;border:1px solid #806434;background:#070706;padding:18px;text-align:center}
.gateBox.pass{box-shadow:0 0 28px rgba(199,163,93,.16)}
.gateBox.fail{border-color:#75483d}
.gateTitle{font-size:12px;letter-spacing:.18em;color:#c7a35d;margin-bottom:8px}
.gateResult{font-size:30px;line-height:1;color:#f1e5cf;margin:5px 0 10px}
.gateText{font-size:14px;line-height:1.45;color:#bbb;margin-bottom:14px}
.nextEpisode{display:none;width:100%;margin-top:10px}
.failReplay{display:none;width:100%;margin-top:10px}

#fadeTransition{position:fixed;inset:0;z-index:9999;background:#000;opacity:0;pointer-events:none;transition:opacity .65s ease}
#fadeTransition.on{opacity:1;pointer-events:auto}

#replay{display:none}
#replay.caseComplete{display:block}

#gameIntro{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:max(14px,env(safe-area-inset-top)) 14px max(22px,env(safe-area-inset-bottom));background:#020302}
#gameIntro.hidden{display:none}
.introWrap{width:min(680px,100%);margin:auto;text-align:center}
.introPoster{width:100%;height:auto;display:block;border:1px solid #6f572f;box-shadow:0 18px 60px #000}
.introEnter{width:100%;margin-top:14px;position:sticky;bottom:max(8px,env(safe-area-inset-bottom));box-shadow:0 10px 30px #000}
.introHint{margin:9px 0 0;color:#8f8064;font-size:10px;letter-spacing:.08em}


.choiceTimer{margin:0 0 12px;padding:10px 12px;border:1px solid #6f572f;background:#0a0907;color:#d7bd8d;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.choiceTimer strong{color:#fff0cf;font-size:15px;margin-left:5px}
.choiceTimer.urgent{border-color:#9e5c32;color:#f0b78c;animation:timerPulse .8s ease-in-out infinite alternate}
@keyframes timerPulse{from{box-shadow:0 0 0 rgba(158,92,50,0)}to{box-shadow:0 0 16px rgba(158,92,50,.35)}}
.introRules{margin-top:14px;border:1px solid #6f572f;background:#070706;padding:14px 16px;text-align:left;color:#cdbb9e}
.introRules .rulesTitle{color:#e6cca0;font-size:12px;letter-spacing:.18em;text-align:center;margin-bottom:9px}
.introRules ul{margin:0;padding-left:18px;font-size:12px;line-height:1.55}
.introRules li+li{margin-top:5px}

@keyframes horrorShake{0%,100%{transform:translate(0)}20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-5px,-2px)}80%{transform:translate(5px,4px)}}
body.horrorShake{animation:horrorShake .42s linear 2;overflow-x:hidden} #horrorFlash{position:fixed;inset:0;z-index:9998;background:#8b0000;opacity:0;pointer-events:none;mix-blend-mode:screen} #horrorFlash.on{animation:hflash .5s ease}@keyframes hflash{0%{opacity:0}15%{opacity:.55}30%{opacity:0}45%{opacity:.35}100%{opacity:0}}

.episodeCoverPoster{width:100%;height:auto;max-height:54vh;object-fit:contain;display:block;margin:16px auto 18px;border:none;box-shadow:none;background:#000}
@media (max-width:700px){.cover{overflow-y:auto;place-items:start center}.coverCard{margin:auto 0}.episodeCoverPoster{max-height:48vh}}

#embeddedAssets{display:none!important;visibility:hidden!important;width:0!important;height:0!important;overflow:hidden!important}
#gameIntro .introPoster{display:block;width:100%;height:auto;max-height:none;object-fit:contain;margin:0 auto 18px;background:#000}

/* EPISODE 1 OPENING CUTSCENE */
#cutsceneOverlay{position:fixed;inset:0;z-index:20000;background:#000;display:none;align-items:center;justify-content:center;overflow:hidden;opacity:1;transition:opacity 1s ease}
#cutsceneOverlay.active{display:flex}
#cutsceneOverlay.dissolve{opacity:0}
#episodeCutscene{width:100%;height:100%;object-fit:contain;background:#000;display:block}
#skipCutscene,#cutscenePlayFallback{position:absolute;z-index:20002;border:1px solid #9b7b43;background:rgba(0,0,0,.72);color:#ead4aa;font-family:Georgia,serif;letter-spacing:.08em;padding:12px 16px;border-radius:999px;min-height:46px}
#skipCutscene{right:16px;top:max(16px,env(safe-area-inset-top))}
#cutscenePlayFallback{left:50%;top:50%;transform:translate(-50%,-50%);display:none;font-size:18px;padding:15px 22px}
#cutsceneLoading{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:#c7ae7d;font-family:Georgia,serif;letter-spacing:.12em;font-size:12px;opacity:.85;pointer-events:none}
/* 2026-08-30: episode cover UI borders removed; PLAYABLE TRIAL retired. */

/* =========================================================
   MZSE INTERACTION FX v3 — HARD FALLBACK
   Kept in app.css so effects do not depend only on JS-injected CSS.
   ========================================================= */
#choices .choice.mzChoiceEnter{
  opacity:0;
  transform:translateY(18px) scale(.965);
  filter:blur(2px);
  transition:opacity .42s ease,transform .5s cubic-bezier(.2,.8,.2,1),filter .4s ease,box-shadow .2s ease;
  pointer-events:none;
}
#choices .choice.mzChoiceEnter.mzShow{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:none;
  pointer-events:auto;
}
#choices .choice.mzSelected{
  position:relative;
  z-index:2;
  opacity:1!important;
  transform:scale(1.04)!important;
  filter:none!important;
  box-shadow:0 0 0 2px rgba(215,181,109,.9),0 0 28px rgba(215,181,109,.2),0 14px 34px rgba(0,0,0,.52)!important;
}
#choices .choice.mzDismissed{
  opacity:.14!important;
  transform:scale(.96)!important;
  filter:grayscale(.65) blur(.8px)!important;
  pointer-events:none!important;
}
#choices .choice.mzRiskySelected{
  box-shadow:0 0 0 2px rgba(88,155,218,.95),0 0 30px rgba(88,155,218,.28)!important;
}
#choices .choice.mzDangerSelected{
  box-shadow:0 0 0 2px rgba(204,56,56,.98),0 0 34px rgba(204,56,56,.38)!important;
}

#mzChoiceImpactFX{
  position:fixed;
  inset:0;
  z-index:9994;
  pointer-events:none;
  opacity:0;
}
#mzAtmosphereFX{
  position:fixed;
  inset:0;
  z-index:9991;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
}
#mzChapterTransition{
  position:fixed;
  inset:0;
  z-index:9997;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  background:rgba(3,4,3,.96);
  opacity:0;
  pointer-events:none;
}
#mzProgressDots{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  min-height:10px;
}
#mzProgressDots .mzDot{
  width:7px;
  height:7px;
  border-radius:50%;
  border:1px solid rgba(210,186,132,.55);
  background:transparent;
}
#mzProgressDots .mzDot.mzDone{
  background:#9d824b;
  border-color:#b99a5d;
}
#mzProgressDots .mzDot.mzCurrent{
  width:9px;
  height:9px;
  background:#ead9ad;
  border-color:#ead9ad;
  box-shadow:0 0 9px rgba(234,217,173,.42);
  animation:mzFxDotPulse 1.6s ease-in-out infinite;
}
@keyframes mzFxDotPulse{
  0%,100%{transform:scale(1);opacity:.82}
  50%{transform:scale(1.3);opacity:1}
}