/* ============================================================
   THE RUMBLING — 16-BIT EDITION — STYLES
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --navy-950:#070a14;
  --navy-900:#0c1120;
  --navy-800:#131a30;
  --navy-700:#1b2440;
  --navy-600:#26325a;
  --line-black:#03040a;
  --cyan:#4deeea;
  --cyan-dim:#1c7c7a;
  --magenta:#ff37d6;
  --magenta-dim:#7a1e6e;
  --red:#ff3b3b;
  --red-dim:#7a1414;
  --gold:#ffd23f;
  --gold-dim:#7a5e10;
  --green:#59e07a;
  --ink:#eef2ff;
  --ink-dim:#8f9ac2;
  --ink-faint:#565f85;
  --font-pixel:'Press Start 2P', monospace;
  --font-mono:'VT323', 'Courier New', monospace;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--navy-950);
  color:var(--ink);
  font-family:var(--font-mono);
  overflow:hidden;
  -webkit-font-smoothing:none;
}
button{ font-family:inherit; }
img{ image-rendering:pixelated; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor; }
::selection{ background:var(--cyan); color:var(--navy-950); }

#app{ position:relative; width:100vw; height:100vh; overflow:hidden; }

.screen{
  position:absolute; inset:0;
  display:none;
  width:100%; height:100%;
}
.screen.active{ display:flex; }

/* ============ scrollbars (retro chunky) ============ */
.scroll::-webkit-scrollbar{ width:10px; height:10px; }
.scroll::-webkit-scrollbar-track{ background:var(--navy-950); }
.scroll::-webkit-scrollbar-thumb{ background:var(--navy-600); border:2px solid var(--line-black); }

/* ============================================================
   PIXEL PANEL — reusable bevel panel component
   ============================================================ */
.pixel-panel{
  position:relative;
  background:var(--navy-800);
  border:3px solid var(--line-black);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.07),
    inset -3px -3px 0 rgba(0,0,0,0.55),
    0 4px 0 var(--line-black),
    0 6px 12px rgba(0,0,0,0.5);
}
.pixel-panel > .bolt{
  position:absolute; width:6px; height:6px;
  background:var(--navy-600);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(0,0,0,.6);
}
.pixel-panel > .bolt.tl{ top:4px; left:4px; }
.pixel-panel > .bolt.tr{ top:4px; right:4px; }
.pixel-panel > .bolt.bl{ bottom:4px; left:4px; }
.pixel-panel > .bolt.br{ bottom:4px; right:4px; }

.pixel-btn{
  font-family:var(--font-pixel);
  font-size:11px;
  letter-spacing:1px;
  color:var(--ink);
  background:var(--navy-700);
  border:3px solid var(--line-black);
  padding:12px 18px;
  cursor:pointer;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.10),
    inset -2px -2px 0 rgba(0,0,0,.5),
    0 4px 0 var(--line-black);
  transition: transform .04s ease, box-shadow .04s ease;
  user-select:none;
}
.pixel-btn:hover{ background:var(--navy-600); }
.pixel-btn:active, .pixel-btn.pressed{
  transform:translateY(3px);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.10),
    inset -2px -2px 0 rgba(0,0,0,.5);
}
.pixel-btn:disabled, .pixel-btn.disabled{
  opacity:.45; cursor:not-allowed; filter:grayscale(.4);
}
.pixel-btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }

.pixel-btn.primary{
  background:linear-gradient(180deg,#1d8f8c,#146a68);
  color:#04211f;
  color:#eafffe;
  border-color:var(--line-black);
}
.pixel-btn.primary:hover{ background:linear-gradient(180deg,#25a7a3,#187f7c); }

.pixel-btn.gold{
  background:linear-gradient(180deg,#e0a92a,#a97a12);
  color:#2a1c00;
}
.pixel-btn.gold:hover{ background:linear-gradient(180deg,#f2bc3a,#bd8a1a); }

.pixel-btn.danger{
  background:linear-gradient(180deg,#a3302f,#6e1919);
  color:#ffe9e9;
}
.pixel-btn.danger:hover{ background:linear-gradient(180deg,#c23c3a,#832121); }

.pixel-btn.ghost{
  background:transparent;
  box-shadow:0 0 0 var(--line-black);
  border-color:var(--navy-600);
}

.pixel-input, .pixel-select, .pixel-textarea{
  font-family:var(--font-mono);
  font-size:18px;
  background:var(--navy-950);
  color:var(--ink);
  border:3px solid var(--line-black);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6), inset -1px -1px 0 rgba(255,255,255,.05);
  padding:8px 10px;
  outline:none;
  width:100%;
}
.pixel-input:focus, .pixel-select:focus, .pixel-textarea:focus{
  border-color:var(--cyan);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6), 0 0 0 2px rgba(77,238,234,.4);
}
.pixel-textarea{ resize:vertical; min-height:110px; line-height:1.35; }

label.field-label{
  display:block;
  font-family:var(--font-pixel);
  font-size:10px;
  color:var(--cyan);
  letter-spacing:.5px;
  margin-bottom:8px;
}

/* toggle switch (pixel style) */
.pixel-toggle{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  cursor:pointer; user-select:none;
  font-family:var(--font-mono); font-size:17px;
}
.pixel-toggle .toggle-label{ white-space:nowrap; }
.pixel-toggle .box{
  width:26px; height:26px;
  background:var(--navy-950);
  border:3px solid var(--line-black);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6);
  position:relative;
  flex:0 0 auto;
}
.pixel-toggle.on .box{ background:var(--cyan-dim); }
.pixel-toggle.on .box::after{
  content:''; position:absolute; inset:4px; background:var(--cyan);
}
.pixel-toggle.locked{ opacity:.6; cursor:pointer; }
.pixel-toggle.locked .box{ background:var(--navy-900); }

/* lock badge */
.lock-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-pixel); font-size:8px;
  color:#3a2c00;
  background:linear-gradient(180deg,#ffe27a,var(--gold));
  border:2px solid var(--line-black);
  padding:3px 6px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);
  white-space:nowrap;
}
.lock-badge .pix-lock{ font-size:9px; line-height:1; }

/* ============================================================
   SETUP SCREEN
   ============================================================ */
#screen-setup{
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--navy-950);
  padding-bottom:60px;
}
.crt-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
.crt-bg canvas{ position:absolute; inset:0; width:100%; height:100%; }
.crt-scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,0.16) 2px, rgba(0,0,0,0) 3px
  );
  mix-blend-mode:multiply;
  opacity:.55;
}
.crt-vignette{
  position:fixed; inset:0; pointer-events:none; z-index:5;
  box-shadow: inset 0 0 160px 60px rgba(0,0,0,.75);
}

.setup-wrap{
  position:relative; z-index:2;
  width:100%; max-width:920px;
  padding:36px 20px 20px;
  display:flex; flex-direction:column; align-items:center;
}

.title-block{ text-align:center; margin-bottom:26px; }
.game-title{
  font-family:var(--font-pixel);
  font-size:clamp(28px, 6vw, 54px);
  letter-spacing:2px;
  color:var(--ink);
  margin:0;
  text-shadow:
    3px 3px 0 var(--magenta-dim),
    -2px 0 0 var(--cyan-dim),
    0 0 24px rgba(77,238,234,.35),
    5px 5px 0 var(--line-black);
  animation:title-flicker 4.2s infinite steps(1);
}
@keyframes title-flicker{
  0%,92%,100%{ opacity:1; }
  93%{ opacity:.86; }
  94%{ opacity:1; }
  95%{ opacity:.9; }
}
.game-subtitle{
  font-family:var(--font-pixel);
  font-size:clamp(9px,2vw,14px);
  color:var(--cyan);
  letter-spacing:4px;
  margin-top:14px;
  text-shadow:0 0 10px rgba(77,238,234,.6);
}

.setup-section{
  width:100%;
  margin-bottom:20px;
  padding:18px;
}
.section-title{
  font-family:var(--font-pixel);
  font-size:12px;
  color:var(--ink);
  letter-spacing:1px;
  margin:0 0 14px;
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  flex-wrap:wrap;
}
.section-title .count-badge{
  font-family:var(--font-mono); font-size:16px; color:var(--green);
  background:var(--navy-950); border:2px solid var(--line-black); padding:2px 10px;
}
.section-title .count-badge.warn{ color:var(--red); }

.names-row{ display:flex; gap:16px; flex-wrap:wrap; }
.names-col{ flex:1 1 260px; min-width:240px; }
.names-hint{ font-size:14px; color:var(--ink-faint); margin-top:6px; line-height:1.4; }
.names-errors{ margin-top:8px; font-size:14px; color:var(--red); min-height:18px; line-height:1.4; }

/* scene cards */
.scene-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:14px;
}
.scene-card{
  position:relative;
  border:3px solid var(--line-black);
  cursor:pointer;
  aspect-ratio:16/10;
  overflow:hidden;
  box-shadow: 0 4px 0 var(--line-black), inset 0 0 0 2px rgba(0,0,0,.3);
  background-size:cover; background-position:center;
  outline-offset:2px;
}
.scene-card:focus-visible{ outline:3px solid var(--cyan); }
.scene-card .shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,15,.15) 0%, rgba(5,7,15,.85) 100%);
}
.scene-card .label{
  position:absolute; left:0; right:0; bottom:0; padding:8px 8px 7px;
  font-family:var(--font-pixel); font-size:9px; letter-spacing:.5px; color:var(--ink);
  text-shadow:1px 1px 0 #000;
}
.scene-card .cart-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34px; height:8px; background:var(--line-black);
  border-bottom-left-radius:4px; border-bottom-right-radius:4px;
}
.scene-card.selected{
  border-color:var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan), 0 0 18px rgba(77,238,234,.7), 0 4px 0 var(--line-black);
}
.scene-card.selected .label{ color:var(--cyan); }
.scene-card.locked .shade{ background:rgba(5,7,15,.72); }
.scene-card.locked{ cursor:pointer; }
.scene-card .lock-badge{ position:absolute; top:6px; right:6px; }
.scene-card:hover:not(.selected){ box-shadow:0 0 0 2px var(--ink-faint), 0 4px 0 var(--line-black); }

/* elimination config */
.elim-modes{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.elim-mode-btn{
  font-family:var(--font-pixel); font-size:9px; letter-spacing:.5px;
  padding:10px 14px; background:var(--navy-950); color:var(--ink-dim);
  border:2px solid var(--line-black); cursor:pointer;
}
.elim-mode-btn.active{ color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(77,238,234,.4); }
.elim-mode-btn:disabled{ opacity:.4; cursor:not-allowed; }
.stepper{ display:inline-flex; align-items:center; gap:8px; }
.stepper button{
  width:32px; height:32px; font-family:var(--font-pixel); font-size:14px;
  background:var(--navy-700); border:2px solid var(--line-black); color:var(--ink); cursor:pointer;
}
.stepper button:disabled{ opacity:.4; cursor:not-allowed; }
.stepper .val{
  min-width:42px; text-align:center; font-size:22px; font-family:var(--font-mono); color:var(--ink);
  background:var(--navy-950); border:2px solid var(--line-black); padding:2px 6px;
}
.elim-fixed-row, .elim-random-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.elim-locked-note{
  font-family:var(--font-mono); font-size:16px; color:var(--ink-dim);
  background:var(--navy-950); border:2px dashed var(--navy-600); padding:10px 14px; display:inline-block;
}

/* toggles grid */
.toggles-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:14px;
}
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* chaos pool panel */
.chaos-pool{
  margin-top:16px; padding-top:16px; border-top:2px dashed var(--navy-600);
}
.chaos-pool.hidden{ display:none; }
.freq-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.freq-btn{
  font-family:var(--font-pixel); font-size:9px; padding:9px 12px;
  background:var(--navy-950); color:var(--ink-dim); border:2px solid var(--line-black); cursor:pointer;
}
.freq-btn.active{ color:var(--magenta); border-color:var(--magenta); box-shadow:0 0 8px rgba(255,55,214,.4); }

.section-title.locked-title{ color:var(--ink-faint); }

.start-row{ margin-top:10px; margin-bottom:40px; }
.start-btn{ font-size:16px; padding:18px 46px; }

/* resume banner */
.resume-banner{
  width:100%; max-width:920px; margin:0 auto 20px; padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-color:var(--cyan);
}
.resume-banner.locked{ border-color:var(--gold); }
.resume-banner p{ margin:0; font-size:16px; line-height:1.4; color:var(--ink-dim); }
.resume-banner .btns{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   MODALS (upgrade / confirm)
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(4,5,10,.78);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.hidden{ display:none; }
#confirm-modal{ z-index:2100; } /* always renders above other modals it may be opened from */
.modal-box{
  max-width:440px; width:100%; padding:22px;
}
.modal-box h3{
  font-family:var(--font-pixel); font-size:14px; margin:0 0 14px; color:var(--gold);
  letter-spacing:.5px;
}
.modal-box.confirm h3{ color:var(--red); }
.modal-box p{ font-size:17px; line-height:1.5; color:var(--ink-dim); margin:0 0 18px; }
.modal-box ul{ margin:0 0 18px; padding-left:22px; color:var(--ink-dim); font-size:16px; line-height:1.6; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ============================================================
   STAGE SCREEN
   ============================================================ */
#screen-stage{
  position:relative;
  background:#000;
}
.stage-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:opacity .6s ease;
}
.stage-overlay-dark{
  position:absolute; inset:0;
  background:rgba(4,6,14,.38);
}
.stage-viewport{
  position:relative; z-index:1;
  width:100%; height:100%;
  display:flex; flex-direction:column;
}

/* HUD */
.hud{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  gap:10px;
  z-index:20;
  position:relative;
}
.hud-left, .hud-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hud-chip{
  font-family:var(--font-pixel); font-size:10px; padding:9px 12px;
  color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.hud-chip .n{ color:var(--cyan); }
.hud-chip .n.danger{ color:var(--red); }
.hud-icon-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer;
  background:var(--navy-800); border:3px solid var(--line-black); color:var(--ink);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.08), 0 3px 0 var(--line-black);
}
.hud-icon-btn:hover{ background:var(--navy-700); }
.hud-icon-btn:focus-visible{ outline:3px solid var(--cyan); }

/* floor / participants */
.floor-wrap{
  flex:1; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  padding:10px 10px 86px;
}
.floor{
  width:100%; height:100%;
  position:relative;
  display:flex; flex-direction:column-reverse;
  justify-content:flex-start;
  align-items:center;
  gap:2%;
  overflow:hidden;
}
.floor-row{
  display:flex; justify-content:center; align-items:flex-end;
  gap:10px; flex-wrap:wrap; row-gap:6px; width:100%;
}
.participant{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  transition:opacity .25s ease;
}
.participant.removed{ opacity:0; pointer-events:none; }
.participant .sprite-box{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
}
.participant .sprite-box img{
  display:block;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.5));
}
.participant.idle-step img{ animation:idle-step 2.6s steps(1) infinite; }
@keyframes idle-step{
  0%{ transform:translateY(0); }
  10%{ transform:translateY(-2px); }
  20%{ transform:translateY(0); }
  100%{ transform:translateY(0); }
}

/* ---- panic mode: characters break formation and run during the blackout ---- */
.participant.panicking{
  margin:0 !important;
  z-index:6;
  transition: left .15s steps(5), top .15s steps(5);
}
.participant.panicking .sprite-box{
  transition:none;
}
.participant.panicking.face-left .sprite-box{ transform:scaleX(-1); }
.participant.panicking .sprite-box img{ animation:panic-bounce .3s steps(1) infinite; }
@keyframes panic-bounce{
  0%{ transform:translateY(0); }
  25%{ transform:translateY(-5px); }
  50%{ transform:translateY(0); }
  75%{ transform:translateY(-3px); }
  100%{ transform:translateY(0); }
}
.participant.panicking.stumbling .sprite-box img{ animation:panic-stumble .5s steps(3) 1 !important; }
@keyframes panic-stumble{
  0%{ transform:translate(0,0) rotate(0deg); }
  33%{ transform:translate(-3px,2px) rotate(-6deg); }
  66%{ transform:translate(3px,1px) rotate(5deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}
.participant.panicking.shaking .sprite-box{ animation:panic-shake .12s steps(2) infinite !important; }
@keyframes panic-shake{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(2px,-1px); }
  100%{ transform:translate(-2px,1px); }
}
.participant.panicking.hiding{ opacity:.4; }
.participant.panicking .nameplate{ opacity:.85; }
.participant .run-dust{
  position:absolute; bottom:-4px; left:50%; transform:translate(-50%,0);
  width:60%; opacity:0; pointer-events:none;
}
.participant.dust-puff .run-dust{ opacity:.85; animation:dust-puff-fade .4s steps(3) 1; }
@keyframes dust-puff-fade{
  0%{ opacity:0; transform:translate(-50%,0) scale(.6); }
  30%{ opacity:.85; transform:translate(-50%,0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,2px) scale(1.3); }
}
.participant .nameplate{
  margin-top:4px;
  font-family:var(--font-pixel);
  font-size:9px;
  color:var(--ink);
  background:var(--navy-950);
  border:2px solid var(--line-black);
  padding:3px 6px;
  max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 2px 0 var(--line-black);
}
.participant .smoke-mark{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:70%; opacity:0; pointer-events:none;
}
.participant.just-eliminated .smoke-mark{
  opacity:.9; animation:smoke-fade 2.4s ease-out forwards;
}
@keyframes smoke-fade{
  0%{ opacity:0; transform:translate(-50%,4px) scale(.7); }
  15%{ opacity:.95; transform:translate(-50%,0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-14px) scale(1.15); }
}
.participant.glitching img{ animation:glitch-shake .12s steps(2) infinite; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.5)) hue-rotate(0deg); }
@keyframes glitch-shake{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(2px,-1px); }
  100%{ transform:translate(-2px,1px); }
}
.participant .replace-vfx{
  position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:150%; opacity:0; pointer-events:none;
}
.participant.glitching .replace-vfx{ opacity:1; animation:glitch-pulse .9s steps(1) infinite; }
@keyframes glitch-pulse{
  0%,100%{ opacity:.5; } 50%{ opacity:1; }
}

/* collapsible history panel */
.history-panel{
  position:absolute; left:10px; bottom:10px; z-index:25;
  width:230px; max-width:44vw;
}
.history-toggle{
  font-family:var(--font-pixel); font-size:9px; cursor:pointer;
  padding:9px 10px; display:flex; justify-content:space-between; align-items:center;
  color:var(--ink);
}
.history-body{
  max-height:220px; overflow-y:auto; padding:10px; font-size:14px;
  border-top:2px solid var(--line-black);
}
.history-panel.collapsed .history-body{ display:none; }
.history-group h4{
  font-family:var(--font-pixel); font-size:8px; margin:6px 0 6px; letter-spacing:.5px;
}
.history-group.eliminated h4{ color:var(--red); }
.history-group.replaced h4{ color:var(--magenta); }
.history-group ul{ margin:0 0 8px; padding-left:16px; color:var(--ink-dim); }
.history-empty{ color:var(--ink-faint); font-style:normal; }

/* ============ overlay layers: countdown / blackout / reveal / winner ============ */
.stage-overlay{
  position:absolute; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.stage-overlay.interactive{ pointer-events:auto; }

.blackout-veil{
  position:absolute; inset:0;
  background:#000;
  opacity:0;
  z-index:30;
  pointer-events:none;
}

.countdown-num{
  font-family:var(--font-pixel);
  font-size:min(28vw,220px);
  color:var(--ink);
  text-shadow:6px 6px 0 var(--line-black), 0 0 40px rgba(77,238,234,.5);
  opacity:0;
}
.countdown-num.show{ animation:countdown-pop .78s steps(6) 1; }
@keyframes countdown-pop{
  0%{ opacity:0; transform:scale(1.6); }
  15%{ opacity:1; transform:scale(1); }
  75%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.92); }
}
.lights-out-text{
  font-family:var(--font-pixel); font-size:min(9vw,52px); color:var(--red);
  text-shadow:4px 4px 0 var(--line-black), 0 0 30px rgba(255,59,59,.7);
  opacity:0; letter-spacing:3px;
}
.lights-out-text.show{ animation:lightsout-flash .5s steps(2) 1; opacity:1; }
@keyframes lightsout-flash{
  0%{ opacity:0; } 30%{ opacity:1; } 60%{ opacity:.2; } 100%{ opacity:1; }
}

.vfx-layer{
  position:absolute; inset:0; z-index:35; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.vfx-sprite{
  position:absolute;
  opacity:0;
  image-rendering:pixelated;
}
.vfx-sprite.active{ animation-fill-mode:forwards; }

.reveal-banner{
  position:absolute; inset:0; z-index:45;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:20px;
  background:rgba(4,6,14,.55);
  opacity:0; pointer-events:none;
}
.reveal-banner.show{ opacity:1; pointer-events:auto; animation:reveal-in .35s steps(4) 1; }
@keyframes reveal-in{ 0%{ opacity:0; transform:scale(.9);} 100%{opacity:1; transform:scale(1);} }
.reveal-title{
  font-family:var(--font-pixel); font-size:clamp(16px,4vw,28px); color:var(--red);
  text-shadow:4px 4px 0 var(--line-black);
}
.reveal-names{
  font-family:var(--font-pixel); font-size:clamp(12px,2.6vw,18px); color:var(--ink);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:800px;
}
.reveal-names span{ background:var(--navy-900); border:2px solid var(--red); padding:6px 10px; }
.reveal-continue{ margin-top:6px; }

.chaos-warning{
  position:absolute; inset:0; z-index:46;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center;
  background:rgba(20,4,26,.65);
  opacity:0; pointer-events:none;
}
.chaos-warning.show{ opacity:1; pointer-events:auto; }
.chaos-warning-text{
  font-family:var(--font-pixel); font-size:clamp(14px,3.4vw,26px); color:var(--magenta);
  text-shadow:0 0 20px rgba(255,55,214,.8), 3px 3px 0 var(--line-black);
  animation:chaos-pulse 1s steps(3) infinite;
}
@keyframes chaos-pulse{ 0%,100%{opacity:1;} 50%{opacity:.55;} }

/* winner */
.winner-overlay{
  position:absolute; inset:0; z-index:50;
  background:rgba(2,3,8,.86);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:20px;
  opacity:0; pointer-events:none;
}
.winner-overlay.show{ opacity:1; pointer-events:auto; }
.winner-spotlight{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  width:70vmin; height:70vmin;
  background:radial-gradient(circle, rgba(255,210,63,.28) 0%, rgba(255,210,63,0) 65%);
  pointer-events:none;
}
.winner-sprite-wrap{ position:relative; z-index:2; }
.winner-sprite-wrap img{ width:min(38vw,220px); filter:drop-shadow(0 10px 0 rgba(0,0,0,.5)); }
.winner-title{
  position:relative; z-index:2;
  font-family:var(--font-pixel); font-size:clamp(20px,5vw,40px); color:var(--gold);
  text-shadow:4px 4px 0 var(--line-black), 0 0 30px rgba(255,210,63,.7);
  letter-spacing:2px;
}
.winner-name{
  position:relative; z-index:2;
  font-family:var(--font-pixel); font-size:clamp(14px,3.2vw,22px); color:var(--ink);
}
.winner-stats{
  position:relative; z-index:2;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  font-size:16px; color:var(--ink-dim);
}
.winner-stats .stat{
  background:var(--navy-900); border:2px solid var(--line-black); padding:8px 12px;
}
.winner-actions{ position:relative; z-index:2; display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.confetti-piece{
  position:absolute; top:-5%; width:14px; height:14px; opacity:0;
  image-rendering:pixelated;
}

/* pause modal content re-uses .modal-box */
.settings-mini-grid{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }

/* screen shake */
.shake-active{ animation:stage-shake .09s steps(2) infinite; }
@keyframes stage-shake{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-6px,3px); }
  50%{ transform:translate(5px,-4px); }
  75%{ transform:translate(-4px,-2px); }
  100%{ transform:translate(3px,4px); }
}
.shake-intense{ animation:stage-shake-intense .06s steps(2) infinite; }
@keyframes stage-shake-intense{
  0%{ transform:translate(0,0); }
  20%{ transform:translate(-11px,7px); }
  40%{ transform:translate(10px,-8px); }
  60%{ transform:translate(-9px,-6px); }
  80%{ transform:translate(8px,6px); }
  100%{ transform:translate(-6px,4px); }
}
.flicker-active{ animation:room-flicker .18s steps(1) 2; }
@keyframes room-flicker{
  0%{ filter:brightness(1); } 25%{ filter:brightness(.1); } 50%{ filter:brightness(1); } 75%{ filter:brightness(.15); } 100%{ filter:brightness(1); }
}
.pale-flash-overlay{
  position:absolute; inset:0; z-index:34; pointer-events:none;
  background:rgba(180,220,255,0);
}
.pale-flash-overlay.on{ background:rgba(180,220,255,.28); }

/* blackout suspense commentary */
.blackout-commentary{
  position:absolute; left:50%; top:60%; transform:translate(-50%,-50%);
  z-index:37; pointer-events:none;
  font-family:var(--font-pixel);
  font-size:clamp(13px,2.6vw,22px);
  color:#e8ecff;
  text-shadow:3px 3px 0 var(--line-black), 0 0 22px rgba(255,55,214,.35);
  letter-spacing:1px; text-align:center; max-width:86vw;
  opacity:0; white-space:pre-wrap; line-height:1.5;
}
.blackout-commentary.show{ opacity:1; }
.blackout-commentary.show::after{
  content:'▌'; display:inline-block; margin-left:4px; color:var(--cyan);
  animation:caret-blink .8s steps(1) infinite;
}
@keyframes caret-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

/* reduced motion overrides */
.reduced-motion .idle-step img{ animation:none !important; }
.reduced-motion .shake-active{ animation:none !important; }
.reduced-motion .shake-intense{ animation:none !important; }
.reduced-motion .countdown-num.show{ animation:none !important; opacity:1; }
.reduced-motion .lights-out-text.show{ animation:none !important; opacity:1; }
.reduced-motion .flicker-active{ animation:none !important; }
.reduced-motion .title-block .game-title{ animation:none !important; }
.reduced-motion .chaos-warning-text{ animation:none !important; }
.reduced-motion .panicking{ transition:none !important; }
.reduced-motion .panicking .sprite-box img{ animation:none !important; }
.reduced-motion .panicking.stumbling .sprite-box img{ animation:none !important; }
.reduced-motion .panicking.shaking .sprite-box{ animation:none !important; }
.reduced-motion .blackout-commentary.show::after{ animation:none !important; }

/* visually hidden util */
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* responsive */
@media (max-width:640px){
  .setup-wrap{ padding:22px 12px 12px; }
  .setup-section{ padding:14px; }
  .names-row{ flex-direction:column; }
  .hud-chip{ font-size:8px; padding:7px 8px; }
  .game-title{ font-size:clamp(22px,8vw,40px); }
}