/* =====================================================================
   КОНТЕЙНМЕНТ ПРОВАЛЕН — SUBJECT JESSICA
   ГЛАВКОТНАДЗОР classified terminal — stylesheet
   Aesthetic: Soviet phosphor archive → blood alarm → cold void
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --void:#070809;
  --void-2:#0a0c0d;
  --panel:#0c1110;
  --panel-2:#10181a;
  /* lines lifted for visible separation on the all-black design */
  --line:#283631;
  --line-2:#3b5048;
  --ink:#e3f3e9;
  /* secondary + muted tones lifted toward WCAG AA on near-black backgrounds */
  --ink-2:#bcd6c9;
  --dim:#8ba89a;
  --amber:#ffc24b;
  --amber-2:#ffe0a0;
  --phos:#46f2a0;
  --blood:#ff2f3a;
  --blood-2:#ff626c;
  --void-glow:#b873ff;
  --cyan:#46e6ff;
  --paper:#cdbf98;

  --accent:var(--amber);
  --accent-2:var(--amber-2);
  --glow:rgba(255,194,75,.45);
  --alarm:0;            /* 0..1, raised by .alarm */

  --mono:"JetBrains Mono",ui-monospace,"DejaVu Sans Mono","Liberation Mono","DejaVu Sans",monospace;
  --disp:"Russo One","Oswald",var(--mono);
  --cond:"Oswald","Russo One",var(--mono);
}

/* phase theming ---------------------------------------------------- */
body[data-phase="1"]{ --accent:var(--amber); --accent-2:var(--amber-2); --glow:rgba(255,194,75,.45); }
body[data-phase="2"]{ --accent:#ff9b35; --accent-2:#ffc27a; --glow:rgba(255,140,40,.5); }
body[data-phase="3"]{ --accent:var(--blood); --accent-2:var(--blood-2); --glow:rgba(255,47,58,.55); }
body[data-phase="4"]{ --accent:var(--void-glow); --accent-2:var(--cyan); --glow:rgba(184,115,255,.55); }
body.ending-mode  { --accent:#9fb7d6; --accent-2:#cfe0f0; --glow:rgba(150,180,210,.35); }

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--mono);
  background:
    radial-gradient(120% 80% at 50% -10%, #0f1614 0%, var(--void) 55%, #040506 100%),
    var(--void);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:crosshair;
}
body.pre-boot{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#000}
code{font-family:var(--mono);background:#0006;border:1px solid var(--line-2);padding:1px 6px;color:var(--accent-2);border-radius:2px}
a{color:var(--accent-2)}

/* thin industrial scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#040506}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent),#000);border:2px solid #040506}

/* =====================================================================
   GLOBAL FX LAYERS
   ===================================================================== */
#fx-vignette,#fx-grain,#fx-scanlines,#fx-redalert,#fx-glitch,#fx-flash,#fx-laser,#surveillance,#hidden-words,#fx-particles{
  position:fixed;inset:0;pointer-events:none;z-index:40;
}
#fx-particles{z-index:40;opacity:.85}
#fx-grain{
  z-index:45;opacity:.06;mix-blend-mode:overlay;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(2) infinite;
}
#fx-scanlines{
  z-index:46;
  background:repeating-linear-gradient(to bottom,
     rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
     rgba(0,0,0,.32) 3px, rgba(0,0,0,.32) 4px);
  opacity:.55;
}
#fx-scanlines::after{ /* slow rolling sweep */
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,rgba(120,255,190,.05) 48%,rgba(120,255,190,.09) 50%,transparent 52%);
  animation:sweep 7s linear infinite;
}
#fx-vignette{
  z-index:47;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 88%, #000 100%);
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.7);
}
#fx-redalert{
  z-index:48;opacity:0;transition:opacity .6s;
  background:radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(255,0,20,.20) 100%);
}
body.alarm #fx-redalert{opacity:1;animation:redpulse 1.1s ease-in-out infinite}
#fx-flash{z-index:80;background:#fff;opacity:0}
#fx-flash.fire{animation:flash .5s ease-out}
#fx-flash.red{background:var(--blood)}
#fx-glitch{z-index:70;opacity:0;mix-blend-mode:screen}
#fx-glitch.on{opacity:1;animation:glitchbars .26s steps(2) 3}
#fx-glitch.on::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,0,90,.12) 0 2px, transparent 2px 5px);
  transform:translateY(0);animation:tear .12s steps(3) infinite;
}
#fx-laser{z-index:60;opacity:0;transition:opacity .3s}
#fx-laser.on{opacity:1}
.laser-dot{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ff2b2b 35%,transparent 70%);
  box-shadow:0 0 18px 6px #ff2b2bcc;left:50%;top:50%;transform:translate(-50%,-50%);
}

@keyframes grain{0%{transform:translate(0,0)}100%{transform:translate(-8px,6px)}}
@keyframes sweep{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes redpulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
@keyframes glitchbars{0%{clip-path:inset(10% 0 80% 0);transform:translateX(-6px)}
  25%{clip-path:inset(60% 0 20% 0);transform:translateX(6px)}
  50%{clip-path:inset(30% 0 50% 0);transform:translateX(-3px)}
  75%{clip-path:inset(80% 0 5% 0);transform:translateX(4px)}
  100%{clip-path:inset(0 0 95% 0);transform:translateX(0)}}
@keyframes tear{0%{transform:translateY(0)}100%{transform:translateY(5px)}}

/* shake/glitch applied to #archive ---------------------------------- */
#archive.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}
#archive.shake-hard{animation:shakeHard .55s cubic-bezier(.36,.07,.19,.97) both}
#archive.glitching{animation:archglitch .3s steps(2) 2}
@keyframes shake{10%,90%{transform:translate(-1px,0)}30%,70%{transform:translate(3px,-1px)}50%{transform:translate(-4px,1px)}}
@keyframes shakeHard{0%,100%{transform:translate(0,0)}
  10%{transform:translate(-8px,4px) rotate(-.3deg)}30%{transform:translate(9px,-5px) rotate(.4deg)}
  50%{transform:translate(-11px,6px) rotate(-.5deg)}70%{transform:translate(8px,-3px) rotate(.3deg)}90%{transform:translate(-4px,2px)}}
@keyframes archglitch{0%{filter:none;transform:translate(0)}
  50%{filter:hue-rotate(40deg) contrast(1.4) saturate(1.6);transform:translate(3px,-2px) skewX(.6deg)}
  100%{filter:none;transform:translate(0)}}

/* =====================================================================
   SURVEILLANCE HUD CORNERS
   ===================================================================== */
#surveillance{z-index:90;color:var(--ink-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.sv{position:absolute;padding:10px 14px;text-shadow:0 0 6px #000;opacity:.78}
.sv.tl{top:0;left:0}.sv.tr{top:0;right:0}.sv.bl{bottom:0;left:0}.sv.br{bottom:0;right:0}
.rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--blood);box-shadow:0 0 8px var(--blood);animation:recblink 1.3s steps(1) infinite;vertical-align:middle;margin-right:5px}
@keyframes recblink{50%{opacity:.15}}

/* =====================================================================
   BOOT / ACCESS SCREEN
   ===================================================================== */
#boot-screen{
  position:fixed;inset:0;z-index:2000;background:#040506;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s, filter .8s;
}
#boot-screen.gone{opacity:0;filter:blur(8px);pointer-events:none}
.boot-inner{width:min(820px,92vw);padding:24px}
#boot-log{
  font-family:var(--mono);font-size:clamp(11px,1.5vw,15px);color:var(--phos);
  text-shadow:0 0 8px rgba(70,242,160,.5);white-space:pre-wrap;min-height:40vh;line-height:1.7;
}
/* before the sequence starts the log is empty — collapse it so the access
   prompt sits dead-centre of the screen (the boot screen is a flex centerer) */
#boot-log:empty{min-height:0}
#boot-log .ok{color:var(--phos)}
#boot-log .warn{color:var(--blood-2);text-shadow:0 0 10px var(--blood)}
#boot-log .hi{color:var(--amber);text-shadow:0 0 8px var(--glow)}
#boot-log .dim{color:var(--dim)}
.boot-prompt{display:flex;justify-content:center;margin-top:0}
.prompt-frame{
  border:1px solid var(--phos-dim,#1d6b4b);border-color:#1d6b4b;
  padding:28px 34px;text-align:center;background:rgba(8,16,12,.6);
  box-shadow:0 0 40px rgba(70,242,160,.12),inset 0 0 30px rgba(70,242,160,.06);
}
.prompt-title{font-family:var(--disp);color:var(--phos);font-size:clamp(15px,2.6vw,24px);letter-spacing:.06em}
.prompt-sub{color:var(--dim);font-size:11px;letter-spacing:.15em;margin:8px 0 22px}
.prompt-btn{
  font-family:var(--mono);font-weight:700;background:transparent;color:var(--amber);
  border:1px solid var(--amber);padding:14px 22px;font-size:clamp(12px,1.6vw,15px);
  letter-spacing:.08em;cursor:pointer;text-shadow:0 0 8px var(--glow);
  transition:background .2s,box-shadow .2s;animation:btnpulse 2s ease-in-out infinite;
}
.prompt-btn:hover{background:var(--amber);color:#000;box-shadow:0 0 30px var(--glow)}
.prompt-warn{margin-top:18px;color:var(--blood-2);font-size:11px;letter-spacing:.18em;animation:flick 3s steps(2) infinite}
@keyframes btnpulse{50%{box-shadow:0 0 26px var(--glow)}}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.2}}
.cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.boot-grant{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#040506;text-align:center}
.boot-grant[hidden]{display:none}
.grant-text{font-family:var(--disp);font-size:clamp(28px,8vw,86px);color:var(--phos);letter-spacing:.04em;text-shadow:0 0 30px rgba(70,242,160,.6);animation:grantin .6s ease-out both}
.grant-sub{color:var(--amber);letter-spacing:.4em;margin-top:10px;animation:grantin .6s .15s ease-out both}
@keyframes grantin{from{opacity:0;letter-spacing:.6em;filter:blur(6px)}to{opacity:1;filter:blur(0)}}

/* =====================================================================
   BSOD / FAKE CRASH
   ===================================================================== */
#bsod{position:fixed;inset:0;z-index:2500;background:#7a0010;color:#fff;display:flex;align-items:center;justify-content:center}
#bsod[hidden]{display:none}
.bsod-inner{width:min(640px,90vw);padding:30px;font-family:var(--mono)}
.bsod-face{font-size:80px;font-family:var(--disp);margin-bottom:18px}
.bsod-head{font-family:var(--disp);font-size:22px;margin-bottom:16px;letter-spacing:.04em}
#bsod p{margin:10px 0;font-size:14px}
.bsod-mono{background:#0003;padding:12px;border-left:3px solid #fff;font-size:12px;line-height:1.8}
.bsod-foot{margin-top:22px;letter-spacing:.1em}

/* =====================================================================
   MAIN ARCHIVE WRAPPER
   ===================================================================== */
#archive{position:relative;z-index:2;opacity:0;transition:opacity 1.1s .2s, filter 1.1s .2s;filter:blur(10px)}
#archive.live{opacity:1;filter:blur(0)}
.band{max-width:1180px;margin:0 auto;padding:clamp(60px,9vw,120px) clamp(18px,5vw,40px)}
section{position:relative}

/* section reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s}
[data-reveal].seen{opacity:1;transform:none}

.band-tab{
  display:inline-block;font-family:var(--cond);font-weight:600;letter-spacing:.22em;
  font-size:12px;text-transform:uppercase;color:#000;background:var(--accent);
  padding:5px 14px;margin-bottom:18px;box-shadow:0 0 18px var(--glow);
}
.band-tab.center{display:table;margin-left:auto;margin-right:auto}
.band-tab.alarm-tab{background:var(--blood);color:#fff;animation:flick 1.2s steps(2) infinite}
.band-title{
  font-family:var(--disp);font-size:clamp(26px,5.2vw,56px);line-height:1.05;
  letter-spacing:.01em;margin-bottom:36px;text-shadow:0 0 30px rgba(0,0,0,.6);
}
.band-title.center{text-align:center}
.accent{color:var(--accent);text-shadow:0 0 16px var(--glow)}
.void-accent{color:var(--void-glow);text-shadow:0 0 14px rgba(184,115,255,.6)}
.danger{color:var(--blood-2);text-shadow:0 0 12px rgba(255,47,58,.5)}
.dim{color:var(--dim)}

/* =====================================================================
   STICKY HUD
   ===================================================================== */
#hud{
  position:sticky;top:0;z-index:30;display:flex;align-items:stretch;gap:0;
  background:linear-gradient(180deg,rgba(7,9,10,.99),rgba(8,11,12,.93));
  border-bottom:1px solid var(--line-2);
  box-shadow:0 8px 30px -10px #000;
}
.hud-left{display:flex;align-items:center;gap:12px;padding:10px 16px;border-right:1px solid var(--line)}
.hud-mark{width:34px;height:34px}
.hud-mark .cat-body{fill:var(--accent)}
.hud-org strong{font-family:var(--disp);font-size:14px;letter-spacing:.04em;display:block;color:var(--accent-2)}
.hud-org span{font-size:9px;letter-spacing:.1em;color:var(--dim)}
.hud-banner{flex:1;overflow:hidden;display:flex;align-items:center;border-right:1px solid var(--line);position:relative}
.hud-banner span{white-space:nowrap;font-family:var(--cond);font-weight:700;letter-spacing:.3em;color:#000;
  background:repeating-linear-gradient(90deg,var(--accent) 0 22px,#000 22px 24px);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:marq 18s linear infinite;font-size:13px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hud-right{display:flex;align-items:center;gap:18px;padding:8px 18px}
.hud-stat{display:flex;flex-direction:column;gap:3px;min-width:78px}
.hud-stat label{font-size:8.5px;letter-spacing:.14em;color:var(--dim)}
.hud-stat b{font-family:var(--cond);font-weight:600;font-size:13px;color:var(--accent-2);letter-spacing:.05em}
.hud-stat .hint{cursor:help}
.hud-bar{height:7px;width:90px;background:#10181a;border:1px solid var(--line-2);position:relative;overflow:hidden}
.hud-bar i{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s;box-shadow:0 0 10px var(--glow)}
body.alarm #hud-threat{color:var(--blood-2);animation:flick 1s steps(2) infinite}

/* =====================================================================
   HERO
   ===================================================================== */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 18px;gap:6px;position:relative}
.hero-emblem{margin-bottom:6px}
.seal{width:clamp(180px,30vw,300px);height:auto;animation:sealspin 60s linear infinite}
.seal-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:.85}
.seal-ring.thin{stroke-width:1;opacity:.4}
.seal-text{fill:var(--accent-2);font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.16em}
.seal-star{fill:var(--accent);opacity:.9}
.seal-cat .cat-body{fill:var(--accent)}
.seal-cat .cat-eye{fill:#000}.seal-cat .cat-pupil{fill:var(--blood)}
@keyframes sealspin{to{transform:rotate(360deg)}}
.hero-emblem{filter:drop-shadow(0 0 30px var(--glow))}

.hero-title{
  font-family:var(--disp);font-size:clamp(34px,9vw,108px);line-height:.95;letter-spacing:.005em;
  color:var(--ink);position:relative;text-shadow:0 0 40px rgba(0,0,0,.7);margin-top:8px;
}
.hero-title::before,.hero-title::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
}
.hero-title::before{color:var(--blood);clip-path:inset(0 0 55% 0);animation:gl1 3.4s infinite steps(2);opacity:.85;mix-blend-mode:screen}
.hero-title::after{color:var(--cyan);clip-path:inset(55% 0 0 0);animation:gl2 2.7s infinite steps(2);opacity:.7;mix-blend-mode:screen}
@keyframes gl1{0%,93%,100%{transform:translate(0,0)}94%{transform:translate(-5px,-2px)}96%{transform:translate(4px,1px)}}
@keyframes gl2{0%,90%,100%{transform:translate(0,0)}92%{transform:translate(5px,2px)}94%{transform:translate(-4px,-1px)}}
.hero-sub{font-family:var(--cond);letter-spacing:.5em;color:var(--accent);font-size:clamp(11px,2vw,17px);text-shadow:0 0 14px var(--glow)}
.hero-rule{width:min(560px,80vw);height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:18px 0;opacity:.6}
.hero-desc{color:var(--ink-2);max-width:620px;font-size:14px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.tag{border:1px solid var(--line-2);padding:6px 12px;font-size:11px;letter-spacing:.1em;color:var(--ink-2);background:#0006;text-transform:uppercase}
.tag-red{border-color:var(--blood);color:var(--blood-2);box-shadow:0 0 14px rgba(255,47,58,.25);animation:flick 4s steps(2) infinite}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--dim);font-size:11px;letter-spacing:.25em}
.chevs{animation:bob 1.8s ease-in-out infinite;color:var(--accent)}
@keyframes bob{50%{transform:translateY(7px);opacity:.4}}

/* =====================================================================
   DOSSIER
   ===================================================================== */
.dossier-grid{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:30px;align-items:start}
.capture{position:relative}
.capture-frame{position:relative;aspect-ratio:4/3;background:#05080a;border:1px solid var(--line-2);overflow:hidden;box-shadow:inset 0 0 60px #000}
.capture-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05) brightness(.98)}
.capture-img.failed{opacity:0}
.capture-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--dim);text-align:center}
.capture-fallback svg{width:46%;opacity:.5}
/* Real-photo placeholder — fills the slot edge-to-edge so a missing image
   reads as a real (rectangular) surveillance frame, never a round badge.
   The "НЕТ ВИДЕО-ДАННЫХ" labels sit on top via z-index. Wins over the dim
   svg rules above via the more specific .ph-face selector. */
.ph-face{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.05) saturate(1.05) brightness(.82);
  opacity:.6;
}
.capture-fallback span,.capture-fallback small,
.ev-pic .ph span,.tile-ph span{position:relative;z-index:1}
.capture-fallback .cat-body{fill:none;stroke:var(--accent);stroke-width:3}
.capture-fallback .cat-ear{fill:none;stroke:var(--accent);stroke-width:3}
.capture-fallback .cat-eye{fill:var(--accent)}
.capture-fallback .cat-pupil{fill:#05080a}
.capture-fallback span{font-family:var(--cond);letter-spacing:.2em;font-size:13px;color:var(--accent)}
.capture-fallback small{font-size:9px;letter-spacing:.14em}
.capture-fallback.small svg{width:38%}.capture-fallback.small span{font-size:11px}
.capture-img:not(.failed)~.capture-fallback{display:none}
.capture-scan{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(70,242,160,.18),transparent);height:30%;animation:capscan 4s linear infinite;pointer-events:none}
@keyframes capscan{0%{transform:translateY(-120%)}100%{transform:translateY(420%)}}
.capture-meta{position:absolute;left:8px;bottom:8px;font-size:10px;letter-spacing:.08em;color:var(--phos);text-shadow:0 0 6px #000;background:#0008;padding:2px 6px}
.capture-target i{position:absolute;width:18px;height:18px;border:2px solid var(--accent);opacity:.6}
.capture-target i:nth-child(1){top:10px;left:10px;border-right:0;border-bottom:0}
.capture-target i:nth-child(2){top:10px;right:10px;border-left:0;border-bottom:0}
.capture-target i:nth-child(3){bottom:10px;left:10px;border-right:0;border-top:0}
.capture-target i:nth-child(4){bottom:10px;right:10px;border-left:0;border-top:0}
.capture figcaption{font-size:11px;color:var(--dim);margin-top:10px;letter-spacing:.04em}

.id-table{border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(16,24,26,.6),rgba(8,12,12,.6));position:relative}
.id-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px}
.id-row:last-of-type{border-bottom:0}
.id-row span{color:var(--dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase;align-self:center}
.id-row b{color:var(--ink);font-weight:400}
.stamps{display:flex;flex-wrap:wrap;gap:14px;padding:18px 16px;align-items:center}
.stamp{font-family:var(--disp);border:3px solid var(--accent);color:var(--accent);padding:6px 12px;letter-spacing:.1em;font-size:14px;opacity:.85;transform:rotate(-4deg);text-shadow:0 0 8px var(--glow);box-shadow:0 0 14px -4px var(--glow)}
.stamp.red{border-color:var(--blood);color:var(--blood-2)}
.stamp.rot{transform:rotate(6deg)}
.stamp.small{font-size:11px;padding:4px 9px;transform:rotate(-2deg)}

/* redactions ------------------------------------------------------- */
.redact{background:#000;color:transparent;cursor:pointer;letter-spacing:0;border-bottom:1px solid #222;transition:all .2s;text-shadow:none;user-select:none}
.redact:hover{outline:1px solid var(--accent)}
.redact.revealed{background:transparent;color:var(--blood-2);letter-spacing:normal;text-shadow:0 0 8px rgba(255,47,58,.4);border-bottom:1px dashed var(--blood)}
.redact-line{list-style:none}

/* gauges ----------------------------------------------------------- */
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px 30px;margin-top:50px}
.gauge-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.gauge-head span{font-size:11px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
.gauge-head b{font-family:var(--disp);font-size:clamp(18px,2.4vw,26px);color:var(--accent);text-shadow:0 0 14px var(--glow);white-space:nowrap}
.gauge-bar{height:10px;background:#0a0f10;border:1px solid var(--line-2);overflow:hidden;position:relative}
.gauge-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--glow);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.gauge-bar i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 6px,transparent 6px 12px)}
.gauge small{display:block;margin-top:7px;font-size:10.5px;color:var(--dim);letter-spacing:.03em}

.dossier-cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:46px}
.doc-card{border:1px solid var(--line-2);background:rgba(10,16,16,.5);padding:22px 24px}
.doc-card h3{font-family:var(--cond);font-weight:600;letter-spacing:.06em;font-size:16px;color:var(--accent-2);margin-bottom:14px;text-transform:uppercase}
.crime-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.crime-list li{padding-left:22px;position:relative;font-size:13.5px}
.crime-list li::before{content:"▣";position:absolute;left:0;color:var(--accent)}
.doc-card p{font-size:13.5px;color:var(--ink-2);margin-bottom:12px}
.doc-card .note{border-left:3px solid var(--line-2);padding-left:14px;font-style:italic}
.doc-card .warn-line{color:var(--blood-2);letter-spacing:.06em;font-weight:700;animation:flick 5s steps(2) infinite}

/* =====================================================================
   TIMELINE / PHASES
   ===================================================================== */
#timeline{max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,90px) clamp(18px,5vw,40px)}
.phase-panel{display:grid;grid-template-columns:clamp(90px,14vw,180px) 1fr;gap:clamp(18px,4vw,46px);align-items:center;
  padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line-2);position:relative;min-height:60vh}
.phase-panel::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.4}
.phase-no{font-family:var(--disp);font-size:clamp(64px,15vw,180px);line-height:.8;color:transparent;
  -webkit-text-stroke:2px var(--accent);text-stroke:2px var(--accent);opacity:.85;filter:drop-shadow(0 0 24px var(--glow))}
.phase-names{display:flex;flex-direction:column;margin-bottom:14px}
.phase-names .ru{font-family:var(--disp);font-size:clamp(22px,4.4vw,46px);letter-spacing:.01em;color:var(--ink)}
.phase-names .en{font-family:var(--cond);letter-spacing:.28em;font-size:12px;color:var(--accent);margin-top:6px}
.phase-body>p{font-size:15px;color:var(--ink-2);max-width:62ch;margin-bottom:18px}
.phase-meta{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:11px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;margin-bottom:20px}
.phase-meta b{color:var(--accent-2)}
.phase-shot{position:relative;aspect-ratio:16/8;max-width:520px;background:#05080a;border:1px solid var(--line-2);overflow:hidden}
.phase-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.phase-shot img.failed{opacity:0}
.phase-shot .capture-fallback.small{display:none}
.phase-shot img.failed~.capture-fallback{display:flex}
.glitchy{position:relative;color:var(--blood-2);animation:flick 2s steps(2) infinite}
.phase-panel.alert .phase-no{-webkit-text-stroke-color:var(--blood);filter:drop-shadow(0 0 24px rgba(255,47,58,.5))}
.phase-panel.alert .phase-names .ru{color:var(--blood-2)}
.phase-panel.void .phase-no{-webkit-text-stroke-color:var(--void-glow)}
.phase-panel.void .phase-names .ru{color:var(--void-glow);text-shadow:0 0 18px rgba(184,115,255,.5)}

/* =====================================================================
   EVIDENCE BOARD
   ===================================================================== */
.evidence-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.ev-card{position:relative;border:1px solid var(--line-2);background:#080c0c;padding:8px;transform:rotate(var(--rot,0deg));transition:transform .3s,box-shadow .3s}
.ev-card:hover{transform:rotate(0) scale(1.03);box-shadow:0 16px 40px -12px #000,0 0 22px -6px var(--glow);z-index:3}
.ev-card::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(var(--pin,4deg));width:34px;height:14px;background:linear-gradient(#444,#111);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);opacity:.7}
.ev-pic{position:relative;aspect-ratio:1;background:#05080a;overflow:hidden}
.ev-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.02);z-index:2}
.ev-pic img.failed{opacity:0}
.ev-pic .ph{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;color:var(--dim);gap:4px}
.ev-pic img.failed~.ph{display:flex}
.ev-pic .ph svg{width:50%;opacity:.45}
.ev-pic .ph .cat-body,.ev-pic .ph .cat-ear{fill:none;stroke:var(--accent);stroke-width:3}
.ev-pic .ph .cat-eye{fill:var(--accent)}.ev-pic .ph .cat-pupil{fill:#05080a}
.ev-pic .ph span{font-size:10px;letter-spacing:.12em;color:var(--accent)}
.ev-cap{font-size:10px;color:var(--ink-2);letter-spacing:.05em;padding:7px 4px 3px;display:flex;justify-content:space-between;gap:6px}
.ev-cap .ts{color:var(--dim)}
.ev-card.corrupt .ev-pic{background:repeating-linear-gradient(0deg,#1a0006 0 3px,#3a0010 3px 6px)}
.ev-card.corrupt .ev-pic::after{content:"ФАЙЛ ПОВРЕЖДЁН";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--blood-2);font-family:var(--cond);letter-spacing:.12em;font-size:12px;text-align:center;animation:flick 1.5s steps(2) infinite;background:#3a001088}
.evidence-note{margin-top:26px;color:var(--ink-2);font-size:13px;text-align:center}

/* =====================================================================
   BOSS FIGHT
   ===================================================================== */
#boss{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:60px 18px;position:relative;
  background:radial-gradient(120% 90% at 50% 30%,rgba(40,0,8,.25),transparent 60%)}
.boss-intro{text-align:center;max-width:760px}
.boss-warn{font-family:var(--disp);font-size:clamp(30px,7.5vw,80px);line-height:1;margin:14px 0;color:var(--ink);position:relative}
.boss-warn::before,.boss-warn::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%}
.boss-warn::before{color:var(--blood);clip-path:inset(0 0 50% 0);animation:gl1 2.2s infinite steps(2);mix-blend-mode:screen}
.boss-warn::after{color:var(--cyan);clip-path:inset(50% 0 0 0);animation:gl2 1.8s infinite steps(2);mix-blend-mode:screen}
.boss-warn-sub{color:var(--blood-2);letter-spacing:.22em;font-size:13px;margin-bottom:30px}
.big-btn{font-family:var(--disp);background:var(--blood);color:#fff;border:0;padding:18px 40px;font-size:clamp(15px,2.4vw,22px);letter-spacing:.06em;cursor:pointer;box-shadow:0 0 40px rgba(255,47,58,.4);transition:transform .15s,box-shadow .2s;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.big-btn:hover{transform:scale(1.05);box-shadow:0 0 60px rgba(255,47,58,.7)}
.boss-warn-tiny{margin-top:18px;color:var(--dim);font-size:11px;letter-spacing:.18em}

.boss-arena{width:min(900px,96vw);display:flex;flex-direction:column;gap:18px}
.boss-arena[hidden]{display:none}
.boss-enemy{border:1px solid var(--blood);background:linear-gradient(180deg,rgba(40,0,8,.5),rgba(8,4,5,.6));padding:14px 18px;box-shadow:0 0 30px -6px rgba(255,47,58,.4)}
.enemy-name{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.enemy-tier{font-family:var(--cond);letter-spacing:.2em;color:var(--blood-2);font-size:12px}
.enemy-name h3{font-family:var(--disp);font-size:clamp(18px,3.4vw,30px);letter-spacing:.02em}
.hp-track{height:20px;background:#100406;border:1px solid var(--blood);position:relative;overflow:hidden}
.hp-track i{position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,#ff2f3a,#ff8a3a);box-shadow:0 0 16px #ff2f3a;transition:width .5s;z-index:2}
.hp-track .hp-ghost{position:absolute;left:0;top:0;height:100%;background:#fff7;transition:width 1.2s .2s;z-index:1}
.hp-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;color:var(--blood-2);margin-top:5px;text-transform:uppercase}

.boss-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;margin:6px 0}
.boss-sprite{position:relative;width:clamp(150px,30vw,260px);animation:bossfloat 4s ease-in-out infinite}
.boss-sprite svg{width:100%;position:relative;z-index:2;filter:drop-shadow(0 0 16px rgba(255,47,58,.4))}
.boss-sprite .cat-body{fill:#14080a;stroke:var(--blood);stroke-width:3}
.boss-sprite .cat-ear{fill:#14080a;stroke:var(--blood);stroke-width:3}
.boss-sprite .cat-eye{fill:#ffec6a}
.boss-sprite .cat-pupil{fill:#000;animation:slit 5s ease-in-out infinite}
.boss-sprite .cat-whisker{stroke:var(--blood);stroke-width:1.4;opacity:.7}
.boss-sprite .cat-nose{fill:var(--blood)}
.boss-glow{position:absolute;inset:-30% -10%;background:radial-gradient(circle,rgba(255,47,58,.35),transparent 65%);z-index:1;animation:redpulse 2.4s ease-in-out infinite}
@keyframes bossfloat{50%{transform:translateY(-12px)}}
@keyframes slit{0%,100%{transform:scaleX(1)}45%{transform:scaleX(.25)}55%{transform:scaleX(.25)}}
.boss-sprite.hit{animation:bosshit .4s}
@keyframes bosshit{0%{transform:translateX(0)}25%{transform:translateX(-12px) scale(1.05)}50%{transform:translateX(10px)}75%{transform:translateX(-6px)}100%{transform:translateX(0)}}
.boss-sprite.attack{animation:bossatk .5s}
@keyframes bossatk{40%{transform:scale(1.25) translateY(-6px)}}
.boss-callout{position:absolute;top:8%;left:50%;transform:translateX(-50%) scale(.6);font-family:var(--disp);font-size:clamp(20px,4.5vw,40px);color:#fff;text-shadow:0 0 20px var(--blood),0 2px 0 #000;opacity:0;pointer-events:none;text-align:center;white-space:nowrap}
.boss-callout.fire{animation:callout 1.4s ease-out}
@keyframes callout{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-6deg)}15%{opacity:1;transform:translateX(-50%) scale(1.1) rotate(-2deg)}70%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(1.05) translateY(-20px)}}

.boss-log{height:120px;overflow-y:auto;border:1px solid var(--line-2);background:#05080a;padding:10px 14px;font-size:12.5px;line-height:1.65;display:block}
.boss-log p{margin-bottom:3px}
.boss-log .you{color:var(--accent-2)}
.boss-log .her{color:var(--blood-2)}
.boss-log .sys{color:var(--dim)}
.boss-log .crit{color:#fff;background:var(--blood);padding:0 4px;font-weight:700;display:inline-block}

.boss-player{display:grid;grid-template-columns:1fr;gap:16px}
.player-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 20px}
.pstat{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label val" "bar bar";gap:4px 10px;align-items:center}
.pstat label{grid-area:label;font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.pstat b{grid-area:val;font-family:var(--cond);font-size:15px;color:var(--accent-2)}
.pbar{grid-area:bar;height:9px;background:#0a0f10;border:1px solid var(--line-2);overflow:hidden}
.pbar i{display:block;height:100%;transition:width .5s}
.pbar.hp i{background:linear-gradient(90deg,#46f2a0,#9fffd0)}
.pbar.san i{background:linear-gradient(90deg,#46c8ff,#b6ecff)}
.pbar.fear i{background:linear-gradient(90deg,#ff8a3a,#ff2f3a)}
.pbar.surv i{background:linear-gradient(90deg,#ffc24b,#ffe0a0)}
.player-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.act{font-family:var(--cond);font-weight:600;letter-spacing:.06em;font-size:14px;padding:13px 12px;background:#0d1413;color:var(--ink);border:1px solid var(--line-2);cursor:pointer;transition:all .15s;text-transform:uppercase}
.act:hover{background:var(--accent);color:#000;box-shadow:0 0 20px var(--glow);transform:translateY(-2px)}
.act.danger:hover{background:var(--blood);color:#fff;box-shadow:0 0 20px rgba(255,47,58,.5)}
.act:disabled{opacity:.4;cursor:not-allowed;transform:none;background:#0d1413;color:var(--dim)}
.act.special{border-color:var(--void-glow);color:var(--void-glow);animation:flick 2.4s steps(2) infinite}
.act.special:hover{background:var(--void-glow);color:#000;box-shadow:0 0 24px rgba(184,115,255,.6)}

/* =====================================================================
   ENDING
   ===================================================================== */
#ending{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:60px 18px;
  background:radial-gradient(120% 90% at 50% 50%,#0a0f14,#040506)}
#ending[hidden]{display:none}
.ending-inner{max-width:600px;display:flex;flex-direction:column;align-items:center;gap:18px}
.ending-cat{position:relative}
.sleeping-cat{width:clamp(180px,34vw,300px)}
.sleeping-cat .cat-body,.sleeping-cat .cat-ear{fill:#121a22;stroke:#5b6f86;stroke-width:2.5}
.sleeping-cat .cat-eye-closed{fill:none;stroke:#7e93ab;stroke-width:3;stroke-linecap:round}
.sleeping-cat .cat-nose{fill:#5b6f86}
.sleeping-cat .cat-whisker{stroke:#48586c;stroke-width:1.3}
.ending-cat{animation:breathe 4.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04,1.06)}}
.zzz{position:absolute;top:-6%;right:8%;display:flex;gap:4px}
.zzz span{font-family:var(--disp);color:#7e93ab;opacity:0}
.zzz span:nth-child(1){font-size:16px;animation:zfloat 4s ease-in-out infinite}
.zzz span:nth-child(2){font-size:22px;animation:zfloat 4s .6s ease-in-out infinite}
.zzz span:nth-child(3){font-size:30px;animation:zfloat 4s 1.2s ease-in-out infinite}
@keyframes zfloat{0%{opacity:0;transform:translateY(8px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-26px)}}
.ending-line{font-family:var(--disp);font-size:clamp(20px,4.4vw,40px);color:#cfe0f0;line-height:1.25;opacity:0;animation:fadeup 2s 1.4s ease-out forwards;text-shadow:0 0 30px rgba(150,180,210,.3)}
.ending-sub{color:#7e93ab;letter-spacing:.28em;font-size:13px;opacity:0;animation:fadeup 2s 2.2s ease-out forwards}
.ending-foot{margin-top:24px;opacity:0;animation:fadeup 2s 3.4s ease-out forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ghost-btn{font-family:var(--cond);letter-spacing:.08em;background:transparent;color:#9fb7d6;border:1px solid #3a4a5e;padding:11px 22px;cursor:pointer;transition:all .2s;text-transform:uppercase}
.ghost-btn:hover{background:#9fb7d6;color:#040506}
.ending-tiny{margin-top:16px;color:#56697e;font-size:11px;letter-spacing:.05em}

/* =====================================================================
   FOOTER
   ===================================================================== */
#footer{border-top:1px solid var(--line-2);background:#05080a;padding:50px clamp(18px,5vw,40px) 0}
.foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.foot-grid strong{font-family:var(--cond);letter-spacing:.14em;color:var(--accent-2);font-size:13px;display:block;margin-bottom:10px;text-transform:uppercase}
.foot-grid p{font-size:12px;color:var(--dim);line-height:1.7}
.foot-bar{max-width:1180px;margin:40px auto 0;border-top:1px solid var(--line);padding:18px 0 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.1em;color:var(--dim)}
.foot-pulse{color:var(--blood-2);animation:flick 6s steps(2) infinite}

/* =====================================================================
   TERMINAL CONSOLE
   ===================================================================== */
#terminal{position:fixed;left:0;right:0;bottom:0;z-index:1100;height:min(46vh,420px);
  background:rgba(4,6,7,.97);border-top:2px solid var(--phos);box-shadow:0 -20px 60px -10px #000,0 0 40px rgba(70,242,160,.15);
  display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s;font-family:var(--mono)}
#terminal[hidden]{display:none}
#terminal.open{transform:translateY(0)}
.term-head{display:flex;justify-content:space-between;align-items:center;padding:7px 14px;border-bottom:1px solid var(--line-2);color:var(--phos);font-size:12px;letter-spacing:.1em}
#term-close{background:none;border:1px solid var(--line-2);color:var(--phos);width:24px;height:24px;cursor:pointer}
.term-out{flex:1;overflow-y:auto;padding:12px 16px;font-size:13px;line-height:1.6;color:var(--phos);text-shadow:0 0 6px rgba(70,242,160,.3)}
.term-out .err{color:var(--blood-2)}
.term-out .hi{color:var(--amber)}
.term-out .dim{color:var(--dim)}
.term-out pre{white-space:pre-wrap;font-family:var(--mono)}
.term-input-line{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line-2);align-items:center}
.term-ps{color:var(--amber)}
#term-input{flex:1;background:none;border:0;outline:0;color:var(--phos);font-family:var(--mono);font-size:14px}

/* =====================================================================
   ACHIEVEMENT TOASTS
   ===================================================================== */
#achievements{position:fixed;right:16px;bottom:16px;z-index:1000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.ach{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,rgba(16,24,26,.97),rgba(8,12,12,.97));border:1px solid var(--accent);
  padding:11px 16px;min-width:240px;max-width:330px;box-shadow:0 12px 40px -10px #000,0 0 24px -6px var(--glow);
  transform:translateX(120%);animation:achin .5s forwards,achout .5s 4.4s forwards}
.ach .ic{font-size:24px;filter:drop-shadow(0 0 6px var(--glow))}
.ach .tx b{font-family:var(--cond);letter-spacing:.06em;color:var(--accent-2);font-size:13px;display:block;text-transform:uppercase}
.ach .tx span{font-size:11px;color:var(--ink-2)}
.ach .tx small{font-size:9px;color:var(--dim);letter-spacing:.18em;display:block}
@keyframes achin{to{transform:translateX(0)}}
@keyframes achout{to{transform:translateX(120%);opacity:0}}

/* =====================================================================
   POSTER MODAL
   ===================================================================== */
#poster-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(2,3,4,.85);backdrop-filter:blur(4px)}
#poster-modal[hidden]{display:none}
.poster{position:relative;width:min(380px,90vw);background:linear-gradient(180deg,#b71d1d,#7c0d0d);color:#ffe2c4;text-align:center;padding:34px 28px 26px;border:4px solid #ffd98a;box-shadow:0 30px 80px -20px #000}
.poster-x{position:absolute;top:8px;right:10px;background:none;border:0;color:#ffe2c4;font-size:18px;cursor:pointer}
.poster-art{position:relative;height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.poster-cat{width:150px;position:relative;z-index:2}
.poster-cat .cat-body,.poster-cat .cat-ear{fill:#1a0606;stroke:#ffd98a;stroke-width:3}
.poster-cat .cat-eye{fill:#ffd98a}.poster-cat .cat-pupil{fill:#1a0606}
.poster-cat .cat-nose{fill:#ffd98a}.poster-cat .cat-whisker{stroke:#ffd98a;stroke-width:1.4}
.poster-rays{position:absolute;inset:-40px;background:repeating-conic-gradient(from 0deg,#ffd98a33 0deg 12deg,transparent 12deg 24deg);border-radius:50%;animation:sealspin 30s linear infinite;z-index:1}
.poster h3{font-family:var(--disp);font-size:24px;margin-bottom:10px;letter-spacing:.02em;text-shadow:2px 2px 0 #5c0808}
.poster p{font-size:13px;line-height:1.6;margin-bottom:14px}
.poster small{font-size:9px;letter-spacing:.14em;opacity:.8}

/* =====================================================================
   HIDDEN FLICKER WORDS
   ===================================================================== */
.hword{position:absolute;font-family:var(--cond);letter-spacing:.2em;color:var(--blood);opacity:0;text-shadow:0 0 12px var(--blood);font-size:clamp(13px,2vw,20px);white-space:nowrap}
.hword.show{animation:hwordflick 2.4s ease-in-out}
@keyframes hwordflick{0%{opacity:0}10%{opacity:.55}14%{opacity:0}18%{opacity:.6}24%{opacity:.05}30%{opacity:.5}100%{opacity:0}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:820px){
  .dossier-grid{grid-template-columns:1fr}
  .dossier-cols{grid-template-columns:1fr}
  .phase-panel{grid-template-columns:1fr;min-height:auto}
  .phase-no{font-size:22vw}
  .hud-banner{display:none}
  .hud-right{gap:12px;padding:8px 12px;flex-wrap:wrap}
  .id-row{grid-template-columns:110px 1fr;gap:8px}
  #surveillance{font-size:9px}
}
@media (max-width:540px){
  body{cursor:auto}
  .hud-right .hud-stat:last-child{display:none}
  .player-actions{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.1ms !important}
  .seal,.boss-sprite,.ending-cat{animation:none !important}
  #fx-scanlines::after,#fx-grain{display:none}
}

/* =====================================================================
   ENHANCEMENTS v2 — header bloom · control dock · pet system · status
   · incidents · reticle · full responsive pass
   ===================================================================== */

/* ---------- header bloom (white-hot core + phase-coloured halo) ---------- */
.band-title{
  color:#eafff3;margin-bottom:6px;
  text-shadow:0 0 1px rgba(255,255,255,.9),0 0 12px rgba(234,255,243,.35),0 0 30px var(--glow),0 0 64px var(--glow);
}
.band-en{
  font-family:var(--cond);font-weight:500;letter-spacing:.34em;font-size:11px;text-transform:uppercase;
  color:var(--accent-2);opacity:.85;margin:0 0 32px;text-shadow:0 0 10px var(--glow);
}
.band-en.center{text-align:center}
.hero-title{
  color:#f3fff8;
  text-shadow:0 0 2px rgba(255,255,255,.9),0 0 18px rgba(243,255,248,.4),0 0 48px var(--glow),0 0 96px var(--glow);
  animation:crtFlick 7s infinite steps(40);
}
@keyframes crtFlick{0%,100%{opacity:1}2%{opacity:.86}3%{opacity:1}48%{opacity:.97}49%{opacity:1}70%{opacity:.93}71%{opacity:1}}
.hero-sub{text-shadow:0 0 16px var(--glow),0 0 2px rgba(255,255,255,.4)}
.hud-org strong{color:#c4ffdb;text-shadow:0 0 10px rgba(70,242,160,.6),0 0 2px rgba(255,255,255,.5)}
.phase-names .ru{text-shadow:0 0 2px rgba(255,255,255,.3),0 0 20px var(--glow)}
.enemy-name h3{text-shadow:0 0 2px rgba(255,255,255,.6),0 0 16px rgba(255,47,58,.6)}
.gauge-head b{text-shadow:0 0 2px rgba(255,255,255,.7),0 0 16px var(--glow)}
.band-tab{box-shadow:0 0 22px var(--glow),0 0 2px var(--accent)}
#hud-status{color:#c4ffdb;text-shadow:0 0 8px rgba(70,242,160,.5)}
.foot-grid strong{text-shadow:0 0 10px var(--glow)}
.grant-text{text-shadow:0 0 2px #fff,0 0 30px rgba(70,242,160,.7),0 0 60px rgba(70,242,160,.4)}

/* ---------- reveal choreography ---------- */
[data-reveal].seen .band-tab{animation:tabIn .55s both}
@keyframes tabIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
[data-reveal].seen .band-title{animation:headIn .7s .04s both}
@keyframes headIn{0%{opacity:0;filter:blur(10px);letter-spacing:.18em}60%{opacity:1}100%{opacity:1;filter:blur(0);letter-spacing:normal}}
[data-reveal].seen .band-en{animation:tabIn .6s .12s both}

/* ---------- stamp slam ---------- */
.stamp{--r:-4deg;transform:rotate(var(--r))}
.stamp.rot{--r:6deg}
.stamp.small{--r:-2deg}
[data-reveal].seen .stamp{animation:slam .55s cubic-bezier(.2,1.3,.35,1) both}
.stamps .stamp:nth-child(1){animation-delay:.06s}
.stamps .stamp:nth-child(2){animation-delay:.2s}
.stamps .stamp:nth-child(3){animation-delay:.34s}
@keyframes slam{0%{opacity:0;transform:scale(2.6) rotate(var(--r))}62%{opacity:1}100%{opacity:.88;transform:scale(1) rotate(var(--r))}}

/* ---------- custom reticle cursor ---------- */
#reticle{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;z-index:2600;pointer-events:none;opacity:0;transition:opacity .3s,transform .055s linear;mix-blend-mode:screen;transform:translate(-200px,-200px)}
#reticle::before,#reticle::after{content:"";position:absolute;background:var(--accent);box-shadow:0 0 8px var(--glow)}
#reticle::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
#reticle::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%)}
#reticle i{position:absolute;inset:8px;border:1.5px solid var(--accent);border-radius:50%;box-shadow:0 0 8px var(--glow);transition:inset .12s}
#reticle.click i{inset:11px}
body.reticle-on{cursor:none}
body.reticle-on #reticle{opacity:.9}
body.alarm #reticle::before,body.alarm #reticle::after{background:var(--blood);box-shadow:0 0 10px var(--blood)}
body.alarm #reticle i{border-color:var(--blood);box-shadow:0 0 10px var(--blood)}
@media (hover:none){#reticle{display:none}}

/* ---------- control dock ---------- */
#dock{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;gap:10px;align-items:center;transition:opacity .5s}
.dock-btn{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:linear-gradient(160deg,rgba(18,26,28,.92),rgba(8,12,12,.94));color:var(--accent-2);font-size:18px;font-family:var(--mono);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);box-shadow:0 8px 22px -10px #000,inset 0 0 0 1px rgba(255,255,255,.03);transition:transform .18s,box-shadow .2s,border-color .2s,color .2s}
.dock-btn:hover{border-color:var(--accent);color:#fff;box-shadow:0 0 24px var(--glow);transform:scale(1.1)}
.dock-btn:active{transform:scale(.94)}
.dock-btn.term{font-weight:800;font-size:15px}
.dock-btn.muted{color:var(--dim);border-color:var(--line)}
.dock-btn .ic-snd{width:22px;height:22px}
.dock-btn .ic-snd .spk{fill:currentColor}
.dock-btn .ic-snd .w1,.dock-btn .ic-snd .w2{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dock-btn .ic-snd .slash{stroke:currentColor;stroke-width:2.4;stroke-linecap:round;opacity:0}
.dock-btn.muted .ic-snd .w1,.dock-btn.muted .ic-snd .w2{opacity:0}
.dock-btn.muted .ic-snd .slash{opacity:1}
.dock-btn .ic-cat{width:27px;height:20px}
.dock-btn .ic-cat .cat-body,.dock-btn .ic-cat .cat-ear{fill:currentColor}
.dock-btn .ic-cat .cat-eye{fill:#0c0f0d}
.dock-btn .ic-cat .cat-pupil{fill:currentColor}
.dock-btn .ic-cat .cat-whisker,.dock-btn .ic-cat .cat-tail,.dock-btn .ic-cat .cat-nose{display:none}
.dock-btn.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.22)}}
.dock-btn.install .ic-install{width:22px;height:22px}
.dock-btn.install.available{color:var(--accent);border-color:var(--accent);animation:installPulse 2.4s ease-in-out infinite}
.dock-btn.install.available:hover{animation:none}
@keyframes installPulse{0%,100%{box-shadow:0 8px 22px -10px #000,inset 0 0 0 1px rgba(255,255,255,.03),0 0 0 0 var(--glow)}50%{box-shadow:0 8px 22px -10px #000,inset 0 0 0 1px rgba(255,255,255,.03),0 0 22px 2px var(--glow)}}
.dock-btn::after{content:attr(data-tip);position:absolute;right:56px;top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;background:rgba(8,12,12,.96);border:1px solid var(--line-2);color:var(--ink-2);font-family:var(--cond);font-size:11px;letter-spacing:.08em;padding:5px 9px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-transform:uppercase}
.dock-btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.dock-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--accent);color:#000;font-family:var(--cond);font-weight:600;font-size:10px;display:grid;place-items:center;box-shadow:0 0 10px var(--glow);line-height:1}
body.pre-boot #dock,body.pre-boot #incidents,body.pre-boot #achievements{opacity:0;pointer-events:none}

/* ---------- help panel ---------- */
#help-panel{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(2,3,4,.82);backdrop-filter:blur(5px);padding:20px}
#help-panel[hidden]{display:none}
.help-card{width:min(450px,94vw);max-height:88vh;overflow:auto;background:linear-gradient(180deg,rgba(16,24,26,.98),rgba(8,12,12,.99));border:1px solid var(--accent);box-shadow:0 30px 80px -20px #000,0 0 30px -8px var(--glow);padding:26px 26px 22px;position:relative}
.help-card h3{font-family:var(--disp);color:var(--accent-2);font-size:21px;letter-spacing:.02em;text-shadow:0 0 14px var(--glow)}
.help-sub{color:var(--dim);font-size:11px;letter-spacing:.2em;margin:4px 0 18px;text-transform:uppercase}
.help-list{display:flex;flex-direction:column;gap:12px;list-style:none}
.help-list li{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--ink)}
.help-key{flex:none;min-width:80px;text-align:center;font-family:var(--cond);color:var(--accent-2);border:1px solid var(--line-2);background:#0006;padding:4px 7px;font-size:11px;letter-spacing:.04em;line-height:1.35}
.help-list .dim{display:block;margin-top:2px}
.help-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--ink-2);font-size:18px;cursor:pointer}
.help-x:hover{color:var(--accent)}

/* ---------- incident alerts ---------- */
#incidents{position:fixed;left:14px;bottom:42px;z-index:1000;display:flex;flex-direction:column-reverse;gap:8px;max-width:min(340px,82vw);pointer-events:none}
.incident{display:flex;gap:9px;align-items:center;background:linear-gradient(135deg,rgba(38,14,4,.96),rgba(10,8,8,.96));border-left:3px solid var(--accent);padding:9px 13px;font-size:11.5px;color:var(--ink-2);letter-spacing:.01em;box-shadow:0 10px 30px -12px #000;transform:translateX(-120%);animation:incIn .5s forwards,incOut .55s 5s forwards}
.incident .ix{color:var(--accent);font-size:13px;flex:none}
@keyframes incIn{to{transform:none}}
@keyframes incOut{to{transform:translateX(-120%);opacity:0}}

/* ---------- pet love-burst (big colourful hearts + pop ring) ---------- */
.heart{position:fixed;z-index:1400;pointer-events:none;left:0;top:0;font-size:var(--sz,34px);line-height:1;
  transform:translate(-50%,-50%);will-change:transform,opacity;
  filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 2px 3px rgba(0,0,0,.45));
  animation:heartPop 1.25s cubic-bezier(.18,.7,.28,1) forwards}
@keyframes heartPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.4) rotate(calc(var(--rot,0deg) * .3))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.85) rotate(var(--rot,0deg))}}
.heart-ring{position:fixed;z-index:1399;pointer-events:none;left:0;top:0;width:18px;height:18px;border-radius:50%;
  border:3px solid #ffd1e6;transform:translate(-50%,-50%);will-change:transform,opacity;
  box-shadow:0 0 16px #ff7ab0,0 0 30px rgba(255,122,176,.5);animation:heartRing .62s ease-out forwards}
@keyframes heartRing{0%{opacity:.85;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.6)}}

/* =====================================================================
   RESPONSIVE PASS — phones · tablets · everything
   ===================================================================== */
#hero,#boss,#ending{min-height:100vh;min-height:100svh}

@media (max-width:1024px){
  .gauges{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .band{padding:clamp(50px,8vw,96px) clamp(16px,4vw,32px)}
  #dock{right:10px}
}
@media (max-width:820px){
  .dossier-cols{grid-template-columns:1fr}
  .phase-shot{max-width:100%}
}
@media (max-width:768px){
  .hud-org span{display:none}
  .gauges{grid-template-columns:1fr 1fr;gap:16px 22px}
  .evidence-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .player-stats{grid-template-columns:1fr 1fr}
  .seal{width:clamp(150px,42vw,210px)}
  .hero-tags .tag{font-size:10.5px}
  .help-key{min-width:66px}
}
@media (max-width:600px){
  .hud-banner{display:none}
  .hud-left{padding:8px 10px;gap:8px;border-right:0}
  .hud-mark{width:26px;height:26px}
  .hud-org strong{font-size:11.5px}
  .hud-right{padding:6px 10px;gap:12px;margin-left:auto}
  .hud-stat{min-width:auto}
  .hud-stat label{font-size:8px}
  .status-chip{display:none}
  .hud-bar{width:52px}
  .gauges{grid-template-columns:1fr}
  .evidence-grid{grid-template-columns:1fr 1fr}
  .player-stats{grid-template-columns:1fr}
  .player-actions{grid-template-columns:1fr 1fr}
  .boss-log{height:108px}
  .id-row{grid-template-columns:92px 1fr;gap:8px;font-size:12px;padding:9px 12px}
  .stamp{font-size:12px}
  .boss-callout{font-size:clamp(16px,6vw,26px)}
  /* Mobile dock: bottom bar with horizontal scroll so every button is
     reachable on the narrowest phones (10 buttons would otherwise clip).
     Faded edges hint that more exists off-screen; tooltips hide on touch. */
  #dock{
    right:0;left:0;top:auto;
    bottom:max(8px,env(safe-area-inset-bottom,8px));
    transform:none;
    width:100vw;max-width:100vw;
    padding:6px 14px;
    flex-direction:row;gap:10px;
    justify-content:flex-start;align-items:center;
    overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  }
  #dock::-webkit-scrollbar{display:none}
  #dock::before{
    content:"";position:fixed;left:0;right:0;
    bottom:0;height:calc(64px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,rgba(2,4,5,.78),transparent);
    pointer-events:none;z-index:-1;
  }
  .dock-btn{
    width:46px;height:46px;font-size:18px;
    flex:0 0 auto;scroll-snap-align:center;
  }
  .dock-btn::after{display:none}
  #incidents{bottom:auto;top:62px;max-width:84vw;flex-direction:column}
  .incident{animation:incIn .5s forwards,incOut .55s 4.4s forwards}
  #achievements{bottom:84px;right:10px}
  .ach{min-width:0;max-width:84vw}
  body{cursor:auto}
  #boss{align-items:flex-start;padding-top:64px}
  .boss-arena{padding-bottom:74px}
  #footer{padding-bottom:96px}
}
@media (max-width:420px){
  .player-actions{grid-template-columns:1fr}
  .evidence-grid{grid-template-columns:1fr}
  .seal{width:48vw}
  .hero-tags{gap:7px}
  .tag{font-size:10px;padding:5px 8px}
  .band-title{font-size:clamp(24px,8vw,34px)}
  .dock-btn{width:42px;height:42px;font-size:17px}
  .foot-bar{flex-direction:column;gap:6px}
}
@media (max-width:360px){
  .dock-btn{width:38px;height:38px;font-size:16px}
  #dock{gap:8px;padding:6px 12px}
  .dock-btn .ic-snd,.dock-btn .ic-cctv,.dock-btn .ic-cn,.dock-btn .ic-vault,.dock-btn .ic-install{width:18px;height:18px}
}

/* =====================================================================
   PERFORMANCE — skip off-screen work, promote hot layers, lite mode
   ===================================================================== */
/* opacity flicker on its own layer = composite-only, no repaint */
.hero-title{transform:translateZ(0)}
/* pause the hero's infinite glitch/flicker once it scrolls away */
#hero.paused, #hero.paused *{animation-play-state:paused !important}
/* let the browser skip layout+paint+animation for off-screen sections */
#dossier{content-visibility:auto;contain-intrinsic-size:1px 1700px}
#evidence{content-visibility:auto;contain-intrinsic-size:1px 760px}
#boss{content-visibility:auto;contain-intrinsic-size:1px 760px}
#ending{content-visibility:auto;contain-intrinsic-size:1px 760px}
#footer{content-visibility:auto;contain-intrinsic-size:1px 360px}
/* extend the trick to the rest of the heavy bands so the browser can skip
   layout/paint for whatever isn't on screen yet — keeps scroll buttery */
#timeline{content-visibility:auto;contain-intrinsic-size:1px 1600px}
#habitat{content-visibility:auto;contain-intrinsic-size:1px 720px}
#sightings{content-visibility:auto;contain-intrinsic-size:1px 1200px}
.tile,.sg-card,.phase-panel{content-visibility:auto;contain-intrinsic-size:auto 280px}

/* lite mode — auto-enabled on weak / reduced-motion devices */
body.lite #fx-grain,
body.lite #fx-scanlines::after,
body.lite #reticle,
body.lite .capture-scan{display:none}
body.lite #fx-particles{opacity:.45}
body.lite #fx-vignette{box-shadow:inset 0 0 160px 30px rgba(0,0,0,.7)}
body.lite .hud-banner span,
body.lite .hero-title,
body.lite .hero-title::before,
body.lite .hero-title::after{animation:none}
body.lite .hero-title::before,
body.lite .hero-title::after{opacity:0}
body.lite .seal{animation-duration:160s}
body.lite .dock-btn{backdrop-filter:none}
body.lite .boss-glow{animation:none}

/* =====================================================================
   v3 — TILED WALL · COOLER WELCOME · VAULT GATE · BASEMENT GALLERY
   ===================================================================== */

/* ---------- tiled, blurred wall behind everything ---------- */
#bg-wall{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  --wall-size:300px;
  background:#070809 url('../assets/room/background.webp') repeat;
  background-size:var(--wall-size);
  filter:blur(6px) brightness(.34) saturate(.72) contrast(1.05);
  transform:scale(1.08);
}
body.lite #bg-wall{filter:brightness(.36) saturate(.72)}

/* ---------- archive slide (into the basement) ---------- */
#archive{transition:opacity 1.1s .2s, filter .5s ease, transform .8s cubic-bezier(.76,0,.24,1)}
body.basement-open{overflow:hidden}
body.basement-open #archive{transform:translateX(-26%) scale(.94);filter:blur(4px) brightness(.4);pointer-events:none}
body.lite.basement-open #archive{filter:brightness(.4)}

/* ---------- cooler welcome / access screen ---------- */
/* the access screen wears the real room wall — heavily darkened + phosphor-tinted
   so the dark terminal vibe (and text legibility) is preserved */
#boot-screen{
  background:
    radial-gradient(circle at 50% 42%, rgba(6,14,11,.40), rgba(4,7,6,.80) 80%),
    url('../assets/room/background.webp') repeat;
  background-size:cover, 156px;
}
.prompt-frame{position:relative;overflow:hidden;background:rgba(6,12,9,.5);backdrop-filter:blur(3px)}
.prompt-frame .br{position:absolute;width:22px;height:22px;border:2px solid var(--phos);opacity:.8}
.prompt-frame .br.tl{top:8px;left:8px;border-right:0;border-bottom:0}
.prompt-frame .br.tr{top:8px;right:8px;border-left:0;border-bottom:0}
.prompt-frame .br.bl{bottom:8px;left:8px;border-right:0;border-top:0}
.prompt-frame .br.br2{bottom:8px;right:8px;border-left:0;border-top:0}
.prompt-scan{position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(70,242,160,.12),transparent);animation:capscan 3.6s linear infinite}
.prompt-emblem{position:relative;width:108px;height:108px;margin:0 auto 16px}
.prompt-emblem .ring{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--phos);opacity:.7;animation:sealspin 14s linear infinite}
.prompt-emblem .ring2{position:absolute;inset:14px;border-radius:50%;border:1px solid var(--amber);
  box-shadow:0 0 18px var(--glow),inset 0 0 14px rgba(255,194,75,.15);animation:emblemPulse 2.4s ease-in-out infinite}
.emblem-cat{position:absolute;inset:26px;width:auto;height:auto}
.emblem-cat .cat-body,.emblem-cat .cat-ear{fill:none;stroke:var(--phos);stroke-width:5}
.emblem-cat .cat-eye{fill:var(--phos)}.emblem-cat .cat-pupil{fill:#040506}
.emblem-cat .cat-whisker,.emblem-cat .cat-tail,.emblem-cat .cat-nose{display:none}
@keyframes emblemPulse{50%{box-shadow:0 0 30px var(--glow),inset 0 0 20px rgba(255,194,75,.25);transform:scale(1.04)}}
.prompt-meta{color:var(--dim);font-size:10px;letter-spacing:.18em;margin:6px 0 18px;text-transform:uppercase}
.prompt-meta .dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.prompt-meta .dots i{width:4px;height:4px;border-radius:50%;background:var(--phos);opacity:.3;animation:dotpulse 1.4s infinite}
.prompt-meta .dots i:nth-child(2){animation-delay:.2s}.prompt-meta .dots i:nth-child(3){animation-delay:.4s}
@keyframes dotpulse{0%,60%,100%{opacity:.25}30%{opacity:1}}
.prompt-btn{position:relative;overflow:hidden}
.prompt-btn::after{content:"";position:absolute;top:0;left:-60%;width:46%;height:100%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,224,160,.32),transparent);animation:sweepBtn 2.8s ease-in-out infinite}
@keyframes sweepBtn{0%{left:-60%}55%,100%{left:170%}}
body.lite .prompt-scan,body.lite .prompt-btn::after,body.lite .prompt-emblem .ring{animation:none}

/* ---------- dock: vault icon + 5th button ---------- */
.dock-btn .ic-vault{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ---------- the vault gate ---------- */
#gate{max-width:1180px;margin:0 auto;padding:clamp(50px,8vw,100px) clamp(18px,5vw,40px);text-align:center;position:relative}
.vault{display:flex;justify-content:center;margin:34px 0 30px}
.vault-door{position:relative;width:min(300px,74vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#28322e,#141a18 55%,#090d0c);border:7px solid #2b3933;
  box-shadow:0 0 0 10px #0e1311,inset 0 0 50px #000,0 30px 70px -22px #000,0 0 70px -12px var(--glow)}
.vault-rivets{position:absolute;inset:7%;border-radius:50%;border:3px dotted #3c4c46;opacity:.6}
.vault-ring{position:absolute;inset:16%;border-radius:50%;border:2px solid #1c2622}
.vault-wheel{position:absolute;inset:30%;border-radius:50%;border:4px solid var(--accent);
  background:radial-gradient(circle,#1a2220,#0c100e);box-shadow:0 0 20px var(--glow),inset 0 0 16px #000;
  transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.vault:hover .vault-wheel{transform:rotate(140deg)}
.vault-wheel i{position:absolute;top:50%;left:50%;width:78%;height:5px;margin:-2.5px 0 0 -39%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);transform-origin:center}
.vault-wheel i:nth-child(2){transform:rotate(45deg)}
.vault-wheel i:nth-child(3){transform:rotate(90deg)}
.vault-wheel i:nth-child(4){transform:rotate(135deg)}
.vault-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--disp);font-size:15px;letter-spacing:.08em;color:var(--accent-2);text-shadow:0 0 12px var(--glow);pointer-events:none}
.vault-center small{font-size:9px;letter-spacing:.2em;color:var(--dim)}
.vault.opening .vault-wheel{transform:rotate(900deg);transition:transform .6s cubic-bezier(.5,0,.3,1)}
.vault-btn{margin-top:6px}
body.lite .vault-wheel{transition:none}

/* ---------- basement panel ---------- */
#basement{position:fixed;inset:0;z-index:36;transform:translateX(100%);overflow-y:auto;overflow-x:hidden;
  transition:transform .8s cubic-bezier(.76,0,.24,1);will-change:transform;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#0a0f0e,#070a09 55%,#05080a)}
body.basement-open #basement{transform:translateX(0)}
.basement-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,34px);border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(8,12,11,.98),rgba(8,12,11,.92))}
.bh-title{flex:1;min-width:150px}
.bh-title h2{font-family:var(--disp);font-size:clamp(16px,3vw,24px);color:var(--accent-2);text-shadow:0 0 14px var(--glow)}
.bh-title span{font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.gal-filter-groups{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.gal-filters{display:flex;gap:6px;flex-wrap:wrap;position:relative;padding-left:60px}
.gal-filters::before{content:attr(aria-label);position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.gal-filter{font-family:var(--cond);letter-spacing:.06em;font-size:12px;text-transform:uppercase;padding:7px 12px;cursor:pointer;
  background:#0d1413;color:var(--ink-2);border:1px solid var(--line-2);transition:all .15s;white-space:nowrap}
.gal-filter:hover{border-color:var(--accent);color:#fff}
.gal-filter.on{background:var(--accent);color:#000;box-shadow:0 0 16px var(--glow)}
/* citizen-source filter uses the blood-red accent so it stands out from
   the curated archive — same colour as the WITNESS stamp on the tiles */
.gal-filters[data-axis="source"] .gal-filter[data-source="sightings"].on{
  background:var(--blood);color:#fff;border-color:var(--blood);box-shadow:0 0 18px rgba(255,47,58,.45)}

/* tile WITNESS stamp — top-right of each citizen-uploaded basement tile,
   matches the home-page sg-uploader styling but slightly smaller */
.tile{position:relative}
.tile-uploader{position:absolute;top:6px;right:6px;z-index:4;
  display:inline-flex;align-items:center;gap:4px;max-width:calc(100% - 12px);
  font-family:"Russo One",var(--cond);font-size:9px;font-weight:700;letter-spacing:.1em;
  color:#fff;text-transform:uppercase;
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.18) 0 3px,transparent 3px 6px),
    linear-gradient(180deg,#ff3540,#b8121b);
  padding:3px 7px;border:1px solid #ff8a92;border-radius:2px;
  box-shadow:0 4px 10px -3px rgba(255,47,58,.45),0 0 0 1px rgba(0,0,0,.5) inset;
  text-shadow:0 1px 0 rgba(0,0,0,.6);pointer-events:none;transform:rotate(2deg)}
.tile-uploader-icon{font-size:8px;line-height:1;text-shadow:0 0 5px rgba(255,255,255,.5)}
.tile-uploader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:90px}
@media (max-width:600px){
  .tile-uploader{transform:none;font-size:8.5px;padding:2px 5px;gap:3px}
  .tile-uploader-name{max-width:70px}
}
.basement-foot{text-align:center;color:var(--dim);font-size:11px;letter-spacing:.05em;padding:24px 18px 96px}
.gal-empty{text-align:center;color:var(--ink-2);padding:60px 20px;line-height:2;font-size:14px}

/* ---------- gallery grid + tiles ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;
  padding:18px clamp(16px,4vw,34px) 10px;max-width:1320px;margin:0 auto}
.tile{position:relative;display:block;padding:0;border:1px solid var(--line-2);background:#080c0c;cursor:pointer;text-align:left;
  overflow:hidden;color:inherit;font:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 34px -14px #000,0 0 22px -8px var(--glow);z-index:2}
.tile-media{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#05080a}
.tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;filter:contrast(1.05) saturate(.92);transition:transform .4s}
.tile:hover .tile-media img{transform:scale(1.06)}
.tile-media img.failed{opacity:0}
.tile-ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--dim)}
.tile-ph svg{width:46%;opacity:.42}
.tile-ph .cat-body,.tile-ph .cat-ear{fill:none;stroke:var(--accent);stroke-width:3}
.tile-ph .cat-eye{fill:var(--accent)}.tile-ph .cat-pupil{fill:#05080a}
.tile-ph .cat-whisker,.tile-ph .cat-tail,.tile-ph .cat-nose{display:none}
.tile-ph span{font-family:var(--cond);font-size:10px;letter-spacing:.14em;color:var(--accent)}
.tile .play{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;color:#fff;background:rgba(8,12,11,.72);border:1px solid rgba(255,255,255,.5);box-shadow:0 0 20px rgba(0,0,0,.5)}
.tile:hover .play{background:var(--accent);color:#000;border-color:var(--accent)}
.tile-code{position:absolute;z-index:3;top:6px;left:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  color:var(--phos);background:rgba(4,6,6,.72);padding:2px 6px;border:1px solid var(--line-2)}
.tile-cap{display:block;padding:8px 10px;font-size:11px;color:var(--ink-2);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- lightbox ---------- */
#lightbox{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:40px 16px;
  background:rgba(2,3,4,.92);backdrop-filter:blur(6px)}
#lightbox[hidden]{display:none}
body.lite #lightbox{backdrop-filter:none;background:rgba(2,3,4,.97)}
.lb-stage{max-width:92vw;max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-media{max-width:92vw;max-height:82vh;object-fit:contain;background:#000;border:1px solid var(--line-2);
  box-shadow:0 30px 90px -20px #000,0 0 50px -16px var(--glow)}
img.lb-media{cursor:zoom-in;transition:transform .3s}
img.lb-media.zoom{transform:scale(2.4);cursor:zoom-out}
.lb-fail{color:var(--blood-2);font-family:var(--cond);letter-spacing:.1em;text-align:center}
.lb-fail small{display:block;color:var(--dim);margin-top:8px;font-size:11px}
.lb-btn{position:absolute;z-index:2;background:rgba(8,12,11,.7);border:1px solid var(--line-2);color:var(--ink);cursor:pointer;transition:all .15s;font-family:var(--mono)}
.lb-btn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.lb-x{top:18px;right:18px;width:42px;height:42px;font-size:18px}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:30px;display:grid;place-items:center}
#lb-prev{left:14px}
#lb-next{right:14px}
.lb-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;align-items:center;font-size:12px;color:var(--ink-2);
  padding:14px clamp(16px,4vw,30px);background:linear-gradient(0deg,rgba(3,4,5,.92),transparent)}
.lb-bar #lb-count{font-family:var(--disp);color:var(--accent-2);text-shadow:0 0 10px var(--glow);white-space:nowrap}
.lb-bar #lb-cap b{color:var(--accent-2)}

/* ---------- responsive: basement / gallery / lightbox ---------- */
@media (max-width:600px){
  .basement-head{gap:10px;padding:10px 14px}
  .basement-head .ghost-btn{order:-1;padding:8px 12px;font-size:12px}
  .gal-filter{padding:6px 9px;font-size:11px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;padding:12px}
  body.basement-open #archive{transform:translateX(-14%) scale(.96)}
  .lb-nav{width:40px;height:52px;font-size:24px}
  .lb-x{width:38px;height:38px;top:12px;right:12px}
  #dock{gap:9px}
}
@media (max-width:400px){ .dock-btn{width:44px;height:44px} }

/* =====================================================================
   v4 — DRIMYS cat-food easter egg + CITIZEN SIGHTINGS (upload)
   ===================================================================== */

/* ---------- DRIMYS food rain ---------- */
#drimys-layer{position:fixed;inset:0;z-index:1450;pointer-events:none;overflow:hidden}
.dfood,.dkibble,.dpack{position:absolute;top:0;left:0;will-change:transform,opacity}
.dfood{filter:drop-shadow(0 5px 6px rgba(0,0,0,.55))}
.dkibble{filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.dpack{height:auto;display:block;filter:drop-shadow(0 7px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(63,200,90,.4))}
.dfood svg,.dkibble svg{display:block;width:100%;height:100%}
.drimys-flash{position:fixed;inset:0;z-index:1449;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 58%,rgba(63,200,90,.30),rgba(63,200,90,.05) 45%,transparent 66%)}
.drimys-flash.fire{animation:drflash .6s ease-out}
@keyframes drflash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
body.lite .drimys-flash{display:none}
.drimys-callout{position:fixed;left:50%;top:40%;z-index:1460;transform:translate(-50%,-50%) scale(.6);pointer-events:none;white-space:nowrap;
  font-family:var(--disp);font-size:clamp(26px,7vw,68px);letter-spacing:.04em;color:#5fe07a;
  text-shadow:0 0 26px rgba(63,174,78,.85),0 3px 0 #0c3a18;opacity:0}
.drimys-callout.fire{animation:drcall 1.5s ease-out}
@keyframes drcall{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(-1deg)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-92%) scale(1.05)}}

/* dossier "DRIMYS" trigger chip */
.drimys-link{font:inherit;color:#7df09a;background:rgba(31,122,50,.16);border:1px solid #2f8a3f;
  padding:1px 8px;cursor:pointer;letter-spacing:.03em;border-radius:2px;transition:all .15s}
.drimys-link:hover{background:#2f8a3f;color:#04130a;box-shadow:0 0 14px rgba(63,174,78,.5)}

/* dock DRIMYS button */
.dock-btn.drimys{color:#5fe07a}
.dock-btn.drimys:hover{border-color:#46c25a;box-shadow:0 0 24px rgba(63,174,78,.5)}
.dock-btn .ic-drimys{width:21px;height:26px}

/* =====================================================================
   CITIZEN SIGHTINGS
   ===================================================================== */
.sight-wrap{max-width:980px}
.sight-form{border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(16,24,26,.5),rgba(8,12,12,.5));
  padding:clamp(18px,3vw,30px);position:relative}

/* wanted poster banner */
.wanted{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  border:2px solid var(--accent);background:linear-gradient(180deg,rgba(22,18,8,.6),rgba(8,8,6,.45));
  padding:16px 18px;margin-bottom:20px;box-shadow:0 0 24px -8px var(--glow),inset 0 0 30px rgba(0,0,0,.4)}
.wanted-top{font-family:var(--disp);letter-spacing:.16em;color:var(--accent);font-size:clamp(13px,2.4vw,16px);text-shadow:0 0 12px var(--glow)}
.wanted-cat{width:clamp(96px,16vw,128px)}
.wanted-cat .cat-body,.wanted-cat .cat-ear{fill:none;stroke:var(--accent);stroke-width:4}
.wanted-cat .cat-eye{fill:var(--accent)}.wanted-cat .cat-pupil{fill:var(--blood)}
.wanted-cat .cat-whisker{stroke:var(--accent);stroke-width:1.6;opacity:.7}.wanted-cat .cat-nose{fill:var(--accent)}
.wanted-name{font-family:var(--disp);font-size:clamp(16px,3vw,20px);letter-spacing:.06em;color:#eafff3}
.wanted-reward{font-size:11px;color:var(--dim);letter-spacing:.08em}

.sight-lead{font-size:14px;color:var(--ink-2);margin-bottom:18px;max-width:72ch;line-height:1.65}

/* drop zone */
.sight-drop{display:block;border:2px dashed var(--line-2);background:#06090a;padding:26px 18px;text-align:center;
  cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;position:relative}
.sight-drop:hover,.sight-drop.drag{border-color:var(--accent);background:rgba(255,194,75,.05);box-shadow:inset 0 0 30px rgba(255,194,75,.06)}
.sight-drop.has-file{border-style:solid;border-color:var(--phos);background:rgba(70,242,160,.04)}
.sight-drop-idle{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink-2)}
.sight-drop.has-file .sight-drop-idle{display:none}
.sight-upic{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sight-drop-idle b{font-family:var(--cond);letter-spacing:.1em;color:var(--accent-2);font-size:14px}
.sight-drop-idle span{font-size:12px}
.sight-drop-idle small{font-size:10.5px;color:var(--dim);letter-spacing:.08em}
.sight-preview{position:relative;display:flex;justify-content:center;margin:0}
.sight-preview[hidden]{display:none}
.sight-preview img{max-height:300px;max-width:100%;border:1px solid var(--line-2);object-fit:contain;filter:contrast(1.05) saturate(.9)}
.sg-clear{position:absolute;top:8px;right:8px;background:rgba(8,12,11,.82);border:1px solid var(--line-2);color:var(--ink);
  font-family:var(--cond);font-size:11px;letter-spacing:.06em;padding:5px 9px;cursor:pointer}
.sg-clear:hover{border-color:var(--blood);color:var(--blood-2)}

/* fields */
.sight-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.sight-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sight-field-wide{grid-column:1/-1}
.sight-field span{font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.sight-field .req{color:var(--blood-2);font-style:normal;font-size:11px;text-shadow:0 0 6px rgba(255,47,58,.5)}
.sight-field input{background:#05080a;border:1px solid var(--line-2);color:var(--ink);font-family:var(--mono);font-size:13px;
  padding:10px 12px;transition:border-color .15s,box-shadow .15s;width:100%;min-width:0}
.sight-field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 12px -2px var(--glow)}
.sight-field input::placeholder{color:#4a6256}
/* required-name highlight + shake when missing on submit */
.sight-field-name input{border-color:#4d2530}
.sight-field-name input:focus{border-color:var(--blood-2);box-shadow:0 0 12px -2px rgba(255,98,108,.45)}
.sight-field input.invalid{border-color:var(--blood);box-shadow:0 0 0 1px var(--blood),0 0 18px -2px rgba(255,47,58,.5);
  animation:sgShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes sgShake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}

/* honeypot — off-screen, invisible to humans */
.sg-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

.sight-submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.sight-btn{font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px;
  padding:13px 26px;background:var(--accent);color:#000;border:0;cursor:pointer;box-shadow:0 0 24px -6px var(--glow);
  transition:transform .15s,box-shadow .2s,opacity .2s;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.sight-btn:hover{transform:translateY(-2px);box-shadow:0 0 34px -4px var(--glow)}
.sight-btn:disabled{opacity:.5;cursor:wait;transform:none}
.sight-note{font-size:12px;letter-spacing:.02em;flex:1;min-width:180px}
.sight-note.ok{color:var(--phos);text-shadow:0 0 8px rgba(70,242,160,.3)}
.sight-note.err{color:var(--blood-2)}
.sight-note.busy{color:var(--accent-2)}
.sight-fine{margin-top:14px;font-size:10.5px;color:var(--dim);letter-spacing:.03em}

/* approved board */
.sight-board-head{margin-top:40px;border-top:1px solid var(--line-2);padding-top:22px}
.sight-board-head h3{font-family:var(--cond);font-weight:600;letter-spacing:.08em;font-size:15px;color:var(--accent-2);
  text-transform:uppercase;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sight-board-head b{font-family:var(--disp);color:var(--accent);font-size:16px;text-shadow:0 0 12px var(--glow)}
.sight-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:18px}
.sg-empty{text-align:center;color:var(--ink-2);padding:40px 20px;line-height:1.9;font-size:13.5px}
.sight-board .sg-empty{grid-column:1/-1}

/* hint copy under the section header */
.sight-stream-hint{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:.04em;color:var(--dim);text-transform:none;margin-top:6px;line-height:1.55}

/* Sightings marquee — single row of cards that slides left forever, looping
   seamlessly via DOM-level duplication of the visible items. Hovering pauses
   the animation (desktop); pointerdown adds .paused (touch). Mask fades the
   edges so cards enter / exit smoothly. */
.sight-marquee{position:relative;margin-top:18px;padding:8px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  /* keep at least one card height so the section reserves space before items load */
  min-height:300px}
.sight-marquee .sg-empty{padding:36px 16px;text-align:center}
.sight-marquee-track{display:flex;gap:14px;width:max-content;align-items:stretch;
  animation:marqueeSlide var(--marquee-secs,60s) linear infinite;
  will-change:transform}
@media (hover:hover){
  .sight-marquee:hover .sight-marquee-track{animation-play-state:paused}
}
.sight-marquee.paused .sight-marquee-track{animation-play-state:paused}
.sight-marquee .sg-card{flex:0 0 auto;width:220px;margin:0}
.sight-marquee .sg-card.sg-just-added{outline:1px solid var(--phos);outline-offset:-1px}
@media (max-width:600px){
  .sight-marquee{min-height:260px}
  .sight-marquee .sg-card{width:170px}
}
@media (max-width:380px){
  .sight-marquee .sg-card{width:148px}
}
@media (prefers-reduced-motion:reduce){
  /* respect users who explicitly opt out of motion — show items as a
     horizontally-scrollable strip they can flick through manually */
  .sight-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .sight-marquee-track{animation:none}
}
@keyframes marqueeSlide{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
.sg-card{border:1px solid var(--line-2);background:#080c0c;overflow:hidden;display:flex;flex-direction:column;margin:0;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.sg-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 34px -14px #000,0 0 22px -8px var(--glow);z-index:2}
/* freshly-uploaded card: brief halo + slide-in so the user sees their card
   land in the board. Replaced by the canonical version on the next refetch. */
.sg-card.sg-just-added{animation:sgPop .55s cubic-bezier(.2,1.2,.3,1) both,sgGlow 2.6s ease-out}
@keyframes sgPop{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sgGlow{0%{box-shadow:0 0 0 0 var(--phos),0 0 40px -4px rgba(70,242,160,.6)}100%{box-shadow:0 0 0 0 transparent,0 0 0 transparent}}
.sg-pic{position:relative;aspect-ratio:1;background:#05080a;overflow:hidden}
.sg-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;filter:contrast(1.06) saturate(.9)}
.sg-pic img.failed{opacity:0}
.sg-ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--dim)}
.sg-ph svg{width:44%;opacity:.4}
.sg-ph .cat-body,.sg-ph .cat-ear{fill:none;stroke:var(--accent);stroke-width:3}
.sg-ph .cat-eye{fill:var(--accent)}.sg-ph .cat-pupil{fill:#05080a}
.sg-ph .cat-whisker,.sg-ph .cat-tail,.sg-ph .cat-nose{display:none}
.sg-ph span{font-family:var(--cond);font-size:10px;letter-spacing:.12em;color:var(--accent)}
.sg-code{position:absolute;z-index:3;top:6px;left:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  color:var(--phos);background:rgba(4,6,6,.74);padding:2px 6px;border:1px solid var(--line-2)}

/* uploader name tag — red, top-right, looks like a "WITNESS / СВИДЕТЕЛЬ" stamp.
   Always visible (no hover required), classified-stamp aesthetic with a faint
   warning stripe and the witness icon. Truncates gracefully if the name is long. */
.sg-uploader{position:absolute;z-index:4;top:7px;right:7px;
  display:inline-flex;align-items:center;gap:5px;
  max-width:calc(100% - 14px);
  font-family:"Russo One",var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;
  color:#fff;text-transform:uppercase;
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.18) 0 4px,transparent 4px 8px),
    linear-gradient(180deg,#ff3540,#b8121b);
  padding:4px 9px 4px 8px;
  border:1px solid #ff8a92;
  border-radius:2px;
  box-shadow:0 6px 14px -4px rgba(255,47,58,.5),0 0 0 1px rgba(0,0,0,.55) inset,0 0 12px -2px rgba(255,47,58,.4);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  transform-origin:top right;
  pointer-events:none;
  /* tiny stamp-rotation for character — desktop only; flat on small screens */
  transform:rotate(2deg)}
.sg-uploader::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 40%,transparent 70%,rgba(0,0,0,.2));
  mix-blend-mode:overlay}
.sg-uploader-icon{font-size:9px;line-height:1;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.6);flex:0 0 auto}
.sg-uploader-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:160px}
@media (max-width:600px){
  .sg-uploader{transform:none;font-size:9.5px;padding:3px 7px;gap:4px}
  .sg-uploader-name{max-width:110px}
}
.sg-card figcaption{padding:9px 11px;display:flex;flex-direction:column;gap:6px;flex:1}
.sg-cap{font-size:12px;color:var(--ink-2);line-height:1.4;word-break:break-word}
.sg-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--dim);letter-spacing:.04em;margin-top:auto}
.sg-loc{color:var(--accent-2);word-break:break-word}

@media (max-width:600px){
  .sight-fields{grid-template-columns:1fr}
  .sight-board{grid-template-columns:1fr 1fr;gap:10px}
}
@media (max-width:400px){ .sight-board{grid-template-columns:1fr} }

/* =====================================================================
   HABITAT — holographic interactive 3D diorama
   ===================================================================== */
.habitat-stage{position:relative;max-width:940px;margin:8px auto 0;perspective:1100px}
/* The scene is now a containing block for container-query units (1cqw == 1%
   of its width). Items use cqw so they scale gracefully with the diorama on
   any viewport and never overflow the frame. Tooltips are rendered into a
   body-level portal (position:fixed) so the scene can safely clip itself. */
.habitat-scene{position:relative;width:100%;aspect-ratio:16/10;transform-style:preserve-3d;
  transition:transform .25s ease-out;transform-origin:50% 50%;
  border:1px solid var(--line-2);overflow:hidden;
  container-type:inline-size;
  box-shadow:0 30px 90px -34px #000, 0 0 50px -20px var(--glow)}
.habitat-scene.lit{filter:brightness(1.45) saturate(1.18)}
/* The diorama "floor" holds the background + hologram grid + scanline and is
   CLIPPED to the box, so the scene itself can stay overflow:visible — that way
   an item's description tip is NEVER clipped by the box (mobile + desktop). */
.hab-floor{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(17,32,29,.88), rgba(8,15,13,.95) 58%, rgba(6,10,9,.98) 100%),
    url('../assets/room/background.webp') repeat;
  background-size:cover, 104px;
  box-shadow:inset 0 0 90px #000}
.hab-floor::before{content:"";position:absolute;inset:-10%;opacity:.55;
  background-image:linear-gradient(rgba(70,242,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(70,242,160,.05) 1px,transparent 1px);
  background-size:42px 42px}
.hab-floor::after{content:"";position:absolute;left:0;right:0;top:0;pointer-events:none;height:42%;
  background:linear-gradient(to bottom,transparent,rgba(70,242,160,.06) 50%,transparent);animation:capscan 6.5s linear infinite}
.habitat-grain{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(circle at 50% 122%, rgba(255,194,75,.08), transparent 58%)}

.hab-item{position:absolute;transform-style:preserve-3d;transform:translate(-50%,-50%) translateZ(var(--z,0px));cursor:pointer;z-index:1}
.hab-item:hover,.hab-item.tapped{z-index:20}
.hab-bob{animation:habBob var(--bob,6s) ease-in-out infinite}
.hab-inner{position:relative;transition:transform .25s,filter .25s;transform-origin:50% 60%;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.6))}
.hab-item img{display:block;height:auto}
.hab-item:hover .hab-inner,.hab-item.tapped .hab-inner{transform:scale(1.13);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 16px var(--glow)) brightness(1.12)}
.hab-item.glow .hab-inner{filter:drop-shadow(0 12px 16px rgba(0,0,0,.6)) drop-shadow(0 0 18px var(--glow)) brightness(1.1)}
.hab-item.poke .hab-inner{animation:habPoke .45s}
.hab-item.spin .hab-inner{animation:habSpin .7s ease-in-out}
@keyframes habBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes habPoke{0%,100%{transform:scale(1)}40%{transform:scale(1.22) rotate(-3deg)}}
@keyframes habSpin{0%{transform:scale(1.1) rotate(0)}100%{transform:scale(1.1) rotate(360deg)}}

/* the DRIMYS pack begs to be clicked */
.hab-item[data-effect="drimys"] .hab-inner::after{content:"";position:absolute;inset:-14px;border:1px dashed #5fe07a;
  border-radius:50%;opacity:.4;animation:habRing 2.2s ease-in-out infinite}
@keyframes habRing{0%,100%{transform:scale(.85);opacity:.22}50%{transform:scale(1.05);opacity:.6}}

/* Portal tooltip — fixed-positioned on <body>, so it is never clipped by the
   habitat scene's overflow:hidden. JS computes coordinates each time it's shown. */
.hab-tooltip{position:fixed;left:0;top:0;width:max-content;max-width:min(260px,calc(100vw - 20px));
  background:rgba(6,12,10,.98);border:1px solid var(--accent);color:var(--ink);
  font-size:11.5px;line-height:1.5;padding:9px 12px;opacity:0;pointer-events:none;
  transform:translateY(4px) scale(.98);transform-origin:top center;
  transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 18px 40px -12px #000,0 0 22px -4px var(--glow);
  z-index:9000}
.hab-tooltip b{display:block;font-family:var(--cond);letter-spacing:.06em;color:var(--accent-2);font-size:11.5px;margin-bottom:4px;text-transform:uppercase}
.hab-tooltip.show{opacity:1;transform:translateY(0) scale(1)}
@media (max-width:600px){
  .hab-tooltip{font-size:11px;padding:8px 10px;max-width:min(220px,calc(100vw - 24px))}
}

.habitat-hint{text-align:center;margin-top:16px;font-size:11px;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase}

@media (max-width:600px){
  .habitat-scene{aspect-ratio:4/3}
  .habitat-hint{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .hab-floor::after,.hab-bob{animation:none}
}
body.lite .hab-bob,body.lite .hab-floor::after{animation:none}

/* =====================================================================
   CONTRAST PASS — header + footer text comfortably legible (WCAG AA).
   The faded "--dim" tone is great for ambience but too low-contrast for
   the persistent chrome; lift those specific labels to --ink-2 (~8:1).
   ===================================================================== */
#hud .hud-org span{color:var(--ink-2)}
#hud .hud-stat label{color:var(--ink-2);font-size:9px}
#footer .foot-grid p{color:var(--ink-2)}
#footer .foot-bar{color:var(--ink-2)}
/* a touch more separation so the sticky header reads over any content */
#hud{box-shadow:0 8px 30px -8px #000,0 1px 0 rgba(0,0,0,.6)}

/* =====================================================================
   v5 — ENGAGEMENT SECTOR (slides from the LEFT) · MUSEUM GALLERY ·
   VIDEO SIGHTINGS · DOCK/HUD declutter · contrast reinforcement
   ===================================================================== */

/* ---------- engagement gate: the trigger that lives in the archive ---------- */
#engage-gate{max-width:1180px;margin:0 auto;text-align:center;position:relative;
  padding:clamp(50px,8vw,100px) clamp(18px,5vw,40px);
  content-visibility:auto;contain-intrinsic-size:1px 640px;
  background:radial-gradient(120% 90% at 50% 30%,rgba(40,0,8,.22),transparent 60%)}
.engage-portal{position:relative;width:min(260px,62vw);aspect-ratio:1;margin:30px auto 28px;display:grid;place-items:center}
.engage-portal .ep-ring{position:absolute;inset:6%;border-radius:50%;border:2px dashed var(--blood);opacity:.55;animation:sealspin 24s linear infinite}
.engage-portal .ep-ring2{inset:19%;border-style:solid;border-color:#7c0d12;opacity:.8;animation:sealspin 16s linear infinite reverse}
.engage-portal .ep-glow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,rgba(255,47,58,.4),transparent 68%);animation:redpulse 2.6s ease-in-out infinite}
.engage-portal .ep-cat{position:relative;width:46%;height:auto;z-index:2;filter:drop-shadow(0 0 18px rgba(255,47,58,.5))}
.engage-portal .ep-cat .cat-body,.engage-portal .ep-cat .cat-ear{fill:#14080a;stroke:var(--blood);stroke-width:3}
.engage-portal .ep-cat .cat-eye{fill:#ffec6a}.engage-portal .ep-cat .cat-pupil{fill:#000}
.engage-portal .ep-cat .cat-nose{fill:var(--blood)}.engage-portal .ep-cat .cat-whisker{stroke:var(--blood);stroke-width:1.4;opacity:.7}
.engage-portal .ep-cat .cat-tail{stroke:var(--blood);fill:none;stroke-width:3}
body.lite .engage-portal .ep-ring,body.lite .engage-portal .ep-ring2,body.lite .engage-portal .ep-glow{animation:none}

/* ---------- the engagement panel: a full overlay sliding in from the LEFT ---------- */
#engage{position:fixed;inset:0;z-index:36;transform:translateX(-100%);overflow-y:auto;overflow-x:hidden;
  transition:transform .8s cubic-bezier(.76,0,.24,1);will-change:transform;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(120% 90% at 50% 16%,rgba(60,0,10,.5),transparent 62%),
    linear-gradient(180deg,#0a0708,#070506 55%,#080406)}
body.engage-open{overflow:hidden}
body.engage-open #engage{transform:translateX(0)}
body.engage-open #archive{transform:translateX(26%) scale(.94);filter:blur(4px) brightness(.4);pointer-events:none}
body.lite.engage-open #archive{filter:brightness(.4)}
.engage-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,34px);border-bottom:1px solid var(--blood);backdrop-filter:blur(4px);
  background:linear-gradient(180deg,rgba(22,7,9,.98),rgba(12,6,7,.9))}
.eh-title{flex:1;min-width:150px}
.eh-title h2{font-family:var(--disp);font-size:clamp(16px,3vw,24px);color:var(--blood-2);text-shadow:0 0 14px rgba(255,47,58,.5)}
.eh-title span{font-size:10px;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase}
.engage-head .ghost-btn{border-color:#6e3037;color:#ffc0c4}
.engage-head .ghost-btn:hover{background:#ffc0c4;color:#1a0608}
.engage-body{max-width:900px;margin:0 auto;min-height:calc(100% - 62px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:clamp(28px,5vw,56px) clamp(16px,4vw,30px) 96px}
.engage-body .boss-intro{margin:auto 0}
.engage-body .boss-arena{width:100%;max-width:900px}
body.lite #engage{transition:none}
@media (max-width:600px){
  body.engage-open #archive{transform:translateX(14%) scale(.96)}
  .engage-body{padding-top:22px;justify-content:flex-start}
}

/* ---------- engagement dock button ---------- */
.dock-btn.engage{color:var(--blood-2);font-size:19px;line-height:1}
.dock-btn.engage:hover{border-color:var(--blood);color:#fff;box-shadow:0 0 24px rgba(255,47,58,.5)}

/* =====================================================================
   MUSEUM GALLERY — the recovered room wall behind framed media
   ===================================================================== */
/* Museum backdrop: the real room wall (a bright, ~0.89-luma texture) shown
   clearly behind the framed art. It lives on the element's OWN background, so
   it always sits behind the tiles (no z-index fight) and — with the default
   scroll attachment — stays put while the art scrolls over it (museum effect).
   A warm 'ceiling light' wash + a measured veil keep text legible. */
#basement{
  background:
    radial-gradient(130% 80% at 50% -14%, rgba(255,228,170,.16), transparent 55%),
    linear-gradient(180deg, rgba(10,14,12,.44), rgba(8,11,11,.36) 42%, rgba(6,9,10,.56)),
    #20251c url('../assets/room/background.webp') repeat;
  background-size:auto, auto, 320px;
}
body.lite #basement{background:linear-gradient(180deg,#11150f,#0a0d0a 55%,#070a09)}
.basement-head{backdrop-filter:blur(5px)}
.basement-foot{color:var(--ink-2)}
/* hang each tile like a framed, lit artwork on the wall */
.tile{background:linear-gradient(180deg,#0f1413,#0a0e0d);border:1px solid #2a2218;
  box-shadow:0 0 0 4px #0d0b07, 0 22px 36px -16px #000, 0 6px 16px -8px rgba(0,0,0,.7)}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 1px 0 rgba(255,224,160,.12), inset 0 0 26px rgba(0,0,0,.45)}
.tile:hover{box-shadow:0 0 0 4px #15110a, 0 26px 44px -16px #000, 0 0 26px -8px var(--glow)}
.tile-cap{background:linear-gradient(180deg,rgba(20,17,9,.5),rgba(10,12,11,.2));border-top:1px solid #1d1810;
  color:var(--ink-2);letter-spacing:.04em}

/* =====================================================================
   VIDEO SIGHTINGS — upload preview + board cards support clips
   ===================================================================== */
.sight-preview .sg-pv-media{max-height:300px;max-width:100%;display:block;margin:0 auto;border:1px solid var(--line-2);
  object-fit:contain;background:#000;filter:contrast(1.05) saturate(.95)}
video.sg-pv-media{width:auto}
.sg-pic .sg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:#000;filter:contrast(1.04) saturate(.92);cursor:pointer}
.sg-pic .sg-vid.failed{opacity:0}
.sg-playbadge{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#fff;
  background:rgba(8,12,11,.66);border:1px solid rgba(255,255,255,.5);box-shadow:0 0 18px rgba(0,0,0,.5);pointer-events:none}
.sg-card[data-kind="video"]:hover .sg-playbadge{background:var(--accent);color:#000;border-color:var(--accent)}

/* =====================================================================
   DECLUTTER — keep the persistent bottom HUD text clear of the dock,
   and fit the (now 7) dock buttons on small phones
   ===================================================================== */
@media (max-width:600px){
  #dock{gap:8px;bottom:14px}
  .dock-btn{width:44px;height:44px;font-size:18px}
  .sv.bl,.sv.br{bottom:72px}
  .sv.bl{max-width:60vw;line-height:1.35}
  .sv.br{max-width:36vw;text-align:right}
}
@media (max-width:400px){
  #dock{gap:6px}
  .dock-btn{width:40px;height:40px;font-size:16px}
  .sv.bl,.sv.br{bottom:66px}
}

/* =====================================================================
   CONTRAST REINFORCEMENT — finishing touches + keyboard focus rings
   ===================================================================== */
.sight-field input::placeholder{color:#7f998d}
.id-row{border-bottom-color:var(--line)}
.tile-cap,.sg-cap{color:var(--ink-2)}
.help-list li,.help-list .dim{color:var(--ink-2)}
/* visible focus ring for keyboard users (kept off mouse clicks) */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.dock-btn:focus-visible,.tile:focus-visible,.act:focus-visible,.gal-filter:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* =====================================================================
   v6 — engagement how-to-play card · in-page results · mobile fit
   ===================================================================== */
.howto{max-width:560px;margin:22px auto 26px;text-align:left;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(22,9,11,.6),rgba(10,8,9,.5));padding:16px 18px;
  box-shadow:0 0 24px -10px rgba(255,47,58,.4)}
.howto-head{font-family:var(--cond);font-weight:600;letter-spacing:.14em;color:var(--blood-2);
  text-transform:uppercase;font-size:12px;margin-bottom:10px;text-align:center}
.howto-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.howto-list li{font-size:13px;color:var(--ink-2);line-height:1.5;padding-left:18px;position:relative;text-align:left}
.howto-list li::before{content:"\25B8";position:absolute;left:0;color:var(--blood-2)}
.howto-list b{color:var(--ink)}
.howto-acts{display:flex;flex-wrap:wrap;gap:6px 10px}
.hk{font-family:var(--cond);color:var(--accent-2);border:1px solid var(--line-2);background:#0006;
  padding:1px 7px;font-size:11.5px;letter-spacing:.04em;white-space:nowrap}

/* results shown inside the engagement page */
.engage-ending{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:18px 8px;max-width:600px;margin:0 auto}
.engage-ending[hidden]{display:none}
.engage-ending .sleeping-cat{width:clamp(150px,30vw,240px)}
.engage-ending .ending-line{animation:none;opacity:1}
.engage-ending .ending-sub{animation:none;opacity:1}
.engage-ending .ending-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;animation:none;opacity:1}

/* mobile: the whole arena fits the viewport — no pinch-zoom to see the bars */
@media (max-width:600px){
  #engage{overflow-x:hidden}
  .engage-body{padding:18px 12px 92px;overflow-x:hidden}
  .engage-body .boss-arena{width:100%;max-width:100%;gap:12px}
  .boss-sprite{width:clamp(116px,32vw,168px)}
  .boss-stage{min-height:146px}
  .boss-log{height:94px;font-size:12px}
  .enemy-name h3{font-size:clamp(15px,4.6vw,22px)}
  .howto{padding:13px 13px;margin:16px auto 20px}
  .howto-list li{font-size:12px}
  .pstat label{font-size:9px}
}

/* =====================================================================
   v6 — DEFINITIVE MOBILE POLISH
   Phones are the dominant device for this site. This block hardens the
   small-screen experience: prevents iOS focus zoom, respects safe-area
   insets (notched phones), ensures comfortable tap targets, and tames
   any remaining horizontal overflow.
   ===================================================================== */

/* html5 viewport keeps `100vh` ≠ visible height on mobile browsers.
   Use the small-viewport-height (svh) where available to avoid the
   address-bar-collapse jump. */
@supports (height: 100svh){
  #hero,#boss,#ending,body.pre-boot{min-height:100svh}
  body.pre-boot{height:100svh}
}

/* iOS Safari zooms-in on any input whose font-size < 16px when focused.
   Force every focusable field to 16px so users never get yanked into a
   zoom. The label/visual size stays the same on desktop because this
   only kicks in below 600px. */
@media (max-width:600px){
  input[type=text],input[type=password],input[type=email],input[type=tel],
  input[type=number],input[type=url],input[type=search],input:not([type]),
  select,textarea{font-size:16px}
  .sight-field input,#term-input{font-size:16px}
  .sight-btn{font-size:13.5px}
  .prompt-btn{font-size:14px}
  /* honour the safe area on notched phones so the bottom dock + footer
     are not under the home-bar */
  body{padding-bottom:env(safe-area-inset-bottom)}
  #dock{bottom:calc(12px + env(safe-area-inset-bottom))}
  #footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* tap targets — WCAG / Apple HIG comfortable minimum */
  .dock-btn,.gal-filter,.ghost-btn,.sight-btn,.lb-btn,.prompt-btn,.act,
  .help-x,#boot-enter,.sg-clear,#refresh,#enter,#logout,.tab{min-height:44px}
  /* prevent the address-bar viewport from creating a horizontal scrollbar */
  html,body{max-width:100vw;overflow-x:hidden}
  /* media tiles, sightings, gallery — let images fully fill their tiles */
  .tile,.sg-card{border-radius:0}
  /* sightings: stack the form for the maximum input width on tiny phones */
  .sight-form{padding:14px 12px}
  .wanted{padding:12px 14px}
  .wanted-cat{width:clamp(76px,18vw,108px)}
  .sight-fields{gap:10px}
  /* the band-tab pill sometimes wraps mid-word — let it wrap on commas only */
  .band-tab{white-space:normal;line-height:1.35;font-size:10.5px}
  /* dossier and timeline get tighter padding on phones */
  .band{padding:clamp(46px,9vw,90px) clamp(14px,4vw,28px)}
  /* basement: make the back button always reachable */
  .basement-head{position:sticky;top:0;z-index:5}
  /* lightbox can use the full viewport on tiny screens */
  .lb-bar{font-size:11px;padding:10px 12px}
  /* timeline cards: full bleed */
  .phase-shot{margin-left:-4px;margin-right:-4px}
}

/* even smaller screens (≤380px): one more tightening pass */
@media (max-width:380px){
  .hero-tags .tag{font-size:10px;padding:5px 8px}
  .wanted-name{font-size:14px}
  .wanted-reward{font-size:10.5px}
  .sight-drop{padding:18px 12px}
  .sight-drop-idle b{font-size:13px}
  .sight-drop-idle span{font-size:11px}
  .gal-filters{gap:6px}
  .gal-filter{padding:5px 8px;font-size:10.5px}
  .dock-btn::after{font-size:10px;padding:4px 7px}
  /* one-column boss action grid stays legible */
  .player-actions .act{font-size:12px;padding:10px 8px}
}

/* short landscape phones — keep the boot prompt visible without scrolling */
@media (max-height:520px) and (orientation:landscape){
  #hero{padding:36px 18px;gap:4px}
  .seal{width:clamp(120px,18vh,180px)}
  .hero-title{font-size:clamp(28px,7vh,56px)}
  .prompt-frame{padding:18px 22px}
  #boot-screen .boot-inner{gap:14px}
}

/* =====================================================================
   v7 — OPLOG · 4AM EVENT · CCTV PIP · CINEMA · SHAREABLE LIGHTBOX
   ===================================================================== */

/* ---------- HUD chips: operator + streak ---------- */
.hud-op,.hud-streak{min-width:90px}
.hud-op label,.hud-streak label{color:var(--ink-2);font-size:9px}
.hud-op b,.hud-streak b{font-family:var(--cond);font-weight:600;letter-spacing:.05em;font-size:12.5px;color:var(--accent-2);text-shadow:0 0 8px var(--glow)}
.hud-op.unset b{color:var(--blood-2);text-shadow:0 0 8px rgba(255,98,108,.3)}
.hud-op:hover{background:rgba(255,194,75,.06);box-shadow:inset 0 0 0 1px rgba(255,194,75,.18)}
@media (max-width:768px){
  .hud-op,.hud-streak{min-width:auto}
  .hud-op label,.hud-streak label{font-size:8px}
  .hud-op b,.hud-streak b{font-size:11px}
}
@media (max-width:600px){
  .hud-streak{display:none}    /* low-priority on phones; still on terminal */
}

/* ---------- 4AM event banner (full-page) ---------- */
#scream-event{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%,rgba(255,30,30,.18),rgba(0,0,0,.85) 70%);
  opacity:0;transition:opacity .35s ease}
#scream-event.show{opacity:1}
.se-inner{font-family:var(--disp);text-align:center;color:#fff;
  text-shadow:0 0 18px var(--blood),0 0 40px rgba(255,47,58,.5),0 0 2px #fff;
  animation:seBeat 1.2s ease-in-out infinite}
.se-clock{font-size:clamp(48px,12vw,140px);letter-spacing:.04em;line-height:1}
.se-title{font-size:clamp(20px,3.4vw,38px);letter-spacing:.18em;margin-top:8px;color:var(--blood-2)}
.se-sub{font-family:var(--cond);font-size:clamp(11px,1.8vw,15px);letter-spacing:.16em;color:#ffd6d6;margin-top:10px;text-transform:uppercase;text-shadow:none}
.se-foot{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim);margin-top:24px;text-shadow:none}
@keyframes seBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
body.lite #scream-event{background:rgba(0,0,0,.92)}
body.lite .se-inner{animation:none}

/* ---------- CCTV picture-in-picture ---------- */
#cctv{position:fixed;left:14px;bottom:14px;z-index:980;
  width:clamp(220px,22vw,280px);
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.7))}
#cctv[hidden]{display:none}
.cctv-frame{position:relative;border:1px solid var(--accent);background:#0a0e0d;
  box-shadow:0 0 0 1px #000 inset,0 0 26px -4px var(--glow),0 30px 60px -20px #000;
  aspect-ratio:4/3;overflow:hidden;
  /* corner cuts for an industrial monitor look */
  clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px))}
.cctv-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.cctv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.92) hue-rotate(-6deg) brightness(.92)}
.cctv-media.failed{opacity:0}
.cctv-scan{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.28) 3px 4px),
             linear-gradient(180deg,rgba(70,242,160,.05),transparent 30%);
  mix-blend-mode:multiply}
.cctv-grain{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.07;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;animation:grain .5s steps(2) infinite}
.cctv-hud{position:absolute;left:0;right:0;top:6px;z-index:5;display:flex;justify-content:space-between;
  padding:0 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#9af8c5;text-shadow:0 0 6px #000}
.cctv-rec{display:inline-flex;align-items:center;gap:6px;color:#ff6b73}
.cctv-dot{width:7px;height:7px;border-radius:50%;background:#ff2a36;box-shadow:0 0 10px #ff2a36;animation:cctvBlink 1.1s steps(2) infinite}
@keyframes cctvBlink{50%{opacity:.25}}
.cctv-cam,.cctv-time{color:#cbe6d2}
.cctv-foot{position:absolute;left:0;right:0;bottom:6px;z-index:5;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#a0c0b0;text-shadow:0 0 6px #000}
.cctv-meta{position:absolute;left:8px;top:24px;z-index:6;font-family:var(--mono);font-size:9.5px;color:#fff;
  background:rgba(0,0,0,.55);padding:2px 7px;border-left:2px solid var(--accent);
  display:inline-flex;flex-direction:column;gap:1px}
.cctv-meta b{font-family:var(--cond);letter-spacing:.06em;font-size:10px;color:var(--accent-2)}
.cctv-by{color:#ff929a;letter-spacing:.08em}
.cctv-x{position:absolute;right:6px;top:6px;z-index:7;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--line-2);color:#fff;font-size:11px;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,border-color .15s}
.cctv-x:hover{background:var(--blood);border-color:var(--blood)}
/* slow ken-burns over the media */
.kenburns{animation:kenBurns 18s ease-in-out infinite alternate}
@keyframes kenBurns{
  from{transform:scale(1.04) translate(-1%,-1%)}
  to  {transform:scale(1.14) translate(2%,2%)}
}
/* sync with the dock button when active */
#btn-cctv.on{border-color:var(--accent);color:#fff;box-shadow:0 0 14px var(--glow)}
#btn-cctv .ic-cctv{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
#btn-cinema .ic-cn{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (max-width:600px){
  #cctv{left:8px;bottom:calc(74px + env(safe-area-inset-bottom));width:46vw;max-width:240px}
}
body.lite .cctv-grain,body.lite .kenburns{animation:none}

/* ---------- Cinema (full-screen reel) ---------- */
#cinema{position:fixed;inset:0;z-index:9400;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity .55s ease;cursor:zoom-out}
#cinema[hidden]{display:none}
#cinema.show{opacity:1}
.cn-curtain{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 120% at 50% 50%,transparent 50%,rgba(0,0,0,.7) 78%,rgba(0,0,0,.95) 100%)}
.cn-stage{position:relative;z-index:2;width:min(92vw,1280px);aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--accent);box-shadow:0 0 80px -10px var(--glow),0 0 0 1px rgba(0,0,0,.8) inset}
.cn-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(.95)}
.cn-media.failed{opacity:0}
.cn-label{position:relative;z-index:3;margin-top:18px;font-family:var(--cond);letter-spacing:.06em;
  color:#eafff3;text-align:center;text-shadow:0 0 10px var(--glow),0 0 2px #000;display:flex;flex-direction:column;gap:4px;align-items:center}
.cn-cap{font-size:clamp(13px,2vw,18px)}
.cn-by{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent-2)}
.cn-hint{position:absolute;left:0;right:0;bottom:20px;z-index:3;text-align:center;color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase}
.cn-hint kbd{display:inline-block;border:1px solid var(--line-2);padding:1px 6px;font-family:var(--mono);font-size:10px;color:var(--ink-2);background:#000a}
.cn-empty{color:var(--dim);font-family:var(--mono);letter-spacing:.1em;padding:60px}
body.cinema-open #dock,body.cinema-open #hud,body.cinema-open #incidents,body.cinema-open #surveillance,body.cinema-open #cctv{display:none !important}
body.lite #cinema .cn-media{animation:none}

/* ---------- HUD: visitor counter chip ---------- */
.hud-visitors{min-width:96px;text-align:right}
.hud-visitors label{color:var(--ink-2);font-size:9px}
.hud-visitors b{font-family:var(--disp);font-size:14px;color:var(--phos);text-shadow:0 0 10px rgba(70,242,160,.35)}
.hud-visitors-sub{display:block;font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.06em;margin-top:1px;min-height:11px}
@media (max-width:768px){
  .hud-visitors{min-width:auto}
  .hud-visitors b{font-size:12px}
  .hud-visitors-sub{display:none}
}
@media (max-width:600px){ .hud-visitors{display:none} }

/* ---------- Sighting reactions ---------- */
.sg-react{display:flex;gap:6px;justify-content:flex-end;margin-top:6px;border-top:1px dashed var(--line-2);padding-top:6px}
.sg-react-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  background:#0a1110;border:1px solid var(--line-2);color:var(--ink-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  padding:3px 7px;border-radius:2px;
  transition:transform .12s,border-color .15s,background .15s,color .15s}
.sg-react-btn .rg{font-size:12px;line-height:1}
.sg-react-btn .rc{font-family:var(--disp);font-size:10.5px;color:var(--accent-2)}
.sg-react-btn:hover{border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.sg-react-btn.on{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 10px var(--glow)}
.sg-react-btn.on .rc{color:#000}
.sg-react-btn.busy{opacity:.6;pointer-events:none}
/* lightbox version: a bit larger so it's tappable */
.lb-react-wrap{margin-top:8px;display:flex;justify-content:center}
.lb-react-wrap .sg-react{border-top:0;padding-top:0;margin-top:0;gap:8px}
.lb-react-wrap .sg-react-btn{padding:6px 12px;font-size:13px}
.lb-react-wrap .sg-react-btn .rg{font-size:15px}
.lb-react-wrap .sg-react-btn .rc{font-size:13px}

/* ---------- Lesya / Olga poll ---------- */
#poll-section{max-width:1080px;margin:0 auto}
.poll-wrap{max-width:760px;margin:8px auto 0;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(16,24,26,.5),rgba(8,12,12,.55));
  padding:clamp(18px,3vw,28px);position:relative;
  box-shadow:0 22px 60px -20px #000,0 0 30px -10px var(--glow)}
.poll-lead{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:18px;max-width:60ch}
.poll-rows{display:flex;flex-direction:column;gap:12px}
.poll-row{position:relative;display:grid;grid-template-columns:36px 1fr 1fr 64px 56px;align-items:center;gap:12px;
  background:#06090a;border:1px solid var(--line-2);color:inherit;cursor:pointer;
  padding:14px 16px;text-align:left;font-family:inherit;
  transition:border-color .18s,background .18s,transform .15s}
.poll-row:hover{border-color:var(--accent);transform:translateY(-1px);background:rgba(255,194,75,.04)}
.poll-emblem{font-family:var(--disp);font-size:20px;color:var(--accent);text-shadow:0 0 10px var(--glow);text-align:center}
.poll-lesya .poll-emblem{color:#ffd66a}
.poll-olga .poll-emblem{color:var(--blood-2)}
.poll-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.poll-name{font-family:var(--disp);letter-spacing:.04em;font-size:15px;color:#eafff3;text-shadow:0 0 10px var(--glow);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poll-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poll-bar{position:relative;height:10px;background:#10181a;border:1px solid var(--line);overflow:hidden;width:100%;min-width:120px}
.poll-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px var(--glow);
  transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.poll-olga .poll-bar i{background:linear-gradient(90deg,var(--blood),var(--blood-2));box-shadow:0 0 10px rgba(255,47,58,.45)}
.poll-pct{font-family:var(--disp);font-size:15px;color:var(--accent-2);text-align:right}
.poll-olga .poll-pct{color:var(--blood-2)}
.poll-count{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:right;border-left:1px solid var(--line);padding-left:10px}
.poll-foot{margin-top:14px;font-size:11px;color:var(--dim);letter-spacing:.04em}
.poll-foot #poll-total{font-family:var(--disp);color:var(--accent-2);font-size:13px;margin-right:4px}
#poll-note{color:var(--ink-2)}
#poll.voted #poll-vote-lesya[data-voted-as] .poll-emblem{animation:pollPulse 2.4s ease-in-out infinite}
#poll[data-voted="lesya"] .poll-lesya{border-color:var(--accent);background:rgba(255,194,75,.06);box-shadow:inset 0 0 0 1px var(--accent),0 0 22px -6px var(--glow)}
#poll[data-voted="olga"] .poll-olga{border-color:var(--blood);background:rgba(255,47,58,.06);box-shadow:inset 0 0 0 1px var(--blood),0 0 22px -6px rgba(255,47,58,.4)}
#poll.busy{opacity:.7;pointer-events:none}
@keyframes pollPulse{50%{transform:scale(1.18)}}
@media (max-width:600px){
  .poll-row{grid-template-columns:28px 1fr 50px;gap:9px;padding:12px;row-gap:6px}
  .poll-bar{grid-column:1/-1;height:8px;min-width:0}
  .poll-pct{grid-column:3;grid-row:1;text-align:right}
  .poll-count{display:none}
  .poll-meta{grid-column:2;grid-row:1}
  .poll-emblem{grid-column:1;grid-row:1}
}

/* ---------- lightbox: share button + toast ---------- */
.lb-share{top:18px;right:72px;width:42px;height:42px;display:grid;place-items:center}
.lb-share svg{width:20px;height:20px;color:currentColor}
@media (max-width:600px){ .lb-share{top:12px;right:60px;width:38px;height:38px} .lb-share svg{width:18px;height:18px} }
.lb-toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(20px);z-index:1600;
  background:rgba(8,12,11,.96);border:1px solid var(--phos);color:var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:10px 18px;
  box-shadow:0 18px 40px -10px #000,0 0 22px -6px rgba(70,242,160,.4);
  opacity:0;transition:opacity .25s,transform .25s}
.lb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}