/* ===========================================================================
   The `hidden` attribute is only `display: none` from the user-agent
   stylesheet, so ANY author rule that sets `display` silently cancels it.
   Seven elements in this file did exactly that — the shuffle alert, the
   Magnum klaxon, the spectator notice and the tutorial overlay could all
   render on top of the game (or the home screen) while marked hidden.
   This one rule makes `hidden` mean hidden, everywhere, permanently.
   =========================================================================== */
[hidden] { display: none !important; }

/* ==========================================================================
   TRAPDOOR — CSS Styling & Complete Visual Theme
   ========================================================================== */

:root {
  --bg-0: #06050b;
  --bg-1: #0e0a18;
  --bg-2: #161224;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.28);
  --ink: #f7f5ff;
  --ink-dim: #b2a8d4;
  --ink-dimmer: #786e9e;
  --accent: #ff384c;
  --accent-orange: #ff7324;
  --accent-yellow: #ffb833;
  --safe-green: #48e59b;
  --purple-glow: #9366ff;
  --radius: 18px;
  --font-retro: "Bungee", "Creepster", cursive, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(147, 102, 255, 0.18), transparent 65%),
    radial-gradient(1000px 700px at 80% 10%, rgba(255, 56, 76, 0.14), transparent 60%),
    radial-gradient(1400px 900px at 50% 110%, rgba(255, 115, 36, 0.08), transparent 70%),
    var(--bg-0);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.screen {
  display: none;
  flex: 1;
  flex-direction: column;
}
.screen[data-active="true"] {
  display: flex;
}
.scene-screen[data-active="true"] {
  display: block;
  position: relative;
}

/* ---------- global floating controls ---------- */
.global-bar {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 50;
  display: flex;
  gap: 10px;
}
.sound-toggle-btn {
  background: rgba(22, 18, 36, 0.85);
  border: 2px solid var(--line-strong);
  color: var(--ink);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  transition: transform 0.12s ease, border-color 0.15s;
}
.sound-toggle-btn:hover {
  border-color: var(--accent-yellow);
  transform: scale(1.08);
}
.sound-toggle-btn:active {
  transform: scale(0.94);
}

/* ---------- decorative webs ---------- */
.web-corner {
  position: fixed;
  width: 280px;
  height: 280px;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.9) 0deg 1.2deg, transparent 1.2deg 30deg),
    radial-gradient(circle, transparent 0 22px, rgba(255,255,255,0.6) 22.5px 23px, transparent 23.5px 40px,
      rgba(255,255,255,0.55) 40.5px 41px, transparent 41.5px 60px, rgba(255,255,255,0.5) 60.5px 61px, transparent 61.5px 85px);
  z-index: 0;
}
.web-corner--tl { top: -75px; left: -75px; }
.web-corner--tr { top: -75px; right: -75px; transform: scaleX(-1); }

/* ---------- HOME SCREEN ---------- */
.home-wrap {
  margin: auto;
  width: min(480px, 92vw);
  padding: 40px 0 60px;
  text-align: center;
  z-index: 1;
}
.logo-3d-box {
  position: relative;
  display: inline-block;
  margin: 0 auto 12px;
}
.logo-3d {
  font-family: "Bungee", cursive, sans-serif;
  font-size: clamp(3.0rem, 11vw, 4.6rem);
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}
.logo-trap {
  color: #fff6e5;
  text-shadow:
    0 2px 0 #d9cbaf,
    0 4px 0 #b3a286,
    0 6px 0 #73644d,
    0 8px 0 #3b3020,
    0 12px 24px rgba(0, 0, 0, 0.9);
  transform: rotate(-3deg);
}
.logo-door {
  color: #ff3348;
  text-shadow:
    0 2px 0 #d4172c,
    0 4px 0 #9c0b1b,
    0 6px 0 #61030e,
    0 8px 0 #330006,
    0 12px 24px rgba(255, 51, 72, 0.5);
  transform: rotate(2deg);
}
.logo-spider-dangle {
  position: absolute;
  right: -24px;
  top: -30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: spider-sway 4s ease-in-out infinite;
  transform-origin: top center;
}
.spider-thread {
  width: 2px;
  height: 38px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
.spider-body {
  font-size: 1.8rem;
  filter: drop-shadow(0 4px 10px rgba(255, 56, 76, 0.7));
}
@keyframes spider-sway {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
.tagline {
  color: var(--ink-dim);
  font-size: 1.05rem;
  margin: 0 0 30px;
  font-weight: 500;
}

.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.field { display: block; text-align: left; margin-bottom: 18px; }
.field span {
  display: block;
  font-size: 0.84rem;
  color: var(--ink-dimmer);
  margin-bottom: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
input:focus {
  border-color: var(--purple-glow);
  background: rgba(147, 102, 255, 0.1);
}
input::placeholder { color: var(--ink-dimmer); font-weight: 500; }

.btn {
  border: none;
  border-radius: 12px;
  padding: 14px 22px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-orange));
  color: #120306;
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: 0 10px 30px rgba(255, 56, 76, 0.4);
}
.btn-primary:hover {
  box-shadow: 0 12px 36px rgba(255, 56, 76, 0.55);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border: 2px solid var(--line);
}
.btn-big { padding: 16px 24px; font-size: 1.1rem; margin-top: 20px; }

.home-actions { display: flex; flex-direction: column; gap: 4px; }
.divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-dimmer); font-size: 0.8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 16px 0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.join-row { display: flex; gap: 10px; }
.join-row input { text-transform: uppercase; letter-spacing: 0.22em; text-align: center; font-weight: 900; font-size: 1.15rem; }
.join-row .btn { flex-shrink: 0; padding: 14px 24px; }

.error { color: var(--accent); font-size: 0.88rem; min-height: 1.2em; margin: 12px 0 0; font-weight: 700; }
.hint { color: var(--ink-dimmer); font-size: 0.84rem; margin-top: 24px; }

.home-links { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.link-btn {
  background: rgba(255, 255, 255, 0.06); border: 2px solid var(--line); color: var(--ink-dim);
  border-radius: 999px; padding: 9px 18px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.link-btn:hover { border-color: var(--purple-glow); color: var(--ink); }
.link-btn:active { transform: scale(0.96); }
.btn-back { width: auto; }

/* ---------- TOP BAR (Gallery, Custom) ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 6, 15, 0.7);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ==========================================================================
   LOBBY SCREEN (Matching Reference Screenshots 1 & 4)
   ========================================================================== */
#screen-lobby {
  background:
    radial-gradient(circle at 50% 50%, rgba(25, 18, 40, 0.4), rgba(4, 3, 8, 0.95) 75%),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 opacity=%220.03%22%3E%3Cfilter id=%22noise%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%22 height=%22100%22 filter=%22url(%23noise)%22/%3E%3C/svg%3E");
  position: relative;
  overflow: hidden;
}

.lobby-header-title {
  font-family: "Creepster", cursive;
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
  margin: 24px 0 0;
  letter-spacing: 0.08em;
  color: #f7ede2;
  text-shadow:
    0 0 28px rgba(255, 255, 255, 0.3),
    0 6px 0 rgba(0, 0, 0, 0.8);
  z-index: 5;
  pointer-events: none;
}

/* Spider Web Canvas & Dangling Monster Avatars */
.lobby-web-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#lobbyWebCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lobby-avatars-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Dangling Monster Sprite in Lobby */
.lobby-monster {
  position: absolute;
  pointer-events: auto;
  transform-origin: top center;
  animation: monster-sway 4.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.65));
  transition: transform 0.2s ease;
  cursor: pointer;
}
.lobby-monster:hover {
  transform: scale(1.1) rotate(4deg);
}

@keyframes monster-sway {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* Right-side Player List (matching Screenshot 1) */
.lobby-player-panel {
  position: absolute;
  top: 40%;
  right: 5vw;
  transform: translateY(-50%);
  z-index: 6;
}
.lobby-player-names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.lobby-player-names li {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lobby-player-names li.host {
  color: #f7a833;
}
.lobby-player-names li .crown-icon {
  font-size: 1.2em;
  filter: drop-shadow(0 2px 6px rgba(247, 168, 51, 0.5));
}
.lobby-player-names li.empty-slot {
  color: rgba(255, 255, 255, 0.22);
}

/* Bottom Bar Buttons (Matching Screenshot 1) */
.lobby-bottom-bar {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 40px;
  z-index: 8;
  flex-wrap: wrap;
}

.lobby-btn-group {
  display: flex;
  gap: 16px;
}

/* Retro Bold Black Box Button with Thick White Border */
.lobby-block-btn {
  background: #000000;
  border: 3.5px solid #ffffff;
  color: #ffffff;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  letter-spacing: 0.06em;
  padding: 12px 32px;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.7);
  transition: transform 0.1s ease, background 0.15s, border-color 0.15s;
}
.lobby-block-btn:hover {
  background: #181818;
  border-color: #ffd24d;
  color: #ffd24d;
}
.lobby-block-btn:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.7);
}
.lobby-block-btn.start {
  background: #000000;
}
.lobby-block-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #666666;
  color: #666666;
}

/* Bottom-Right Room Code Badge (Matching Screenshot 1) */
.lobby-room-badge {
  position: absolute;
  right: 40px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.lrb-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}
.lrb-box {
  display: flex;
  align-items: center;
  background: #000000;
  border: 2.5px solid #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.6);
}
.lrb-copy-btn, .lrb-toggle-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.lrb-copy-btn:hover, .lrb-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.lrb-code {
  font-family: "Manrope", system-ui, monospace;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  color: #ffffff;
  padding: 4px 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-right: 2px solid rgba(255, 255, 255, 0.3);
}

/* Scare Picker Drawer */
.lobby-scare-drawer {
  /* Was `position: absolute; top: 18px; left: 24px`, left over from when there
     was only ONE drawer here. With two, both pinned to the same coordinates
     inside .lobby-drawers-row, so they sat exactly on top of each other and
     "Change Monster Avatar" could never be clicked at all. Static lets the
     row's own column layout stack them properly. */
  position: relative;
  z-index: 10;
}
.lobby-scare-drawer details {
  background: rgba(14, 10, 24, 0.88);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  backdrop-filter: blur(10px);
}
.lobby-scare-drawer summary {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}
.lobby-scare-drawer .scare-grid {
  margin-top: 12px;
  max-height: 240px;
  overflow-y: auto;
  width: 280px;
}

/* ==========================================================================
   3D GAMEPLAY SCENE & 4-CORNER HUD (Matching Screenshot 2)
   ========================================================================== */
.scene-screen { flex: 1; height: 100dvh; }
#boardCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* 4 Corner Player HUDs */
.corner-hud {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  font-family: "Manrope", system-ui, sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.corner-hud.active-turn {
  animation: corner-pulse 1.8s ease-in-out infinite;
}
@keyframes corner-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 184, 51, 0.5)); }
  50% { filter: drop-shadow(0 0 24px rgba(255, 184, 51, 0.95)); }
}

.corner-top-left     { top: 22px; left: 24px; text-align: left; }
.corner-top-right    { top: 22px; right: 24px; text-align: right; }
.corner-bottom-left  { bottom: 24px; left: 24px; text-align: left; }
.corner-bottom-right { bottom: 24px; right: 24px; text-align: right; }
/* Players 5 and 6 sit on the mid-edges, clear of the four corners. */
.corner-mid-left     { top: 50%; left: 24px; transform: translateY(-50%); text-align: left; }
.corner-mid-right    { top: 50%; right: 24px; transform: translateY(-50%); text-align: right; }
/* The pulse animation uses `filter`, so it will not fight the transform. */

.corner-player-name {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #48e59b; /* default bright green/player color */
}
.corner-player-name.me { color: #ffd24d; }
.corner-player-name.out { color: rgba(255, 255, 255, 0.35); text-decoration: line-through; }

.corner-hearts-row {
  display: flex;
  gap: 4px;
}
.corner-top-right .corner-hearts-row,
.corner-mid-right .corner-hearts-row,
.corner-bottom-right .corner-hearts-row {
  justify-content: flex-end;
}
.corner-heart {
  font-size: 1.4rem;
  color: #ff3348;
  filter: drop-shadow(0 0 6px rgba(255, 51, 72, 0.6));
}
.corner-heart.lost {
  color: rgba(255, 255, 255, 0.18);
  filter: none;
}
.corner-shield {
  font-size: 1.1rem;
  margin-left: 4px;
}

/* In-Game HUD Elements */
.hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.hud-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
}
.hide-spiders-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 10, 24, 0.82);
  border: 2px solid var(--line);
  color: var(--ink-dim);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.15s, color 0.15s;
}
.hide-spiders-btn:hover { border-color: var(--purple-glow); color: var(--ink); }
.hide-spiders-btn.active {
  border-color: var(--accent-yellow);
  color: var(--accent-yellow);
  box-shadow: 0 0 16px rgba(255, 184, 51, 0.3);
}

.round-badge {
  background: rgba(14, 10, 24, 0.82);
  border: 2px solid var(--line);
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent-yellow);
  backdrop-filter: blur(8px);
}

.hud-center {
  text-align: center;
  padding: 10px 20px;
}
.hud-center h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.hud-center p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.95rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hud-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 24px;
}
.turn-banner {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 10px 24px;
  border-radius: 999px;
  background: rgba(22, 18, 36, 0.88);
  border: 2px solid var(--line);
  backdrop-filter: blur(8px);
}
.turn-banner.mine {
  background: linear-gradient(135deg, rgba(255, 56, 76, 0.4), rgba(255, 184, 51, 0.35));
  border-color: var(--accent-yellow);
  color: #ffffff;
}

.log-feed {
  width: max(200px, min(480px, calc(100vw - 260px)));
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-dim);
  max-height: 90px;
  overflow: hidden;
}
.log-feed div {
  background: rgba(22, 18, 36, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   TURN CHOICE MODAL (CUP OR PACK) — Matching Screenshot 2
   ========================================================================== */
.choice-modal-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.choice-turn-header {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
  margin: 0;
}

.choice-cards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 36px);
}

.choice-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.choice-option-card:hover {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.6));
}
.choice-option-card:active {
  transform: translateY(-2px) scale(0.98);
}
.choice-option-card.remote-hover {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 0 26px rgba(255, 209, 102, 0.65));
}

/* 3D Red Solo Cup Visual Representation */
.cup-3d-visual {
  width: 140px;
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cup-solo-render {
  width: 100px;
  height: 140px;
  background: linear-gradient(135deg, #d3202f 0%, #a0101d 50%, #68050e 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  border-radius: 4px;
  position: relative;
  box-shadow:
    inset 0 8px 12px rgba(255, 255, 255, 0.35),
    inset 0 -12px 16px rgba(0, 0, 0, 0.5),
    0 16px 30px rgba(0, 0, 0, 0.7);
}
.cup-solo-render::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  height: 25%;
  border-top: 3px solid rgba(255, 255, 255, 0.25);
  border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}

/* Action Pack Foil Graphic (Matching Screenshot 2) */
.action-pack-visual {
  width: 140px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-pack-foil {
  width: 120px;
  height: 155px;
  background: linear-gradient(165deg, #1f42aa, #132463 80%);
  border: 3px solid #3c6bff;
  border-radius: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 24px rgba(60, 107, 255, 0.45),
    inset 0 0 16px rgba(255, 255, 255, 0.15),
    0 16px 30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.action-pack-foil::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  animation: foil-shimmer 3.5s infinite linear;
}
@keyframes foil-shimmer {
  0% { transform: translateY(-100%) rotate(25deg); }
  100% { transform: translateY(100%) rotate(25deg); }
}

.pack-spider-icon { font-size: 2.2rem; margin-bottom: 2px; }
.pack-title {
  font-family: "Bungee", cursive, sans-serif;
  font-size: 0.95rem;
  line-height: 1.1;
  color: #ff9d3b;
  text-shadow: 0 2px 0 #000000;
  text-align: center;
}
.pack-badge {
  font-size: 0.65rem;
  font-weight: 900;
  background: #ffffff;
  color: #000000;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
}

.choice-tag {
  margin-top: 10px;
  background: #000000;
  border: 2.5px solid #ffffff;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  padding: 4px 18px;
  border-radius: 4px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6);
}

.choice-divider-or {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.pack-odds-meter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* The meter now carries a sentence ("53% chance it's a good card") rather
     than a bare number, so the green weight moved onto the figure itself. */
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 6px;
}

/* ==========================================================================
   CARD DRAW OVERLAY (Matching Screenshot 3)
   ========================================================================== */

.action-card-face {
  width: min(320px, 85vw);
  background: #ffffff;
  border: 6px solid #ffffff;
  border-radius: 24px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(255, 56, 76, 0.35);
  overflow: hidden;
  position: relative;
  transition: transform 0.1s ease-out, box-shadow 0.15s ease-out;
  transform-style: preserve-3d;
  cursor: grab;
}

.card-inner-frame {
  background: linear-gradient(180deg, #1b1626, #0e0a16);
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 16px;
}

.card-big-title {
  font-family: "Bungee", cursive, sans-serif;
  font-weight: 400;
  font-size: 2.1rem;
  margin: 0 0 12px;
  color: #ff3348;
  text-shadow:
    0 3px 0 #ffffff,
    0 4px 10px rgba(255, 51, 72, 0.5);
  letter-spacing: 0.02em;
}

.card-art-area svg {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}
.art-icon {
  font-size: 4rem;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.card-meta-ribbon {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #ffb833;
  margin-bottom: 6px;
}

.card-body-desc {
  font-size: 0.95rem;
  color: var(--ink-dim);
  line-height: 1.35;
  margin: 0;
  font-weight: 600;
}

.btn-ok-card:hover {
  border-color: var(--accent-yellow);
  color: var(--accent-yellow);
}
.btn-ok-card:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.7);
}

/* ---------- OVERLAYS ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 3, 8, 0.8);
  backdrop-filter: blur(6px);
}
.overlay.show { display: flex; }

/* When a spectator is watching another player's turn, they see the exact
   same overlay — just with interaction disabled and a "watching" cue. */
.overlay.spectating { cursor: default; }
.overlay.spectating .choice-option-card,
.overlay.spectating .btn-ok-card {
  pointer-events: none;
  filter: saturate(0.75);
}
.spectating-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-dimmer);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  margin-top: 10px;
}

/* Live mirrored cursor showing exactly where the active player is pointing */
.remote-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
  transform: translate(-4px, -4px);
  transition: left 0.06s linear, top 0.06s linear;
}
.remote-cursor.show { display: flex; }
.remote-cursor-dot {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 4px;
  background: var(--remote-cursor-color, #ffd166);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 0 18px 4px var(--remote-cursor-color, #ffd166);
  transform: rotate(-45deg);
}
.remote-cursor-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0b0912;
  background: var(--remote-cursor-color, #ffd166);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

.overlay-card {
  width: min(440px, 92vw);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--line);
  border-radius: 22px;
  padding: 34px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.overlay-card h2 { margin: 0 0 10px; font-size: 1.6rem; }
.overlay-card p { color: var(--ink-dim); margin: 0 0 8px; font-size: 1.05rem; }
.overlay-sub { font-size: 0.85rem; color: var(--ink-dimmer); margin-top: 16px; }

/* ---------- TARGET PICKER (Scapegoat / Fate Swap) ---------- */
.target-picker-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.target-pick-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1.05rem;
}
.overlay.spectating .target-pick-btn { pointer-events: none; }

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(20px);
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- GALLERY & CUSTOM ---------- */
.gallery-wrap { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; }
.gallery-heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dimmer); margin: 28px 0 14px; font-weight: 800; }
.gallery-heading.safe { color: var(--safe-green); }
.gallery-heading.risky { color: var(--accent); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.mini-card {
  background: var(--bg-2);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mini-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-yellow);
}
.mini-card-illustration {
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
}
.mini-card-illustration svg {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.mini-card .mini-label {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  margin: 6px 0 3px;
  color: #ffffff;
}
.mini-card .mini-desc {
  font-size: 0.78rem;
  color: var(--ink-dim);
  line-height: 1.35;
}

.scare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
.scare-chip {
  background: var(--bg-2); border: 2px solid var(--line); border-radius: 12px;
  padding: 10px 6px; text-align: center; cursor: pointer; font-family: inherit;
  transition: border-color 0.12s;
}
.scare-chip .scare-icon { font-size: 1.6rem; display: block; margin-bottom: 4px; }
.scare-chip .scare-name { font-size: 0.68rem; color: var(--ink-dim); font-weight: 700; }
.scare-chip.selected { border-color: var(--accent-yellow); background: rgba(255, 184, 51, 0.1); }

.custom-wrap { max-width: 560px; margin: 0 auto; padding: 24px 20px 60px; }
.stepper { display: flex; align-items: center; gap: 18px; }
.step-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line);
  background: var(--bg-2); color: var(--ink); font-size: 1.3rem; font-weight: 900; cursor: pointer;
}
.step-value { font-size: 1.4rem; font-weight: 900; min-width: 28px; text-align: center; color: var(--accent-yellow); }
.mini-link { background: none; border: none; color: var(--purple-glow); font-size: 0.78rem; font-weight: 800; cursor: pointer; float: right; }
.custom-card-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 320px; overflow-y: auto; }
.custom-card-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
}
.custom-card-row .cc-icon { font-size: 1.2rem; }
.custom-card-row .cc-label { flex: 1; font-weight: 700; font-size: 0.9rem; }
.custom-card-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }

@media (max-width: 600px) {
  .lobby-bottom-bar { padding: 0 16px; bottom: 20px; }
  .lobby-room-badge { position: static; margin-top: 10px; }
  .corner-top-left, .corner-bottom-left { left: 14px; }
  .corner-top-right, .corner-bottom-right { right: 14px; }
  .corner-mid-left { left: 14px; }
  .corner-mid-right { right: 14px; }
  .choice-cards-row { flex-direction: column; }
}

/* ---------- Home Card Box & Peeking Mascot ---------- */
.home-card-box {
  position: relative;
  overflow: visible;
  margin-top: 25px;
}
.menu-mascot-peek {
  position: absolute;
  top: -24px;
  left: 28px;
  width: 54px;
  height: 26px;
  background: #3898ec;
  border: 2px solid #110d18;
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.18, 1.4, 0.4, 1);
  z-index: 2;
}
.menu-mascot-peek:hover {
  transform: translateY(-8px) scale(1.1);
}
.peek-eyes {
  display: flex;
  gap: 8px;
}
.peek-eye {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border: 1.5px solid #110d18;
  border-radius: 50%;
  position: relative;
  animation: peek-blink 4s infinite;
}
.peek-pupil {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #110d18;
  border-radius: 50%;
  top: 2px;
  left: 2px;
}
@keyframes peek-blink {
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0.1); }
}

/* Avatar Select Row */
.avatar-select-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.avatar-opt {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 8px 4px;
  font-size: 1.35rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.avatar-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.avatar-opt:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.avatar-opt.active {
  background: rgba(147, 102, 255, 0.18);
  border-color: var(--accent-yellow);
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.4);
  transform: scale(1.06);
}

/* Input With Action Button */
.input-with-action {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dice-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--line);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.dice-btn:hover {
  background: rgba(255, 209, 102, 0.18);
  border-color: var(--accent-yellow);
  transform: rotate(25deg) scale(1.1);
}
.dice-btn:active {
  transform: rotate(180deg) scale(0.9);
}

/* 3D Arcade Buttons */
.btn-arcade {
  position: relative;
  border-bottom: 5px solid rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.08s ease, filter 0.12s, box-shadow 0.12s;
}
.btn-arcade:active {
  transform: translateY(3px);
  border-bottom-width: 2px !important;
}

/* How To Play Overlay */
.how-to-card {
  max-width: 480px;
  text-align: left;
}
.how-to-header {
  font-family: "Bungee", cursive, sans-serif;
  color: var(--accent-yellow);
  font-size: 1.6rem;
  margin: 0 0 16px;
  text-align: center;
  letter-spacing: 0.03em;
}
.how-to-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.how-to-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.step-badge {
  background: var(--accent);
  color: #120306;
  font-weight: 900;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-content h4 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 800;
  color: #ffffff;
}
.step-content p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
  line-height: 1.4;
}

/* Gallery TCG Card Styling */
.gallery-tcg-card {
  background: linear-gradient(165deg, #251c32 0%, #120d1c 50%, #0a0610 100%);
  border: 4px solid #d4ccbf;
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  text-align: left;
}
.gallery-tcg-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(147, 102, 255, 0.35);
  border-color: #ffd166;
}
.gallery-tcg-card.pool-risky {
  border-color: #e63946;
}
.gallery-tcg-card.pool-risky:hover {
  border-color: #ff4d5e;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 56, 76, 0.45);
}
.gtcg-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px;
  border-radius: 8px;
}
/* Merged from 2 separate `.gtcg-icon` blocks (was also at line 1443). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.gtcg-icon {
  padding-top: 1px;
  font-size: 1rem;
}
.gtcg-title {
  flex: 1;
  min-width: 0;
  font-family: "Bungee", cursive, sans-serif;
  font-size: 0.8rem;
  line-height: 1.15;
  color: #fff;
  white-space: normal;
  word-break: break-word;
}
.gtcg-badge {
  font-size: 0.62rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  background: #27ae60;
  color: #fff;
}
.pool-risky .gtcg-badge {
  background: #c0392b;
}
.gtcg-art {
  height: 100px;
  background: radial-gradient(circle, #30203a, #0e0817);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gtcg-art svg {
  max-width: 90%;
  max-height: 90%;
}
.gtcg-body {
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.gtcg-type {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffd166;
  letter-spacing: 0.05em;
}
.gtcg-desc {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f1edfa;
  margin: 0;
  line-height: 1.25;
}
.gtcg-flavor {
  font-size: 0.7rem;
  font-style: italic;
  color: #8f80a8;
  margin: 0;
  line-height: 1.2;
}
.gtcg-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 800;
  color: #7b6994;
  padding: 0 2px;
}
.gtcg-rarity {
  color: #ffd166;
}

/* Jumpscare Horror Flash Overlay — Perfect Terror Impact */
.jumpscare-flash-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.04s ease-out;
  --jumpscare-glow: #ff0033;
}
.jumpscare-flash-overlay.epic {
  --jumpscare-glow: #ffd166;
}
.jumpscare-flash-overlay.active {
  animation: jumpscare-strobe 1.05s cubic-bezier(0.05, 0.95, 0.15, 1) forwards;
}
/* The shake used to move the HUD only, so the table — the thing you are
   actually staring at — stayed perfectly still while the interface rattled
   around it. The canvas sits BEFORE the overlay in the document, and CSS has
   no previous-sibling combinator, so `~ #boardCanvas` silently matched
   nothing. Select from the shared parent instead. */
.jumpscare-flash-overlay.active ~ .hud,
#screen-scene:has(.jumpscare-flash-overlay.active) #boardCanvas {
  animation: jumpscare-screen-shake 0.42s cubic-bezier(.36,.07,.19,.97) both;
}
@media (prefers-reduced-motion: reduce) {
  .jumpscare-flash-overlay.active ~ .hud,
  #screen-scene:has(.jumpscare-flash-overlay.active) #boardCanvas { animation: none; }
  .jumpscare-flash-overlay.active { animation-duration: 0.35s; }
}
@keyframes jumpscare-screen-shake {
  /* Biggest displacement on the FIRST frames, decaying fast — that is what
     reads as an impact rather than a wobble. */
  0%   { transform: translate(0, 0) scale(1.035); }
  6%   { transform: translate(-18px, 11px) rotate(-1.8deg) scale(1.03); }
  14%  { transform: translate(16px, -14px) rotate(1.7deg) scale(1.025); }
  23%  { transform: translate(-14px, 8px) rotate(-1.4deg) scale(1.02); }
  33%  { transform: translate(12px, -9px) rotate(1.1deg) scale(1.015); }
  45%  { transform: translate(-8px, 7px) rotate(-0.7deg) scale(1.01); }
  58%  { transform: translate(6px, -4px) rotate(0.5deg) scale(1.006); }
  72%  { transform: translate(-4px, 3px) scale(1.003); }
  86%  { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes jumpscare-strobe {
  /* The hit lands on FRAME ONE. The old curve spent its first 8% ramping up,
     which is ~85ms of warning — long enough for the eye to track it, which is
     exactly what a jump scare must not give you. Full opacity is now the
     opening frame and the whole thing is over in half the time. */
  0%   { opacity: 1; transform: scale(1.6) rotate(5deg); filter: invert(100%) contrast(320%) brightness(240%); }
  4%   { opacity: 1; transform: scale(0.94) rotate(-6deg); filter: invert(0%) contrast(260%) saturate(380%) drop-shadow(0 0 60px var(--jumpscare-glow)); }
  9%   { opacity: 1; transform: scale(1.12) rotate(4deg); filter: contrast(240%) brightness(180%); }
  15%  { opacity: 1; transform: scale(0.97) rotate(-3deg); filter: contrast(200%) brightness(140%); }
  24%  { opacity: 0.92; transform: scale(1.04) rotate(2deg); }
  40%  { opacity: 0.7; transform: scale(0.99) rotate(-1deg); }
  62%  { opacity: 0.38; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1); filter: none; }
}

.jumpscare-blood-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 25%, rgba(255, 0, 30, 0.45) 65%, rgba(120, 0, 15, 0.9) 100%);
  mix-blend-mode: hard-light;
}
.jumpscare-flash-overlay.epic .jumpscare-blood-vignette {
  background: radial-gradient(circle, transparent 20%, rgba(255, 209, 102, 0.5) 65%, rgba(120, 70, 0, 0.9) 100%);
}

/* Chromatic-aberration style RGB split for a violent horror-movie flash */
.jumpscare-rgb-split {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, rgba(255,0,60,0.5) 70%);
  mix-blend-mode: screen;
  opacity: 0;
}
.jumpscare-flash-overlay.active .rgb-r { animation: jumpscare-rgb-r 1.05s ease-out forwards; }
.jumpscare-flash-overlay.active .rgb-b { animation: jumpscare-rgb-b 1.05s ease-out forwards; background: radial-gradient(circle, transparent 30%, rgba(0,140,255,0.4) 70%); }
@keyframes jumpscare-rgb-r {
  0% { opacity: 0; transform: translateX(0); }
  5% { opacity: 1; transform: translateX(-26px); }
  20% { opacity: 0.6; transform: translateX(-4px); }
  40% { opacity: 0.2; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes jumpscare-rgb-b {
  0% { opacity: 0; transform: translateX(0); }
  5% { opacity: 1; transform: translateX(26px); }
  20% { opacity: 0.6; transform: translateX(4px); }
  40% { opacity: 0.2; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

.jumpscare-spider-face {
  position: relative;
  display: flex;
  gap: 12px;
  filter: drop-shadow(0 0 28px #ff0033);
}
.j-eye {
  width: 22px;
  height: 22px;
  background: #ff0033;
  border-radius: 50%;
  box-shadow: 0 0 20px #ff0055, 0 0 40px #ff0033, inset 0 0 6px #ffffff;
  animation: jumpscare-eye-throb 0.4s ease-in-out infinite alternate;
}
@keyframes jumpscare-eye-throb {
  from { transform: scale(1); }
  to { transform: scale(1.35); }
}

/* ==========================================================================
   HORROR ATMOSPHERE & VISUALS
   ========================================================================== */
.creepy-fog-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(45, 15, 60, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(70, 10, 25, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, rgba(4,3,8,0.7) 0%, rgba(10,5,18,0.4) 50%, rgba(4,3,8,0.85) 100%);
  animation: fog-creep 22s ease-in-out infinite alternate;
}
@keyframes fog-creep {
  0% { transform: scale(1) translateY(0); opacity: 0.75; }
  50% { transform: scale(1.08) translateY(-15px); opacity: 0.95; }
  100% { transform: scale(1.04) translateY(10px); opacity: 0.8; }
}

/* Lurking Spider Eyes in Dark Corners */
.creepy-corner-eyes {
  position: fixed;
  display: flex;
  gap: 8px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
.creepy-corner-eyes.tl { top: 28px; left: 32px; transform: rotate(-15deg); }
.creepy-corner-eyes.br { bottom: 28px; right: 32px; transform: rotate(15deg); }
.ce-eye {
  width: 9px;
  height: 9px;
  background: #ff1a35;
  border-radius: 50%;
  box-shadow: 0 0 10px #ff002b, 0 0 20px rgba(255, 26, 53, 0.6);
  animation: spider-eyes-blink 6s infinite;
}
.ce-eye:nth-child(2) { animation-delay: 0.1s; }
.ce-eye:nth-child(3) { animation-delay: 0.2s; width: 6px; height: 6px; }
.ce-eye:nth-child(4) { animation-delay: 0.3s; width: 6px; height: 6px; }

@keyframes spider-eyes-blink {
  0%, 94%, 100% { transform: scaleY(1); opacity: 0.85; }
  96% { transform: scaleY(0.05); opacity: 0.1; }
  98% { transform: scaleY(1); opacity: 0.95; }
}

/* Dripping Crimson Blood from Logo */
.blood-drips-container {
  position: absolute;
  bottom: -16px;
  left: 20%;
  right: 20%;
  height: 24px;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}
.drip {
  width: 5px;
  height: 18px;
  background: linear-gradient(180deg, #9c0b1b, #61030e);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.8);
  animation: blood-drip-stretch 3.5s ease-in-out infinite;
  transform-origin: top center;
}
.drip.d1 { height: 14px; animation-delay: 0s; }
.drip.d2 { height: 22px; animation-delay: 1.2s; }
.drip.d3 { height: 16px; animation-delay: 0.7s; }
.drip.d4 { height: 19px; animation-delay: 2.1s; }

@keyframes blood-drip-stretch {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.4); }
}

/* ==========================================================================
   COMPREHENSIVE RULEBOOK MODAL
   ========================================================================== */
.how-to-rulebook-card {
  width: min(580px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
  padding: 24px 20px;
  background: linear-gradient(180deg, #1f162e 0%, #120b1c 60%, #0a0610 100%);
  border: 3px solid #6b528a;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.9), 0 0 35px rgba(147, 102, 255, 0.25);
}

.rulebook-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rulebook-close-x {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.rulebook-close-x:hover {
  background: rgba(255, 56, 76, 0.4);
  border-color: #ff384c;
  transform: scale(1.1);
}

.rulebook-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.rulebook-tab {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.rulebook-tab:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.rulebook-tab.active {
  background: rgba(255, 209, 102, 0.18);
  border-color: #ffd166;
  color: #ffd166;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.3);
}

.rulebook-pane {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.rulebook-pane.active {
  display: flex;
}

.rulebook-section h3 {
  font-family: "Bungee", cursive, sans-serif;
  font-size: 1.05rem;
  color: #ffd166;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.rulebook-section p {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0;
}

.rulebook-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .rulebook-grid-2 { grid-template-columns: 1fr; }
}

.rule-box-mini {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
}
.rb-icon { font-size: 1.3rem; display: block; margin-bottom: 4px; }
.rule-box-mini h4 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: #fff;
}
.rule-box-mini p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
  line-height: 1.35;
}

.rule-callout {
  background: rgba(255, 56, 76, 0.12);
  border-left: 4px solid #ff384c;
  border-radius: 8px;
  padding: 10px 14px;
}
.rule-callout h4 {
  margin: 0 0 4px;
  color: #ff7a36;
  font-size: 0.92rem;
}
.rule-callout p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-dim);
  line-height: 1.4;
}

.powerup-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.powerup-list li {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--ink-dim);
  line-height: 1.35;
}
.powerup-list li strong { color: #fff; }

.tactics-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tactic-item {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
}
.tactic-item h4 {
  margin: 0 0 4px;
  color: #57e0a8;
  font-size: 0.92rem;
}
.tactic-item p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-dim);
  line-height: 1.35;
}

/* In-Lobby Drawers & Avatar Toolbar (Positioned cleanly at Top-Left) */
.lobby-drawers-row {
  position: absolute;
  top: 86px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 30;
  max-width: 320px;
}
.lobby-avatar-picker {
  margin-top: 10px;
  padding: 6px;
  background: rgba(0,0,0,0.4);
  border-radius: 12px;
}
.corner-avatar-icon {
  font-size: 1.15rem;
  margin-right: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* ==========================================================================
   AUTHENTIC TCG TRADING CARD SYSTEM & MODAL
   ========================================================================== */
/* Merged from 2 separate `.card-draw-wrapper` blocks (was also at line 899). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.card-draw-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 96vw;
}
/* Merged from 2 separate `.card-draw-header` blocks (was also at line 905). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.card-draw-header {
  font-family: "Bungee", cursive, sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.95);
  margin: 0;
}

.tcg-card-wrapper {
  perspective: 1000px;
  display: flex;
  justify-content: center;
}

.tcg-card {
  width: min(340px, 88vw);
  background: linear-gradient(165deg, #241a33 0%, #130c20 40%, #0a0612 100%);
  border: 7px solid #ece4d8;
  border-radius: 24px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 0 2px #3c2a52,
    0 0 35px rgba(147, 102, 255, 0.35);
  overflow: hidden;
  position: relative;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.1s ease-out, box-shadow 0.15s ease-out;
  transform-style: preserve-3d;
  cursor: grab;
  box-sizing: border-box;
}

.tcg-card.risky-card {
  border-color: #ffd166;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 0 2px #5c1824,
    0 0 45px rgba(255, 77, 94, 0.6);
}

/* ---------- RARITY PULL REVEAL ---------- */
/* A "pack pull" burst that plays once, right as the card finishes flipping
   face-up — bigger and longer the rarer the card, so a Mythic draw actually
   FEELS like the best thing that can happen at this table. The outer glow
   halo lives on .tcg-flippable-container (no overflow:hidden, so it can
   bleed past the card's own edges); the foil shimmer sweep lives on the
   card itself, clipped neatly by its rounded corners. Neither touches the
   card's own box-shadow, so it never fights with .risky-card's border glow. */
.tcg-flippable-container[data-rarity="RARE"]      { --pull-glow-soft: rgba(77, 210, 255, 0.55); --pull-duration: 0.9s; --pull-scale: 1.05; }
.tcg-flippable-container[data-rarity="EPIC"]      { --pull-glow-soft: rgba(182, 115, 255, 0.6);  --pull-duration: 1.1s; --pull-scale: 1.08; }
.tcg-flippable-container[data-rarity="LEGENDARY"] { --pull-glow-soft: rgba(255, 209, 102, 0.65); --pull-duration: 1.3s; --pull-scale: 1.11; }
.tcg-flippable-container[data-rarity="MYTHIC"]    { --pull-glow-soft: rgba(255, 77, 141, 0.7);   --pull-duration: 1.5s; --pull-scale: 1.15; }

.tcg-flippable-container.card-pull-fx::after {
  content: "";
  position: absolute;
  inset: -14% -10%;
  border-radius: 30px;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, var(--pull-glow-soft, transparent) 0%, transparent 70%);
  animation: card-pull-glow var(--pull-duration, 1s) ease-out both;
}
.tcg-flippable-container.card-pull-fx .tcg-card {
  animation: card-pull-pop var(--pull-duration, 1s) cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tcg-flippable-container.card-pull-fx .tcg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 11;
  background: linear-gradient(115deg, transparent 30%, var(--pull-glow-soft, rgba(255,255,255,0.5)) 48%, #ffffff 50%, var(--pull-glow-soft, rgba(255,255,255,0.5)) 52%, transparent 70%);
  mix-blend-mode: screen;
  transform: translateX(-140%);
  animation: card-pull-shimmer var(--pull-duration, 1s) ease-out both;
}
@keyframes card-pull-pop {
  0%   { transform: scale(1); filter: brightness(1); }
  22%  { transform: scale(var(--pull-scale, 1.08)); filter: brightness(1.5); }
  55%  { transform: scale(1); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes card-pull-glow {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes card-pull-shimmer {
  0%   { transform: translateX(-140%); }
  60%  { transform: translateX(140%); }
  100% { transform: translateX(140%); }
}

/* Merged from 2 separate `.card-holo-glare` blocks (was also at line 930). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.card-holo-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,100,200,0.25) 35%, rgba(0,255,255,0.25) 65%, rgba(255,255,255,0.45) 100%);
  mix-blend-mode: color-dodge;
  opacity: 0.35;
  border-radius: 16px;
  z-index: 10;
}

/* 1. Header Bar */
.tcg-header {
  background: linear-gradient(180deg, #281d39, #150d22);
  border: 2px solid #5d467a;
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.tcg-cost-jewel {
  font-size: 1.35rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.tcg-title-wrap {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.tcg-card-title {
  font-family: "Bungee", cursive, sans-serif;
  font-size: 1.12rem;
  color: #fff6e5;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
  line-height: 1.1;
}
.tcg-card-type {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a48cc7;
}
.tcg-pool-badge {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: #27ae60;
  color: #ffffff;
  border: 1px solid #2ecc71;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.tcg-card.risky-card .tcg-pool-badge {
  background: #e63946;
  border-color: #ff4d5e;
}

/* 2. Art Frame Window */
.tcg-art-frame {
  position: relative;
  background: radial-gradient(circle, #382440, #130b1c);
  border: 3px solid #6b528a;
  border-radius: 16px;
  padding: 6px;
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.85),
    0 2px 6px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcg-art-rivet {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.9);
  z-index: 5;
}
.tcg-art-rivet.top-left { top: 5px; left: 5px; }
.tcg-art-rivet.top-right { top: 5px; right: 5px; }
.tcg-art-rivet.bottom-left { bottom: 5px; left: 5px; }
.tcg-art-rivet.bottom-right { bottom: 5px; right: 5px; }

/* Merged from 2 separate `.card-art-area` blocks (was also at line 963). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.card-art-area {
  width: 100%;
  height: 135px;
  background: radial-gradient(circle, #382440, #181022);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.card-art-area svg {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

/* 3. Text & Ability Plate */
.tcg-text-plate {
  background: linear-gradient(180deg, #1f162c, #110b1a);
  border: 2px solid #543f6e;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.7);
}
.tcg-rule-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tcg-keyword {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffd166;
  text-transform: uppercase;
}
.tcg-rule-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: #f1edfa;
  margin: 0;
  line-height: 1.35;
}
.tcg-flavor-box {
  border-top: 1px dashed rgba(255,255,255,0.14);
  padding-top: 5px;
}
.tcg-flavor-text {
  font-size: 0.76rem;
  font-style: italic;
  color: #9c8db5;
  margin: 0;
  line-height: 1.3;
}

/* 4. Footer Collector Bar */
.tcg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.tcg-card-number {
  font-size: 0.7rem;
  font-weight: 800;
  color: #8874a6;
  letter-spacing: 0.05em;
}
.tcg-holo-seal {
  width: 15px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff69b4, #00ffff, #ffd700);
  box-shadow: 0 0 6px rgba(255,215,0,0.6);
  border: 1px solid #ffffff;
}
.tcg-rarity {
  font-size: 0.7rem;
  font-weight: 900;
  color: #ffd166;
  letter-spacing: 0.06em;
}

/* Merged from 2 separate `.btn-ok-card` blocks (was also at line 1001). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.btn-ok-card {
  background: linear-gradient(180deg, #ff384c, #c9182b);
  border: 3px solid #ffffff;
  color: #ffffff;
  font-family: "Bungee", cursive, sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 56, 76, 0.5), 0 4px 0 #8b0a18;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border-radius: 14px;
  margin-top: 6px;
}
.btn-ok-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 56, 76, 0.65), 0 4px 0 #8b0a18;
}
.btn-ok-card:active {
  transform: translateY(2px);
  box-shadow: 0 4px 12px rgba(255, 56, 76, 0.4), 0 2px 0 #8b0a18;
}

/* ==========================================================================
   3D CARD DECK SHUFFLE & FLIP CHOREOGRAPHY
   ========================================================================== */
.shuffle-deck-fan {
  position: relative;
  width: min(340px, 88vw);
  height: 480px;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decoy cards behind main card during shuffle */
.shuffle-decoy-card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  z-index: 1;
}

.shuffle-decoy-card.s-left-2 {
  transform: translateX(-42px) translateY(12px) rotate(-8deg) scale(0.92);
  opacity: 0.6;
}
.shuffle-decoy-card.s-left-1 {
  transform: translateX(-20px) translateY(6px) rotate(-4deg) scale(0.96);
  opacity: 0.8;
}
.shuffle-decoy-card.s-right-1 {
  transform: translateX(20px) translateY(6px) rotate(4deg) scale(0.96);
  opacity: 0.8;
}
.shuffle-decoy-card.s-right-2 {
  transform: translateX(42px) translateY(12px) rotate(8deg) scale(0.92);
  opacity: 0.6;
}

/* Active Shuffling Motion */
.shuffle-deck-fan.shuffling .shuffle-decoy-card.s-left-2 {
  animation: shuffle-riffle-left 0.45s ease-in-out infinite alternate;
}
.shuffle-deck-fan.shuffling .shuffle-decoy-card.s-right-2 {
  animation: shuffle-riffle-right 0.45s ease-in-out infinite alternate;
}
@keyframes shuffle-riffle-left {
  0% { transform: translateX(-65px) translateY(20px) rotate(-14deg) scale(0.88); }
  100% { transform: translateX(50px) translateY(-10px) rotate(8deg) scale(0.95); }
}
@keyframes shuffle-riffle-right {
  0% { transform: translateX(65px) translateY(20px) rotate(14deg) scale(0.88); }
  100% { transform: translateX(-50px) translateY(-10px) rotate(-8deg) scale(0.95); }
}

/* Authentic TCG Card Back */
.tcg-card-back {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, #201432 0%, #0d0816 80%, #050308 100%);
  border: 7px solid #ece4d8;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-back-border {
  width: 100%;
  height: 100%;
  border: 2px solid #a48cc7;
  border-radius: 14px;
  background: radial-gradient(circle, #2d1b46 0%, #11091e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
.card-back-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: radial-gradient(circle, #ff384c, #800b18);
  border: 3px solid #ffd700;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  justify-content: center;
  box-shadow: 0 0 24px rgba(255, 56, 76, 0.6);
}
.seal-icon { font-size: 2.2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
.seal-text { font-family: "Bungee", cursive; font-size: 0.55rem; color: #fff; letter-spacing: 0.08em; }

/* 3D Flippable Main Card */
.tcg-flippable-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
  perspective: 1200px;
}

.tcg-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}

.tcg-flip-card-inner.flipped {
  transform: rotateY(180deg) scale(1.03);
}

.tcg-card-face-side {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
}

.tcg-card-back-side {
  transform: rotateY(0deg);
}

.tcg-card-front-side {
  transform: rotateY(180deg);
}

/* ==========================================================================
   FLOATING QUICK REACTION BAR
   ========================================================================== */
.reaction-bar {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  gap: 8px;
  background: rgba(18, 12, 30, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.16);
  padding: 6px 12px;
  border-radius: 30px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 15px rgba(147, 102, 255, 0.25);
  z-index: 40;
  /* THE REASON REACTIONS "NEVER WORKED".
     .hud is pointer-events:none so the overlay does not eat clicks meant for
     the board. Every control inside it therefore has to opt BACK IN. This bar
     never did — so all six buttons were painted perfectly and were completely
     unclickable, with every real click falling through to #boardCanvas behind
     them. It looked fine and did nothing. */
  pointer-events: auto;
}


.rxn-btn:hover {
  transform: scale(1.35) translateY(-4px);
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.6));
}

.rxn-btn:active {
  transform: scale(0.95);
}


/* Screen-space reaction fly-ups — the actual "did this button do anything"
   feedback: a big emoji launches from the reaction bar and drifts up the
   whole screen, so it reads clearly no matter where the camera is pointed. */
.reaction-flyup-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 200;            /* above the board and the HUD, below modals */
}


@keyframes reaction-flyup-rise {
  0% {
    transform: translate(0, 0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  10% {
    transform: translate(var(--rxn-dx0, -6px), -60px) scale(1.25) rotate(var(--rxn-rot0, -6deg));
    opacity: 1;
  }
  40% {
    transform: translate(var(--rxn-dx1, 10px), -220px) scale(1.05) rotate(var(--rxn-rot1, 5deg));
    opacity: 1;
  }
  75% {
    transform: translate(var(--rxn-dx2, -14px), -430px) scale(1) rotate(var(--rxn-rot2, -4deg));
    opacity: 0.85;
  }
  100% {
    transform: translate(var(--rxn-dx3, 6px), -600px) scale(0.9) rotate(var(--rxn-rot3, 3deg));
    opacity: 0;
  }
}


/* ==========================================================================
   MATCH END PODIUM & MVP OVERLAY
   ========================================================================== */
.match-end-card {
  max-width: 480px;
  background: radial-gradient(circle at 50% 10%, #2e1a47 0%, #12091f 70%, #08040d 100%);
  border: 3px solid #ffd700;
  box-shadow: 0 24px 60px rgba(0,0,0,0.9), 0 0 45px rgba(255, 215, 0, 0.4);
  text-align: center;
  padding: 28px 24px;
}

.match-end-trophy {
  font-size: 3.8rem;
  animation: bounce-trophy 1.2s ease infinite alternate;
  filter: drop-shadow(0 8px 16px rgba(255, 215, 0, 0.6));
}

@keyframes bounce-trophy {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.08); }
}

.match-end-title {
  font-family: "Bungee", cursive;
  font-size: 2.2rem;
  color: #ffd700;
  margin: 6px 0 0;
  text-shadow: 0 3px 12px rgba(0,0,0,0.9);
}

.match-end-subtitle {
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin-top: 4px;
  margin-bottom: 18px;
}



.podium-row.winner {
  background: rgba(255, 215, 0, 0.15);
  border-color: #ffd700;
}

.podium-left {
  display: flex;
  align-items: center;
  gap: 10px;
}




.match-actions-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ==========================================================================
   SPECTATOR LIVE OPPONENT CARD BANNER
   ========================================================================== */
.spectator-card-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(34, 20, 52, 0.95), rgba(16, 9, 28, 0.95));
  border: 2px solid #ffd166;
  border-radius: 14px;
  padding: 6px 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 209, 102, 0.35);
  animation: slide-in-top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.spectator-card-banner.show {
  display: flex;
}

@keyframes slide-in-top {
  0% { transform: translateY(-24px) scale(0.92); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.scb-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.scb-info {
  text-align: left;
  display: flex;
  flex-direction: column;
}

.scb-player {
  font-size: 0.70rem;
  font-weight: 800;
  color: #a48cc7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scb-name {
  font-family: "Bungee", cursive;
  font-size: 0.98rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.scb-type {
  font-size: 0.65rem;
  font-weight: 900;
  color: #ffd166;
  text-transform: uppercase;
}

/* ===========================================================================
   GAME MODES — Classic vs Mayhem
   =========================================================================== */
.mode-select-row {
  display: grid;
  /* Three compact tiles rather than stacked full-width cards. The old layout
     spent 396px of an 844px phone screen on mode selection alone, which pushed
     "Create Room" — the entire point of this screen — below the fold. */
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mode-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 6px 12px;
  min-height: 84px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #efe9ff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.mode-opt:hover { transform: translateY(-2px); }
.mode-opt .mode-icon { font-size: 1.6rem; line-height: 1; }
.mode-opt .mode-name {
  font-weight: 900;
  /* Scales with the tile so the longest name (ESCALATION) still fits on very
     narrow screens instead of spilling out of its box. */
  font-size: clamp(0.56rem, 2.6vw, 0.78rem);
  letter-spacing: 0.3px;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* The per-tile description is folded into one shared line below the row, so
   only the mode you actually picked spends any vertical space explaining
   itself. */
.mode-opt .mode-tagline { display: none; }
.mode-tagline-active {
  margin: 9px 2px 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(239, 233, 255, 0.7);
  min-height: 2.1em;
}
.mode-opt.active {
  border-color: #8b6bff;
  background: rgba(139, 107, 255, 0.16);
  box-shadow: 0 0 22px rgba(139, 107, 255, 0.28);
}
.mode-opt[data-mode="mayhem"].active {
  border-color: #ffb03b;
  background: rgba(255, 176, 59, 0.16);
  box-shadow: 0 0 22px rgba(255, 176, 59, 0.3);
}

/* Lobby badge naming the room's mode */
.lobby-mode-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(139, 107, 255, 0.55);
  background: rgba(20, 14, 34, 0.85);
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 0.78rem;
  color: #cbbcff;
}
.lobby-mode-badge.mayhem {
  border-color: rgba(255, 176, 59, 0.7);
  color: #ffd08a;
  box-shadow: 0 0 20px rgba(255, 176, 59, 0.25);
}
.lobby-mode-badge .lmb-icon { font-size: 1rem; }

/* In-game table-rule banner */
.event-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, 60vw);
  padding: 8px 14px;
  border-radius: 14px;
  border: 2px solid rgba(255, 176, 59, 0.6);
  background: linear-gradient(180deg, rgba(60, 38, 8, 0.92), rgba(28, 18, 10, 0.92));
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.event-badge[hidden] { display: none; }
.event-badge-icon { font-size: 1.5rem; line-height: 1; }
.event-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.event-badge-text strong {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffd08a;
  text-transform: uppercase;
}
.event-badge-text em {
  font-style: normal;
  font-size: 0.72rem;
  color: rgba(255, 236, 209, 0.78);
}
.event-badge.announce { animation: eventAnnounce 1.1s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes eventAnnounce {
  0%   { transform: scale(0.85) translateY(-8px); opacity: 0; }
  45%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Gallery: mode filter + table-rule chips */
.gallery-mode-filter {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.gmf-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #cfc6e8;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.gmf-btn.active { border-color: #ffb03b; color: #ffd08a; background: rgba(255, 176, 59, 0.14); }
.gallery-heading.mayhem { color: #ffd08a; }
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.event-chip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 176, 59, 0.3);
  background: rgba(255, 176, 59, 0.07);
}
.event-chip-icon { font-size: 1.6rem; line-height: 1; }
.event-chip strong { color: #ffd08a; font-size: 0.9rem; letter-spacing: 0.5px; }
.event-chip p { margin: 3px 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.68); line-height: 1.4; }

@media (max-width: 560px) {
  .mode-select-row { grid-template-columns: repeat(3, 1fr); }
  .event-badge { max-width: 70vw; }
}

/* ===========================================================================
   ESCALATION — stacked table rules, blind-table notice, match awards
   =========================================================================== */
.event-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.event-stack[hidden] { display: none; }
.event-stack.announce .event-badge {
  animation: eventAnnounce 1.1s cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
}
.event-stack.announce .event-badge:nth-child(2) { animation-delay: 0.12s; }
.event-stack.announce .event-badge:nth-child(3) { animation-delay: 0.24s; }
.event-stack.announce .event-badge:nth-child(4) { animation-delay: 0.36s; }

/* This is a PERSISTENT state, not a passing message: it stays up for as long
   as nobody can see their own spiders. At 0.76rem it read as a footnote, so
   players did not connect it to their highlights vanishing from the board. */
.blind-notice {
  display: flex; align-items: center; gap: 12px;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 2px solid rgba(255, 90, 160, 0.85);
  background: rgba(50, 8, 30, 0.94);
  color: #ffd3e6;
  max-width: min(520px, 80vw);
  box-shadow: 0 0 22px rgba(255, 90, 160, 0.28);
  animation: eventAnnounce 1s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.bn-icon { font-size: 1.8rem; flex: 0 0 auto; }
.bn-body {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; line-height: 1.35; font-size: 0.82rem;
}
.bn-body strong {
  font-size: 1rem; font-weight: 900; letter-spacing: 0.08em; color: #fff0f7;
}
.blind-notice[hidden] { display: none; }
.blind-notice strong { color: #ff7ab8; letter-spacing: 1px; }

/* Merged from 2 separate `.match-podium-list` blocks (was also at line 2499). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.match-podium-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 24px;
  max-height: 240px;
  overflow-y: auto;
  margin: 18px 0 4px;
}
/* Merged from 2 separate `.podium-row` blocks (was also at line 2508). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.podium-row {
  display: grid;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 12px;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas: "rank name score" "rank stats stats";
  gap: 2px 10px;
  text-align: left;
}
.podium-row.is-me { border-color: rgba(139, 107, 255, 0.6); background: rgba(139, 107, 255, 0.12); }
/* Merged from 2 separate `.podium-rank` blocks (was also at line 2529). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.podium-rank {
  font-family: "Bungee", cursive;
  font-size: 1.4rem;
  color: #ffd700;
  width: 24px;
  grid-area: rank;
  text-align: center;
}
/* Merged from 2 separate `.podium-name` blocks (was also at line 2536). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.podium-name {
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  grid-area: name;
}
.podium-score { grid-area: score; font-weight: 800; color: #ffd24d; font-size: 0.85rem; }
/* Merged from 2 separate `.podium-stats` blocks (was also at line 2542). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.podium-stats {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  grid-area: stats;
}

.match-awards { margin-top: 16px; }
.awards-heading {
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #ffd24d;
  margin: 0 0 10px;
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 8px;
}
.award-chip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 210, 77, 0.28);
  background: rgba(255, 210, 77, 0.08);
  text-align: left;
}
.award-icon { font-size: 1.4rem; line-height: 1; }
.award-chip strong { font-size: 0.8rem; color: #ffd24d; letter-spacing: 0.4px; }
.award-chip p { margin: 2px 0 0; font-size: 0.72rem; color: rgba(255, 255, 255, 0.68); line-height: 1.35; }

@media (max-width: 560px) {
  .mode-select-row { grid-template-columns: repeat(3, 1fr); }
  .blind-notice { max-width: 78vw; }
}

/* ===========================================================================
   GAME FLOW — resolution beat, private intel, live-stream reactions
   =========================================================================== */

/* The table is deliberately held so a card's result is readable. */
.turn-banner.resolving {
  background: linear-gradient(180deg, rgba(46, 30, 74, 0.95), rgba(24, 16, 40, 0.95));
  border-color: rgba(180, 150, 255, 0.55);
  color: #d9c9ff;
  letter-spacing: 0.4px;
  animation: resolvePulse 1.5s ease-out;
}
@keyframes resolvePulse {
  0%   { transform: scale(0.97); box-shadow: 0 0 0 rgba(160, 120, 255, 0); }
  18%  { transform: scale(1.02); box-shadow: 0 0 26px rgba(160, 120, 255, 0.45); }
  100% { transform: scale(1);    box-shadow: 0 0 0 rgba(160, 120, 255, 0); }
}

/* Intel only you were told. */
.log-line.private-intel {
  color: #ffd166;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.35);
}

/* Reactions: variable size and duration so a stream does not look like a
   metronome, plus the sender's name riding along under the emoji. */
/* Merged from 2 separate `.reaction-flyup` blocks (was also at line 2418). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.reaction-flyup {
  position: absolute;
  bottom: 110px;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
  animation: reaction-flyup-rise 2.4s cubic-bezier(0.15, 0.6, 0.35, 1) forwards;
  will-change: transform, opacity;
  font-size: var(--rxn-size, 3.4rem);
  animation-duration: var(--rxn-dur, 2.4s);
  /* Spread across a wide band. This was silently lost when two duplicate
     `.reaction-flyup` rules were merged: the merge script split declarations
     on ";" and took everything before the first ":", so a comment containing a
     colon swallowed the property written after it. Reactions all piled into
     the bottom-left corner again as a result. */
  left: var(--rxn-x, 50%);
  right: auto;
}
.reaction-flyup .rxn-who {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.rxn-btn.held {
  transform: scale(1.22);
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.6);
}
/* Merged from 2 separate `.rxn-btn` blocks (was also at line 2374). Only the later values were ever visible; the earlier
   block was dead weight that made the real styling impossible to read. */
.rxn-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
}

/* Eliminated players stay in the room and watch — make that explicit. */
.spectator-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 2px solid rgba(255, 90, 120, 0.55);
  background: rgba(46, 10, 24, 0.92);
  color: #ffd3e0;
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  animation: specIn 0.5s ease;
}
.spectator-notice[hidden] { display: none; }
.spectator-notice strong { color: #ff7ab8; letter-spacing: 1px; }
.spectator-notice .spec-skull { font-size: 1.15rem; }
@keyframes specIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================================
   OPTIONAL ARCADE ACCOUNT
   Signed out, none of this affects play — it is chrome on the home screen.
   =========================================================================== */
.arcade-acct { margin-top: 14px; text-align: center; }
.acct-signed-in { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.acct-signed-in[hidden], .acct-signed-out[hidden] { display: none; }
.acct-who { font-size: 0.85rem; color: #cfc6e8; }
.acct-who strong { color: #ffd166; }
.acct-opt { opacity: 0.6; font-size: 0.78em; }

.acct-card { max-width: 460px; text-align: left; position: relative; }
.acct-title { margin: 0 0 8px; letter-spacing: 1px; }
.acct-blurb { font-size: 0.84rem; color: rgba(255,255,255,0.7); line-height: 1.45; margin: 0 0 10px; }
.acct-warn {
  font-size: 0.78rem;
  color: #ffca7a;
  background: rgba(255, 190, 90, 0.1);
  border: 1px solid rgba(255, 190, 90, 0.3);
  border-radius: 10px;
  padding: 8px 11px;
  margin: 0 0 16px;
  line-height: 1.4;
}
.acct-actions { display: flex; gap: 10px; margin-top: 14px; }
.acct-actions .btn { flex: 1; }

.acct-stats { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.acct-game h4 { margin: 0 0 6px; font-size: 0.85rem; letter-spacing: 0.5px; color: #ffd166; }
.acct-stat {
  display: flex; justify-content: space-between;
  font-size: 0.8rem; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.acct-stat span { color: rgba(255,255,255,0.62); }
.acct-stat strong { color: #fff; }

/* ===========================================================================
   THE MAGNUM — danger klaxon
   =========================================================================== */
.danger-klaxon {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.danger-klaxon[hidden] { display: none; }
.klaxon-bars {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(255, 30, 0, 0.22) 0 42px, rgba(0, 0, 0, 0.55) 42px 84px);
  animation: klaxonSlide 0.5s linear infinite, klaxonFlash 0.28s steps(2) infinite;
}
.klaxon-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.klaxon-word {
  font-family: 'Arial Black', system-ui, sans-serif;
  font-weight: 900; font-size: clamp(2.2rem, 9vw, 5.4rem);
  letter-spacing: 6px; color: #fff;
  text-shadow: 0 0 18px #ff2200, 0 0 42px #ff5500, 0 5px 0 #7a0d00;
  animation: klaxonPunch 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
.klaxon-word:nth-child(2) { animation-delay: 0.13s; }
.klaxon-word:nth-child(3) { animation-delay: 0.26s; }
.klaxon-sub {
  position: relative; margin-top: 16px;
  font-weight: 900; letter-spacing: 3px; font-size: clamp(0.8rem, 2.4vw, 1.15rem);
  color: #ffd166; text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  animation: klaxonPunch 0.4s 0.4s cubic-bezier(0.2,0.9,0.3,1) backwards;
}
.danger-klaxon.fire { animation: klaxonOut 2.6s forwards; }

@keyframes klaxonSlide { to { background-position: 119px 0; } }
@keyframes klaxonFlash { 0%,100% { opacity: 0.9; } 50% { opacity: 0.45; } }
@keyframes klaxonPunch {
  0%   { transform: scale(2.4) rotate(-6deg); opacity: 0; filter: blur(9px); }
  60%  { transform: scale(0.94) rotate(1.5deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes klaxonOut { 0%,78% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------------------
   HOW-TO-PLAY TUTORIAL
   Lobby-only. Deliberately not part of the match flow: it can be closed at any
   time and closes itself the moment a round starts, so it can never sit on top
   of a live game or hold anybody up.
--------------------------------------------------------------------------- */
.tut-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 6px auto 0; padding: 7px 15px;
  border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
  font-family: "Manrope", system-ui, sans-serif;
}
.tut-toggle input { accent-color: #ffb833; width: 16px; height: 16px; cursor: pointer; }
.tut-replay {
  display: block; margin: 8px auto 0; padding: 7px 16px;
  border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 700;
  font-family: "Manrope", system-ui, sans-serif;
}
.tut-replay:hover { color: #ffd24d; border-color: #ffb833; }

.tut-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 3, 12, 0.94);
  backdrop-filter: blur(6px);
  padding: 22px;
}
.tut-overlay[hidden] { display: none; }
.tut-card {
  width: min(960px, 94vw);
  display: flex; flex-direction: column; gap: 12px;
}
.tut-video {
  width: 100%; border-radius: 16px; background: #0c0714;
  border: 2px solid rgba(255, 184, 51, 0.55);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
}
.tut-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tut-ghost { background: transparent !important; color: rgba(255,255,255,0.72) !important; }

/* ===========================================================================
   LEGIBILITY FOR NEW PLAYERS
   The mode you picked, what just happened, and the shuffle — all three used to
   be either invisible during play or a line of small text in a scrolling log.
   =========================================================================== */

/* Mode is now stated permanently during the match, not just in the lobby. */
.scene-mode-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(14, 10, 24, 0.82);
  border: 2px solid var(--line);
  padding: 6px 16px; border-radius: 999px;
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em;
  color: var(--accent-yellow);
  backdrop-filter: blur(8px);
}
.scene-mode-badge.mayhem {
  border-color: rgba(255, 90, 160, 0.75);
  color: #ffd3e6;
  background: rgba(50, 8, 30, 0.85);
}
.smb-icon { font-size: 1rem; }

/* The shuffle deserves the same alarm treatment the Magnum gets. */
.shuffle-alert {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(80, 10, 50, 0.55) 0%, rgba(0,0,0,0.82) 100%);
  animation: shuffleFlash 2.6s ease-out forwards;
}
.shuffle-cups { font-size: clamp(2.6rem, 11vw, 5rem); animation: shuffleRock 0.5s ease-in-out 4; }
.shuffle-title {
  font-size: clamp(1.9rem, 8vw, 4rem); font-weight: 900; letter-spacing: 0.12em;
  color: #ffd3e6; text-shadow: 0 0 26px rgba(255, 90, 160, 0.9); margin-top: 6px;
}
.shuffle-sub {
  margin-top: 12px; text-align: center; line-height: 1.5;
  font-size: clamp(0.85rem, 3.4vw, 1.1rem); font-weight: 700; color: #ffe9f4;
  max-width: min(520px, 84vw);
}
@keyframes shuffleFlash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes shuffleRock {
  0%, 100% { transform: translateX(-16px) rotate(-9deg); }
  50%      { transform: translateX(16px) rotate(9deg); }
}


/* ===========================================================================
   Phone overrides for the reaction bar and fly-ups.
   These live at the END on purpose. They used to sit ABOVE the second
   `.reaction-flyup` / `.rxn-btn` rules, and when those duplicate rules were
   merged the merged declarations landed after these and silently killed the
   phone layout. Keeping the narrow-screen overrides last makes that
   impossible to reintroduce.
   =========================================================================== */
@media (max-width: 600px) {
  .reaction-bar {
    bottom: 74px;
    right: 50%;
    transform: translateX(50%);
    gap: 4px;
    padding: 4px 8px;
  }
  .rxn-btn {
    font-size: 1.25rem;
  }
}

@media (max-width: 600px) {
  .reaction-flyup {
    bottom: 120px;
    /* Scale the randomised size down for phones rather than replacing it with
       a flat value — a fixed font-size here would throw away the per-reaction
       size variance that stops a burst looking like a metronome. */
    font-size: calc(var(--rxn-size, 2.6rem) * 0.72);
  }
}

/* ===========================================================================
   HOW-TO-PLAY WALKTHROUGH (steps, not video)
   =========================================================================== */
.tut-steps {
  /* .tut-card carried no background at all — it was built to wrap an opaque
     <video>. With text inside, the live board read straight through it. */
  width: min(560px, 92vw);
  max-width: min(560px, 92vw);
  text-align: center;
  padding: 26px 26px 18px;
  background: linear-gradient(180deg, rgba(26, 16, 38, 0.99), rgba(14, 9, 22, 0.99));
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
}
.tut-progress { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; }
.tut-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.2s ease, transform 0.2s ease;
}
.tut-dot.on { background: var(--accent-yellow, #ffd166); transform: scale(1.35); }
.tut-art { font-size: clamp(3rem, 12vw, 4.4rem); line-height: 1; margin-bottom: 10px; }
.tut-title {
  font-family: "Bungee", cursive, sans-serif;
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  margin: 0 0 10px; letter-spacing: 0.02em;
}
.tut-body {
  font-size: clamp(0.92rem, 3.6vw, 1.02rem);
  line-height: 1.55; margin: 0 auto 18px; max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
}
.tut-actions .btn-ok-card:disabled { opacity: 0.35; pointer-events: none; }
.tut-skip-link {
  display: block; margin: 14px auto 0; padding: 6px 10px;
  background: none; border: 0; cursor: pointer;
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5); text-decoration: underline;
}
.tut-skip-link:hover { color: rgba(255, 255, 255, 0.85); }
/* Guests see the host's choice but cannot change it. */
.tut-toggle.not-host { opacity: 0.72; cursor: default; }
.tut-toggle.not-host input { cursor: default; }


/* ===========================================================================
   LOBBY ON A PHONE
   The lobby is the screen every player sees before every match, and at 390px
   it was overflowing on three fronts at once.
   =========================================================================== */
@media (max-width: 600px) {
  /* clamp()'s MINIMUM was 3.5rem — 56px of Creepster, wider than the screen —
     so "WAITING FOR PLAYERS" ran off both edges. The minimum has to be small
     enough for the smallest screen; the max still governs desktop. */
  .lobby-header-title {
    font-size: clamp(1.9rem, 8.5vw, 5.5rem);
    margin-top: 14px;
    padding: 0 10px;
    letter-spacing: 0.04em;
  }
  /* Three buttons at 32px side padding measured 405px inside a 390px viewport,
     clipping BACK on the left and START on the right. */
  .lobby-btn-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    padding: 0 10px;
  }
  .lobby-block-btn {
    padding: 11px 20px;
    font-size: 0.95rem;
    border-width: 3px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.7);
  }
  .lobby-drawers-row { top: 74px; left: 12px; max-width: 190px; gap: 7px; }
  .tut-toggle { margin-left: 12px; margin-right: 12px; font-size: 12.5px; }
}

@media (max-width: 600px) {
  /* On a phone the drawers stop floating over the title and tutorial controls
     and simply flow beneath them, side by side to save vertical space. */
  .lobby-drawers-row {
    position: static;
    max-width: none;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    margin: 10px auto 0;
    padding: 0 12px;
  }
  .lobby-scare-drawer { flex: 1 1 0; min-width: 0; }
  .lobby-scare-drawer summary { font-size: 0.74rem; }
}

@media (max-width: 600px) {
  /* Closed, the two drawers sit side by side to save room. Open, their content
     needs the whole width — a fixed 3-column skin grid inside a ~190px column
     ran 225px off the right edge. */
  .lobby-scare-drawer:has(details[open]) { flex: 1 1 100%; }
  .lobby-drawers-row { flex-wrap: wrap; }
  #scarePicker,
  .scare-grid {
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    max-height: 40vh;
    overflow-y: auto;
  }
  .lobby-avatar-picker { flex-wrap: wrap; justify-content: center; }
}

/* The cup-or-pack decision is the single most repeated choice in the game and
   it used to present two unlabelled pictures and a bare percentage. */
.choice-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  max-width: 22ch;
}
.pack-odds-meter strong { color: #7CFFB2; font-weight: 900; }
@media (max-width: 600px) {
  .choice-sub { font-size: 0.68rem; max-width: 20ch; }
}

/* ===========================================================================
   "WHAT IS HAPPENING" HEADLINE DURING PLAY
   Same centred slot the placing phase uses, so the answer is always in the
   same place. The bottom pill stays as a secondary echo for wide screens.
   =========================================================================== */
#hudCenter.playing-status #hudTitle {
  font-size: clamp(1.05rem, 4.6vw, 1.6rem);
  line-height: 1.2;
  text-wrap: balance;
}
#hudCenter.playing-status #hudSub {
  font-size: clamp(0.78rem, 3.2vw, 0.95rem);
  opacity: 0.72;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
/* Your turn: make it unmistakable that the table is waiting on YOU. */
#hudCenter.playing-status.is-mine #hudTitle {
  color: var(--accent-yellow, #ffd166);
  text-shadow: 0 0 22px rgba(255, 209, 102, 0.35);
}
/* Something just resolved — this is the beat the server is holding for. */
#hudCenter.playing-status.is-resolving #hudTitle {
  color: #d9c9ff;
  text-shadow: 0 0 20px rgba(180, 150, 255, 0.35);
}
/* On a phone the pill at the bottom is now pure duplication of the headline. */
@media (max-width: 600px) {
  #turnBanner { display: none; }
}

/* ===========================================================================
   VITALS FX — a shield or heart is delivered to a name, not silently swapped
   =========================================================================== */
.vitals-fx-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 201;             /* above the board and the HUD, below modals */
}
.vital-token {
  position: absolute; top: 0; left: 0;
  font-size: 2.1rem;
  line-height: 1;
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7));
}
.vital-token.gain { filter: drop-shadow(0 0 14px rgba(120, 220, 255, 0.85)); }
.vital-token.loss { filter: drop-shadow(0 0 14px rgba(255, 80, 100, 0.85)); }

/* The nameplate answers back when the token lands. */
.corner-player-name.vital-heal { animation: vitalHeal 0.65s ease-out; }
.corner-player-name.vital-hit  { animation: vitalHit 0.65s ease-out; }
@keyframes vitalHeal {
  0%   { transform: scale(1); text-shadow: none; }
  35%  { transform: scale(1.16); text-shadow: 0 0 16px rgba(120, 220, 255, 0.95); }
  100% { transform: scale(1); text-shadow: none; }
}
@keyframes vitalHit {
  0%   { transform: translateX(0) scale(1); }
  18%  { transform: translateX(-5px) scale(1.12); }
  38%  { transform: translateX(5px)  scale(1.12); }
  58%  { transform: translateX(-3px) scale(1.06); }
  100% { transform: translateX(0) scale(1); }
}
@media (max-width: 600px) { .vital-token { font-size: 1.7rem; } }

/* ===========================================================================
   SUSPENSE — the long delayed flip
   A dramatic reveal holds for 5s (epic: 6.8s). That hold used to be silent on
   screen: the cup trembled on the table and nothing else happened, so it read
   as a stall rather than a build. The walls close in instead.
   =========================================================================== */
.suspense-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 61;                 /* over the board, under the jumpscare flash */
  opacity: 0;
  /* --sv-in is animated from 90% (barely there) down to 26% (pressing in). */
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) var(--sv-in, 90%),
      rgba(30,0,8,0.55) calc(var(--sv-in, 90%) + 18%),
      rgba(0,0,0,0.94) 100%);
  will-change: opacity, transform;
}
.suspense-vignette.epic {
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) var(--sv-in, 90%),
      rgba(60,40,0,0.55) calc(var(--sv-in, 90%) + 18%),
      rgba(0,0,0,0.96) 100%);
}

/* A hairline of colour right at the frame edge that brightens as it builds —
   reads even on a phone where the vignette itself is subtle. */
.suspense-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px rgba(255, 40, 70, var(--sv-rim, 0));
}
.suspense-vignette.epic::after {
  box-shadow: inset 0 0 0 3px rgba(255, 209, 102, var(--sv-rim, 0));
}

@media (prefers-reduced-motion: reduce) {
  .suspense-vignette { transition: opacity 0.2s linear; }
}

/* ===========================================================================
   GUIDED ROUND
   =========================================================================== */
.btn-tutorial {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(180deg, #2b2350, #1b1636);
  border: 2px solid rgba(160, 140, 255, 0.55);
  color: #e6dcff;
}
.btn-tutorial:hover { border-color: rgba(190, 170, 255, 0.9); }

/* Anchored bottom-centre: the board is the top two-thirds of the screen on a
   phone, so coaching text belongs under it, not over it. */
.coach {
  position: absolute;
  left: 50%; bottom: 96px;
  transform: translateX(-50%);
  width: min(520px, 92vw);
  z-index: 70;
  padding: 14px 18px 12px;
  border-radius: 16px;
  border: 2px solid rgba(160, 140, 255, 0.6);
  background: linear-gradient(180deg, rgba(30, 24, 58, 0.97), rgba(16, 12, 32, 0.97));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7);
  text-align: center;
  pointer-events: auto;
}
.coach-step {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em;
  color: rgba(190, 170, 255, 0.85); margin-bottom: 5px;
}
.coach-title {
  font-family: "Bungee", cursive, sans-serif;
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  color: #fff; margin-bottom: 5px; line-height: 1.15;
}
.coach-body {
  font-size: clamp(0.84rem, 3.4vw, 0.95rem);
  line-height: 1.45; color: rgba(255, 255, 255, 0.86);
}
.coach.pop { animation: eventAnnounce 0.5s cubic-bezier(0.2, 0.9, 0.25, 1); }
.coach-quit {
  margin-top: 9px; padding: 5px 10px;
  background: none; border: 0; cursor: pointer;
  font-size: 0.72rem; color: rgba(255, 255, 255, 0.45);
  text-decoration: underline; font-family: inherit;
}
.coach-quit:hover { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 600px) { .coach { bottom: 78px; } }


/* ===========================================================================
   WEB WIPE — the transition between screens and rounds
   =========================================================================== */
.web-wipe {
  position: fixed; inset: 0;
  z-index: 400;                 /* over everything except a live modal */
  pointer-events: none;
  overflow: hidden;
}
/* The blackout itself, wiping in from the centre. */
.web-ink {
  position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 50%, #06040c 0%, #06040c 60%, rgba(6,4,12,0) 72%);
  transform: scale(0);
  will-change: transform;
}
.web-art {
  position: absolute; left: 50%; top: 50%;
  width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%) scale(0) rotate(-8deg);
  opacity: 0;
  will-change: transform, opacity;
}
/* The thread the spider rides down. */
.web-thread {
  position: absolute; left: 50%; top: 0;
  width: 2px; height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.15));
  transform: translateX(-50%);
  will-change: height;
}
.web-spider {
  position: absolute; left: 50%; top: 0;
  font-size: clamp(2.6rem, 9vmin, 5rem);
  transform: translate(-50%, -100%);
  will-change: transform;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.8));
}
@media (prefers-reduced-motion: reduce) {
  .web-art, .web-spider, .web-thread { display: none; }
}