:root{
  --bg:#0b0c09;--panel:rgba(22,23,17,.92);--panel2:#23241c;--line:#34352a;
  --paper:#e4dcc6;--paper2:#d6ccb1;--ink:#1d1b16;
  --red:#c0281d;--red2:#e0392c;--olive:#7d8460;--dim:#8f8e7c;--txt:#d9d6c3;--amber:#e0a43a;
  --mono:"Special Elite","Courier New",monospace;--head:"Oswald","Arial Narrow",Impact,sans-serif;
  --threat:0;--hud-h:56px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--mono);-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
html{overflow-x:hidden}
button{font:inherit;cursor:pointer;touch-action:manipulation}
.flag,.fig{touch-action:manipulation}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a{color:var(--amber)}
h1,h2,h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.02em;margin:0}

/* ---------- layers ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
body.no3d #gl{display:none}
body.no3d{background:radial-gradient(ellipse at 50% 30%,#2b3022,#0b0c09 70%)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
#fx .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
#fx .vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7) 100%)}
#fx .threat{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(160,20,10,.75) 100%);opacity:calc(var(--threat) * .9);animation:pulse 1.1s ease-in-out infinite alternate}
#fx .grain{position:absolute;inset:-6%;opacity:.07;animation:grain .5s steps(4) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,5%)}}
body.lowfx #fx .grain,body.lowfx #fx .scan{display:none}
@keyframes pulse{from{opacity:calc(var(--threat) * .6)}to{opacity:calc(var(--threat) * 1)}}
/* letterbox sits above the stage but below the HUD, so suspicion stays readable */
#lbx{position:fixed;inset:0;pointer-events:none;z-index:15}
#lbx .lb{position:absolute;left:0;right:0;height:0;background:#000;transition:height .8s cubic-bezier(.7,0,.2,1)}
#lbx .lb.t{top:0}#lbx .lb.b{bottom:0}
body.cine #lbx .lb{height:8vh}
#flash{pointer-events:none;position:fixed;inset:0;z-index:41;background:var(--red);opacity:0;transition:opacity .6s}
#flash[data-c=white]{background:#fff}
#flash.on{opacity:.5;transition:none}

/* ---------- hud ---------- */
#hud{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 16px;background:#0b0c09f2;border-bottom:1px solid var(--line);flex-wrap:wrap}
#hud[hidden],#ticker[hidden]{display:none}
.brand{font-family:var(--head);font-size:20px;color:var(--paper);letter-spacing:.08em}
.brand span{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:8px}
.daylbl{color:var(--dim);font-size:12px;letter-spacing:.1em;margin-left:auto}
.eyeb{font-size:12px;letter-spacing:.12em;padding:4px 10px;border:1px solid var(--red);color:var(--red2);min-width:150px;text-align:center;background:rgba(0,0,0,.5)}
.eyeb[data-state=away]{border-color:var(--olive);color:#a8b38a}
.eyeb[data-state=turning]{border-color:var(--amber);color:var(--amber);animation:blinkb .25s infinite}
@keyframes blinkb{50%{opacity:.4}}
.meter{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.track{width:120px;height:8px;background:#2b2c22;border:1px solid var(--line);position:relative;overflow:hidden}
.track i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--olive);transition:width .5s,background .5s}
.meter b{color:var(--txt);min-width:34px;font-weight:normal}
.icon{background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--txt);padding:4px 9px;border-radius:2px}
#ticker{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(5,6,4,.85);border-top:1px solid var(--line);padding:7px 16px;font-size:12px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--olive)}
#ticker .obs{color:var(--red2)}

/* ---------- buttons ---------- */
.primary{background:var(--red);color:#fff;border:0;padding:14px 22px;font-family:var(--head);font-size:18px;letter-spacing:.06em;text-transform:uppercase;border-radius:2px;box-shadow:0 3px 0 #6d140e,0 0 30px rgba(192,40,29,.25)}
.primary:hover{background:var(--red2)}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #6d140e}
.primary:disabled{opacity:.4;cursor:not-allowed}
.primary.big{font-size:24px;padding:16px 40px}
.ghost{background:rgba(0,0,0,.35);color:var(--txt);border:1px dashed var(--dim);padding:12px 16px;border-radius:2px}
.ghost:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.ghost:disabled{opacity:.35;cursor:not-allowed}
.cont{margin-top:18px}
.arch{margin:6px 0 18px}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0;z-index:10;display:none;overflow-y:auto;overflow-x:hidden;padding:70px 16px 60px}
.stage:focus{outline:none}
body.hud-on .stage{padding-top:calc(var(--hud-h) + 16px)}
body.cine .stage{padding-top:calc(max(8vh, var(--hud-h)) + 16px);padding-bottom:calc(8vh + 16px)}
.stage.on{display:flex;flex-direction:column;align-items:center}
/* safe centring: tall content can always scroll back to its top */
.stage.center > :first-child{margin-top:auto}
.stage.center > :last-child{margin-bottom:auto}
.stage.dark{background:rgba(5,6,4,.72)}
.stage.scroll{background:rgba(8,9,6,.82)}
.stage > *{max-width:880px;width:100%}
.scene-tag{color:var(--dim);letter-spacing:.2em;font-size:12px;margin-bottom:14px}
.sub{color:var(--dim);margin:6px 0 22px;line-height:1.5}
.resp{min-height:28px;color:var(--red2);font-size:16px;text-align:center}
.red{color:var(--red2)!important}

/* title */
.title{text-align:center}
.logo{font-family:var(--head);font-weight:700;font-size:clamp(64px,15vw,150px);line-height:.9;color:var(--paper);letter-spacing:.05em;text-shadow:0 0 40px rgba(0,0,0,.8)}
.logo .ch{display:inline-block}
.tag{color:var(--dim);margin:10px 0 22px;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.slogans{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-bottom:24px}
.slogans span{font-family:var(--head);font-size:21px;color:var(--red2);letter-spacing:.08em;display:inline-block}
.pitch{max-width:540px;line-height:1.65;margin:0 auto 26px;font-size:16px;text-shadow:0 1px 8px #000}
.fine{color:var(--dim);font-size:12px;line-height:1.7;margin-top:14px}
.opt-time{display:block;margin-top:14px;font-size:13px;color:var(--dim);cursor:pointer}
.opt-time input{accent-color:var(--red);margin-right:6px}

.noteWrap{position:fixed;inset:0;z-index:61;background:rgba(4,5,3,.9);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
.note{max-width:620px;width:100%;margin:auto;background:var(--paper);color:var(--ink);padding:28px 30px;box-shadow:0 18px 50px rgba(0,0,0,.7)}
.note h2{font-size:28px;margin-bottom:10px}.note p{line-height:1.6;margin:0 0 12px}.note .scene-tag{color:#5f5946}
.fine a{color:var(--amber)}
/* intro */
.cineText{text-align:center;padding:0 10px}
.cl{font-size:clamp(24px,4.6vw,44px);line-height:1.35;color:var(--paper);text-shadow:0 0 30px #000}
.cl.small{font-size:clamp(16px,2.6vw,22px);letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.cl.glitch{color:var(--red2);animation:glitch .9s steps(2) infinite}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-3px,1px);text-shadow:3px 0 #0ff,-3px 0 #f00}40%{transform:translate(2px,-1px)}60%{transform:translate(0);text-shadow:none}}
.cl.slam{font-family:var(--head);font-size:clamp(44px,10vw,110px);line-height:.95;color:var(--paper);text-transform:uppercase}
.thirteen{font-family:var(--head);font-size:1.6em;color:var(--paper);display:inline-block;min-width:1.4em}
.skip{position:fixed;right:18px;bottom:calc(8vh + 12px);z-index:46;background:rgba(0,0,0,.6);border:1px solid var(--dim);color:var(--txt);padding:8px 14px}

/* memo */
.memo{background:var(--paper);color:var(--ink);padding:30px 28px;box-shadow:0 18px 50px rgba(0,0,0,.7);max-width:680px!important}
.memo .mh{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:16px;font-size:13px}
.memo h2{font-size:30px;margin-bottom:12px}
.memo ol{padding-left:20px;line-height:1.65;margin:0 0 18px}
.memo li{margin-bottom:8px}
.memo .warn{color:var(--red);font-weight:bold}

/* chapter */
.chapter{text-align:center;max-width:760px!important}
.pyr{width:120px;color:var(--red2);margin:0 auto 14px;display:block;filter:drop-shadow(0 0 12px rgba(224,57,44,.4))}
.cdate{color:var(--dim);letter-spacing:.2em;font-size:13px;margin-bottom:10px}
.mname{font-size:clamp(40px,9vw,92px);color:var(--paper);line-height:.95;perspective:600px}
.mname .ch,.logo .ch{display:inline-block}
.w{display:inline-block;white-space:nowrap}
.ns{font-family:var(--head);color:var(--red2);letter-spacing:.4em;font-size:18px;margin:10px 0 20px}
.does{font-size:17px;margin:0 0 4px}
.irony{font-size:17px;color:var(--amber);margin:0 0 18px}
.now{display:inline-block;border:1px solid var(--line);background:rgba(0,0,0,.45);padding:10px 14px;line-height:1.5;margin:0 0 18px;max-width:600px}
.extra{color:var(--red2);font-size:18px;margin:0 0 18px}
.extra.onfile{font-size:15px;color:var(--amber)}

/* desk */
#desk{position:fixed;left:0;right:0;bottom:36px;top:var(--hud-h);z-index:12;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,640px);gap:18px;justify-content:center;align-items:start;padding:12px 16px;overflow-y:auto;pointer-events:none;transition:padding-top .3s}
body.coaching #desk{padding-top:calc(var(--coach-h,0px) + 16px)}
#desk[hidden]{display:none}
#desk > *{pointer-events:auto}
.dside{display:flex;flex-direction:column;gap:12px}
.directive{background:#e9d98a;color:#2a2410;padding:12px 14px;box-shadow:0 8px 20px rgba(0,0,0,.5);transform:rotate(-1deg);font-size:13px}
.dtag{font-size:11px;letter-spacing:.14em;opacity:.7}
.tele{color:#8a1a10;text-transform:lowercase;font-size:15px;margin:6px 0}
.plain{line-height:1.5}
.hint{font-size:12px;color:#8a1a10;margin-top:8px;font-weight:bold}
.statbox{background:var(--panel);border:1px solid var(--line);padding:10px 12px;font-size:12px;color:var(--dim);display:flex;flex-wrap:wrap;gap:6px 10px}
.statbox span:last-child{flex-basis:100%;opacity:.85}
.statbox b{color:var(--txt);font-weight:normal}
.holehud{background:var(--panel);border:1px solid var(--line);padding:10px;text-align:center;font-size:11px;letter-spacing:.3em;color:var(--dim);transition:all .3s}
.holehud.hot{color:var(--amber);box-shadow:0 0 30px 6px rgba(224,100,30,.5);border-color:var(--amber)}
.dmain{display:flex;flex-direction:column;gap:14px}
.paper{background:var(--paper);color:var(--ink);padding:26px 26px 22px;box-shadow:0 24px 50px rgba(0,0,0,.7);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 26px),linear-gradient(170deg,var(--paper),var(--paper2));will-change:transform}
.mast{display:flex;justify-content:space-between;border-bottom:3px double var(--ink);padding-bottom:6px;margin-bottom:14px;font-size:12px;letter-spacing:.1em}
.paper h2{font-size:clamp(22px,3.4vw,30px);line-height:1.15;margin-bottom:14px}
.paper p{font-size:16px;line-height:1.75;margin:0 0 10px}
/* flags are inline spans so long passages wrap with the sentence */
.flag{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:pointer;background:rgba(224,164,58,.3);color:inherit;border:0;border-bottom:2px dashed #8a5a12;padding:0 3px;font:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;line-height:inherit;border-radius:1px;transition:background .2s,color .2s}
.flag:hover{background:rgba(224,164,58,.55)}
.flag.on{background:transparent;color:#a01e14;border-bottom:2px solid var(--red)}
.flag:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.flag.on::after{content:" ✎";font-size:.7em}
.flag.barf{background:rgba(0,0,0,.08);border-bottom:2px dashed #333}
.flag.blk{background:#0b0a08!important;color:#0b0a08!important;border-bottom-color:#0b0a08}
.flag.blk::after{content:""}
.photo{margin:6px 0 10px;background:#f5efe0;padding:10px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.photo svg{display:block;width:100%;filter:sepia(.7) contrast(1.05)}
.fig{cursor:crosshair;transition:opacity 1.4s,filter 1.4s;outline:none}
.fig:hover .bodyp,.fig:hover .headc{stroke:var(--red);stroke-width:3}
.fig:focus-visible .bodyp,.fig:focus-visible .headc{stroke:var(--red);stroke-width:4}
.fig:focus-visible{filter:drop-shadow(0 0 4px var(--amber))}
.fig.gone{opacity:0;filter:blur(8px);pointer-events:none}
.smudge{opacity:0;transition:opacity 1.6s}.smudge.on{opacity:.22}
.cap{font-size:14px!important;font-style:italic}
.actions{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.diaryBtn{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.diaryBtn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:rgba(224,164,58,.35)}
.diaryBtn .dl{position:relative}
.diaryBtn.holding{border-color:var(--amber);color:var(--amber);border-style:solid}
body[data-eye=watching] .diaryBtn.holding{border-color:var(--red)}
/* the button itself says when it is safe: the badge is far from a thumb */
body[data-eye=away] .diaryBtn:not(:disabled){border-color:#a8b38a;border-style:solid;color:#c9d6a8;box-shadow:0 0 18px rgba(125,132,96,.55)}
body[data-eye=turning] .diaryBtn:not(:disabled){border-color:var(--amber);color:var(--amber)}

/* dialogue / dilemma */
.dlg{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;background:var(--panel);border:1px solid var(--line);padding:24px;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.dlg-p{position:sticky;top:0}
.portrait-svg{width:100%;display:block;filter:sepia(.25) contrast(1.1);border:1px solid var(--line);box-shadow:0 0 40px rgba(0,0,0,.6)}
.pn{margin-top:10px}.pn b{display:block;font-family:var(--head);font-size:20px;color:var(--paper);letter-spacing:.05em}.pn span{font-size:12px;color:var(--dim)}
.dlg-t p{font-size:17px;line-height:1.65;margin:0 0 14px}
.dlg-t p.after{color:var(--amber)}
.dlg-t p.iron{color:var(--red2);font-family:var(--head);font-size:24px;text-transform:uppercase}
.handw{font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-size:clamp(34px,6vw,54px)!important;color:var(--red2);transform:rotate(-3deg);margin:18px 0!important;text-shadow:0 0 18px rgba(224,57,44,.3)}
.dlg-o{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.opt{text-align:left;background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--txt);padding:14px 16px;display:flex;flex-direction:column;gap:4px;transition:all .2s}
.opt b{font-family:var(--head);font-size:19px;color:var(--paper);letter-spacing:.03em;font-weight:600}
.opt span{font-size:13px;color:var(--dim)}
.opt:hover:not(:disabled){border-color:var(--amber);transform:translateX(6px);background:rgba(224,164,58,.08)}
.opt.chosen{border-color:var(--red);background:rgba(192,40,29,.15)}
.opt.dim{opacity:.25}
.ring{position:relative;width:64px;height:64px;margin-top:16px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:#2b2c22;stroke-width:4}
.ring .rf{stroke:var(--red2)}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-size:20px}

/* doublespeak */
.ds{max-width:640px!important;perspective:900px}
.ds-top{display:flex;justify-content:space-between;color:var(--dim);font-size:13px;letter-spacing:.12em;margin-bottom:10px}
.ds-top b{color:var(--paper)}
.ds-card{background:var(--paper);color:var(--ink);padding:26px;box-shadow:0 30px 60px rgba(0,0,0,.7)}
.ds-l{font-size:11px;letter-spacing:.2em;color:#5a5340;margin:4px 0 6px}
.ds-p{font-family:var(--head);font-size:clamp(28px,5vw,42px);line-height:1.1;margin-bottom:18px;color:var(--red)}
.ds-o{display:flex;flex-direction:column;gap:8px}
.dso{background:#f1ead6;border:1px solid #9b9070;color:var(--ink);padding:12px 14px;text-align:left;font-size:16px}
.dso:hover:not(:disabled){background:#fff6dc}
.dso.right{background:#c9dcae;border-color:#4a6a2a}
.dso.wrong{background:#e6b0a8;border-color:var(--red)}
.ds-n{min-height:42px;font-size:13px;line-height:1.5;margin-top:12px;color:#4a4436}
.ds-next{margin-top:12px}
.ds-bar{height:4px;background:#cfc5a8;margin-top:10px}.ds-bar i{display:block;height:100%;background:var(--red);width:100%}
.ds-score{font-family:var(--head);font-size:80px;color:var(--paper)}

/* hate */
.hate{text-align:center;display:flex;flex-direction:column;align-items:center}
.hate-h{font-size:clamp(36px,8vw,64px);color:var(--paper)}
.hatebox{position:relative;width:min(560px,100%);aspect-ratio:16/10;border:6px solid #090a06;border-radius:30px/22px;overflow:hidden;background:#000;margin:10px 0;box-shadow:0 0 60px rgba(192,40,29,.35)}
.hatebox canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.live{position:absolute;left:12px;top:10px;font-size:13px;color:#fff;background:var(--red);padding:3px 8px}
.viewers{position:absolute;right:12px;top:10px;font-size:13px;color:#fff;background:rgba(0,0,0,.6);padding:3px 8px}
.enemy{position:absolute;left:0;right:0;bottom:10px;font-family:var(--head);color:#fff;font-size:18px;letter-spacing:.08em;text-shadow:0 0 6px #000}
.hatebtn{font-size:30px;padding:18px 60px;animation:hb .5s infinite alternate}
@keyframes hb{to{transform:scale(1.07)}}
.hatemeter{width:min(560px,100%);margin-top:14px}.hatemeter .track{width:100%;height:12px}.hatemeter .track i{background:var(--red)}
.glimpse{display:flex;gap:16px;align-items:center;max-width:560px;margin:18px auto 0;text-align:left;background:var(--panel);border:1px solid var(--red);padding:14px}
.glimpse .portrait-svg{width:110px;flex:none}
.glimpse p{line-height:1.6;margin:0}

/* rally */
.rally{text-align:center}
.speech{min-height:120px;font-size:clamp(20px,3.6vw,28px);line-height:1.4;color:var(--paper)}
.speech .note{color:var(--dim);font-size:18px;font-style:italic}
.speech .big{font-family:var(--head);font-size:clamp(24px,4vw,34px);text-transform:uppercase;color:var(--paper)}
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:620px;margin:18px auto}
.poster{background:#d8cfb4;border:3px solid #1b1612;padding:18px 8px;min-height:92px;font-family:var(--head);font-size:clamp(14px,2.6vw,19px);color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.6)}
.poster span{display:block}
.poster:nth-child(odd){background:#b3261e;color:#f2ead6}
.poster.torn{pointer-events:none}

/* evening */
.eve{max-width:900px!important}
.eve h1{font-size:44px;color:var(--paper)}
.eve h3,.dossier h3,.alcove h3{font-size:18px;color:var(--olive);letter-spacing:.1em;margin:8px 0 12px}
.eve h3 small{font-family:var(--mono);font-size:11px;color:var(--dim);text-transform:none;letter-spacing:.05em;margin-left:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--line);padding:12px}
.kpi b{display:block;font-family:var(--head);font-size:30px;color:var(--paper);font-weight:600}
.kpi span{font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.costs{border-left:3px solid var(--amber);padding:2px 0 2px 14px;margin:0 0 22px}
.costs ul{margin:0;padding-left:18px;line-height:1.6}
.costs li{margin-bottom:4px}
.noticed{border:1px solid var(--red);color:var(--red2);padding:12px 14px;margin-bottom:22px;line-height:1.5;background:rgba(0,0,0,.4)}
.tns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:12px;margin-bottom:12px}
.tn{perspective:900px;color:inherit;text-align:left;cursor:pointer}
.tn-in{display:grid;width:100%;min-height:230px;transition:transform .7s cubic-bezier(.3,1.4,.5,1);transform-style:preserve-3d}
.tn.f .tn-in{transform:rotateY(180deg)}
.tn-f,.tn-b{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px;line-height:1.5;font-size:14px;display:flex;flex-direction:column;gap:8px}
.tn p{margin:0}
.tn-f{background:var(--paper);color:var(--ink)}
.tn-b{background:#14150f;border:1px solid var(--red);transform:rotateY(180deg)}
.tn em{font-style:normal;font-family:var(--head);letter-spacing:.12em;font-size:13px;color:var(--red)}
.tn-b em{color:#ee4a3c;font-size:12px}
.turn{margin-top:auto;align-self:flex-start;font:inherit;font-size:12px;background:none;border:1px solid currentColor;padding:4px 10px;color:#5a5340}
.tn-b .turn{color:var(--dim)}
.turn:focus-visible,.srcs a:focus-visible,.opt:focus-visible,.primary:focus-visible,.ghost:focus-visible,.poster:focus-visible,.dso:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.srcs{margin-top:auto;font-size:12px;display:flex;flex-wrap:wrap;gap:4px 10px}
.srcs a{color:var(--amber);text-decoration:none;border-bottom:1px dotted}
.alcove{background:var(--panel);border:1px solid var(--line);padding:14px;margin:6px 0 20px}
.alcove p{color:var(--dim);margin:0 0 10px;line-height:1.5}
.alcove textarea{width:100%;background:#f3ecd8;color:var(--ink);border:0;padding:12px;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-size:24px;resize:vertical}

/* arrest + room 101 */
.arrest{text-align:center}
.arrest h1{font-size:clamp(40px,10vw,84px);color:var(--paper)}
.arrest p{font-size:19px;line-height:1.6;max-width:560px;margin:18px auto}
.r101{text-align:center;display:flex;flex-direction:column;align-items:center}
.obrien{font-size:clamp(20px,3.8vw,27px);line-height:1.45;max-width:620px;margin:16px auto}
.obrien.big{font-family:var(--head);text-transform:uppercase;color:var(--red2);font-size:clamp(26px,5vw,44px)}
.bigq{font-family:var(--head);font-size:1.5em;color:var(--paper);text-transform:uppercase}
.hand{width:170px}
.row{display:flex;gap:16px;justify-content:center;margin:18px 0;position:relative}
.pain{display:flex;align-items:center;gap:10px;justify-content:center;font-size:12px;color:var(--dim)}
.pain .track{width:220px}.pain .track i{background:var(--red)}
.sum{font-family:var(--head);font-size:clamp(48px,12vw,96px);color:var(--paper);display:flex;align-items:center;gap:16px;justify-content:center}
.sum input{width:1.6em;font:inherit;text-align:center;background:transparent;color:var(--red2);border:0;border-bottom:4px solid var(--red);outline:none}
.sum input:focus-visible{border-bottom-color:var(--amber)}
.corrected{color:var(--red2);letter-spacing:.3em;font-size:13px;height:18px;opacity:0;transition:opacity .2s}
.corrected.on{opacity:1}
.cage{width:min(320px,70vw);transform-origin:50% 60%;filter:drop-shadow(0 0 30px rgba(0,0,0,.9));position:relative;z-index:0}
.r101.rats .obrien,.r101.rats .resp,.r101.rats .row{position:relative;z-index:1;text-shadow:0 0 12px #000,0 0 4px #000}
.betray{font-size:24px;padding:18px 34px;animation:hb .7s infinite alternate}
.loveArea{position:relative;width:min(560px,100%);height:220px;margin:10px auto}
.loveArea button{position:absolute}
.final{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:42;opacity:0;transition:opacity 2s;pointer-events:none}
.final.on{opacity:1;pointer-events:auto}
.final p{font-family:var(--head);font-size:clamp(30px,7vw,60px);color:var(--paper);text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:16px}

/* fates */
.fates{max-width:720px!important}
.fate{border-left:3px solid var(--red);padding:6px 0 6px 16px;margin:0 0 22px}
.fate b{font-family:var(--head);font-size:24px;color:var(--paper);letter-spacing:.04em}
.fate p{line-height:1.65;margin:6px 0 0;font-size:16px}

/* dossier */
.dossier{max-width:860px!important}
.file{background:var(--paper);color:var(--ink);padding:30px 26px;box-shadow:0 20px 50px rgba(0,0,0,.6);position:relative}
.dtop{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:12px;letter-spacing:.1em;border-bottom:3px double var(--ink);padding-bottom:8px;margin-bottom:18px}
.clabel{font-size:12px;letter-spacing:.14em;color:#5f5946}
.cls{font-size:clamp(34px,8vw,64px);color:var(--red);line-height:1}
.verdict{font-size:16px;line-height:1.65;margin:12px 0 18px}
.verdicts{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0 0 18px;font-size:12px}
.vd{border:1px solid #9b9070;padding:3px 8px;letter-spacing:.04em;color:#1d1b16;overflow:hidden;max-width:100%}
.vd.on{background:#1d1b16;color:#e4dcc6;border-color:#1d1b16}
.verdicts small{flex-basis:100%;color:#5f5946}
.file .kpi{background:#efe7d1;border-color:#b9ae8f}.file .kpi b{color:var(--ink)}.file .kpi span{color:#5f5946}
.file h3{color:#5f5946!important;margin:22px 0 10px!important;font-size:16px!important}
.grid{font-size:22px;line-height:1.6}
.grid .l{font-size:12px;letter-spacing:.1em;color:#5f5946;display:inline-block;width:110px}
.legend{font-size:12px;color:#5f5946}
.diarypage{background:#fbf7ea;border-left:3px solid #9b9070;padding:8px 12px;margin:6px 0;font-size:15px;line-height:1.5}
.diarypage.own{font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-size:22px;color:#7a1a10}
.diarypage.burnt{text-decoration:line-through;text-decoration-color:var(--red);opacity:.6}
.ms{font-family:var(--mono);font-size:12px;color:#5f5946}
.sq{display:inline-block;width:22px;height:22px;margin:0 3px;vertical-align:middle;border:1px solid #1d1b16}
.sq.p{background:#c0281d}.sq.m{background:#e0a43a}.sq.t{background:#fffaf0}
.legend .sq{width:12px;height:12px;margin:0 2px}
.seen{padding-left:18px;line-height:1.7;margin:0}.seen li{margin-bottom:4px}
.lead{margin:0 0 10px;line-height:1.5}
.kicker{border:2px solid var(--ink);padding:12px 14px;margin-top:16px;line-height:1.55;font-size:15px}
.stamp{position:absolute;right:18px;top:60px;transform:rotate(12deg);border:4px solid var(--red);color:var(--red);font-family:var(--head);font-size:26px;padding:4px 12px;opacity:.75;letter-spacing:.1em}
.ministries{margin-top:34px}
.ministries h2{font-size:34px;color:var(--paper);margin-bottom:16px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:24px}
.mcard{background:var(--panel);border:1px solid var(--line);padding:16px;text-align:center}
.mcard .pyr{width:54px;margin-bottom:8px}
.mcard b{display:block;font-family:var(--head);color:var(--red2);letter-spacing:.2em}
.mcard span{font-size:12px;color:var(--dim)}
.mcard p{line-height:1.5;margin:10px 0 0}
.cando{line-height:1.8;padding-left:18px}
.sharebar{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.foot{color:var(--dim);font-size:12px;line-height:1.6;margin-top:18px}

/* coach mark (first document only) */
.coach{position:fixed;z-index:25;width:320px;background:#e9d98a;color:#2a2410;padding:12px 14px;font-size:14px;line-height:1.5;box-shadow:0 12px 30px rgba(0,0,0,.6);animation:coachIn .5s ease-out}
.coach::before{content:"";position:absolute;top:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:#e9d98a}
.coach .w-red{color:#a01e14;font-weight:bold}.coach .w-ok{color:#2f5a1e;font-weight:bold}
.coach.go{background:#c9dcae}.coach.go::before{border-bottom-color:#c9dcae}
@keyframes coachIn{from{opacity:0;transform:translateY(-8px)}}
.cont-run{display:block;margin:12px auto 0}

/* archive */
#archive{position:fixed;inset:0;z-index:60;background:rgba(4,5,3,.88);display:flex;justify-content:center;overflow-y:auto;padding:30px 16px}
.arc{max-width:900px;width:100%;align-self:flex-start}
.arc-h{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.close{position:sticky;top:0;z-index:3}
.arc-h h2{font-size:44px;color:var(--paper)}
.arc-h p{color:var(--dim);line-height:1.6;max-width:640px}
.close{font-size:18px;padding:8px 14px}
.arc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px;position:sticky;top:-30px;background:rgba(4,5,3,.95);padding:10px 0}
.arc-tabs button{background:none;border:1px solid var(--line);color:var(--dim);padding:6px 12px;font-family:var(--head);letter-spacing:.12em}
.arc-tabs button.on{border-color:var(--red);color:var(--red2)}
.arc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding-bottom:40px}
.arc-c{background:var(--panel);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:8px}
.arc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--dim);letter-spacing:.06em}
.arc-m{color:#ee4a3c;font-family:var(--head);letter-spacing:.18em}
.arc-then{margin:0;font-size:13px;color:var(--dim);line-height:1.5}.arc-then em{font-style:normal;color:var(--paper)}
.arc-now{margin:0;line-height:1.55;font-size:15px}

.toast{position:fixed;left:50%;bottom:48px;transform:translate(-50%,30px);opacity:0;background:#0a0b07;border:1px solid var(--line);padding:12px 18px;font-size:14px;z-index:55;transition:all .3s;max-width:90vw;text-align:center;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
body.indesk .toast{bottom:auto;top:calc(var(--hud-h) + 10px)}
.toast.bad{border-color:var(--red);color:var(--red2)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

@media (max-width:760px){
  .brand span,.meter > span{display:none}
  /* two tidy rows: who/when + buttons, then the eye and the meter */
  #hud{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"brand day arch mute" "eye eye meter meter";gap:6px 8px;padding:6px 10px}
  .brand{grid-area:brand;font-size:16px}
  .daylbl{grid-area:day;margin-left:0;font-size:11px;align-self:center}
  #archBtn{grid-area:arch}#mute{grid-area:mute}
  .eyeb{grid-area:eye;font-size:12px;padding:3px 6px;white-space:nowrap;min-width:0}
  .meter{grid-area:meter;justify-content:flex-end}
  .mast{flex-wrap:wrap;gap:2px 8px}
  #ticker{white-space:normal;max-height:3.2em;line-height:1.4}
  /* one solid row: the document scrolls under it without showing through */
  .actions{position:sticky;bottom:0;z-index:2;background:#0b0c09;padding:8px 0 6px;flex-wrap:nowrap;gap:8px;align-items:stretch}
  .actions > button{flex:1 1 0;min-width:0;padding:10px 8px;font-size:15px;line-height:1.2}
  .holehud{display:none}
  .statbox{font-size:12px}
  .statbox span:last-child{display:none}
  #desk{grid-template-columns:1fr;padding-bottom:0}
  .dside{order:0}
  .directive{transform:none;font-size:14px}
  .paper{padding:20px 16px}
  .dlg{grid-template-columns:1fr;padding:16px;gap:14px}
  .dlg-p{position:static;display:flex;gap:12px;align-items:center}
  .dlg-p .portrait-svg{width:90px}
  .track{width:70px}
  .eyeb{min-width:0}
  .stamp{font-size:16px;top:auto;bottom:14px;right:12px}
  .posters{grid-template-columns:repeat(2,1fr)}
  .arc-h h2{font-size:32px}
  .note{padding:20px 18px;font-size:14px}.note h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#fx .grain{display:none}}