:root{
  --cream:#f4ecdf;
  --cream-dim:rgba(244,236,223,.62);
  --brass:#c6a36a;
  --brass-hot:#e7c98a;
  --ink:#07070b;
  --line:rgba(244,236,223,.32);
  --grn:#c6a36a;
  --grn-dim:rgba(198,163,106,.55);
  --red:#c4493a;
  --bg:#07070b;
  /* iOS and the web fill env(). Capacitor also sets --safe-area-inset-* on Android. */
  --inset-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --inset-right: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
  --inset-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --inset-left: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:"Outfit",system-ui,sans-serif;color:var(--cream);
  touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;}
canvas{display:block;position:fixed;inset:0;z-index:0;}
#hud,#overlays{position:fixed;inset:0;pointer-events:none;z-index:4;}

#crosshair{position:absolute;left:50%;top:50%;width:22px;height:22px;
  transform:translate(-50%,-50%);opacity:.9;display:none;}
#crosshair:before,#crosshair:after{content:"";position:absolute;background:var(--cream);
  box-shadow:0 0 4px rgba(0,0,0,.65);}
#crosshair:before{left:0;top:10px;width:6px;height:2px;box-shadow:16px 0 0 var(--cream), 0 0 4px rgba(0,0,0,.65);}
#crosshair:after{left:10px;top:0;width:2px;height:6px;box-shadow:0 16px 0 var(--cream), 0 0 4px rgba(0,0,0,.65);}

#healthWrap{position:absolute;left:max(22px, var(--inset-left));bottom:max(22px, var(--inset-bottom));top:auto;width:250px;display:none;
  padding:12px 14px 13px;background:linear-gradient(180deg, rgba(12,11,14,.2), rgba(7,7,11,.72));
  border:1px solid rgba(244,236,223,.16);border-left:2px solid var(--brass);}
#healthLabel{font-size:10px;letter-spacing:.34em;color:var(--brass-hot);margin-bottom:8px;}
#healthBar{height:7px;background:rgba(244,236,223,.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);}
#healthFill{height:100%;width:100%;background:linear-gradient(90deg,#8a6230,var(--brass-hot));
  box-shadow:0 0 10px rgba(231,201,138,.45);transition:width .15s;}
#healthWrap:after{content:"PULSE RIFLE   ·   CELL";display:block;margin-top:8px;
  font-size:10px;letter-spacing:.22em;color:var(--cream-dim);}

#objective{position:absolute;top:max(18px, var(--inset-top));left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.26em;color:var(--cream);text-align:center;display:none;
  white-space:nowrap;max-width:86vw;overflow:hidden;text-overflow:ellipsis;
  padding:9px 18px 8px;background:rgba(7,7,11,.55);
  border-bottom:1px solid var(--brass);}

#radio{position:absolute;left:max(22px, var(--inset-left));bottom:calc(118px + var(--inset-bottom));max-width:min(460px,74%);
  font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;
  line-height:1.25;color:var(--cream);}
.radioLine{opacity:0;transition:opacity .45s;margin-top:8px;padding:8px 12px 8px 14px;
  background:rgba(7,7,11,.62);border-left:2px solid var(--brass);}
.radioLine .who{font-family:"Outfit",sans-serif;font-style:normal;font-size:11px;
  letter-spacing:.28em;color:var(--brass-hot);font-weight:500;}
.radioLine.show{opacity:1;}

#prompt{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.28em;padding:10px 16px;border:1px solid var(--line);
  background:rgba(7,7,11,.55);display:none;text-align:center;color:var(--cream);}

#plantWrap{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);width:220px;display:none;}
#plantLabel{font-size:11px;letter-spacing:.28em;text-align:center;margin-bottom:8px;color:var(--cream-dim);}
#plantBar{height:2px;background:rgba(244,236,223,.16);}
#plantFill{height:100%;width:0%;background:var(--brass-hot);}

#dmgVignette{position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(120,24,18,.5) 100%);
  transition:opacity .2s;}
#fade{position:absolute;inset:0;background:#000;opacity:1;transition:opacity 1s;}
#redFade{position:absolute;inset:0;background:#1a0908;opacity:0;transition:opacity .8s;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;font-size:13px;letter-spacing:.32em;color:var(--cream);}

#stickZone,#lookZone{position:absolute;top:0;bottom:0;pointer-events:auto;display:none;
  z-index:5;touch-action:none;}
/* A clip uses the same skip as every other beat. The zones stay on screen
   after the train, but they must not take the tap that skips the picture. */
body.clipOn #stickZone,
body.clipOn #lookZone,
body.clipOn #fireBtn,
body.clipOn #plantBtn{pointer-events:none;}
#stickZone{left:0;width:45%;}
#lookZone{right:0;width:55%;}
#stickBase{position:absolute;width:110px;height:110px;border:1px solid rgba(244,236,223,.35);
  border-radius:50%;display:none;transform:translate(-50%,-50%);pointer-events:none;z-index:6;}
#stickNub{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;
  background:rgba(198,163,106,.22);border:1px solid var(--brass);transform:translate(-50%,-50%);}
#fireBtn{position:absolute;right:max(24px, var(--inset-right));bottom:max(34px, var(--inset-bottom));width:86px;height:86px;border-radius:50%;
  border:1px solid var(--cream);background:rgba(7,7,11,.45);color:var(--cream);
  font-family:inherit;font-size:11px;letter-spacing:.22em;display:none;pointer-events:auto;
  z-index:5;touch-action:none;}
#fireBtn:active{background:rgba(244,236,223,.16);}
#plantBtn{position:absolute;right:max(28px, var(--inset-right));bottom:calc(136px + var(--inset-bottom));width:78px;height:78px;border-radius:50%;
  border:1px solid var(--brass);background:rgba(7,7,11,.45);color:var(--brass-hot);
  font-family:inherit;font-size:10px;letter-spacing:.16em;display:none;pointer-events:auto;
  z-index:5;touch-action:none;}

.screen{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 50% 42%, rgba(198,163,106,.08), transparent 60%),
  var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  text-align:center;pointer-events:auto;overflow-y:auto;
  padding:max(18px, var(--inset-top)) max(16px, var(--inset-right)) max(24px, var(--inset-bottom)) max(16px, var(--inset-left));}
.kicker{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.46em;color:var(--cream);}
.kicker i{display:block;height:1px;width:64px;background:rgba(244,236,223,.45);font-style:normal;}
.eyeStage{position:relative;width:128px;height:150px;margin:10px auto 0;flex:none;}
.beam{position:absolute;left:50%;top:46px;width:128px;height:100px;transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(231,201,138,.5), rgba(231,201,138,0));
  clip-path:polygon(40% 0, 60% 0, 100% 100%, 0 100%);}
.eye{position:absolute;left:50%;top:0;width:92px;height:92px;transform:translateX(-50%);border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #07070b 0 16%, transparent 17.5%),
    repeating-radial-gradient(circle at 50% 50%, #f0d7a6 0 1px, transparent 1.5px 9px),
    radial-gradient(circle at 50% 42%, #f4e2bf, #c6a36a 46%, #7a5a30 72%, #1a140e 100%);
  box-shadow:0 18px 50px rgba(198,163,106,.22), inset 0 0 18px rgba(0,0,0,.55);}
.screen h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(44px,12vw,84px);letter-spacing:.14em;color:var(--cream);line-height:.85;margin-top:2px;}
.deck{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(20px,4vw,32px);color:var(--cream);margin-top:6px;}
.novel{margin-top:6px;font-size:10px;letter-spacing:.42em;color:var(--cream-dim);}
.screen h2{font-size:12px;letter-spacing:.28em;color:var(--cream);margin-top:14px;font-weight:400;}
.tag{margin-top:10px;max-width:420px;font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;font-size:17px;line-height:1.3;color:var(--cream-dim);}
.btn{margin-top:14px;padding:12px 28px;border:1px solid rgba(244,236,223,.55);background:transparent;
  color:var(--cream);font-family:inherit;font-size:12px;letter-spacing:.28em;cursor:pointer;
  text-decoration:none;display:inline-block;}
.btn:hover{background:rgba(244,236,223,.08);}
.btn.amber{border-color:var(--brass);color:var(--brass-hot);}
#startHint{margin-top:18px;font-size:11px;letter-spacing:.18em;color:var(--cream-dim);line-height:1.7;max-width:560px;}
.modeLine{margin-top:10px;font-size:12px;letter-spacing:.34em;color:var(--brass-hot);}
.slotNote{flex:1 0 100%;margin-top:14px;max-width:560px;font-size:15px;line-height:1.4;color:var(--cream-dim);
  font-family:"Cormorant Garamond",Georgia,serif;}
#loadBanner{z-index:120;}

#intro{background:#000;display:none;}
#introText{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(22px,3.6vw,34px);line-height:1.35;max-width:680px;min-height:3em;
  opacity:0;transition:opacity 1.1s;color:var(--cream);}
#skipBtn{position:absolute;right:max(18px, var(--inset-right));bottom:max(18px, var(--inset-bottom));padding:8px 16px;border:1px solid var(--line);
  background:transparent;color:var(--cream-dim);font-family:inherit;font-size:11px;letter-spacing:.22em;
  cursor:pointer;opacity:0;transition:opacity .6s;}

#endCard{display:none;background:
  radial-gradient(ellipse at center, rgba(198,163,106,.1) 0%, #07070b 62%);}
#endTitle{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(26px,4vw,40px);letter-spacing:.04em;margin-bottom:22px;color:var(--cream);max-width:640px;}
#cover{width:min(210px,46vw);aspect-ratio:5/8;border:1px solid rgba(244,236,223,.35);
  background:#07070b;position:relative;overflow:hidden;margin:0 auto;}
#coverImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
#coverFallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:18px 12px 16px;}
#cover .cTop,#cover .cBottom{font-size:9px;letter-spacing:.34em;color:var(--cream-dim);}
#cover .cTitle{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;letter-spacing:.14em;line-height:1;}
#cover .cItalic{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:13px;color:var(--cream);}
#cover .miniEye{width:72px;height:72px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #07070b 0 16%, transparent 17.5%),
    repeating-radial-gradient(circle at 50% 50%, #f0d7a6 0 1px, transparent 1.5px 8px),
    radial-gradient(circle at 50% 42%, #f4e2bf, #c6a36a 50%, #7a5a30 78%, #1a140e 100%);
  box-shadow:0 20px 30px rgba(198,163,106,.25);}
#endSub{margin-top:20px;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:18px;color:var(--cream-dim);max-width:480px;line-height:1.35;}
#endBtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

#detWrap{position:absolute;left:max(22px, var(--inset-left));top:max(18px, var(--inset-top));width:168px;display:none;}
#detLabel{font-size:10px;letter-spacing:.32em;color:var(--red);margin-bottom:7px;}
#detBar{height:2px;background:rgba(196,73,58,.28);}
#detFill{height:100%;width:0%;background:var(--red);transition:width .12s;}
#perks{position:absolute;right:max(22px, var(--inset-right));top:max(18px, var(--inset-top));display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.pchip{font-size:10px;letter-spacing:.22em;border:1px solid var(--line);color:var(--cream);
  padding:4px 8px;background:rgba(7,7,11,.55);}

.sbar{position:fixed;left:0;right:0;height:0;background:#000;z-index:26;transition:height .7s;}
#sbarTop{top:0;} #sbarBot{bottom:0;}
body.cine #sbarTop,body.cine #sbarBot{height:9vh;}
/* Story lines and choice beats own the lower screen. Vitals, perks,
   the objective, and the touch HUD stay hidden until the scene ends. */
body.cine #hud,
body.cine #fireBtn,
body.cine #plantBtn,
body.cine #stickZone,
body.cine #lookZone,
body.cine #stickBase{visibility:hidden;}
#storyWrap{position:fixed;inset:0;z-index:28;display:none;pointer-events:none;
  flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;
  padding:calc(8px + var(--inset-top)) 12px calc(16px + var(--inset-bottom));}
body.cine #storyWrap{padding-bottom:calc(9vh + 16px + var(--inset-bottom));}
#storyDlg{position:relative;left:auto;bottom:auto;transform:none;
  width:min(720px,92vw);text-align:center;pointer-events:auto;cursor:pointer;}
#sSpeaker{font-size:12px;letter-spacing:.32em;margin-bottom:6px;color:var(--brass-hot);}
#sSpeaker.ledger{color:var(--red);}
#sSpeaker.marcus{color:var(--cream);}
#sText{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(20px,2.6vw,28px);
  line-height:1.3;color:var(--cream);}
#sText.narr{font-style:italic;color:var(--cream-dim);}
#sHint{margin-top:8px;font-size:10px;letter-spacing:.22em;color:var(--cream-dim);}
#sChoice{position:relative;left:auto;bottom:auto;transform:none;z-index:6;
  width:min(860px,96vw);display:none;pointer-events:auto;
  background:#100e0c;padding:8px 8px 6px;border:1px solid rgba(244,236,223,.16);}
#sTimer{height:2px;background:rgba(244,236,223,.16);margin:0 6px 10px;position:relative;}
#sTimerFill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--brass-hot);}
#sTimerFill.hot{background:var(--red);}
#sOpts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.opt{flex:1 1 0;min-width:150px;max-width:260px;background:#100e0c;
  border:1px solid var(--line);color:var(--cream);padding:12px 12px 10px;cursor:pointer;
  font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-align:center;
  position:relative;z-index:2;}
.opt:hover{background:var(--cream);color:#07070b;}
.opt .key{display:block;font-size:9px;opacity:.55;margin-bottom:5px;letter-spacing:.22em;}
.opt.silent{border-style:dashed;opacity:.85;}
.opt.locked{color:var(--cream-dim);border-style:dashed;cursor:not-allowed;background:#161412;}
.opt.locked:hover{background:#161412;color:var(--cream-dim);}
.opt small{display:block;text-transform:none;letter-spacing:0;font-size:12px;opacity:.7;margin-top:4px;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;}
#sToast{position:fixed;top:calc(9vh + 16px + var(--inset-top));left:max(18px, var(--inset-left));z-index:46;font-size:12px;letter-spacing:.18em;
  color:var(--cream);background:rgba(7,7,11,.82);border-left:2px solid var(--brass);
  padding:10px 16px;opacity:0;transform:translateX(-12px);transition:all .45s;max-width:76vw;}
#sToast.show{opacity:1;transform:translateX(0);}
#sToast.ember{border-left-color:var(--red);}
#sToast.scar{top:max(16vh, 64px);left:50%;right:auto;width:min(92vw, 720px);max-width:min(92vw, 720px);
  text-align:center;font-size:clamp(15px, 4vw, 26px);letter-spacing:.14em;line-height:1.35;
  color:#fff6f4;background:rgba(48,6,6,.94);border:1px solid #ff3a2a;
  box-shadow:0 0 32px rgba(255,40,30,.55);padding:16px 18px;z-index:82;}
#sToast.scar.show{opacity:1;transform:translate(-50%, 0);}
#hatchScare{position:fixed;inset:0;z-index:100;display:none;pointer-events:auto;
  background:#050607 center/cover no-repeat;transform-origin:50% 46%;}
#hatchScare.on{display:block;animation:hatchLunge 1.02s ease-out forwards;}
@keyframes hatchLunge{
  0%{transform:scale(1.85);filter:brightness(2.6);}
  16%{transform:scale(1.02);filter:brightness(1.35);}
  72%{transform:scale(1.05);filter:brightness(1);}
  100%{transform:scale(1.12);filter:brightness(.85);}
}
@media (prefers-reduced-motion: reduce){
  #hatchScare.on{animation:none;}
}
/* speaker bust is composited by Cast into this box */
#castStage{position:relative;left:auto;bottom:auto;transform:none;
  width:min(440px,76vw);height:min(220px,28vh);pointer-events:none;}
#endName{font-size:12px;letter-spacing:.34em;color:var(--brass-hot);margin-bottom:10px;}
#endSummary{margin-top:16px;font-size:14px;color:var(--cream-dim);text-align:left;
  max-width:480px;line-height:1.55;font-family:"Cormorant Garamond",Georgia,serif;}
#endSummary b{color:var(--cream);font-weight:500;}
#endTracker{margin-top:12px;font-size:11px;letter-spacing:.22em;color:var(--brass-hot);}

@media (max-height:820px){
  .eyeStage{width:92px;height:108px;margin-top:2px;}
  .eye{width:68px;height:68px;}
  .beam{top:32px;height:70px;width:92px;}
  .screen h1{font-size:clamp(36px,10vw,60px);}
  .deck{font-size:22px;}
  .tag{font-size:15px;margin-top:6px;}
  .btn{margin-top:10px;padding:10px 22px;}
  #startHint{margin-top:10px;}
}


/* graphics tier selector on the title screen */
.btn.small{font-size:11px;padding:9px 18px;margin-top:10px;opacity:.85;}
#gfxBtn{white-space:nowrap;max-width:none;letter-spacing:.12em;line-height:1;padding:10px 14px;}
/* low-tier stand-in for the post stack vignette (hidden when the grade pass runs) */
#vig{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.66) 100%);}
body.postfx #vig{display:none;}
#intro{cursor:pointer;}
#skipBtn{z-index:2;}

/* Book One finale: the hunter */
#sSpeaker.omega-7,#sSpeaker.hunter{color:var(--red);}
#sSpeaker.vera{color:#f3e2b0;}
#sSpeaker.thomas{color:#d9cdb4;}
#bossWrap{position:absolute;bottom:calc(58px + var(--inset-bottom));left:50%;transform:translateX(-50%);width:min(440px,72vw);display:none;text-align:center;pointer-events:none;}
#bossName{font-size:11px;letter-spacing:.42em;color:var(--red);margin-bottom:5px;text-shadow:0 0 8px rgba(255,40,40,.5);}
#bossBar{height:7px;background:rgba(10,6,6,.7);border:1px solid rgba(255,70,60,.45);}
#bossFill{height:100%;width:100%;background:linear-gradient(90deg,#7a0f0c,#ff3a2a);transition:width .15s;}
#bossFill.pin{background:linear-gradient(90deg,#8a6a30,#ffd27a);}
#bossSub{font-size:10px;letter-spacing:.26em;color:var(--cream);margin-top:5px;opacity:.85;}
@media (max-width:600px){ #bossWrap{bottom:auto;top:56px;width:62vw;} #bossName{font-size:10px;} #bossSub{font-size:9px;letter-spacing:.18em;} }
@media (max-width:600px){ body.bossOn #sToast{top:calc(9vh + 62px);} }

#introKicker{font-size:11px;letter-spacing:.28em;color:var(--brass-hot);margin-bottom:14px;min-height:1.2em;}
#intro.maskTop:before{content:"";position:absolute;left:0;right:0;top:0;height:max(64px, 9vh);
  background:#07070b;z-index:1;}
#intro.maskTop #introKicker{position:absolute;top:max(18px, var(--inset-top));left:50%;
  transform:translateX(-50%);margin:0;z-index:2;background:rgba(7,7,11,.92);
  color:var(--cream);padding:9px 18px 8px;white-space:nowrap;max-width:86vw;}
#beatVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;background:#000;z-index:0;display:none;
  pointer-events:none;}
#intro.maskTop{justify-content:flex-end;}
#intro.maskTop #introText{position:relative;z-index:2;margin-top:auto;
  margin-bottom:max(64px, calc(8px + var(--inset-bottom)));
  text-shadow:0 2px 14px #000, 0 0 2px #000;
  max-width:min(680px, 92vw);}
#introText,#introKicker{position:relative;z-index:1;}
#skipBtn{position:absolute;z-index:3;pointer-events:auto;}

html[data-text="sm"] #sText{font-size:18px;}
html[data-text="lg"] #sText{font-size:32px;}
html[data-text="sm"] #introText{font-size:20px;}
html[data-text="lg"] #introText{font-size:38px;}
html[data-portraits="cards"] #castStage{display:none;height:0;}

#portraitCard{display:none;position:relative;width:min(280px,78vw);align-items:center;gap:12px;pointer-events:none;}
#portraitCard.on{display:flex;}
#portraitCard canvas{width:88px;height:100px;flex:none;background:#14120f;}
.pmeta{text-align:left;}
.pname{font-size:12px;letter-spacing:.22em;}
.pexpr{font-size:10px;letter-spacing:.16em;color:var(--cream-dim);margin-top:4px;}
.ptag{margin-top:8px;font-size:9px;letter-spacing:.22em;color:var(--brass-hot);}

.sheet{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;
  overflow:auto;background:rgba(7,7,11,.94);pointer-events:auto;
  padding:max(24px, var(--inset-top)) max(16px, var(--inset-right)) max(24px, var(--inset-bottom)) max(16px, var(--inset-left));}
/* The title screen sits under this sheet. A tint lets BOOK ONE and NEW GAME show through the pay text. */
#paySheet,#paySheet .sheetBody{background:#07070b;}
.sheetBody{width:min(560px,100%);text-align:left;}
.sheetTitle{font-family:"Outfit",sans-serif;font-weight:500;font-size:14px;letter-spacing:.28em;margin:8px 0 12px;}
.setRow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0;
  font-size:11px;letter-spacing:.16em;}
.setRow select,.setRow input[type="range"]{min-width:140px;}
.fine,.deckLine{font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;line-height:1.35;
  color:var(--cream-dim);margin:8px 0;}
.epBlock{margin:14px 0 18px;padding-top:8px;border-top:1px solid rgba(244,236,223,.16);}
.epHead{font-size:12px;letter-spacing:.14em;margin-bottom:6px;}
.beatRow{display:block;text-align:left;max-width:100%;}
.titleTools{display:flex;flex-direction:column;align-items:center;width:min(640px,100%);margin-top:8px;}
.slotRow,.slotTools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px;}
.slotBtn.on{border-color:var(--brass);color:var(--brass-hot);}
#backupCode{width:100%;margin:8px 0;background:#100e0c;color:var(--cream);border:1px solid var(--line);
  font-family:inherit;font-size:12px;padding:8px;}
#restoreSession{width:100%;box-sizing:border-box;margin:8px 0;min-height:44px;background:#100e0c;color:var(--cream);
  border:1px solid var(--line);font-family:inherit;font-size:16px;padding:10px 12px;}
#pauseBtn{display:none;position:fixed;top:max(10px, var(--inset-top));
  right:max(10px, var(--inset-right));z-index:60;pointer-events:auto;
  padding:8px 12px;border:1px solid var(--line);background:rgba(7,7,11,.72);color:var(--cream);
  font-family:inherit;font-size:10px;letter-spacing:.22em;}
body.live #pauseBtn{display:block;}
.ctxBanner{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:90;
  background:rgba(7,7,11,.9);border:1px solid var(--brass);padding:12px 16px;
  letter-spacing:.12em;font-size:12px;}

@media (max-width:700px) and (orientation: portrait){
  #sOpts{flex-direction:column;align-items:stretch;}
  .opt{max-width:none;width:100%;}
  #castStage{height:96px;}
  #portraitCard canvas{width:72px;height:84px;}
  #healthWrap{width:min(250px, 58vw);}
  #radio{max-width:min(460px, 86%);left:max(12px, var(--inset-left));}
  #endCard{justify-content:flex-start;}
  #endCard #cover{width:min(132px, 34vw);}
  #endTitle{margin-bottom:10px;font-size:clamp(22px, 6vw, 32px);}
  #endSub{margin-top:10px;font-size:16px;}
  #endBtns{flex-direction:column;align-items:stretch;width:min(420px, 100%);}
  #endBtns .btn{width:100%;min-height:44px;}
}
/* Phone landscape: keep the choice strip on one band so the scene stays
   visible, and keep that band opaque so Vitals cannot show through it.
   HUD is z-index 4. This strip lives in #storyWrap (z-index 28). */
@media (orientation: landscape) and (max-height: 520px){
  #storyWrap{gap:6px;justify-content:flex-end;}
  #storyDlg{width:min(640px, 72vw);}
  #sText{font-size:18px;line-height:1.25;}
  #castStage{height:min(88px, 22vh);}
  #portraitCard canvas{width:56px;height:64px;}
  #sChoice{width:min(960px, 94vw);max-height:46vh;overflow:auto;}
  #sOpts{flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:center;}
  .opt{flex:1 1 140px;min-width:120px;max-width:none;width:auto;
    padding:8px 8px 7px;font-size:11px;line-height:1.25;}
}

#bookPitch{margin:16px auto 0;max-width:460px;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:18px;line-height:1.4;color:var(--cream);}
#endBtns{margin-top:16px;}
#book1Btn{background:var(--brass);color:#1a140e;border-color:var(--brass-hot);font-weight:500;}
#book1Btn:hover{background:var(--brass-hot);color:#1a140e;}
#startScreen,#endCard{touch-action:pan-y;
  padding-top:max(18px, var(--inset-top));
  padding-bottom:max(24px, var(--inset-bottom));
  padding-left:max(16px, var(--inset-left));
  padding-right:max(16px, var(--inset-right));}
#startScreen > *,
#endCard > *{flex-shrink:0;}
.loreLink{margin-top:12px;background:none;border:none;padding:8px;cursor:pointer;
  color:var(--brass-hot);font-family:inherit;font-size:11px;letter-spacing:.22em;
  text-decoration:underline;text-underline-offset:3px;}
.kitForm{margin:16px auto 0;width:min(420px, 100%);text-align:left;
  border:1px solid rgba(198,163,106,.45);background:rgba(7,7,11,.55);padding:14px 14px 12px;}
.kitLead,.kitFine,.kitThanks{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:16px;line-height:1.35;color:var(--cream-dim);}
.kitFine{font-size:14px;margin-top:8px;}
.kitThanks{color:var(--brass-hot);font-style:italic;margin-top:4px;}
.kitFields{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.kitFields input{width:100%;min-height:44px;background:#100e0c;color:var(--cream);
  border:1px solid var(--line);font-family:inherit;font-size:16px;padding:10px 12px;
  letter-spacing:.03em;touch-action:manipulation;
  user-select:text;-webkit-user-select:text;}
.kitFields input:focus{outline:1px solid var(--brass);border-color:var(--brass);}
.kitFields .btn{margin-top:4px;min-height:44px;text-align:center;touch-action:manipulation;}

#payBody > .btn,
#trailerBody > .btn,
#trailerBody > a.btn{display:block;width:100%;box-sizing:border-box;text-align:center;min-height:44px;}
.trailerFrame{width:min(72vw, calc(58vh * 9 / 16));max-width:320px;aspect-ratio:9/16;margin:12px auto;
  background:#000;border:1px solid rgba(244,236,223,.28);position:relative;overflow:hidden;}
.trailerFrame video{width:100%;height:100%;object-fit:contain;background:#000;pointer-events:none;display:block;}
.trailerFrame video::-webkit-media-controls,
.trailerFrame video::-webkit-media-controls-enclosure,
.trailerFrame video::-webkit-media-controls-panel,
.trailerFrame video::-webkit-media-controls-timeline{display:none !important;opacity:0;pointer-events:none;}
.trailerMeter{height:3px;background:rgba(244,236,223,.16);margin:8px 0 0;pointer-events:none;}
.trailerMeter > div{height:100%;width:0;background:var(--brass);pointer-events:none;}
.trailerBtns{display:flex;gap:8px;}
.trailerBtns .btn{flex:1;min-height:44px;text-align:center;margin-top:8px;}
#trailerErr:empty{display:none;}

.codexRow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(244,236,223,.16);}
.codexCopy{flex:1;min-width:0;}
.codexName,.codexKicker,.codexIndex{font-size:12px;letter-spacing:.18em;}
.codexKicker{color:var(--brass-hot);}
.codexIndex{width:36px;flex:none;color:var(--brass-hot);padding-top:4px;}
.codexSil{width:44px;height:56px;flex:none;background:#14120f;border:1px solid rgba(244,236,223,.2);position:relative;}
.codexSil:before{content:"";position:absolute;left:10px;top:8px;width:24px;height:24px;border-radius:50%;background:#2a261f;}
.codexSil:after{content:"";position:absolute;left:6px;bottom:6px;width:32px;height:18px;border-radius:16px 16px 2px 2px;background:#2a261f;}
.codexShare{margin-top:8px;min-height:44px;}
.codexRow .fine{margin:4px 0 0;}
html[data-cosmetics~="signal_band"] .kicker i{background:var(--brass-hot);height:2px;box-shadow:0 0 8px rgba(231,201,138,.75);}
html[data-cosmetics~="ash_visor"] #crosshair:before,
html[data-cosmetics~="ash_visor"] #crosshair:after{background:#9fd7c2;}
html[data-cosmetics~="ash_visor"] #crosshair:before{box-shadow:16px 0 0 #9fd7c2, 0 0 6px rgba(159,215,194,.8);}
html[data-cosmetics~="ash_visor"] #crosshair:after{box-shadow:0 16px 0 #9fd7c2, 0 0 6px rgba(159,215,194,.8);}
html[data-cosmetics~="pod_glass"] #healthFill{background:linear-gradient(90deg,#1e4d42,#9fd7c2);}
@media (max-width:700px){
  .codexRow{gap:10px;}
  .sheet .btn{min-height:44px;}
  #codexBtn,#dailyBtn,#ngBtn{min-height:44px;}
}