:root{
  --yellow:#d8c266; --yellow-dim:#8a7a3c; --ink:#0c0b07; --bone:#e8e2cf; --alert:#b03a2e;
  /* the per-floor accent: every HUD/menu rule below reads these, and
     lifecycle.js swaps body.lvl0/lvl1/lvl2 on a level change, so the whole
     interface takes on the colour of the place you are standing in */
  --accent:#d8c266; --accent-dim:#8a7a3c;
  --accent-08:rgba(216,194,102,.08); --accent-15:rgba(216,194,102,.15);
  --accent-28:rgba(216,194,102,.28); --accent-50:rgba(216,194,102,.5);
  --glow:rgba(216,194,102,.25);
}
body.lvl1{                       /* THE END: dead daylight through dust */
  --accent:#a8bccb; --accent-dim:#5f7383;
  --accent-08:rgba(168,188,203,.08); --accent-15:rgba(168,188,203,.15);
  --accent-28:rgba(168,188,203,.28); --accent-50:rgba(168,188,203,.5);
  --glow:rgba(168,188,203,.22);
}
body.lvl2{                       /* THE NEST: fungus blue */
  --accent:#77c7bb; --accent-dim:#3f7a71;
  --accent-08:rgba(119,199,187,.08); --accent-15:rgba(119,199,187,.15);
  --accent-28:rgba(119,199,187,.28); --accent-50:rgba(119,199,187,.5);
  --glow:rgba(119,199,187,.22);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
body{font-family:"Courier New",Courier,monospace;color:var(--bone)}
#game{position:fixed;inset:0;cursor:none;transition:filter 1.4s ease}
canvas{display:block}
/* the world drains out from under you while the death camera runs. Kept
   deliberately mild: these floors are already dark, and the point of the
   shot is that you SEE what is standing over you — crush it any further and
   the iris closes on a black circle. */
body.dying #game{filter:grayscale(.55) contrast(1.08) brightness(.86) saturate(.8)}

/* ---------- screen-space FX layers ---------- */
.fxlayer{position:fixed;inset:0;pointer-events:none}
#vignette{background:radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(0,0,0,.65) 100%);opacity:.8}
#dread{background:radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(60,0,0,.55) 100%);opacity:0;transition:opacity .25s linear}
/* jittering layers bleed past the viewport (inset:-N) so their travel never
   exposes an uncovered strip along the screen edges */
#grain{inset:-16px;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");animation:grain .35s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-12px,8px)}50%{transform:translate(9px,-10px)}75%{transform:translate(-7px,-6px)}100%{transform:translate(0,0)}}
#flash{background:#fff;opacity:0}
/* the death iris. --r is the clear radius (% of the gradient's ending shape);
   cutscene.js walks it from wide open down to 0 as you go down, so the black
   closes in around whatever is standing over you rather than cutting to it. */
#deathfx{--r:170%;opacity:0;
  background:radial-gradient(ellipse at 50% 54%,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) calc(var(--r) * 0.62),
    rgba(10,1,1,.82) calc(var(--r) * 0.9),
    #000 var(--r))}
/* entity-proximity static: TV-snow noise, driven by distance in monster.js */
/* multiply blend + red-shifted noise: the snow reads as black/red interference
   chewing into the image rather than a white glow over it */
#staticfx{inset:-24px;opacity:0;mix-blend-mode:multiply;filter:grayscale(1) contrast(2.4) brightness(1.32) sepia(1) saturate(2.8) hue-rotate(-30deg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  animation:staticjit .14s steps(2) infinite;transition:opacity .18s linear}
@keyframes staticjit{0%{transform:translate(0,0)}25%{transform:translate(-18px,12px)}50%{transform:translate(14px,-16px)}75%{transform:translate(-10px,-9px)}100%{transform:translate(0,0)}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1s}
#hud.on{opacity:1}
/* cutscenes own the screen: while the camera is scripted the whole HUD —
   objectives, stamina, menu button, key hints — bows out on a 1s fade,
   and the faded menu button stops catching clicks */
#hud.cine{opacity:0}
#hud.cine #topright{pointer-events:none}
.panel{background:rgba(8,7,4,.72);border:1px solid var(--accent-28);backdrop-filter:blur(2px)}

/* ---------- objectives log ---------- */
#objectives{position:fixed;top:18px;left:18px;padding:0;max-width:430px;min-width:290px;
  border-left:3px solid var(--accent-50)}
#objHead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 16px 10px;border-bottom:1px solid var(--accent-28);background:var(--accent-08)}
#objFloor{font-size:13px;letter-spacing:.28em;color:var(--accent)}
#objPlace{font-size:10.5px;letter-spacing:.22em;color:#8d8468}
#objList{list-style:none;padding:12px 16px 4px}
#objectives li{display:flex;align-items:baseline;gap:9px;font-size:15px;line-height:1.6;
  color:#7b7360;padding:3px 0}
#objectives li .omark{flex:0 0 13px;color:#5f5947}
#objectives li .otext{flex:1 1 auto}
#objectives li .ocount{flex:0 0 auto;display:flex;align-items:center;gap:6px;
  font-size:12px;letter-spacing:.08em;color:#8d8468;white-space:nowrap}
#objectives li.active{color:var(--bone)}
#objectives li.active .omark{color:var(--accent)}
#objectives li.active .ocount{color:var(--accent)}
#objectives li.done{color:#5c6a48}
#objectives li.done .omark{color:#5c6a48}
/* the bearing row under a live objective — a direction you can feel, not a marker */
#objectives li.sub{font-size:12px;letter-spacing:.18em;color:var(--accent-dim);
  padding:1px 0 5px 22px;display:block}
#objectives li.sub b{color:var(--accent);font-weight:400;letter-spacing:.1em}
/* counters: pips while the total is small enough to read at a glance, a
   meter once it isn't (the disk hunt runs to twenty-odd) */
.pip{width:7px;height:7px;border:1px solid currentColor;opacity:.45}
.pip.on{background:currentColor;opacity:1}
.ometer{width:56px;height:6px;border:1px solid currentColor;opacity:.75;padding:1px}
.ometer i{display:block;height:100%;background:currentColor}
#stats{margin:0 16px;padding:9px 0 11px;border-top:1px dashed var(--accent-28);
  font-size:12.5px;color:#8d8468;letter-spacing:.08em;display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center}
.chip{font-size:10.5px;letter-spacing:.16em;padding:2px 7px;border:1px solid var(--accent-28);color:var(--accent-dim)}
.chip.warn{color:#e6784f;border-color:rgba(230,120,79,.5);animation:blink .8s steps(2) infinite}
/* a new objective just went live: the panel takes one breath */
#objectives.flash{animation:objflash 1.1s ease-out 1}
@keyframes objflash{
  0%{box-shadow:0 0 0 0 var(--glow), inset 0 0 30px 0 var(--accent-15)}
  100%{box-shadow:0 0 0 26px rgba(0,0,0,0), inset 0 0 0 0 rgba(0,0,0,0)}
}

#topright{position:fixed;top:18px;right:18px;display:flex;gap:10px;pointer-events:auto}
.hudbtn{font-family:inherit;font-size:13px;letter-spacing:.22em;padding:11px 18px;background:rgba(8,7,4,.72);
  color:var(--accent);border:1px solid var(--accent-50);cursor:pointer}
.hudbtn:hover{background:var(--accent-15)}

#staminaWrap{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);width:430px;
  opacity:0;transition:opacity .3s}
#staminaWrap.show{opacity:1}
#stamLabel{display:flex;justify-content:space-between;font-size:14px;letter-spacing:.3em;color:#b3a87e;margin-bottom:7px;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
#stamLabel .lowtag{color:var(--alert);display:none}
#staminaWrap.low #stamLabel .lowtag{display:inline;animation:blink .7s steps(2) infinite}
#stamBar{height:24px;background:rgba(0,0,0,.45);border:1px solid rgba(216,194,102,.4);padding:3px}
#stamina{height:100%;width:100%;background:var(--yellow);transition:width .1s linear, background .3s;
  box-shadow:0 0 10px rgba(216,194,102,.25)}
#staminaWrap.low #stamina{background:var(--alert);box-shadow:0 0 10px rgba(176,58,46,.35)}
/* post-breaker adrenaline: the same bar gone cold blue, pinned full */
#staminaWrap.adren #stamLabel{color:#7fb4ff}
#staminaWrap.adren #stamBar{border-color:rgba(73,142,255,.5)}
#staminaWrap.adren #stamina{background:#3f8cff;box-shadow:0 0 12px rgba(63,140,255,.45)}
#staminaWrap.adren #stamLabel .lowtag{display:none}

/* THE NEST's crank lantern: a second, smaller bar above stamina */
#lanternWrap{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);width:300px;
  opacity:0;transition:opacity .3s}
#lanternWrap.show{opacity:1}
#lantLabel{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.24em;color:#8fa8ae;margin-bottom:5px;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
#lantLabel .deadtag{color:var(--alert);display:none}
#lanternWrap.low.on #lantLabel .deadtag{display:inline;animation:blink .7s steps(2) infinite}
#lantBar{height:14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,214,150,.35);padding:2px}
#lantern{height:100%;width:65%;background:#6b5b3e;transition:width .1s linear, background .3s, box-shadow .3s}
#lanternWrap.on #lantern{background:#ffcf8a;box-shadow:0 0 12px rgba(255,207,138,.45)}
#lanternWrap.low #lantern{background:#8a4a30}
#lanternWrap.on.low #lantern{background:#ff7a4a;box-shadow:0 0 10px rgba(255,122,74,.4)}

#keysHint{position:fixed;bottom:18px;right:18px;font-size:12.5px;letter-spacing:.14em;color:#7d7560;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
#prompt{position:fixed;bottom:14%;left:50%;transform:translateX(-50%);font-size:18px;letter-spacing:.12em;
  color:var(--bone);text-shadow:0 0 8px rgba(0,0,0,.9);opacity:0;transition:opacity .15s}
#prompt.show{opacity:1}
#prompt b{color:var(--accent)}
#hiddenTag{position:fixed;bottom:9%;left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.5em;
  color:#6f87b8;opacity:0;transition:opacity .3s}
#hiddenTag.show{opacity:.9}
#toast{position:fixed;top:22%;left:50%;transform:translateX(-50%);font-size:18px;letter-spacing:.14em;
  color:var(--accent);text-shadow:0 0 14px rgba(0,0,0,1);opacity:0;transition:opacity .5s;text-align:center;max-width:80vw}
#crosshair{position:fixed;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:rgba(232,226,207,.55)}

/* ---------- level title card (THE END reveal) ---------- */
#levelTitle{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity 1.6s ease}
#levelTitle.show{opacity:1}
#ltMain{font-size:54px;letter-spacing:.55em;color:#cdd3da;text-indent:.55em;
  text-shadow:0 0 26px rgba(0,0,0,1),0 0 60px rgba(120,140,170,.25)}
#ltSub{margin-top:14px;font-size:13px;letter-spacing:.42em;color:#737d8c;text-indent:.42em;
  text-shadow:0 0 12px rgba(0,0,0,1)}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,3,1,.9);z-index:40;pointer-events:auto}
.overlay.hide{display:none}
.sheet{max-width:680px;width:92%;max-height:88vh;overflow:auto;padding:34px 42px 38px;
  border:1px solid var(--accent-28);
  background:linear-gradient(180deg, rgba(20,17,8,.97), rgba(10,9,5,.97));box-shadow:0 0 80px rgba(0,0,0,.9)}
.sheet h1{font-size:26px;letter-spacing:.3em;color:var(--accent);font-weight:400;margin-bottom:5px}
.sheet h2{font-size:11.5px;letter-spacing:.28em;color:#8d8468;font-weight:400;margin-bottom:22px}
.sheet h3{font-size:11.5px;letter-spacing:.24em;color:var(--accent);font-weight:400;
  margin:22px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--accent-15)}
.sheet p,.sheet li{font-size:14px;line-height:1.8;color:#d3ccb6}
.sheet p+p{margin-top:9px}
.sheet b{color:#f0e9d2;font-weight:400;letter-spacing:.02em}
.sheet i{color:#bdb59c}
.sheet ul{list-style:none}
.sheet .lede{color:#a9a189;font-size:13.5px;font-style:normal}
kbd{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;margin:0 2px 0 0;font-family:inherit;font-size:12px;
  color:var(--accent);border:1px solid var(--accent-50);border-bottom-width:2px;background:var(--accent-08)}
.bigbtn{display:block;margin:26px auto 0;font-family:inherit;font-size:13px;letter-spacing:.3em;padding:14px 38px;
  color:var(--ink);background:var(--accent);border:none;cursor:pointer;min-width:270px;white-space:nowrap}
.bigbtn:hover{background:#efdb84}
.ghostbtn{margin-top:12px;background:transparent;color:var(--accent);border:1px solid var(--accent-50)}
.ghostbtn:hover{background:var(--accent-15);color:var(--accent)}
.subtle{font-size:11px;color:#6e6750;letter-spacing:.1em;text-align:center;margin-top:16px}
.statrow{display:flex;justify-content:space-between;gap:20px;border-bottom:1px dashed var(--accent-28);
  padding:8px 2px;font-size:13px;color:#a9a189}
.statrow span:last-child{color:var(--accent);letter-spacing:.1em}
.blink{animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
#titleArt{font-size:10px;line-height:1.25;color:var(--accent-dim);white-space:pre;margin-bottom:18px;overflow:hidden}

/* ---------- how to play (tabbed guide) ---------- */
.sheet.guide{max-width:760px}
.tabs{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 4px;border-bottom:1px solid var(--accent-28)}
.tab{font-family:inherit;font-size:11px;letter-spacing:.2em;padding:10px 15px;cursor:pointer;
  color:#8d8468;background:transparent;border:1px solid transparent;border-bottom:none;
  position:relative;top:1px}
.tab:hover{color:var(--bone);background:var(--accent-08)}
.tab.on{color:var(--accent);background:var(--accent-08);border-color:var(--accent-28);
  border-bottom:1px solid #14110a}
.tab.locked{color:#4e4839;letter-spacing:.34em}
.pane{display:none;padding-top:6px}
.pane.on{display:block}
/* an unreached floor keeps its pages sealed — the note shows, the body doesn't */
.locknote{display:none;color:#7d7560!important;font-style:italic;padding:26px 0 8px;text-align:center}
.pane.sealed .locknote{display:block}
.pane.sealed .lockbody{display:none}
.keys{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;align-items:baseline;margin-top:4px}
.keys dt{padding-top:3px;white-space:nowrap}
.keys dd{font-size:14px;line-height:1.65;color:#e0d9c2}
.keys dd .q{color:#a9a189}
.legend li{padding:5px 0 5px 16px;position:relative;font-size:13.5px;color:#c6bfa9}
.legend li::before{content:"·";position:absolute;left:2px;color:var(--accent)}
.legend li b{color:var(--accent)}
.rules{list-style:none;counter-reset:r}
.rules li{counter-increment:r;padding:8px 0 8px 34px;position:relative;font-size:13.5px}
.rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:8px;
  font-size:11px;letter-spacing:.1em;color:var(--accent-dim)}
.rules.tight li{padding:3px 0 3px 34px}
.ex-act{color:var(--accent)}
.ex-done{color:#5c6a48}
.ex-alert{color:var(--alert)}
.ex-blue{color:#7fb4ff}

/* ---------- options ---------- */
.optrow{display:grid;grid-template-columns:96px 1fr 52px;align-items:center;gap:8px 16px;margin:14px 0 16px}
.optrow label{font-size:11px;letter-spacing:.24em;color:#bdb28b}
.optrow output{font-size:12px;color:var(--accent);text-align:right;letter-spacing:.06em}
.optrow input[type=checkbox]{justify-self:start}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--accent-15);
  outline:none;cursor:pointer;border:1px solid var(--accent-28)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:20px;
  background:var(--accent);border:1px solid #0c0b07;cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:20px;background:var(--accent);border:1px solid #0c0b07;cursor:pointer;border-radius:0}
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:15px;height:15px;cursor:pointer;
  border:1px solid var(--accent-50);background:var(--accent-08)}
input[type=checkbox]:checked{background:var(--accent)}

/* ---------- death ---------- */
#deathOverlay{background:rgba(6,1,1,.93)}
#deathOverlay .sheet{border-color:rgba(176,58,46,.5);max-width:500px;text-align:center;
  background:linear-gradient(180deg, rgba(26,10,8,.97), rgba(9,5,4,.97));
  animation:deathin .9s ease-out 1}
@keyframes deathin{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}}
#deathOverlay h1{color:var(--alert);letter-spacing:.22em;font-size:28px}
#deathOverlay h2{color:#a3705f;margin-bottom:18px}
#deathOverlay .sheet p{color:#c3b7ae}
#deathRule{width:56px;height:2px;background:var(--alert);margin:0 auto 16px;opacity:.75}
#deathOverlay h3,#deathOverlay .statrow{border-color:rgba(176,58,46,.28)}
#deathOverlay .statrow span:last-child{color:#d38f7a}
.tip{margin-top:18px;padding:12px 16px;border:1px solid rgba(176,58,46,.35);background:rgba(60,14,10,.35);
  font-size:13px;line-height:1.7;color:#c9bdb2;text-align:left}
.tip b{display:block;font-size:10.5px;letter-spacing:.26em;color:var(--alert);margin-bottom:5px}
#deathStats{margin-top:18px}
#deathOverlay .bigbtn{background:var(--alert);color:#f4e9e4}
#deathOverlay .bigbtn:hover{background:#cf4b3c}

/* ---------- win ---------- */
#winOverlay .sheet{max-width:520px;text-align:center}
#winOverlay h1{color:#9fc06a;letter-spacing:.24em;font-size:28px}
#winOverlay h2{color:#7f8f66}
#winBadge{display:inline-block;font-size:10.5px;letter-spacing:.34em;color:#0c0b07;background:#9fc06a;
  padding:5px 14px;margin-bottom:14px}
#winBadge.hide{display:none}
#winOverlay .statrow span:last-child{color:#b8d283}
#winNote{color:#8a8368;font-size:12px;line-height:1.7;max-width:400px;margin:18px auto 0}
#winOverlay .bigbtn{background:#9fc06a;color:var(--ink)}
#winOverlay .bigbtn:hover{background:#b6d67f}
/* the campaign is over, not just the level: the sheet goes cold and pale */
#winOverlay.finale{background:rgba(10,13,15,.94)}
#winOverlay.finale .sheet{border-color:rgba(190,208,216,.45);
  background:linear-gradient(180deg, rgba(24,30,34,.97), rgba(8,11,13,.97))}
#winOverlay.finale h1{color:#dfe8ec;letter-spacing:.4em;font-size:32px;
  text-shadow:0 0 30px rgba(180,205,215,.35)}
#winOverlay.finale h2{color:#7e8f98}
#winOverlay.finale #winBadge{background:#cfdde3;color:#0d1114}
#winOverlay.finale .statrow{border-color:rgba(190,208,216,.22);color:#9aa8b0}
#winOverlay.finale .statrow span:last-child{color:#dfe8ec}
#winOverlay.finale .bigbtn{background:#cfdde3;color:#0d1114}
#winOverlay.finale .bigbtn:hover{background:#e7f1f5}
#winOverlay.finale .ghostbtn{background:transparent;color:#cfdde3;border-color:rgba(207,221,227,.5)}
#pauseStats{margin:4px 0 6px}