:root {
  --bg: #050505;
  --ink: #e9e4da;
  --dim: #9a948a;
  --red: #c41a32;
  --red-glow: rgba(196, 26, 50, .55);
  --panel: rgba(8, 8, 8, .86);
  --line: rgba(233, 228, 218, .14);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 15px/1.5 Inter, system-ui, sans-serif; }
[hidden] { display: none !important; }

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- screen effects ---------- */
#vignette, #grain, #fear, #flash, #locker { position: fixed; inset: 0; pointer-events: none; }
#vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%); }
#grain { opacity: .08; background-size: 256px 256px; animation: grain .5s steps(6) infinite; mix-blend-mode: screen; }
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -60px 40px; } 40% { background-position: 80px -30px; }
  60% { background-position: -20px -90px; } 80% { background-position: 50px 70px; } 100% { background-position: 0 0; }
}
#fear { opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(120, 0, 10, .85) 100%); transition: opacity .25s; }
#flash { opacity: 0; background: #fff; }
#flash.hit { animation: hit .35s ease-out; } /* a quick blink: never hide what's in front of you */
@keyframes hit { 0% { opacity: .7; background: #fff; } 30% { opacity: .35; background: #8a0010; } 100% { opacity: 0; background: #000; } }
/* Looking out through the slats of a locker / wardrobe door. */
#locker { background: repeating-linear-gradient(180deg, rgba(3,3,3,.97) 0 24px, transparent 24px 36px); }
#locker::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #030303 0 24%, transparent 24% 76%, #030303 76%),
    linear-gradient(180deg, #030303 0 30%, transparent 30% 70%, #030303 70%);
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: "Special Elite", monospace; }
#objective { position: absolute; top: 18px; left: 22px; font-size: 16px; letter-spacing: .04em; text-shadow: 0 0 6px #000, 0 0 2px #000; white-space: pre-line; opacity: .85; }
#objective.alarm { color: #ff5468; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(233,228,218,.55); }
#prompt { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); font-size: 15px; text-shadow: 0 0 6px #000; opacity: 0; transition: opacity .15s; white-space: nowrap; }
#prompt.on { opacity: .95; }
#prompt kbd, .keys kbd { font-family: Inter, sans-serif; font-weight: 800; font-size: 12px; border: 1px solid var(--dim); border-radius: 4px; padding: 1px 6px; margin-right: 4px; }
#toast { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); font-size: 20px; letter-spacing: .06em; text-shadow: 0 0 10px #000; opacity: 0; transition: opacity .4s; text-align: center; }
#toast.on { opacity: 1; }

#mic { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 10px; opacity: .85; }
#mic svg, #battery svg { width: 20px; height: 20px; fill: var(--ink); }
#mic .bar, .meter { position: relative; width: 120px; height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
#mic .bar i, .meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); transition: width .05s linear; }
#mic .bar b, .meter b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; left: 50%; opacity: .7; }
#mic.heard .bar i { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
#mic.heard svg { fill: var(--red); }
#micText { font-size: 13px; color: #ff5468; letter-spacing: .06em; }
#mic.off { opacity: .35; }

#stamina { position: absolute; left: 50%; bottom: 34px; width: 180px; height: 3px; margin-left: -90px; background: rgba(255,255,255,.1); opacity: 0; transition: opacity .3s; }
#stamina.on { opacity: .8; }
#stamina i { display: block; height: 100%; width: 100%; background: var(--ink); }
#stamina.tired i { background: var(--red); }

#battery { position: absolute; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 10px; opacity: .85; }
#battery .bar { width: 70px; height: 6px; border: 1px solid var(--dim); border-radius: 2px; padding: 1px; }
#battery .bar i { display: block; height: 100%; width: 100%; background: var(--ink); }
#battery.low .bar i { background: var(--red); }

/* ---------- menus ---------- */
.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.55); overflow-y: auto; }
#title { background: radial-gradient(ellipse at 50% 40%, #1a1412 0%, #050505 70%); }
.panel { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); padding: 30px 32px; box-shadow: 0 20px 80px #000; }
.title-panel { background: transparent; border: 0; box-shadow: none; text-align: center; }
h1, h2 { font-family: "Special Elite", monospace; font-weight: 400; margin: 0 0 12px; letter-spacing: .08em; }
h2 { font-size: 30px; }
.logo { position: relative; font-size: clamp(64px, 16vw, 128px); line-height: 1; letter-spacing: .18em; margin-right: -.18em; color: var(--ink); text-shadow: 0 0 30px rgba(196,26,50,.35); }
.logo::before, .logo::after { content: attr(data-text); position: absolute; inset: 0; opacity: .7; }
.logo::before { color: var(--red); animation: glitch 3.2s infinite steps(1); }
.logo::after { color: #4fd2c8; animation: glitch 2.7s infinite reverse steps(1); mix-blend-mode: screen; opacity: .35; }
@keyframes glitch {
  0%, 86%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
  88% { transform: translate(-4px, 1px); clip-path: inset(20% 0 55% 0); }
  91% { transform: translate(5px, -2px); clip-path: inset(60% 0 10% 0); }
  94% { transform: translate(-2px, 0); clip-path: inset(40% 0 35% 0); }
}
.tag { font-family: "Special Elite", monospace; font-size: 20px; color: var(--dim); margin: 6px 0 34px; letter-spacing: .1em; }
.buttons { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 280px; margin: 22px auto 0; }
button {
  font: 600 15px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 1px solid var(--line); padding: 12px 18px; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled) { border-color: var(--ink); background: rgba(233,228,218,.06); }
button.primary { border-color: var(--red); background: rgba(196,26,50,.16); }
button.primary:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
button:disabled { opacity: .35; cursor: default; }
.fine { font-size: 13px; color: var(--dim); margin-top: 22px; }
.whisper { font-family: "Special Elite", monospace; color: #b8525f; letter-spacing: .05em; }
.kicker { font-size: 12px; letter-spacing: .3em; color: var(--dim); text-transform: uppercase; margin: 0 0 6px; }
.intro-panel { text-align: center; }
.rules { padding-left: 20px; } .rules li { margin: 6px 0; }
.keys { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: var(--dim); margin-top: 14px; }

.row { display: grid; grid-template-columns: 1fr 160px 44px; align-items: center; gap: 12px; margin: 12px 0; }
.row output { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
input[type=range] { accent-color: var(--red); width: 100%; }
.meter.big { width: 100%; height: 8px; margin-top: 8px; }

.lines { font-family: "Special Elite", monospace; font-size: 19px; padding-left: 26px; }
.lines li { margin: 10px 0; opacity: .35; transition: opacity .3s, color .3s; }
.lines li.now { opacity: 1; }
.lines li.done { opacity: .6; color: #7fbf8a; }
.lines li.done::after { content: "  ✓"; }

.stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; margin: 18px 0 0; }
.stats dt { color: var(--dim); } .stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .panel { padding: 22px 18px; }
  .row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- multiplayer ---------- */
#spec { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); font: 15px "Special Elite", monospace; letter-spacing: .05em; color: var(--ink); opacity: .8; text-shadow: 0 0 8px #000; pointer-events: none; text-align: center; padding: 0 16px; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--dim); margin: 14px 0; }
.field input, .join-row input {
  font: 600 17px Inter, sans-serif; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line);
  padding: 11px 14px; outline: none; width: 100%;
}
.field input:focus, .join-row input:focus { border-color: var(--ink); }
.buttons.wide { max-width: none; margin-top: 8px; }
.or { text-align: center; color: var(--dim); font-size: 13px; margin: 18px 0 10px; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.join-row input { text-transform: uppercase; letter-spacing: .4em; text-align: center; font-family: "Special Elite", monospace; font-size: 22px; }
.code { font-size: 54px; letter-spacing: .3em; margin: 0 0 6px; color: #ff5468; }
button.small { padding: 7px 12px; font-size: 12px; }
.players { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.players li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.players li .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.15); flex: none; }
.players li.talking .dot { background: #7fbf8a; box-shadow: 0 0 8px #7fbf8a; }
.players li .ptag { margin-left: auto; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.players li.out .ptag { color: #7fbf8a; }
.players li.dead .ptag { color: #ff5468; }

/* ---------- classes, objectives, minigames ---------- */
.wide-panel { width: min(760px, 100%); }
.class-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.class-pick button { text-transform: none; letter-spacing: 0; text-align: left; padding: 12px; display: grid; gap: 6px; align-content: start; }
.class-pick button b { font: 400 18px "Special Elite", monospace; letter-spacing: .06em; }
.class-pick button span { font: 400 12px/1.45 Inter, sans-serif; color: var(--dim); }
.class-pick button.on { border-color: var(--red); background: rgba(196,26,50,.14); }
.pick-title { margin-top: 18px; }
#ability { position: absolute; left: 22px; bottom: 52px; font-size: 14px; letter-spacing: .05em; opacity: .85; text-shadow: 0 0 6px #000; }
#ability kbd { font-family: Inter, sans-serif; font-weight: 800; font-size: 11px; border: 1px solid var(--dim); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
#tracker { position: absolute; right: 22px; bottom: 52px; width: 200px; height: 120px; opacity: .9; }
#skill { position: absolute; left: 50%; top: 36%; width: 120px; margin: -60px 0 0 -60px; text-align: center; }
#skill svg { width: 120px; height: 120px; }
#skill .ring { fill: none; stroke: rgba(233,228,218,.35); stroke-width: 3; }
#skill .zone { fill: none; stroke: #e9e4da; stroke-width: 7; }
#skill .needle { stroke: #ff5468; stroke-width: 3; stroke-linecap: round; }
#skill kbd { font: 800 11px Inter, sans-serif; border: 1px solid var(--dim); border-radius: 4px; padding: 1px 6px; }
#skill.good .zone { stroke: #7fbf8a; } #skill.bad .needle { stroke: #fff; }
#heart { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: min(520px, 90vw); text-align: center; pointer-events: none; }
#heart .track { position: relative; height: 46px; border-top: 1px solid rgba(233,228,218,.25); border-bottom: 1px solid rgba(233,228,218,.25); margin: 10px 0; overflow: hidden; }
#heart .core { position: absolute; left: 18px; top: 50%; transform: translate(-50%, -50%); font-size: 30px; color: #c41a32; text-shadow: 0 0 12px #c41a32; z-index: 1; }
#heart .core.hit { animation: thump .25s; }
@keyframes thump { 40% { transform: translate(-50%, -50%) scale(1.45); } }
#heartBeats i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e9e4da; box-shadow: 0 0 10px #e9e4da; }
#heartBeats i.missed { background: #c41a32; box-shadow: none; opacity: .5; }
#heart .lives { color: #c41a32; letter-spacing: .3em; font-size: 18px; margin: 0; }

/* ---------- scares ---------- */
#lore { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); width: min(640px, 90vw); text-align: center; background: rgba(0,0,0,.55); padding: 10px 16px; }
#lore .kicker { margin: 0 0 4px; }
#loreLine { margin: 0; font-size: 18px; color: #e9e4da; }
#qte { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); text-align: center; width: 280px; }
#qte .whisper { font-size: 20px; color: #ff5468; animation: pulse .3s infinite; }
#qte .bar { height: 8px; background: rgba(255,255,255,.12); }
#qte .bar i { display: block; height: 100%; width: 0; background: #c41a32; }

/* ---------- story ---------- */
.chapters { display: grid; gap: 8px; margin-top: 14px; }
.chapters button { text-transform: none; letter-spacing: 0; text-align: left; display: flex; gap: 14px; align-items: baseline; }
.chapters button b { font: 400 13px Inter, sans-serif; color: var(--dim); letter-spacing: .15em; text-transform: uppercase; min-width: 86px; }
.chapters button span { font: 400 20px "Special Elite", monospace; }
.chapters button i { margin-left: auto; font-style: normal; font-size: 12px; color: #7fbf8a; }
#introText p { margin: 8px 0; }

/* ---------- traitor mode ---------- */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.mode-pick button { text-transform: none; letter-spacing: 0; text-align: left; }
.mode-pick button span { display: block; font-size: 12px; color: var(--dim); margin-top: 4px; }
.mode-pick button.on { border-color: var(--red); background: rgba(196,26,50,.14); }
.mode-pick button:disabled { opacity: .6; }
.mode-pick button.on:disabled { opacity: 1; }
#traitor { position: absolute; top: 18px; right: 22px; font-size: 13px; color: #ff5468; text-shadow: 0 0 6px #000; text-align: right; }
#traitor b { display: block; font-weight: 400; letter-spacing: .08em; margin-bottom: 4px; }
#traitor kbd { font: 800 11px Inter, sans-serif; border: 1px solid #ff5468; border-radius: 4px; padding: 0 5px; margin: 0 4px 0 8px; }
#vote { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(420px, 90vw); background: rgba(0,0,0,.8); border: 1px solid var(--line); padding: 16px 20px; }
#vote ol { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; font-size: 16px; }
#vote kbd { font: 800 11px Inter, sans-serif; border: 1px solid var(--dim); border-radius: 4px; padding: 0 6px; margin-right: 10px; }

/* ---------- camcorder ---------- */
body.vhs #grain, body.vhs #vignette { display: none; }
#cam { position: fixed; inset: 0; pointer-events: none; font: 30px VT323, monospace; color: #e8f0e8; text-shadow: 2px 2px 0 rgba(0,0,0,.6), 0 0 6px rgba(200,255,220,.25); letter-spacing: .06em; }
#cam span { position: absolute; }
#cam .rec { top: 26px; left: 34px; }
#cam .rec::first-letter { color: #ff3040; }
#cam .rec { animation: recblink 1.6s steps(1) infinite; }
@keyframes recblink { 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
#cam .bat { top: 30px; right: 34px; width: 46px; height: 20px; border: 3px solid #e8f0e8; box-shadow: 2px 2px 0 rgba(0,0,0,.6); }
#cam .bat::after { content: ""; position: absolute; right: -9px; top: 4px; width: 5px; height: 7px; background: #e8f0e8; }
#cam .bat i { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(100% - 6px); background: #e8f0e8; }
#cam .bat.low i { background: #ff3040; }
#cam .stamp { bottom: 28px; left: 34px; white-space: pre; line-height: 1; }
#cam .counter { bottom: 28px; right: 34px; }
#signal { position: fixed; inset: 0; display: grid; place-items: center; background: #050805; font: 64px VT323, monospace; color: #e8f0e8; letter-spacing: .2em; z-index: 5; }
#signal span { animation: recblink 0.8s steps(1) infinite; }

/* The HUD stays out of the way: it shows while you hold Tab, briefly when something changes, and on its own when it matters. */
#hud #objective, #hud #ability, #hud #mic, #hud #battery { transition: opacity .4s; }
#hud:not(.reveal) #objective, #hud:not(.reveal) #ability { opacity: 0; }
#hud:not(.reveal) #mic:not(.heard) { opacity: 0; }
#hud #battery { display: none; } /* the camcorder shows the battery */
#hud #crosshair { opacity: .25; width: 3px; height: 3px; }
/* Keep clear of the camcorder text. */
#objective { top: 78px; left: 34px; }
#ability { left: 34px; bottom: 104px; }
#mic { left: 34px; bottom: 140px; }