/* THE NIGHT COUNT — UI. Everything is 1997 office equipment: dot-matrix
   receipts, amber CRTs, laminated notices, and a POS terminal. */

:root{
  --paper:#e6e1d3; --ink:#20211c; --ink2:#4a4a41;
  --amber:#ffb642; --green:#9ff2b0; --crt:#0b0f0c;
  --red:#c0392b; --steel:#8d8b84;
  --ui:1.0;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;overflow:hidden}
body{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  color:#e8e6de;-webkit-font-smoothing:none;user-select:none;cursor:default}
#app{position:fixed;inset:0}
canvas#view{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#crosshair{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  background:rgba(235,235,225,.55);border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}
#prompt{position:absolute;left:50%;top:calc(50% + 30px);transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;padding:6px 13px 6px 7px;
  background:linear-gradient(180deg,rgba(14,15,13,.72),rgba(8,9,8,.80));
  border:1px solid rgba(220,220,200,.20);border-radius:3px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:0 4px 18px rgba(0,0,0,.55);
  font-size:calc(13px * var(--ui));letter-spacing:.04em;white-space:nowrap;
  text-shadow:0 1px 2px #000;animation:promptIn .16s ease}
@keyframes promptIn{from{opacity:0;transform:translateX(-50%) translateY(3px)}}
#promptKey{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;
  background:#d9d5c6;color:#191a16;font-weight:700;font-size:calc(11px * var(--ui));border-radius:2px}
#prompt.hold #promptKey{background:linear-gradient(90deg,var(--amber) var(--h,0%),#d9d5c6 0)}
#clock{position:absolute;right:16px;top:12px;font-size:calc(13px * var(--ui));
  color:#cfcabb;opacity:.75;letter-spacing:.12em;text-shadow:0 1px 2px #000}
/* The objective panel is on screen for the whole shift, over a picture that
   goes from a lit forecourt to a black stock room, so it carries its own
   ground instead of relying on a text shadow to survive both. */
#objective{position:absolute;left:16px;top:12px;max-width:340px;font-size:calc(12px * var(--ui));
  color:#d6d2c4;text-shadow:0 1px 2px #000;opacity:.94;transition:opacity .4s;
  padding:9px 13px 10px;border-left:2px solid rgba(255,182,66,.55);
  background:linear-gradient(100deg,rgba(9,10,9,.60),rgba(9,10,9,.20));
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#objective.dim{opacity:.28}
#objTitle{letter-spacing:.22em;font-size:calc(10px * var(--ui));color:#8f8b7e;margin-bottom:5px}
#objList{list-style:none;margin:0;padding:0}
#objList li{padding:1px 0 1px 15px;position:relative;line-height:1.45}
#objList li:before{content:"·";position:absolute;left:3px;color:#8f8b7e}
#objList li{transition:color .25s,opacity .25s}
#objList li.done{color:#7e8a76;text-decoration:line-through;opacity:.6}
#objList li.done:before{content:"×";color:#7e8a76}
/* Above #fade, which comes later in the DOM: Night 4 plays a whole scene
   with the screen black, and a caption you cannot read is not a caption. */
#subs{z-index:41;position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  width:min(78%,760px);text-align:center;font-size:calc(15px * var(--sub,1));line-height:1.5}
#subs .line{display:inline-block;padding:3px 12px;margin:2px;
  background:rgba(6,8,6,.72);color:#eeece2;text-shadow:0 1px 2px #000}
#subs.nobg .line{background:none}
#subs .who{color:var(--amber);letter-spacing:.06em}
#toast{position:absolute;left:50%;bottom:24%;transform:translateX(-50%) translateY(4px);
  font-size:calc(13px * var(--ui));color:#e4e0d2;opacity:0;
  transition:opacity .35s ease,transform .35s ease;
  background:linear-gradient(180deg,rgba(12,13,11,.78),rgba(7,8,7,.84));
  border:1px solid rgba(222,216,196,.14);border-radius:2px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  padding:7px 16px;text-align:center;max-width:70%}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- fades / title cards ---------- */
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .6s linear}
#titlecard{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  background:#000;gap:14px}
#tcMain{font-size:clamp(20px,3.4vw,38px);letter-spacing:.36em;color:#ded9c9}
#tcSub{font-size:clamp(11px,1.3vw,15px);letter-spacing:.22em;color:#8b8778}

/* ---------- focus surfaces ---------- */
#focus{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);pointer-events:auto}
#focus .surface{position:relative;box-shadow:0 24px 80px rgba(0,0,0,.8)}
#focus .esc{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:11px;color:#b9b5a6;letter-spacing:.16em;opacity:.75}

/* POS terminal ------------------------------------------------------------ */
.pos{width:min(94vw,880px);background:#26261f;border:2px solid #12120f;padding:14px;
  display:grid;grid-template-columns:1fr 250px;gap:14px;font-size:13px}
.pos .screen{background:var(--crt);border:2px inset #0a0a08;padding:12px;min-height:330px;
  color:var(--green);position:relative;overflow:hidden;text-shadow:0 0 6px rgba(120,255,150,.35)}
.pos .screen:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.pos .row{display:flex;justify-content:space-between;gap:8px;line-height:1.6}
.pos .row.dim{color:#5f8f6b}
.pos .hdr{border-bottom:1px dashed #2f6c40;margin-bottom:8px;padding-bottom:6px;
  display:flex;justify-content:space-between;letter-spacing:.1em}
.pos .total{border-top:1px dashed #2f6c40;margin-top:10px;padding-top:8px;font-size:18px}
.pos .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
.pos button{font:inherit;font-size:12px;padding:10px 4px;background:#3a3a31;color:#e6e2d4;
  border:1px solid #14140f;border-bottom-width:3px;cursor:pointer;letter-spacing:.04em}
.pos button:hover{background:#4a4a3f}
.pos button:active{transform:translateY(1px);border-bottom-width:2px}
.pos button.wide{grid-column:span 3}
.pos button.ok{background:#2f5334;color:#d6f5d9}
.pos button.warn{background:#5a3327;color:#f3d9cf}
.pos button:disabled{opacity:.4;cursor:not-allowed}
.pos .cash{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.pos .cash button{padding:7px 2px;font-size:11px}
.pos .note{color:#a09b8c;font-size:11px;margin-top:6px;line-height:1.45}

/* camera bank ------------------------------------------------------------- */
/* The feed is the real render, drawn to the game canvas behind this overlay,
   so the surface itself is transparent and only carries the OSD furniture. */
#focus.clear{background:transparent}
.cams{position:fixed;inset:0;background:transparent;border:0;padding:0;pointer-events:none}
.cams .main{position:absolute;inset:0;background:transparent;overflow:hidden}
.cams .osd{position:absolute;left:22px;top:18px;color:#cfd8cb;font-size:13px;letter-spacing:.14em;
  text-shadow:0 0 6px #000,0 0 2px #000}
.cams .osd.r{left:auto;right:22px}
.cams .osd.b{top:auto;bottom:74px}
.cams .rec{color:#ff6b5e}
.cams .strip{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:min(92vw,780px);display:grid;grid-template-columns:repeat(7,1fr);gap:6px;pointer-events:auto}
.cams .strip button{position:relative;background:#0a0b09;border:1px solid #2c2e29;color:#9aa196;
  font:inherit;font-size:10px;padding:4px 2px 3px;cursor:pointer;letter-spacing:.06em}
.cams .strip button.on{border-color:var(--amber);color:var(--amber)}
.cams .strip button.dead{color:#5b473f;border-color:#3a2c26}
.cams .bar{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);
  width:min(92vw,780px);display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:#8e948a;letter-spacing:.08em}

/* documents --------------------------------------------------------------- */
.doc{width:min(92vw,720px);max-height:84vh;overflow:auto;background:var(--paper);color:var(--ink);
  padding:34px 40px;font-size:14px;line-height:1.62;box-shadow:0 20px 60px #000;
  background-image:radial-gradient(rgba(120,110,80,.07) 1px,transparent 1px);background-size:3px 3px}
.doc h1{font-size:17px;letter-spacing:.2em;margin:0 0 4px;text-transform:uppercase}
.doc h2{font-size:13px;letter-spacing:.16em;margin:22px 0 6px;color:#5a5a4d}
.doc .meta{font-size:11px;color:#6b6a5c;letter-spacing:.08em;margin-bottom:18px;
  border-bottom:1px solid #b9b3a0;padding-bottom:8px}
.doc ol,.doc ul{padding-left:22px;margin:8px 0}
.doc li{margin:5px 0}
.doc .hand{font-family:"Bradley Hand","Segoe Script","Comic Sans MS",cursive;font-size:16px;color:#2b3550}
.doc .typed{font-family:inherit;letter-spacing:.04em}
.doc .stamp{display:inline-block;border:2px solid #8d3b2f;color:#8d3b2f;padding:3px 9px;
  transform:rotate(-4deg);letter-spacing:.14em;font-size:11px;margin:10px 0}
.doc table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
.doc th,.doc td{border:1px solid #b3ac98;padding:4px 7px;text-align:left}
.doc th{background:#d8d2c0;letter-spacing:.08em;font-weight:600}
.doc .faint{color:#7e7b6c}
.doc .redact{background:#20211c;color:transparent;user-select:none}
.doc .field{border-bottom:1px solid #8b8574;display:inline-block;min-width:130px}
.doc input,.doc select{font:inherit;font-size:13px;background:#f2eee0;border:1px solid #9a9482;
  padding:3px 6px;color:var(--ink);width:110px}
.doc button{font:inherit;font-size:12px;padding:7px 14px;background:#3c3a30;color:#eae6d8;
  border:none;cursor:pointer;letter-spacing:.1em;margin-top:10px}
.doc .sig{margin-top:20px;display:flex;gap:26px;align-items:flex-end}

/* notebook ---------------------------------------------------------------- */
.book{width:min(92vw,660px);max-height:82vh;overflow:auto;background:#dfe3e0;color:#1c2028;
  padding:26px 32px;font-size:13px;line-height:1.6;
  background-image:repeating-linear-gradient(180deg,transparent 0 25px,rgba(90,110,150,.22) 25px 26px)}
.book h1{font-size:12px;letter-spacing:.24em;color:#5a6270;margin:0 0 14px}
.book .entry{margin:0 0 14px}
.book .when{color:#6a7180;font-size:11px;letter-spacing:.1em}
.book .txt{font-family:"Bradley Hand","Segoe Script","Comic Sans MS",cursive;font-size:15px}

/* VHS --------------------------------------------------------------------- */
.vhs{position:fixed;inset:0;background:transparent;border:0;padding:0;pointer-events:none}
.vhs .tv{position:absolute;inset:0;background:transparent;overflow:hidden}
.vhs .tape{position:absolute;left:22px;top:18px;color:#dfe6dc;font-size:14px;letter-spacing:.12em;
  text-shadow:0 0 5px #000}
.vhs .ctl{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:6px;justify-content:center;pointer-events:auto}
.vhs button{font:inherit;font-size:11px;padding:7px 14px;background:#2a2a25;color:#ddd9cc;
  border:1px solid #000;cursor:pointer;letter-spacing:.12em}
.vhs button.on{background:#4a3a1f;color:var(--amber)}

/* ---------- menus ---------- */
#menu{position:absolute;inset:0;background:#070806;display:grid;place-items:center;
  pointer-events:auto;overflow:auto}
#menu.pause{background:rgba(5,6,5,.86)}
.menuWrap{width:min(94vw,660px);padding:30px 8px}
.brandmark{text-align:center;margin-bottom:26px}
.brandmark .t{font-size:clamp(26px,5vw,50px);letter-spacing:.4em;color:#e2ddcb;
  text-shadow:0 0 26px rgba(255,182,66,.16)}
.brandmark .s{margin-top:9px;font-size:11px;letter-spacing:.42em;color:#807c6e}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 14px;border-bottom:1px solid rgba(200,195,175,.09);font-size:13px;color:#cfcabb}
.mrow:hover{background:rgba(255,255,255,.03)}
.mrow label{letter-spacing:.06em;flex:1}
.mrow .hint{display:block;font-size:10px;color:#6f6c60;letter-spacing:.04em;margin-top:2px}
.mbtn{display:block;width:100%;text-align:left;font:inherit;font-size:15px;letter-spacing:.2em;
  color:#d8d3c2;background:none;border:none;border-left:2px solid transparent;
  padding:11px 16px;cursor:pointer}
.mbtn:hover,.mbtn:focus{background:rgba(255,182,66,.07);border-left-color:var(--amber);color:#fff}
.mbtn[disabled]{color:#57544a;cursor:not-allowed}
.mbtn[disabled]:hover{background:none;border-left-color:transparent}
.mrow input[type=range]{width:190px;accent-color:var(--amber)}
.mrow select,.mrow button.kb{font:inherit;font-size:12px;background:#1b1c18;color:#ddd8c8;
  border:1px solid #33352d;padding:5px 8px;cursor:pointer;min-width:110px}
.mrow input[type=checkbox]{width:16px;height:16px;accent-color:var(--amber)}
.tabs{display:flex;gap:2px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{font:inherit;font-size:11px;letter-spacing:.16em;padding:8px 14px;cursor:pointer;
  background:#15160f;color:#8d8a7c;border:1px solid #2a2b23}
.tabs button.on{background:#2b2c22;color:var(--amber);border-color:var(--amber)}
.mfoot{margin-top:20px;display:flex;justify-content:space-between;font-size:11px;color:#6c6a5e}
.credits{max-height:64vh;overflow:auto;font-size:12px;line-height:1.75;color:#b9b5a6;padding:0 16px}
.credits h3{color:#e0dbca;letter-spacing:.2em;font-size:12px;margin:20px 0 6px}
.credits a{color:#9db8a2}
.credits .small{font-size:11px;color:#7d7a6d}

/* ---------- boot ---------- */
#boot{position:absolute;inset:0;background:#000;display:grid;place-items:center;z-index:50}
#bootInner{text-align:center}
#bootTitle{font-size:13px;letter-spacing:.6em;color:#6f6b5e}
#bootBar{width:210px;height:2px;background:#1d1e1a;margin:16px auto 10px}
#bootBar i{display:block;height:100%;width:0;background:var(--amber);transition:width .25s}
#bootMsg{font-size:10px;letter-spacing:.24em;color:#4c4a42}

/* ---------- misc ---------- */
.blink{animation:bl 1.1s steps(2) infinite}
@keyframes bl{50%{opacity:.25}}
.center{text-align:center}

/* ══ text-mode screens ═════════════════════════════════════════════════════
   80x25 character grid. Sized so a full screen always fits the viewport;
   cells stay square-ish at any window size. */
.tvscreen{
  font-family:"IBM Plex Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  font-size:min(2.02vw,3.25vh);
  line-height:1.18;
  white-space:pre;
  letter-spacing:0;
  -webkit-font-smoothing:none;
  background:#0000a8;
  padding:0;margin:0 auto;width:max-content;
  text-rendering:optimizeSpeed;
  box-shadow:0 0 0 100vmax #000;
}
.tvrow{height:1.18em}
#menu.dosmode{background:#000;display:grid;place-items:center;padding:0}
#menu.dosmode .menuWrap{width:auto;padding:0}
/* scanline veneer on the character screens only */
.tvscreen:after{content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}

/* ══ register: Data Terminal Systems-style three-zone terminal ═════════════ */
.dts{display:grid;grid-template-columns:150px 1fr;gap:0;
  width:min(96vw,900px);background:#8f8b7e;border:3px solid #56534a;
  box-shadow:0 24px 70px rgba(0,0,0,.85);padding:14px;
  font-family:"IBM Plex Mono",Menlo,Consolas,monospace}
.dts .brandplate{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;
  color:#3a382f;font-size:10px;letter-spacing:.28em;margin-bottom:9px}
.dts .brandplate b{font-size:13px;letter-spacing:.34em}
/* the 20x2 vacuum fluorescent display */
.vfd{grid-column:1/-1;background:#06120c;border:3px inset #33312a;padding:10px 12px;margin-bottom:12px;
  font-size:clamp(14px,2.3vw,26px);line-height:1.35;color:#7dfcb8;white-space:pre;
  text-shadow:0 0 10px rgba(80,255,160,.55),0 0 26px rgba(60,255,150,.22);letter-spacing:.09em}
.vfd .dim{color:#2f7a55}
.dts .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-content:start}
.dts .fnkeys{display:grid;grid-template-rows:repeat(7,1fr);gap:5px}
.dts .deptwrap{display:grid;grid-template-columns:1fr 168px;gap:10px}
.dts .depts{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;align-content:start}
.dts button{font:inherit;font-size:11px;letter-spacing:.04em;padding:11px 3px;cursor:pointer;
  background:linear-gradient(#e8e4d6,#cdc8b8);color:#22201b;border:1px solid #6d6a5e;
  border-bottom-width:4px;border-radius:2px}
.dts button:hover{background:linear-gradient(#f4f0e2,#dcd7c6)}
.dts button:active{transform:translateY(2px);border-bottom-width:2px}
.dts button.fn{background:linear-gradient(#6f7d8c,#55606c);color:#f0f2f4;border-color:#3b434c}
.dts button.tender{background:linear-gradient(#4f7a52,#3b5c3e);color:#eaf6ea}
.dts button.void{background:linear-gradient(#8d4a3f,#6d382f);color:#f6e7e2}
.dts button.dept{background:linear-gradient(#dcd2b4,#c3b998);font-size:10px;text-align:left;padding-left:8px}
.dts button:disabled{opacity:.42;cursor:not-allowed}
.dts .num0{grid-column:span 2}
/* dot-matrix receipt */
.receipt{background:#f0ecdd;color:#2b2822;font-size:11px;line-height:1.45;padding:12px 10px;
  border:1px solid #a9a496;white-space:pre;min-height:210px;
  box-shadow:inset 0 -12px 18px -12px rgba(0,0,0,.35)}
.receipt .cut{color:#8d8878}

/* ══ CCTV multiplexer front panel ═════════════════════════════════════════ */
.mux{position:fixed;inset:0;background:transparent;pointer-events:none;
  font-family:"IBM Plex Mono",Menlo,Consolas,monospace}
.mux .osd{position:absolute;color:#fff;font-size:clamp(11px,1.5vw,19px);letter-spacing:.1em;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,0 0 6px rgba(0,0,0,.9)}
.mux .quadlbl{position:absolute;color:#fff;font-size:clamp(9px,1.1vw,14px);letter-spacing:.08em;
  text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000}
.mux .panel{position:absolute;left:0;right:0;bottom:0;pointer-events:auto;
  background:linear-gradient(#232520,#15160f);border-top:2px solid #3d3f36;
  padding:9px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mux .panel .plate{color:#8e9288;font-size:10px;letter-spacing:.26em;margin-right:10px}
.mux .panel button{font:inherit;font-size:10px;letter-spacing:.1em;padding:8px 11px;cursor:pointer;
  background:#2c2e28;color:#b9bdb2;border:1px solid #494c42;border-bottom-width:3px;border-radius:2px}
.mux .panel button:hover{background:#3a3d35}
.mux .panel button.on{background:#4a3c17;color:#ffcf5c;border-color:#ffcf5c}
.mux .panel button.dead{color:#6a4d44;border-color:#4a332c}
.mux .panel .lamp{width:8px;height:8px;border-radius:50%;background:#5a1f18;margin:0 4px}
.mux .panel .lamp.rec{background:#ff5a4a;box-shadow:0 0 8px #ff5a4a}
.mux .hint{margin-left:auto;color:#6f7268;font-size:10px;letter-spacing:.14em}

/* ══ front end ═════════════════════════════════════════════════════════════
   The station is rendered live behind all of this. Nothing here is a panel
   floating in space: the type sits on the picture, the picture does the work. */
#menu.cine{
  position:absolute;inset:0;background:none;display:block;overflow:hidden;
  font-family:"Helvetica Neue",Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#e9e6dd;
}
#menu.cine:before{ /* darken toward the type, keep the picture readable */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(96deg,rgba(3,4,6,.97) 0%,rgba(3,4,6,.93) 26%,rgba(3,4,6,.62) 48%,
                    rgba(3,4,6,.10) 72%,rgba(3,4,6,.38) 100%),
    linear-gradient(0deg,rgba(3,4,6,.72) 0%,rgba(3,4,6,0) 34%);
}
#menu.cine .cwrap{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 clamp(28px,7vw,110px);max-width:min(760px,62vw);
  margin:0 auto 0 0;                     /* pinned left, never centred */
  opacity:0;transform:translateY(10px);
}
/* an animation, not a transition: a throttled tab can strand a transition
   half-played and leave the menu invisible */
#menu.cine .cwrap.in{animation:cfade .85s ease forwards}
@keyframes cfade{to{opacity:1;transform:none}}

.cbrand{font-size:clamp(9px,1.05vw,12px);letter-spacing:.44em;color:#8d8878;
  text-transform:uppercase;margin-bottom:14px}
#menu.cine h1{
  margin:0;font-weight:200;line-height:.94;
  font-size:clamp(38px,7.4vw,92px);letter-spacing:.02em;color:#f2efe6;
  text-shadow:0 2px 30px rgba(0,0,0,1),0 4px 90px rgba(0,0,0,.9),0 0 90px rgba(255,182,66,.08);
}
#menu.cine h1.small{font-size:clamp(28px,4.4vw,52px)}
.ctag{margin-top:16px;font-size:clamp(12px,1.45vw,16px);color:#a9a496;
  font-style:italic;letter-spacing:.02em}
.ctitle{margin-bottom:clamp(26px,4.4vh,54px)}

.cmenu{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.citem{
  position:relative;background:none;border:0;padding:11px 0 11px 26px;cursor:pointer;
  text-align:left;color:#ddd9cd;font:inherit;transition:color .18s,padding .18s;
}
.citem:before{
  content:"";position:absolute;left:0;top:50%;width:12px;height:1px;
  background:var(--amber);transform:translateY(-50%) scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.citem .clabel{display:block;font-size:clamp(17px,2.05vw,25px);font-weight:300;letter-spacing:.03em}
.citem .csub{display:block;font-size:clamp(10px,1.05vw,12px);color:#7f7b6e;
  letter-spacing:.13em;text-transform:uppercase;margin-top:4px;
  opacity:0;transform:translateY(-3px);transition:opacity .22s,transform .22s}
.citem:hover,.citem:focus-visible{color:#fff;padding-left:34px;outline:none}
.citem:hover:before,.citem:focus-visible:before{transform:translateY(-50%) scaleX(1)}
.citem:hover .csub,.citem:focus-visible .csub{opacity:1;transform:none}
.citem[disabled]{color:#5c584e;cursor:not-allowed}
.citem[disabled] .csub{opacity:1;color:#4e4b43}
.citem[disabled]:hover{padding-left:26px}
.citem[disabled]:hover:before{transform:translateY(-50%) scaleX(0)}

.cfoot{position:absolute;z-index:2;left:clamp(28px,7vw,110px);right:clamp(28px,7vw,110px);
  bottom:clamp(18px,3.6vh,34px);display:flex;justify-content:space-between;gap:16px;
  font-size:clamp(8px,.92vw,10px);letter-spacing:.3em;color:#6b6759;text-transform:uppercase}
.cstats{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;color:#7f7b6e;text-transform:uppercase}
.cstats b{color:#d8d3c4;font-weight:500}
.cstats .warn{color:var(--amber)}
#menu.pause:before{background:linear-gradient(100deg,rgba(3,4,6,.93),rgba(3,4,6,.78) 55%,rgba(3,4,6,.66))}

/* settings / credits panel ------------------------------------------------ */
#menu.panel:before{background:rgba(4,5,7,.93)}
#menu.cine .panelwrap{max-width:min(880px,92vw);margin:0 auto;height:100%;
  justify-content:flex-start;padding-top:clamp(22px,5vh,54px);padding-bottom:24px}
.ptop{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:14px;border-bottom:1px solid rgba(210,205,185,.14)}
.ptop h2{margin:0;font-weight:300;font-size:clamp(17px,2.1vw,24px);letter-spacing:.16em;
  text-transform:uppercase;color:#eae6db}
.pback,.pdefault{background:none;border:0;color:#9b9686;font:inherit;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px 2px}
.pback:hover,.pdefault:hover{color:var(--amber)}
.ptabs{display:flex;gap:4px;margin:16px 0 6px;flex-wrap:wrap}
.ptabs button{background:none;border:0;border-bottom:2px solid transparent;color:#8a8578;
  font:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;transition:color .15s,border-color .15s}
.ptabs button:hover{color:#ddd8ca}
.ptabs button.on{color:#fff;border-bottom-color:var(--amber)}
.prows{overflow-y:auto;padding:6px 2px 10px;flex:1;min-height:0}
.prow{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:13px 4px;border-bottom:1px solid rgba(210,205,185,.07)}
.pname{font-size:14px;color:#ddd9cd;font-weight:300;letter-spacing:.02em}
.phint{display:block;font-size:11px;color:#757165;letter-spacing:.02em;margin-top:3px}
.pctl{display:flex;align-items:center;gap:12px;flex-shrink:0}
.pctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:clamp(130px,20vw,210px);height:2px;
  background:rgba(220,215,195,.22);outline:none;cursor:pointer;border-radius:2px}
.pctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--amber);cursor:pointer;box-shadow:0 0 0 4px rgba(255,182,66,.14)}
.pctl input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;
  background:var(--amber);cursor:pointer}
.pval{min-width:56px;text-align:right;font-size:12px;color:#9d998b;
  font-variant-numeric:tabular-nums}
.ptoggle{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  color:#8f8b7e;font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ptoggle i{width:34px;height:18px;border-radius:9px;background:rgba(220,215,195,.16);
  position:relative;transition:background .18s}
.ptoggle i:after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;
  border-radius:50%;background:#cfcabb;transition:transform .18s,background .18s}
.ptoggle.on i{background:rgba(255,182,66,.32)}
.ptoggle.on i:after{transform:translateX(16px);background:var(--amber)}
.ptoggle.on{color:#e6e2d5}
.pchoice{display:flex;gap:2px}
.pchoice button{background:none;border:1px solid rgba(210,205,185,.18);color:#8f8b7e;
  font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;cursor:pointer;transition:.15s}
.pchoice button:hover{color:#ddd8ca;border-color:rgba(210,205,185,.4)}
.pchoice button.on{color:#12110e;background:var(--amber);border-color:var(--amber)}
.pkey{background:none;border:1px solid rgba(210,205,185,.2);color:#ddd9cd;font:inherit;
  font-size:12px;letter-spacing:.1em;padding:8px 16px;min-width:92px;cursor:pointer;
  text-transform:uppercase;transition:.15s}
.pkey:hover{border-color:var(--amber);color:var(--amber)}
.pkey.listening{border-color:var(--amber);color:var(--amber);animation:bl 1s steps(2) infinite}
.pcredits{overflow-y:auto;flex:1;min-height:0;margin:18px 0 0;padding-right:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.72;
  color:#a8a496;white-space:pre-wrap}
.pkey.wide{min-width:200px}

/* ══ the eye ═══════════════════════════════════════════════════════════════
   Takes the whole menu away so the station behind it can be looked at, and
   stays behind as the only way back. It is the one control that must remain
   visible when everything else is gone, so it sits above the dimming layer. */
.peekeye{position:absolute;top:max(3.2vh,20px);left:50%;transform:translateX(-50%);
  width:44px;height:32px;display:grid;place-items:center;z-index:12;
  background:none;border:0;padding:0;cursor:pointer;opacity:.42;transition:opacity .18s}
.peekeye:hover{opacity:1}
.peekeye svg{width:26px;height:26px;fill:none;stroke:#e6e2d5;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.peekeye .eslash{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .22s}
#menu.peek .peekeye{opacity:.9}
#menu.peek .peekeye .eslash{stroke-dashoffset:0}
#menu.peek .peekeye svg{stroke:var(--amber)}
/* Everything except the eye goes, including the dimming veil — the point is to
   see the picture the menu is playing over, unfiltered. */
/* !important because .cwrap.in is filled by an animation, and an animation's
   filled value beats a normal declaration in the cascade. */
#menu.peek .cwrap{opacity:0!important;pointer-events:none;transition:opacity .3s}
#menu.peek:before{opacity:0;transition:opacity .3s}
#menu.peek{background:transparent}

/* ══ dev mode ══════════════════════════════════════════════════════════════ */
.devcode{display:grid;place-items:center;gap:18px;padding:6vh 0}
.devcode p{color:#8f8b7e;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0}
.devout{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;
  letter-spacing:.34em;color:var(--amber);min-height:38px}
.devpad{display:grid;grid-template-columns:repeat(3,64px);gap:8px}
.devpad button{background:none;border:1px solid rgba(210,205,185,.2);color:#ddd9cd;
  font:inherit;font-size:17px;padding:13px 0;cursor:pointer;transition:.12s}
.devpad button:hover{border-color:var(--amber);color:var(--amber)}
.devpad button:active{background:rgba(255,182,66,.16)}
.devpad button.wide{grid-column:span 2;font-size:11px;letter-spacing:.14em}
.deverr{color:#c96a52;font-size:12px;letter-spacing:.14em;text-transform:uppercase;min-height:16px}
.devtime{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.devclock{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;
  letter-spacing:.1em;color:var(--amber)}
.devsteps,.devpresets{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.devsteps button,.devpresets button{background:none;border:1px solid rgba(210,205,185,.18);
  color:#8f8b7e;font:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;cursor:pointer;transition:.12s}
.devsteps button:hover,.devpresets button:hover{color:var(--amber);border-color:var(--amber)}

/* ══ dialogue box ══════════════════════════════════════════════════════════
   Portrait, name, line — bottom of the screen, the way most games do it.
   Wren's own narration stays an unboxed caption: it is a thought, not speech. */
#dlg{position:fixed;inset:0;pointer-events:none;z-index:40}
#dlg .dbox{
  /* Fixed to the viewport, not to #subs: the caption container is a
     shrink-to-fit centred box, which was squashing the dialogue box to a few
     pixels wide and pushing it off the top of the screen. */
  position:fixed;left:50%;transform:translateX(-50%) translateY(12px);
  bottom:max(5vh,42px);z-index:40;
  display:flex;align-items:stretch;gap:0;text-align:left;
  width:min(720px,86vw);min-width:min(320px,96vw);
  background:linear-gradient(180deg,rgba(10,11,10,.88),rgba(6,7,6,.94));
  border:1px solid rgba(222,216,196,.16);
  border-left:2px solid var(--amber);
  backdrop-filter:blur(6px) saturate(.9);-webkit-backdrop-filter:blur(6px) saturate(.9);
  box-shadow:0 14px 50px rgba(0,0,0,.78),0 0 0 1px rgba(0,0,0,.45);
  opacity:0;transition:opacity .22s ease,transform .22s ease;
}
#dlg .dbox.in{opacity:1;transform:translateX(-50%) translateY(0)}
#dlg .dport{
  flex:0 0 auto;width:calc(84px * var(--sub,1));align-self:stretch;
  background:#0a0b09;overflow:hidden;position:relative;
  border-right:1px solid rgba(222,216,196,.12);
}
#dlg .dport img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.35) contrast(1.08) brightness(.92);image-rendering:auto}
#dlg .dport:after{ /* the same grain the game is rendered through */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 2px);
  box-shadow:inset 0 0 22px rgba(0,0,0,.85)}
#dlg .dport.none{width:0;border:0}
#dlg .dtext{flex:1;padding:calc(11px * var(--sub,1)) calc(16px * var(--sub,1));min-width:0}
#dlg .dname{font-size:calc(10px * var(--sub,1));letter-spacing:.24em;color:var(--amber);
  margin-bottom:calc(6px * var(--sub,1))}
#dlg .dline{font-size:calc(15px * var(--sub,1));line-height:1.5;color:#eeece2;
  min-height:calc(1.5em);text-shadow:0 1px 2px #000}
#dlg.nobg .dbox{background:rgba(4,5,4,.62)}

body.dlgOn #subs{bottom:calc(max(5vh,42px) + 104px)}

/* ══ the photograph ════════════════════════════════════════════════════════
   He takes it out once, in the car, before the first shift. It is the only
   thing in the game that is his rather than the station's. */
.photo{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0}
.photoImg{width:min(320px,70%);aspect-ratio:1;background:#171512 center/cover no-repeat;
  border:10px solid #efe9dc;box-shadow:0 8px 30px rgba(0,0,0,.6);transform:rotate(-1.2deg)}
.photo .caption{max-width:34ch;text-align:center;font-style:italic;color:#8e8a7d;font-size:13px;line-height:1.6}

/* ══ the watch ═════════════════════════════════════════════════════════════
   A buzz with a reason flashes warm. A buzz with nothing attached flashes
   cold and holds a beat longer — same mechanism, no extra tell. */
@keyframes watchBuzz{0%,100%{transform:translateX(0)}
  15%{transform:translateX(-2px)}35%{transform:translateX(2px)}
  55%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
#clock.buzz{animation:watchBuzz .34s ease-in-out 3;color:var(--amber);
  text-shadow:0 0 12px rgba(255,182,66,.5)}
#clock.buzzCold{color:#cfd6d8;text-shadow:0 0 14px rgba(180,205,210,.55)}

/* ══ talking ═══════════════════════════════════════════════════════════════
   Three ways to answer, above the dialogue box. Silence is always one of them
   and is never marked as safe — it just looks like the others. The timer bar
   is the only pressure; running out picks the silent option. */
/* One definition only. There were two full .choices blocks in this file, both
   positioning the same element, and the loser's `bottom` was still what the
   author had reasoned about — which is how the replies came to sit 65px on top
   of the line they were replying to. */
.choice{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:linear-gradient(180deg,rgba(12,13,12,.92),rgba(7,8,7,.96));
  border:1px solid rgba(222,216,196,.18);border-left:2px solid rgba(222,216,196,.28);
  color:#ddd9cd;font:inherit;font-size:14px;line-height:1.45;padding:10px 14px;
  cursor:pointer;transition:border-color .15s,color .15s,padding .15s}
.choice:hover{border-left-color:var(--amber);color:#fff;padding-left:18px}
.choice .cnum{flex:0 0 auto;font-size:11px;letter-spacing:.14em;color:#7f7b6e;
  padding-top:2px;min-width:14px}
.choice.silent .ctext{font-style:italic;color:#b9b4a6}
.ctimer{display:block;height:2px;background:var(--amber);width:100%;transform-origin:left;
  animation:ctick linear forwards;opacity:.55}
@keyframes ctick{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ══ the receipt ═══════════════════════════════════════════════════════════
   Thermal paper. The only thing on it that matters is the date at the bottom,
   so everything above it is deliberately mundane. */
.receipt{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.65;
  color:#2a2620;background:#efe9db;padding:18px 16px;width:min(300px,80%);margin:0 auto;
  white-space:pre;box-shadow:0 6px 24px rgba(0,0,0,.5);transform:rotate(-.6deg)}
.stamp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.12em;
  color:#c9c3b4;text-align:center;margin-top:14px}

/* ——— the ending: waking up ————————————————————————————————————————
   White, too bright, resolving slowly — the way waking up actually does. */
.wake{position:absolute;inset:0;background:#f4f2ee;color:#20211c;
  display:flex;align-items:center;justify-content:center;
  animation:wakeup 6s ease-out both}
@keyframes wakeup{
  0%{background:#fff;filter:brightness(2.6) blur(14px)}
  55%{filter:brightness(1.25) blur(3px)}
  100%{background:#f4f2ee;filter:none}}
.wakeInner{max-width:min(680px,86vw);max-height:78vh;overflow-y:auto;
  padding:6vh 0;scroll-behavior:smooth}
.wakeLine{opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;
  margin:0 0 15px;line-height:1.6;font-size:clamp(15px,2vw,18px)}
.wakeLine.in{opacity:1;transform:none}
.wakeLine.stage{color:#6b6a5c;font-style:italic}
.wakeLine.noah{color:#20211c}
.wakeLine.noah::before{content:"NOAH  ";color:#8a7a4a;letter-spacing:.08em;font-size:.78em}
.wakeLine.hand{color:#8a7a4a;text-align:center;letter-spacing:.3em}
/* the credits with nothing under them but a monitor */
.creditsQuiet{animation:none}
.thanks p{max-width:min(560px,84vw);margin:0 auto 18px;text-align:center;
  line-height:1.7;color:var(--ink,#d8d3c2)}
.thanks .sig{margin-top:26px;color:#8a7a4a;font-style:italic}
/* the billing block at the top of the credits */
.credits .billing{margin:14px auto 26px;text-align:center;max-width:min(520px,86vw)}
.credits .billing p{margin:0 0 14px;line-height:1.55}
.credits .billing b{color:var(--amber,#e8b23a);letter-spacing:.1em;font-size:.78em}

/* ——— the shift report ————————————————————————————————————————————
   The two seconds between nights used to be a held title card. It is now
   where the game says what you walked past, because that is the moment a
   player decides whether to work another shift. */
.shiftReport{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;background:#07080a;
  opacity:0;transition:opacity 1s ease;pointer-events:none;text-align:center;padding:0 6vw}
.shiftReport.in{opacity:1}
.shiftReport .srNight{font-size:clamp(22px,4.4vw,40px);letter-spacing:.22em;color:var(--amber,#e8b23a)}
.shiftReport .srClock{font-size:clamp(11px,1.5vw,13px);letter-spacing:.18em;color:#6b6a5c;
  text-transform:uppercase;margin-bottom:16px}
.shiftReport .srCount{font-size:clamp(15px,2.4vw,22px);color:#d8d3c2}
.shiftReport .srCount b{font-size:1.7em;color:#fff}
.shiftReport .srCount span{color:#8a8779}
.shiftReport .srMiss{font-size:clamp(13px,1.9vw,17px);color:#b9b3a0;margin-top:12px;max-width:34ch}
.shiftReport .srTill{font-size:clamp(12px,1.7vw,15px);color:#8f8a78;margin-top:14px;
  max-width:34ch;letter-spacing:.02em}
.shiftReport .srTail{font-size:clamp(12px,1.7vw,15px);color:#6b6a5c;font-style:italic;
  margin-top:26px;max-width:38ch;line-height:1.6}

/* ——— the title card ————————————————————————————————————————————
   Black, a pump, the name. It runs before the loader, so everything here is
   drawn: no font beyond the system stack, no image, no asset archive. */
.splash{position:fixed;inset:0;z-index:210;background:#000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 1.1s ease}
.splash.in{opacity:1}
.splash.out{opacity:0;transition:opacity .85s ease}
.spInner{display:flex;flex-direction:column;align-items:center;gap:26px;
  transform:translateY(8px) scale(.985);transition:transform 3.4s cubic-bezier(.2,.6,.2,1)}
.splash.in .spInner{transform:none}
.spPump{width:clamp(58px,7vw,84px);height:auto;fill:none;stroke:#8a7a52;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 14px rgba(232,178,58,.16))}
.spPump .spScreen{stroke:#c8933a}
.spPump .spHose{stroke:#6c6047}
/* the crown light is the only lit thing on it, and it ticks like a bad ballast */
.spPump .spGlow{stroke:#e8b23a;fill:rgba(232,178,58,.16);animation:spBallast 4.2s infinite}
@keyframes spBallast{0%,88%,100%{opacity:1}90%{opacity:.25}92%{opacity:.9}94%{opacity:.35}}
.spTitle{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:clamp(17px,3.1vw,30px);letter-spacing:.46em;text-indent:.46em;
  color:#ddd6c4;text-shadow:0 0 22px rgba(232,178,58,.22)}

/* ——— content warning · the station's own terminal ————————————————
   The first screen should already be inside the fiction: amber phosphor,
   scanlines, and a cursor that will not stop blinking at you.
   It used to be a tidy, well-behaved little panel — legible, period-correct,
   and completely unthreatening, which is the wrong note for the screen that
   says the word BLOOD. The tube is now failing: the picture slips its
   horizontal hold, the phosphor splits into red and cyan, and a dark tide
   comes up the edges. Nothing here is a jump scare; it is just a machine in
   bad condition, which is what the whole building is. */
.cwarn{position:fixed;inset:0;z-index:200;background:#020301;
  display:flex;align-items:center;justify-content:center;
  padding:0 6vw;opacity:0;transition:opacity 1.4s ease}
.cwarn.in{opacity:1}
@keyframes cwTide{0%,100%{opacity:.5}50%{opacity:1}}
/* more like a monitor: a bezel, a curved glass, a flicker and a rolling bar */
.cwarn .crt{position:relative;text-align:center;color:#e8b23a;
  border-radius:16px/22px;box-shadow:inset 0 0 60px rgba(0,0,0,.85),0 0 0 12px #14150f,
    0 0 0 15px #0a0b07,0 24px 70px rgba(0,0,0,.9);
  /* two faults at once, on prime-ish periods so they never settle into a beat */
  animation:crtFlick 5.5s infinite,crtSlip 7.3s infinite;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.14em;line-height:1.9;text-shadow:0 0 6px rgba(232,178,58,.55);
  padding:34px 30px;max-width:min(620px,88vw);
  border:1px solid rgba(232,178,58,.22);background:rgba(232,178,58,.03)}
/* scanlines + the curve of the glass */
.cwarn::after{content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.5) 2px 4px);
  mix-blend-mode:multiply}
/* the vignette, plus a slow red tide breathing in from the corners under it */
.cwarn::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,0) 44%,rgba(0,0,0,.86) 100%),
    radial-gradient(ellipse at center,rgba(0,0,0,0) 34%,rgba(64,7,4,.62) 100%);
  animation:cwTide 9s ease-in-out infinite}
/* Everything on both of these screens is decoration; a reader who has asked
   for less motion loses nothing by having it all hold still. */
@media (prefers-reduced-motion: reduce){
  .cwarn,.cwarn::before,.cwarn .crt,.cwarn .cwTitle,.cwarn .crt::after,
  .spPump .spGlow,.spInner{animation:none!important;transition:none!important}
}
.cwarn .cwHead{font-size:clamp(9px,1.3vw,11px);color:#7d6a35;letter-spacing:.2em;
  text-shadow:none;line-height:1.8}
.cwarn .cwRule{height:1px;background:rgba(232,178,58,.26);margin:16px 0}
.cwarn .cwTitle{font-size:clamp(24px,5.4vw,44px);letter-spacing:.4em;text-indent:.4em;
  color:#ff4433;margin:6px 0 14px;animation:cwSplit 3.1s infinite}
.cwarn p{margin:0 0 6px;font-size:clamp(11px,1.7vw,14px)}
.cwarn .cwStrong{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4);margin-top:12px}
.cwarn .cwGo{margin-top:6px;font-size:clamp(10px,1.4vw,12px);color:#9b8340;
  opacity:0;transition:opacity 1.2s ease}
.cwarn.ready .cwGo{opacity:1}
.cwarn .cwCur{animation:cwBlink 1.05s step-end infinite}
@keyframes cwBlink{50%{opacity:0}}
@keyframes crtFlick{0%,90%,100%{filter:none}91%{filter:brightness(1.3)}
  92.5%{filter:brightness(.72)}93.5%{filter:brightness(1.14)}94.5%{filter:brightness(.88)}}
/* the horizontal hold letting go for two frames, then catching again */
@keyframes crtSlip{0%,93%,100%{transform:none}
  94%{transform:translateX(-7px) skewX(-1.4deg)}
  95%{transform:translateX(5px) skewX(1deg)}
  96%{transform:translateX(-2px)}}
/* badly converged phosphor: red one way, cyan the other, never quite still */
@keyframes cwSplit{
  0%,100%{text-shadow:0 0 12px rgba(255,68,51,.5),-1px 0 rgba(255,40,30,.55),1px 0 rgba(60,220,220,.35)}
  47%{text-shadow:0 0 12px rgba(255,68,51,.5),-2.5px 0 rgba(255,40,30,.6),2.5px 0 rgba(60,220,220,.42)}
  52%{text-shadow:0 0 20px rgba(255,68,51,.7),-1px 0 rgba(255,40,30,.5),1px 0 rgba(60,220,220,.3)}}
/* the slow bright band that rolls down a real tube */
.cwarn .crt::after{content:"";position:absolute;left:0;right:0;height:26%;
  background:linear-gradient(180deg,rgba(232,178,58,0) 0%,rgba(232,178,58,.055) 50%,rgba(232,178,58,0) 100%);
  animation:crtRoll 7s linear infinite;pointer-events:none}
@keyframes crtRoll{0%{top:-30%}100%{top:104%}}
/* phosphor bloom on the text itself */
.cwarn .crt{text-rendering:geometricPrecision}

/* the loader wears the same glass */
#boot{position:relative}
#boot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 4px)}
#bootMsg{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.16em;text-transform:uppercase}


/* ——— dialogue choices sit under the box that asked ————————————————
   They were centred in the screen with no relationship to the speaker. A reply
   belongs directly beneath the line you are replying to. */
.choices{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);
  bottom:max(5vh,42px);z-index:45;display:flex;flex-direction:column;gap:7px;
  width:min(760px,86vw);opacity:0;pointer-events:auto;
  transition:opacity .25s ease,transform .25s ease}
.choices.in{opacity:1;transform:translateX(-50%) translateY(0)}
.choices .choice{display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 15px;text-align:left;cursor:pointer;
  background:rgba(10,11,9,.92);border:1px solid rgba(232,178,58,.3);
  color:#d8d3c2;font:inherit;font-size:clamp(13px,1.7vw,15px);line-height:1.4;
  transition:background .12s,border-color .12s,transform .12s}
.choices .choice:hover{background:rgba(28,26,18,.96);border-color:#e8b23a;transform:translateX(3px)}
.choices .choice .cnum{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;
  border:1px solid rgba(232,178,58,.5);color:#e8b23a;font-size:11px}
.choices .choice.silent{opacity:.82;font-style:italic}
.choices .ctimer{display:block;height:2px;background:#e8b23a;opacity:.75;
  transform-origin:left center;animation:cTick linear forwards;margin-top:2px}
@keyframes cTick{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* While a choice is open the two boxes STACK, and they stack by moving the
   dialogue box's `bottom` rather than by adding a transform.
   
   The old rule lifted it with translateY(-250px), which was a guess: it was
   65px short of three replies, so they sat on top of the line being replied
   to. Raising the guess only moves the problem to a different number of
   options. And a transform here fights `.dbox.in`, which owns the entrance
   animation and sets a transform of its own — two rules writing one property.
   
   `--choicesH` is the measured height of the replies, written by choices.js
   when they are shown. Changing `bottom` leaves the transform alone, so the
   entrance still plays and the arithmetic is exact for any number of them. */
body.choosing #dlg .dbox{
  bottom:calc(max(5vh,42px) + var(--choicesH,190px) + 14px)}

/* ══ demo build ════════════════════════════════════════════════════════════
   The demo says so once, under the name, and never again while you are
   playing. A watermark across a horror game is a worse crime than the demo
   being short. */
.cdemo{font-size:clamp(9px,1.05vw,11px);letter-spacing:.36em;color:var(--amber);
  opacity:.8;margin:0 0 12px}

/* The end card. Not a storefront — it says the demo is over, names what the
   next night opens with, and stops. */
.demoEnd{position:fixed;inset:0;z-index:120;background:#050604;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 8vw;gap:2px;opacity:0;transition:opacity 1.6s ease;
  font-family:"Helvetica Neue",Inter,-apple-system,"Segoe UI",Roboto,sans-serif}
.demoEnd.in{opacity:1}
.demoEnd .deBrand{font-size:clamp(9px,1.05vw,11px);letter-spacing:.42em;
  color:#7d7768;text-transform:uppercase;margin-bottom:20px}
.demoEnd .deTitle{font-size:clamp(22px,4vw,40px);letter-spacing:.34em;text-indent:.34em;
  color:#e9e6dd;margin-bottom:26px}
.demoEnd .deBody{font-size:clamp(12px,1.6vw,15px);line-height:1.75;color:#a8a496;
  max-width:44ch;margin:0 0 12px}
.demoEnd .deBody.de2{color:#8a8578}
.demoEnd .deGo{margin-top:30px;font-size:clamp(10px,1.2vw,12px);letter-spacing:.24em;
  text-transform:uppercase;color:#6c6759;opacity:0;transition:opacity 1.2s ease}
.demoEnd.ready .deGo{opacity:1}

/* Station 41 presentation: aged paper, brass keys and restrained CRT phosphor. */
:root{--paper:#dfd4b8;--amber:#c99c59;--green:#abc5a0;--crt:#0b100d}
#crosshair{width:2px;height:2px;background:#baa98a;box-shadow:0 0 3px #000;opacity:.65}
#crosshair.ready{width:5px;height:5px;margin:-2.5px;background:#c99c59;opacity:1}
#prompt{top:calc(50% + 35px);border:0;border-radius:0;border-bottom:1px solid #796445;
 padding:7px 12px 7px 0;background:linear-gradient(90deg,rgba(9,11,9,.92),rgba(9,11,9,.45));
 box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#e3d7bd;
 font-size:calc(12px * var(--ui));letter-spacing:.025em;max-width:88vw;white-space:normal}
#promptKey{background:#a38b61;color:#171b15;border-radius:0;min-width:24px;height:26px;box-shadow:inset 0 -2px #675739}
#objective{left:25px;top:22px;max-width:300px;padding:11px 14px 12px;border-left:1px solid #a0804c;
 background:linear-gradient(100deg,rgba(13,17,13,.87),rgba(13,17,13,.35));backdrop-filter:none;-webkit-backdrop-filter:none}
#objective.dim{opacity:.42}
#objTitle{color:#b5a788;letter-spacing:.18em}
#objList li{padding-top:3px;padding-bottom:3px;line-height:1.45}
#objList li:before{content:'—';color:#8b7d63}
#objList li.done:before{content:'✓'}
#clock{right:25px;top:22px;background:#101710;color:#b6c7a2;padding:7px 10px;
 border-bottom:1px solid #444e37;font-size:calc(12px * var(--ui));opacity:.9}
#toast{border:0;border-left:2px solid #9c7943;border-radius:0;color:#d4c8aa;
 background:rgba(13,16,12,.91);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 3px 18px #0008}
#menu.cine .cbrand{color:#b79a6c;font-family:inherit;letter-spacing:.21em;font-size:11px}
#menu.cine h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.075em;
 text-shadow:0 2px 16px #000;color:#e2d7bc;font-size:clamp(32px,5.4vw,65px);max-width:11ch;line-height:1.02}
#menu.cine .ctag{font-family:inherit;color:#adab94;font-size:12px;letter-spacing:.02em;margin-top:17px;line-height:1.6}
#menu.cine .ctitle{padding-bottom:22px;border-bottom:1px solid #82704b66;margin-bottom:20px}
.citem .clabel{font-family:inherit;text-transform:uppercase;letter-spacing:.12em;font-size:14px}
.citem .csub{font-family:inherit;font-size:10px;letter-spacing:.025em;color:#a49b87;opacity:.9;transform:none}
.citem{padding-top:10px;padding-bottom:10px;color:#d2c9b3}
.citem:hover,.citem:focus-visible{color:#e4c18c;background:linear-gradient(90deg,#ba955612,transparent)}
.citem:before{background:#c99c59}
.cfoot{font-family:inherit;border-top:1px solid #7b6b483d;padding-top:14px;line-height:1.7;color:#968c78}
.pos{background:linear-gradient(135deg,#383a2f,#24271f);border:3px solid #11150f;border-radius:5px;padding:19px}
.pos .screen{border:7px solid #161e15;border-radius:11px;color:#adc49e;box-shadow:inset 0 0 35px #000a;text-shadow:0 0 5px #8aaf6944}
.pos .screen:after{opacity:.42}
.pos button{background:#5a5948;color:#e1d8bf;border-color:#21251b;border-bottom-width:4px;border-radius:2px}
.pos button.ok{background:#46573d}.pos button.warn{background:#754e38}
.cams .strip{background:#11150fd9;padding:7px;border-top:1px solid #505640;gap:5px;bottom:12px}
.cams .strip button{color:#9aa98e;background:#20251d;border-color:#4b513d;border-bottom:3px solid #0b100a;padding:7px 3px}
.cams .strip button.on{color:#dac39a;border-color:#9c855a;background:#353c29}
.cams .bar{bottom:69px;color:#a5b097;font-family:inherit}
.cams .osd{color:#b6c7a2}.cams .rec{color:#b9745e}
.doc{background-color:#e0d5b9;border-top:7px solid #b2a487;border-bottom:1px solid #8a7a58;
 padding:32px 40px;color:#303225;box-shadow:3px 4px 0 #74674d,0 22px 65px #000b}
.doc .meta{border-bottom:1px dashed #8e8265;color:#6a634e}
.book{background-color:#d7d6bd;border-left:18px solid #4b574a;padding-left:35px;
 background-image:linear-gradient(90deg,transparent 0 23px,#a5655355 23px 24px,transparent 24px),repeating-linear-gradient(180deg,transparent 0 25px,#637e6a33 25px 26px);
 box-shadow:5px 5px 0 #253026,0 20px 60px #000b}
.book h1{color:#4c604d}.book .when{color:#667058}
#dlg .dbox{border-color:#7d71524d;background:rgba(11,15,11,.93)}
button:focus-visible{outline:1px solid #c99c59;outline-offset:3px}
@media(max-width:700px){#objective{left:12px;top:12px;max-width:240px}#clock{right:12px;top:12px}.pos{grid-template-columns:1fr;max-height:87vh;overflow:auto}.doc{padding:24px}.citem .csub{max-width:65vw}#menu.cine h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){.cwrap.in,#prompt,.cwarn .crt::after{animation:none!important}*{scroll-behavior:auto!important}}

/* Three pockets, one item in hand. */
#inventory { position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font:12px ui-monospace,monospace;color:#cabda4;pointer-events:none;max-width:95vw; }
.inventory-slots {display:flex;gap:7px;justify-content:center;}
.inventory-slot {display:flex;align-items:center;gap:9px;width:126px;min-height:39px;padding:6px 10px;box-sizing:border-box;background:rgba(17,22,20,.92);border:1px solid #655d4d;border-radius:3px;}
.inventory-slot b {color:#bca16d;font-size:16px;}
.inventory-slot.selected {border-color:#deb979;background:#34372b;box-shadow:inset 0 2px #deb979;}
.inventory-help {text-align:center;font-size:10px;margin-top:7px;letter-spacing:.3px;color:#c1b49b;text-shadow:0 2px 3px #000;}
#clockGuide {position:absolute;left:25px;bottom:100px;max-width:310px;padding:12px 15px;border-left:3px solid #ccaa68;background:rgba(16,23,19,.90);color:#efdfb5;font:12px/1.6 ui-monospace,monospace;pointer-events:none;}
@media(max-width:600px){.inventory-slot{width:104px;font-size:11px}#clockGuide{bottom:150px;left:12px;max-width:230px}}

#delivery-run{position:fixed;top:15%;left:50%;transform:translateX(-50%);z-index:80;text-align:center;background:rgba(25,12,9,.94);border:1px solid #ad735b;border-top:3px solid #cfaa77;color:#f0dcb5;padding:16px 25px;max-width:90vw;font-family:monospace;pointer-events:none}#delivery-run[hidden]{display:none}#delivery-run strong{display:block;font-size:clamp(18px,3vw,30px);letter-spacing:.12em}#delivery-run span{display:block;margin-top:9px;font-size:13px;color:#d2c4aa}#shotgun-status{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);color:#e7d6b3;background:rgba(19,24,20,.9);border:1px solid #917d57;padding:7px 12px;font:12px monospace;white-space:nowrap}#shotgun-status[hidden]{display:none}

/* Keep the cleaning location and control hint on separate readable lines. */
#clockGuide {white-space:pre-line;}

/* Four-slot kit and a 1997 mobile contact screen. */
.inventory-slots{display:grid;grid-template-columns:repeat(4,minmax(70px,1fr))}.inventory-slot{width:auto;min-width:0}.inventory-help{font-size:10px}@media(max-width:600px){#inventory{width:calc(100vw - 24px)}.inventory-slot{width:auto;padding:5px;gap:5px}}
.cellphone{width:min(410px,85vw);border:10px solid #252b29;border-radius:30px;background:#39413e;padding:22px;box-shadow:0 16px 65px #000b;color:#ece4ce}
.phone-brand{font:11px monospace;letter-spacing:.13em;text-align:center;margin-bottom:18px}
.phone-screen{background:#b5c18c;color:#203028;border:5px inset #4b5744;padding:18px;min-height:240px;font:15px/1.6 monospace}
.phone-screen h2{font-size:21px;letter-spacing:.1em;margin:10px 0}.phone-screen small{font-size:11px}
.phone-buttons{display:grid;gap:10px;margin-top:22px}.phone-buttons button{font:15px monospace;background:#171e1c;color:#ece4ce;border:1px solid #728170;padding:13px;border-radius:9px;cursor:pointer}.phone-buttons button:focus,.phone-buttons button:hover{background:#4e6548;border-color:#ffaa44}