/* ============================================
   BEAST CITY: game styles
   Brand: black stage, electric blue, neon pink, white text.
   Rule of thumb: pink means "press me", blue means "info",
   white means "read me". Green and red are game signals only.
   Titles use Bangers, everything else uses Titan One.
   Screens: lobby, character select, Hold the Pole, Grab the Flag,
   The Cube, Sabotage Sprint, Buried Alive, Train Tracks, results.
   ============================================ */

/* Our colour palette, named once so we can reuse it everywhere */
:root {
  --stage-black: #0a0a12;    /* the near-black arena background */
  --neon-pink: #ff2d9b;      /* main action buttons and highlights */
  --neon-pink-deep: #b3005f; /* the dark pink 3D edge under buttons */
  --electric-blue: #29e5ff;  /* accents, info pills, outlines */
  --win-green: #34d399;      /* game signal: good / safe / confirm */
  --danger-red: #f87171;     /* game signal: danger / warning */
  --white: #ffffff;          /* all text */
}

/* The big titles share this font stack (Bangers first) */
.title,
.select-title,
.pole-title,
.overlay-big,
.results-headline {
  font-family: "Bangers", "Titan One", "Arial Black", sans-serif;
  letter-spacing: 2px; /* Bangers is narrow, this gives it air */
}

/* Reset: remove the browser's default spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The whole page: the real neon arena, behind a dark scrim so the
   white text and buttons always stay readable on top of it.
   If the image ever fails to load, the stage-black colour takes over. */
body {
  height: 100vh;
  height: 100dvh; /* fits phone screens better */
  background-color: var(--stage-black);
  background-image:
    linear-gradient(rgba(10, 10, 18, 0.55), rgba(10, 10, 18, 0.78)),
    url("bg-arena.jpg");
  background-size: cover;
  background-position: center;
  font-family: "Titan One", "Arial Black", sans-serif;
  color: var(--white);
  overflow: hidden; /* screens scroll inside themselves instead */
  display: flex;
  flex-direction: column;
  /* A game should never let you accidentally select its text,
     especially while holding the HOLD button on a phone */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Any element with class="hidden" disappears. script.js switches
   screens by adding and removing this one class. */
.hidden {
  display: none !important;
}

/* ---------- Top bar (money counter + music button) ---------- */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  position: relative;
  z-index: 2; /* keeps it above the floating emoji */
}

/* The fake Donate Dashboard pill: dark with a blue outline */
.donate-counter {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--electric-blue);
  color: var(--electric-blue);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* The music on/off button */
.music-button {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--electric-blue);
  color: var(--white);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.music-button:active {
  transform: scale(0.95);
}

/* ---------- Screens ---------- */

/* Every screen fills the space under the top bar.
   If a screen is too tall for the phone, it scrolls inside itself. */
.screen {
  flex: 1;
  overflow-y: auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* ---------- Screen 1: the lobby ---------- */

.lobby {
  justify-content: center;
  text-align: center;
}

/* The panther emblem above the title */
.lobby-emblem {
  width: clamp(88px, 24vw, 150px);
  margin-bottom: 16px;
  filter: drop-shadow(0 0 24px rgba(41, 229, 255, 0.35));
  animation: bounce-in 0.5s ease-out;
}

/* The big title: white Bangers letters on a neon pink glow.
   clamp() picks a size that fits phones AND laptops. */
.title {
  font-size: clamp(4rem, 18vw, 9rem);
  line-height: 0.9;
  color: var(--white);
  /* a hard pink edge + a soft pink glow makes the white pop */
  text-shadow:
    0 4px 0 var(--neon-pink),
    0 8px 0 rgba(0, 0, 0, 0.5),
    0 0 60px rgba(255, 45, 155, 0.55);
  transform: rotate(-3deg); /* a small tilt = more energy */
  animation: title-pop 0.6s ease-out;
}

.tagline {
  margin-top: 22px;
  font-size: clamp(0.9rem, 3.5vw, 1.3rem);
  color: var(--electric-blue);
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* The big PLAY button, easy to tap on a phone */
.play-button {
  margin-top: 44px;
  font-family: inherit;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: var(--white);
  background: var(--neon-pink);
  border: none;
  border-radius: 8px;
  padding: 20px 64px;
  cursor: pointer;
  box-shadow:
    0 6px 0 var(--neon-pink-deep),
    0 0 40px rgba(255, 45, 155, 0.55);
  animation: pulse 1.6s ease-in-out infinite; /* gentle breathing glow */
  transition: transform 0.1s;
}

.play-button:hover {
  transform: scale(1.06);
}

/* Pressing it squashes it down like a real button */
.play-button:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 var(--neon-pink-deep),
    0 0 40px rgba(255, 45, 155, 0.55);
}

/* ---------- Screen 2: character select ---------- */

/* The row at the top: Back button on the left, title in the middle */
.select-top {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.back-button {
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--neon-pink);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

.back-button:active {
  transform: scale(0.95);
}

.select-title {
  text-align: center;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  color: var(--white);
  text-shadow:
    0 3px 0 var(--neon-pink),
    0 0 30px rgba(255, 45, 155, 0.45);
  transform: rotate(-2deg);
}

/* An invisible spacer the same width as the Back button,
   so the title sits exactly in the middle */
.select-top::after {
  content: "";
  width: 70px;
}

/* The 2 x 2 grid of character cards */
.character-grid {
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns, so 2 rows of 2 */
  gap: 12px;
}

/* One character card. It is a <button> so phones and keyboards
   both know it can be pressed. */
.character-card {
  font-family: inherit;
  color: var(--white);
  background: rgba(0, 0, 0, 0.45);
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: transform 0.1s, border-color 0.1s;
}

.character-card:hover {
  transform: scale(1.04);
  border-color: var(--electric-blue);
}

.character-card:active {
  transform: scale(0.97);
}

/* The tapped card lights up neon pink */
.character-card.selected {
  border-color: var(--neon-pink);
  background: rgba(255, 45, 155, 0.10);
  box-shadow: 0 0 24px rgba(255, 45, 155, 0.40);
}

/* The drawn character portrait on each card */
.card-portrait {
  height: clamp(80px, 22vw, 120px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(41, 229, 255, 0.25));
}

.card-name {
  font-size: clamp(0.85rem, 3.2vw, 1.1rem);
  color: var(--electric-blue);
}

.card-ability {
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.3px;
}

/* The hint shown before any card is tapped */
.select-hint {
  margin-top: 24px;
  font-size: 0.95rem;
  color: var(--electric-blue);
  text-align: center;
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---------- The score sheet ---------- */

.score-sheet {
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.5);
  border: 3px solid var(--electric-blue);
  border-radius: 10px;
  padding: 18px;
  animation: bounce-in 0.35s ease-out;
}

.sheet-title {
  text-align: center;
  font-size: clamp(1.1rem, 4.5vw, 1.6rem);
  color: var(--white);
  margin-bottom: 14px;
}

/* One trait row: the label line, then the bar under it */
.trait-row {
  margin-bottom: 10px;
}

.trait-label {
  display: flex;
  justify-content: space-between; /* name left, number right */
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.trait-value {
  color: var(--electric-blue);
}

/* The grey track the coloured bar fills up.
   Meters stay rounded on purpose: they read better as gauges. */
.bar-track {
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden; /* keeps the fill's corners rounded */
}

/* The coloured fill. script.js sets its width to the trait's %.
   The transition makes it grow like a power-up meter. */
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.6s ease-out;
}

/* The 7 trait bars alternate the two brand colours, pink and blue */
.bar-0 { background: var(--neon-pink); }     /* Manipulative */
.bar-1 { background: var(--electric-blue); } /* Physical Strength */
.bar-2 { background: var(--neon-pink); }     /* Social Interaction */
.bar-3 { background: var(--electric-blue); } /* Respect */
.bar-4 { background: var(--neon-pink); }     /* Likeability */
.bar-5 { background: var(--electric-blue); } /* Body Weight */
.bar-6 { background: var(--neon-pink); }     /* Strategic Thinking */

/* The big green confirm button (green = "good to go", a game signal) */
.choose-button {
  width: 100%;
  margin-top: 14px;
  font-family: inherit;
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  color: #06281c;
  background: var(--win-green);
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  cursor: pointer;
  box-shadow: 0 5px 0 #0f9468;
  transition: transform 0.1s;
}

.choose-button:hover {
  transform: scale(1.02);
}

.choose-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #0f9468;
}

/* ---------- Screen 3: Hold the Pole ---------- */

/* The challenge gets its own arena art: the one with the big
   golden pole. A darker scrim keeps the meters readable. */
.pole-screen {
  background-image:
    linear-gradient(rgba(10, 10, 18, 0.55), rgba(10, 10, 18, 0.72)),
    url("bg-pole.jpg");
  background-size: cover;
  background-position: center;
}

/* The tension row above the arena */
.pole-hud {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.pole-title {
  text-align: center;
  font-size: clamp(1.3rem, 5.5vw, 2.2rem);
  color: var(--white);
  text-shadow:
    0 3px 0 var(--neon-pink),
    0 0 30px rgba(255, 45, 155, 0.45);
  transform: rotate(-2deg);
}

/* Small info pills for the timer and the contestants-left count */
.hud-pill {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--electric-blue);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* The arena: the pole stands in the middle, contestants cling to it */
.pole-scene {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: clamp(280px, 42vh, 400px);
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  overflow: hidden; /* fallen contestants drop out of sight */
}

/* The pole itself: a tall electric blue bar down the middle */
.pole {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 16px;
  background: linear-gradient(90deg, #0d6f80, var(--electric-blue), #0d6f80);
  box-shadow: 0 0 24px rgba(41, 229, 255, 0.35);
}

/* One contestant clinging to the pole.
   script.js places them left/right of the pole at different heights. */
.contestant {
  position: absolute;
  width: 44%;
  max-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.8s ease-in, opacity 0.8s;
}

/* Left-side contestants sit just left of the pole, right-side just right */
.contestant.side-left  { right: calc(50% + 16px); }
.contestant.side-right { left:  calc(50% + 16px); }

/* The little mood emoji (😄 😬 😰) above the character */
.contestant-status {
  font-size: 1rem;
  min-height: 1.2em;
}

.contestant-emoji {
  font-size: clamp(2rem, 8vw, 2.8rem);
}

/* Characters with a weak grip tremble */
.contestant.shaky .contestant-emoji {
  animation: tremble 0.15s linear infinite;
}

.contestant-name {
  font-size: 0.62rem;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

/* The player's own card is marked in neon pink */
.contestant.player-card .contestant-name {
  color: var(--neon-pink);
}

/* Each contestant's grip meter */
.grip-track {
  width: 90%;
  height: 10px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.grip-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--win-green);
  transition: width 0.15s linear, background-color 0.3s;
}

/* The grip bar changes colour as it empties (classes set by script.js).
   These are game signals (safe / careful / danger), not brand colours. */
.grip-fill.grip-mid { background: #ffd23f; }
.grip-fill.grip-low { background: var(--danger-red); }

/* A contestant whose grip hit zero: falls off the pole */
.contestant.fallen {
  transform: translateY(150%) rotate(70deg);
  opacity: 0.1;
}

/* The overlay over the arena: countdown numbers, then win/lose */
.pole-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(5, 5, 15, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

/* The huge countdown / result text ("3", "HOLD!", "YOU SURVIVED!") */
.overlay-big {
  font-size: clamp(2.4rem, 13vw, 5rem);
  color: var(--white);
  text-shadow:
    0 4px 0 var(--neon-pink),
    0 0 40px rgba(255, 45, 155, 0.55);
  animation: bounce-in 0.4s ease-out;
}

.overlay-small {
  font-size: clamp(0.85rem, 3.5vw, 1.1rem);
  color: var(--white);
}

.results-button {
  max-width: 320px;
}

/* ---------- The player's controls under the arena ---------- */

.hold-area {
  width: 100%;
  max-width: 700px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fatigue-wrap {
  width: 100%;
  max-width: 420px;
}

/* The fatigue bar fill: orange warning colour, red + flashing when
   dangerous. Game signals, not brand colours. */
.fatigue-fill {
  background: #ff6b35;
  transition: width 0.15s linear, background-color 0.3s;
}

.fatigue-fill.danger {
  background: var(--danger-red);
  animation: pulse 0.5s ease-in-out infinite;
}

/* The big HOLD button. touch-action: none stops phones from
   scrolling or zooming while your finger is pressing it. */
.hold-button {
  font-family: inherit;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  color: var(--white);
  background: var(--neon-pink);
  border: none;
  border-radius: 8px;
  padding: 22px 70px;
  cursor: pointer;
  touch-action: none;
  box-shadow:
    0 6px 0 var(--neon-pink-deep),
    0 0 40px rgba(255, 45, 155, 0.55);
  transition: transform 0.1s;
}

/* While actually being held it squashes down and glows green
   (green = "you are safe while you see this", a game signal) */
.hold-button.holding {
  transform: translateY(5px) scale(0.98);
  background: var(--win-green);
  box-shadow:
    0 1px 0 #0f9468,
    0 0 50px rgba(52, 211, 153, 0.6);
}

.hold-hint {
  font-size: 0.75rem;
  color: var(--electric-blue);
  text-align: center;
  min-height: 1.2em;
}

/* The hint turns into a red warning when fatigue is high */
.hold-hint.warning {
  color: var(--danger-red);
  animation: pulse 0.5s ease-in-out infinite;
}

/* ---------- Screen 3B: Grab the Flag ---------- */

/* The arena: one big tap target. touch-action: none stops phones
   from scrolling or zooming when the player taps to drop. */
.flag-scene {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: clamp(300px, 46vh, 430px);
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}

/* The 3 AI race meters down the left edge. pointer-events: none
   so taps on them still count as tap-to-drop. */
.flag-rivals {
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 66px;
  display: flex;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

/* One rival: a thin track they climb from bottom to top (the top
   IS the flag height), with their emoji riding the climb */
.rival-track {
  position: relative;
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.rival-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--electric-blue), rgba(41, 229, 255, 0.25));
  transition: height 0.2s linear;
}

.rival-climber {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, 30%);
  font-size: 1.15rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
  transition: bottom 0.2s linear;
}

/* The shifting world: flag line + tower + slider. script.js
   translates it DOWN as the tower grows, so the top of the tower
   and the incoming block always stay in view. */
.flag-world {
  position: absolute;
  left: 84px;
  right: 10px;
  top: 8px;
  bottom: 0;
  transition: transform 0.35s ease-out;
}

/* The finish line the tower must reach, with the flag on it */
.flag-line {
  position: absolute;
  left: -6px;
  right: -6px;
  border-top: 3px dashed var(--win-green);
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.6));
}

.flag-line-emoji {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 1.6rem;
  animation: flag-wave 1.4s ease-in-out infinite;
}

/* One block of the tower (and the sliding block). script.js sets
   left, width and bottom. Blocks alternate the two brand colours. */
.tower-block {
  position: absolute;
  height: 26px; /* keep in sync with BLOCK_H in script.js */
  background: linear-gradient(180deg, var(--neon-pink), var(--neon-pink-deep));
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.tower-block.blue {
  background: linear-gradient(180deg, var(--electric-blue), #0d6f80);
}

/* The block sliding above the tower glows so it reads as "mine" */
.slider-block {
  box-shadow:
    0 0 18px rgba(255, 45, 155, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* A block that just landed gives a satisfying little snap-pulse */
.tower-block.landed {
  animation: block-snap 0.22s ease-out;
}

/* A sliced-off piece (or a missed block) tumbling off the tower */
.slice-piece {
  position: absolute;
  height: 26px;
  background: linear-gradient(180deg, var(--danger-red), #7a1f1f);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  pointer-events: none;
  animation: slice-fall 0.7s ease-in forwards;
}

/* "PERFECT!" flashing over the scene on a clean drop */
.perfect-flash {
  position: absolute;
  top: 32%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  font-family: "Bangers", "Titan One", "Arial Black", sans-serif;
  font-size: clamp(1.8rem, 8vw, 3rem);
  letter-spacing: 2px;
  color: var(--win-green);
  text-shadow: 0 0 24px rgba(52, 211, 153, 0.8), 0 3px 0 rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: bounce-in 0.3s ease-out;
}

/* ---------- Screen 3C: The Cube ---------- */

/* The inside of the cube: a dark room with glowing blue grid walls,
   so it reads as "inside a giant cube" with pure CSS, no image */
.cube-room {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: clamp(300px, 46vh, 430px);
  margin-top: 14px;
  border: 3px solid rgba(41, 229, 255, 0.45);
  border-radius: 10px;
  overflow: hidden;
  background-color: #05050f;
  background-image:
    linear-gradient(rgba(8, 8, 16, 0.55), rgba(8, 8, 16, 0.8)),
    repeating-linear-gradient(0deg,  transparent 0 42px, rgba(41, 229, 255, 0.18) 42px 44px),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(41, 229, 255, 0.18) 42px 44px);
  box-shadow: inset 0 0 70px rgba(41, 229, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The 3 contestants standing along the back wall */
.cube-contestants {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 6px;
  padding: 14px 8px 0;
}

/* One contestant panel: emoji, name, two dice, total */
.cube-contestant {
  position: relative;
  flex: 1;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 10px 6px;
  transition: filter 0.4s, background-color 0.4s, border-color 0.4s;
}

/* The player's own panel is marked in neon pink, like on the pole */
.cube-contestant.player-card {
  border-color: var(--neon-pink);
}

.cube-contestant.player-card .contestant-name {
  color: var(--neon-pink);
}

/* The two dice side by side */
.dice-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* One die: a white square holding a 3x3 grid of pips (dots) */
.die {
  position: relative;
  width: clamp(30px, 8.5vw, 46px);
  aspect-ratio: 1;
  background: var(--white);
  border-radius: 20%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 12%;
  box-shadow:
    inset -2px -3px 0 rgba(0, 0, 0, 0.18),
    0 3px 6px rgba(0, 0, 0, 0.45);
}

/* One pip. All 9 exist on every die; the rules below decide
   which ones show for the die's current value. */
.die .pip {
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #14141f;
  align-self: center;
  justify-self: center;
  opacity: 0;
}

/* Which pips light up for each value (pips read 1 to 9 like a page) */
.die[data-value="1"] .pip:nth-child(5),
.die[data-value="2"] .pip:nth-child(1), .die[data-value="2"] .pip:nth-child(9),
.die[data-value="3"] .pip:nth-child(1), .die[data-value="3"] .pip:nth-child(5), .die[data-value="3"] .pip:nth-child(9),
.die[data-value="4"] .pip:nth-child(1), .die[data-value="4"] .pip:nth-child(3), .die[data-value="4"] .pip:nth-child(7), .die[data-value="4"] .pip:nth-child(9),
.die[data-value="5"] .pip:nth-child(1), .die[data-value="5"] .pip:nth-child(3), .die[data-value="5"] .pip:nth-child(5), .die[data-value="5"] .pip:nth-child(7), .die[data-value="5"] .pip:nth-child(9),
.die[data-value="6"] .pip:nth-child(1), .die[data-value="6"] .pip:nth-child(3), .die[data-value="6"] .pip:nth-child(4), .die[data-value="6"] .pip:nth-child(6), .die[data-value="6"] .pip:nth-child(7), .die[data-value="6"] .pip:nth-child(9) {
  opacity: 1;
}

/* Before the throw, a die shows a "?" instead of pips */
.die.unrolled::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14141f;
  font-size: 1.1rem;
}

/* A die mid-throw tumbles over and over */
.die.rolling {
  animation: dice-tumble 0.35s linear infinite;
}

/* The "= 7" line under the dice */
.dice-total {
  min-height: 1.3em;
  font-size: 0.95rem;
  color: var(--electric-blue);
}

.dice-total.pop {
  animation: bounce-in 0.3s ease-out;
}

/* The loser: slammed against the wall, chained, drained of colour.
   Red here is a game signal (danger), not a brand colour. */
.cube-contestant.cuffed {
  border-color: var(--danger-red);
  background: rgba(248, 113, 113, 0.12);
  filter: saturate(0.35) brightness(0.7);
  animation: cuff-slam 0.5s ease-out;
}

/* The chains appear above the cuffed contestant */
.cuff-chain {
  position: absolute;
  top: -14px;
  font-size: 1.6rem;
  display: none;
  filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.7));
}

.cube-contestant.cuffed .cuff-chain {
  display: block;
  animation: bounce-in 0.4s ease-out;
}

/* The red phone: glowing and wiggling so it begs to be tapped */
.red-phone {
  margin-top: auto;
  margin-bottom: 14px;
  font-family: inherit;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  border: 3px solid var(--danger-red);
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  touch-action: manipulation; /* no double-tap zoom on phones */
  box-shadow: 0 0 28px rgba(248, 113, 113, 0.55);
  animation: phone-ring 1.2s ease-in-out infinite;
}

.red-phone-emoji {
  font-size: 2rem;
}

.red-phone-label {
  font-size: 0.65rem;
  letter-spacing: 0.6px;
  color: var(--danger-red);
}

.red-phone:active {
  transform: scale(0.95);
}

/* Once the dice are out (or the call is done) the phone goes quiet */
.red-phone.quiet {
  animation: none;
  opacity: 0.35;
  pointer-events: none;
  box-shadow: none;
}

/* The controls under the room, same layout as the pole's */
.cube-controls {
  width: 100%;
  max-width: 700px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ROLL reuses the big pink hold-button look; disabled = wait your turn */
.roll-button {
  touch-action: manipulation;
}

.roll-button:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* ---------- The red phone call card ---------- */

/* The dark layer behind the call. Tapping it (outside the card)
   skips the call, so a player is never trapped in the dialogue. */
.call-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 3, 10, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.call-card {
  width: 100%;
  max-width: 420px;
  background: #0d0d1a;
  border: 3px solid var(--danger-red);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 0 50px rgba(248, 113, 113, 0.35);
  animation: bounce-in 0.3s ease-out;
}

/* "Karl picks up..." */
.call-speaker {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: var(--danger-red);
}

/* What the friend on the phone says */
.call-line {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The order menu: one button per thing you can order */
.call-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.call-order {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--white);
  background: rgba(255, 45, 155, 0.15);
  border: 2px solid var(--neon-pink);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.call-order:active {
  transform: scale(0.97);
}

.call-done {
  margin-top: 0;
}

/* SKIP: quiet blue, always visible while the menu is up */
.call-skip {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--electric-blue);
  background: transparent;
  border: 2px solid var(--electric-blue);
  border-radius: 8px;
  padding: 8px 18px;
  cursor: pointer;
  touch-action: manipulation;
}

.call-skip:active {
  transform: scale(0.95);
}

/* ---------- Screen 3D: Sabotage Sprint ---------- */

/* The track: one big tap target. touch-action: none stops phones
   from scrolling or zooming while the player taps to run. */
.sprint-scene {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: clamp(300px, 46vh, 430px);
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 12px 10px;
  gap: 10px;
}

/* One lane: the team label above its running track */
.sprint-lane {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lane-label {
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.85);
}

.player-lane .lane-label {
  color: var(--neon-pink);
}

.rival-lane .lane-label {
  color: var(--electric-blue);
}

/* The running track itself. The two team colours edge the lanes. */
.lane-track {
  position: relative;
  height: clamp(64px, 11vh, 86px);
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 45, 155, 0.5);
  border-radius: 8px;
  overflow: hidden;
}

.rival-lane .lane-track {
  border-color: rgba(41, 229, 255, 0.5);
}

/* The smoke bomb blurs a whole lane while it lasts */
.lane-track.smoked {
  filter: blur(1.6px) brightness(0.8);
}

/* A runner (the captain's emoji). script.js sets the left position;
   the transition makes each tap-step glide instead of teleport. */
.runner {
  position: absolute;
  bottom: 6px;
  left: 2%;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  transition: left 0.15s linear;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

/* A tap makes the runner do a tiny hop */
.runner.hopping {
  animation: runner-hop 0.18s ease-out;
}

/* Banana peel: the runner spins out for a moment */
.runner.stumbled {
  animation: stumble-spin 0.5s linear infinite;
}

/* Boost skip: a big leap forward */
.runner.leaping {
  animation: runner-leap 0.7s ease-out;
}

/* An obstacle on the track; it flips away once the runner passes */
.lane-obstacle {
  position: absolute;
  bottom: 8px;
  font-size: 1.1rem;
  opacity: 0.9;
  transition: transform 0.4s ease-in, opacity 0.4s;
}

.lane-obstacle.cleared {
  transform: translateY(26px) rotate(120deg);
  opacity: 0;
}

/* The fork marker (where the weapon choice happens) */
.fork-marker {
  position: absolute;
  top: 2px;
  font-size: 1rem;
  opacity: 0.85;
}

/* The finish line: a dashed line with the flag */
.finish-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 3px dashed var(--win-green);
}

.finish-marker::after {
  content: "🏁";
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 1rem;
}

/* A dropped effect emoji (the banana, the smoke puff, the whoosh) */
.lane-effect {
  position: absolute;
  bottom: 10px;
  font-size: 1.5rem;
  z-index: 1;
  animation: bounce-in 0.3s ease-out;
}

/* ---------- The weapon fork panel ---------- */

.weapon-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(5, 5, 15, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}

.weapon-title {
  font-family: "Bangers", "Titan One", "Arial Black", sans-serif;
  letter-spacing: 2px;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  color: var(--white);
  text-shadow:
    0 3px 0 var(--neon-pink),
    0 0 30px rgba(255, 45, 155, 0.45);
}

.weapon-subtitle {
  font-size: 0.85rem;
  color: var(--electric-blue);
}

.weapon-cards {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

/* One weapon card: emoji, name, and what it does */
.weapon-card {
  font-family: inherit;
  color: var(--white);
  background: rgba(255, 45, 155, 0.12);
  border: 2px solid var(--neon-pink);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.weapon-card:active {
  transform: scale(0.97);
}

.weapon-card-emoji {
  font-size: 1.7rem;
}

.weapon-card-name {
  font-size: 0.95rem;
  display: block;
}

.weapon-card-desc {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.75);
  display: block;
  letter-spacing: 0.3px;
}

/* "The rival picked..." line after the player chooses */
.weapon-note {
  font-size: 0.85rem;
  color: var(--electric-blue);
  min-height: 1.3em;
}

/* ---------- Screen 3E: Buried Alive ---------- */

.buried-scene {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: clamp(300px, 46vh, 430px);
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  gap: 6px;
}

/* A jolt runs through the scene each time somebody cracks */
.buried-scene.jolt {
  animation: scene-jolt 0.4s ease-out;
}

/* The million-dollar pile: the test, front and centre */
.prize-pile {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
}

.prize-amount {
  font-family: "Bangers", "Titan One", "Arial Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: #ffd23f; /* prize gold: a game signal, like the meters */
  text-shadow: 0 0 18px rgba(255, 210, 63, 0.55);
}

/* The 2x2 grid of buried contestants */
.buried-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* One buried contestant: their emoji sunk into a mound of dirt
   (the brown lower half of the panel is the "dirt") */
.buried-contestant {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px 10px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.4) 52%, rgba(74, 47, 29, 0.85) 52%),
    rgba(0, 0, 0, 0.4);
  transition: filter 0.4s, border-color 0.4s;
}

.buried-contestant.player-card {
  border-color: var(--neon-pink);
}

.buried-contestant.player-card .contestant-name {
  color: var(--neon-pink);
}

/* A contestant who took the money and tapped out */
.buried-contestant.tapped-out {
  filter: saturate(0.3) brightness(0.65);
  border-color: rgba(255, 255, 255, 0.1);
  animation: cuff-slam 0.5s ease-out; /* reuse the jolt-shake */
}

/* The little "took $210,000" line under a tapped-out contestant */
.buried-payout {
  font-size: 0.58rem;
  color: #ffd23f;
  min-height: 1.2em;
  letter-spacing: 0.3px;
}

/* "Child Genius took the money!" beat line */
.buried-beat {
  font-size: 0.8rem;
  color: var(--danger-red);
  text-align: center;
  min-height: 1.3em;
}

/* The climbing guaranteed offer */
.offer-box {
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #ffd23f;
  border-radius: 10px;
  padding: 8px 22px;
  box-shadow: 0 0 24px rgba(255, 210, 63, 0.25);
}

.offer-label {
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.75);
}

.offer-amount {
  font-family: "Bangers", "Titan One", "Arial Black", sans-serif;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  letter-spacing: 2px;
  color: #ffd23f;
  text-shadow: 0 0 22px rgba(255, 210, 63, 0.5);
}

/* Each offer tick gives the number a tiny greedy pulse */
.offer-amount.tick {
  animation: offer-pulse 0.25s ease-out;
}

/* The two choices under the scene */
.buried-controls {
  width: 100%;
  max-width: 700px;
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

/* STAY BURIED: the calm, steady choice (green = safe game signal) */
.stay-button {
  flex: 1;
  font-family: inherit;
  font-size: clamp(0.95rem, 4vw, 1.3rem);
  color: var(--win-green);
  background: rgba(0, 0, 0, 0.55);
  border: 3px solid var(--win-green);
  border-radius: 8px;
  padding: 18px 10px;
  cursor: pointer;
  touch-action: manipulation;
}

.stay-button:active {
  transform: scale(0.96);
}

/* TAKE THE MONEY: big, glowing, deliberately tempting */
.take-button {
  flex: 1.4;
  font-family: inherit;
  font-size: clamp(1rem, 4.5vw, 1.4rem);
  color: var(--white);
  background: var(--neon-pink);
  border: none;
  border-radius: 8px;
  padding: 18px 10px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    0 6px 0 var(--neon-pink-deep),
    0 0 40px rgba(255, 45, 155, 0.55);
  animation: pulse 1.2s ease-in-out infinite;
}

.take-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--neon-pink-deep);
}

/* ---------- The lobby's million-dollar echo ---------- */

.lobby-pile {
  margin-top: 12px;
  font-size: clamp(0.75rem, 3vw, 1rem);
  letter-spacing: 2px;
  color: #ffd23f;
  text-shadow: 0 0 16px rgba(255, 210, 63, 0.45);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---------- Screen 3F: Train Tracks (the finale) ---------- */

.train-scene {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: clamp(300px, 46vh, 430px);
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  overflow: hidden;
}

/* The main line: a horizontal rail into the fork */
.track-main {
  position: absolute;
  left: 4%;
  top: 50%;
  width: 52%;
  height: 6px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.55) 0 14px, rgba(255, 255, 255, 0.15) 14px 22px);
  border-radius: 3px;
}

/* The two branches out of the fork, rotated from the fork point */
.track-branch {
  position: absolute;
  left: 56%;
  top: 50%;
  width: 40%;
  height: 6px;
  transform-origin: left center;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.55) 0 14px, rgba(255, 255, 255, 0.15) 14px 22px);
  border-radius: 3px;
}

.track-branch-left  { transform: rotate(-24deg); }
.track-branch-right { transform: rotate(24deg); }

/* The diverter: the moment of truth, glowing at the fork */
.diverter {
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.8));
  animation: pulse 1.2s ease-in-out infinite;
  z-index: 2;
}

/* The diverter flares the instant fate is revealed */
.diverter.flash {
  animation: diverter-flash 0.5s ease-out;
}

/* The two track ends: ❓ until the reveal */
.branch-end {
  position: absolute;
  font-size: 1.6rem;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

.branch-end-left  { left: 91%; top: 24%; transform: translate(-50%, -50%); }
.branch-end-right { left: 91%; top: 76%; transform: translate(-50%, -50%); }

.branch-label {
  position: absolute;
  font-size: 0.6rem;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.65);
}

.branch-label-left  { left: 62%; top: 12%; }
.branch-label-right { left: 62%; bottom: 12%; }

/* The signal light tell (Strategic Thinking): flickers near the fork */
.signal-light {
  position: absolute;
  left: 48%;
  top: 26%;
  font-size: 1rem;
  color: var(--electric-blue);
  animation: signal-flicker 1s linear infinite;
  z-index: 2;
}

/* The train, carrying the heart. script.js moves it with a CSS
   transition, so the roll glides and the wait feels long. */
.train {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(0, -72%);
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  z-index: 3;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.7));
}

.train-heart {
  font-size: 0.75em;
  margin-left: -6px;
}

/* The cartoon smash: the heart breaks, the train shakes, dizzy
   stars, comedic, never gory */
.train.smashed {
  animation: cuff-slam 0.6s ease-out;
}

.train-heart.cracked {
  animation: heart-crack 0.9s ease-out;
}

/* "Here it comes..." / "SAFE!" beats */
.train-beat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--electric-blue);
  min-height: 1.3em;
  z-index: 2;
}

/* ---------- The lever controls ---------- */

.train-controls {
  width: 100%;
  max-width: 700px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lever-row {
  display: flex;
  gap: 10px;
}

/* The two lever positions: blue info-style until picked */
.lever-button {
  flex: 1;
  font-family: inherit;
  font-size: clamp(0.9rem, 3.8vw, 1.2rem);
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  border: 3px solid var(--electric-blue);
  border-radius: 8px;
  padding: 14px 8px;
  cursor: pointer;
  touch-action: manipulation;
}

.lever-button:active {
  transform: scale(0.96);
}

/* The set lever position lights up pink (pink = "press me" chosen) */
.lever-button.set {
  border-color: var(--neon-pink);
  background: rgba(255, 45, 155, 0.18);
  box-shadow: 0 0 20px rgba(255, 45, 155, 0.45);
}

.lever-button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* PULL: the big commit, the point of no return */
.commit-button {
  font-family: inherit;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  color: var(--white);
  background: var(--neon-pink);
  border: none;
  border-radius: 8px;
  padding: 16px 10px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    0 6px 0 var(--neon-pink-deep),
    0 0 40px rgba(255, 45, 155, 0.55);
}

.commit-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--neon-pink-deep);
}

.commit-button:disabled {
  opacity: 0.4;
  cursor: default;
  animation: none;
  box-shadow: 0 6px 0 var(--neon-pink-deep);
}

/* The one-time peek: quiet red, like the cube's phone */
.peek-button {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--danger-red);
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--danger-red);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  touch-action: manipulation;
}

.peek-button:active {
  transform: scale(0.96);
}

/* ---------- Screen 4: results ---------- */

.results-screen {
  justify-content: center; /* everything sits centred, above the fold */
}

.results-card {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  position: relative;
  z-index: 2; /* above the confetti */
}

/* The win / eliminated badge art, with a bounce and a neon glow */
.results-badge {
  width: clamp(120px, 34vw, 190px);
  filter: drop-shadow(0 0 28px rgba(255, 45, 155, 0.45));
  animation: bounce-in 0.5s ease-out;
}

.results-headline {
  font-size: clamp(2.4rem, 12vw, 4rem);
  line-height: 1;
  color: var(--white);
  text-shadow:
    0 4px 0 var(--neon-pink),
    0 0 40px rgba(255, 45, 155, 0.55);
  transform: rotate(-2deg);
  animation: bounce-in 0.5s ease-out;
}

.results-line {
  font-size: clamp(0.95rem, 4vw, 1.2rem);
  color: var(--white);
}

/* The small stat line: character, result, outlasted, time */
.results-stats {
  font-size: 0.75rem;
  color: var(--electric-blue);
  letter-spacing: 0.5px;
}

/* PLAY AGAIN reuses the big pink play button look, sized for this card */
.play-again-button {
  margin-top: 14px;
  width: 100%;
  padding: 18px 20px;
  font-size: clamp(1.3rem, 5.5vw, 1.8rem);
}

/* INVITE A FRIEND: neon pink like all main actions, glowing */
.invite-button {
  width: 100%;
  font-family: inherit;
  font-size: clamp(1.3rem, 5.5vw, 1.8rem);
  color: var(--white);
  background: var(--neon-pink);
  border: 3px solid var(--electric-blue); /* a blue edge so it stands apart */
  border-radius: 8px;
  padding: 18px 20px;
  cursor: pointer;
  box-shadow:
    0 6px 0 var(--neon-pink-deep),
    0 0 40px rgba(255, 45, 155, 0.55);
  animation: pulse 1.6s ease-in-out infinite;
  transition: transform 0.1s;
}

.invite-button:hover {
  transform: scale(1.03);
}

.invite-button:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 var(--neon-pink-deep),
    0 0 40px rgba(255, 45, 155, 0.55);
}

/* The warm little line under the invite button */
.invite-nudge {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

/* "Copied! Send it to a friend" feedback */
.invite-status {
  font-size: 0.9rem;
  color: var(--win-green);
  min-height: 1.3em;
}

/* Final fallback: the link shown as text you can select and copy.
   The page normally blocks selecting, so this element allows it again. */
.invite-link {
  font-size: 0.8rem;
  color: var(--electric-blue);
  word-break: break-all;
  user-select: text;
  -webkit-user-select: text;
}

/* The small feedback-form link for the 27 testers.
   Deliberately quieter than the two star buttons above it. */
.feedback-link {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--electric-blue);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--electric-blue);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

.feedback-link:active {
  transform: scale(0.95);
}

/* The confetti layer covers the whole results screen */
.confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; /* confetti can never block a button tap */
}

/* One confetti piece: script.js randomises where and how fast */
.confetti span {
  position: absolute;
  top: -50px;
  animation: confetti-fall linear forwards;
}

/* ---------- Floating background emoji ---------- */

.emoji-float {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* you can never accidentally tap them */
}

.emoji-float span {
  position: absolute;
  bottom: -60px;
  font-size: 2rem;
  opacity: 0.5;
  animation: float-up 9s linear infinite;
}

/* ---------- Animations ---------- */

/* Emoji drift from the bottom to the top of the screen */
@keyframes float-up {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-110vh) rotate(30deg); }
}

/* Things gently grow and shrink (PLAY button, the hint) */
@keyframes pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}

/* The title pops in when the page loads */
@keyframes title-pop {
  from { transform: rotate(-3deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(-3deg) scale(1);   opacity: 1; }
}

/* Panels and messages bounce in */
@keyframes bounce-in {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* A tired character trembling on the pole */
@keyframes tremble {
  0%   { transform: translateX(-2px) rotate(-2deg); }
  50%  { transform: translateX(2px) rotate(2deg); }
  100% { transform: translateX(-2px) rotate(-2deg); }
}

/* Confetti tumbling from the top to below the screen */
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(110vh) rotate(540deg); }
}

/* A landed block snapping into place */
@keyframes block-snap {
  0%   { transform: scaleY(0.55) scaleX(1.12); }
  60%  { transform: scaleY(1.15) scaleX(0.96); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* A sliced-off piece tumbling down off the tower */
@keyframes slice-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(340px) rotate(50deg); opacity: 0; }
}

/* The flag waving on the finish line */
@keyframes flag-wave {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(8deg); }
}

/* The diverter's flare when fate is revealed */
@keyframes diverter-flash {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(2.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* The signal light's nervous flicker */
@keyframes signal-flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 1; }
  50%      { opacity: 0.15; }
  55%      { opacity: 1; }
}

/* The heart's cartoon crack: a wobble, a shrink, dizzy and done */
@keyframes heart-crack {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(-20deg) scale(1.25); }
  50%  { transform: rotate(16deg) scale(0.9); }
  75%  { transform: rotate(-10deg) scale(0.75); }
  100% { transform: rotate(0deg) scale(0.85); }
}

/* The whole scene jolts when a contestant cracks */
@keyframes scene-jolt {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* The offer number's greedy little pulse on each tick */
@keyframes offer-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* A runner's tiny hop on each tap */
@keyframes runner-hop {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Slipping on the banana peel */
@keyframes stumble-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The boost skip: a big arcing leap */
@keyframes runner-leap {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-26px) scale(1.25); }
  100% { transform: translateY(0) scale(1); }
}

/* A die tumbling mid-throw */
@keyframes dice-tumble {
  0%   { transform: rotate(0deg)   translateY(0); }
  25%  { transform: rotate(90deg)  translateY(-4px); }
  50%  { transform: rotate(180deg) translateY(0); }
  75%  { transform: rotate(270deg) translateY(-4px); }
  100% { transform: rotate(360deg) translateY(0); }
}

/* The loser getting slammed against the cube wall */
@keyframes cuff-slam {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-7px); }
  40%  { transform: translateX(7px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* The red phone wiggling like it is ringing */
@keyframes phone-ring {
  0%, 55%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-6deg); }
  20% { transform: rotate(6deg); }
  30% { transform: rotate(-4deg); }
  40% { transform: rotate(4deg); }
}