/* ==========================================================================
   Fake Jackbox — party-game look: deep indigo stage, white "sticker" cards
   with hard shadows, chunky yellow buttons, one accent colour per answer.
   Used by every game page (style.css is the older look, kept for the
   debug/gamepad templates).
   ========================================================================== */

:root {
  --stage: #1d1147;
  --ink: #150c36;          /* outlines, hard shadows, text on light surfaces */
  --paper: #ffffff;
  --yellow: #ffd23f;
  --pink: #ff4f9a;
  --cyan: #3ddcff;
  --green: #4be3a0;
  --muted: rgba(255, 255, 255, 0.72);
  --radius: 22px;
  --shadow: 7px 7px 0 var(--ink);
  --display: 'Fredoka One', 'Rubik', system-ui, sans-serif;
  --body: 'Rubik', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* --- Stage --- */
body {
  margin: 0;
  font-family: var(--body);
  color: #fff;
  text-align: center;
  background-color: var(--stage);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 79, 154, 0.38), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(61, 220, 255, 0.30), transparent 40%),
    radial-gradient(circle at 80% 92%, rgba(255, 210, 63, 0.22), transparent 42%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.6px);
  background-size: auto, auto, auto, 26px 26px;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* min-height (not height) so long lists scroll instead of being cut off */
  min-height: 100vh;
  padding: 20px 16px;
  overflow-x: hidden;
  /* long unbroken answers wrap instead of running off the screen */
  overflow-wrap: anywhere;
}

/* --- Type --- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  margin: 8px 0;
  text-shadow: 3px 3px 0 var(--ink);
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: 0.5px; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
p  { margin: 8px 0; }

/* Wordmark: tilted like a sticker */
.logo {
  display: inline-block;
  color: var(--yellow);
  transform: rotate(-3deg);
  margin-bottom: 14px;
}
.logo span { color: var(--pink); }
.logo.small { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: 4px; }

/* Small pill above a card: "vote on your phone", round label */
.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cyan);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 4px 14px;
  margin: 0 0 12px;
}
.eyebrow.pink { background: var(--pink); color: #fff; }
.eyebrow.yellow { background: var(--yellow); }

.game-code {
  font-family: var(--display);
  letter-spacing: 6px;
  color: var(--yellow);
}
.topline { color: var(--muted); margin: 0 0 6px; }

/* --- Buttons --- */
button, .link-button {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 14px 30px;
  margin: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
button:hover, .link-button:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
button:active, .link-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
button:disabled {
  background: #b9b4cc;
  color: #5b5578;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: 0 6px 0 var(--ink);
}

.quiet-button {
  font-family: var(--body);
  font-size: 0.95rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
  padding: 9px 18px;
  margin-top: 18px;
}
.quiet-button:hover { box-shadow: none; background: rgba(255, 255, 255, 0.24); }
.quiet-button:active { box-shadow: none; }

#quit-btn { background: var(--paper); }

/* --- Cards --- */
.card {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px;
  margin: 14px 0;
  width: min(880px, 94vw);
  animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.card h2, .card h3 { text-shadow: none; }
.card.narrow { width: min(460px, 94vw); }

@keyframes pop-in {
  from { transform: scale(0.92) rotate(-1.5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* The prompt being answered / voted on */
.prompt {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  margin: 6px 0 18px;
}

/* --- Lists --- */
ul, ol { list-style: none; padding: 0; margin: 12px 0; }
li {
  background: #f1eefc;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  margin: 10px 0;
  padding: 12px 18px;
  font-size: 1.25rem;
  font-weight: 500;
}

/* Scoreboard rows: the bar behind the text is sized by --pct (set in JS) */
#results-list li {
  text-align: left;
  background: linear-gradient(90deg, var(--cyan) var(--pct, 0%), #f1eefc var(--pct, 0%));
  animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
#results-list li:nth-child(1) { background: linear-gradient(90deg, var(--yellow) var(--pct, 0%), #f1eefc var(--pct, 0%)); }
#results-list li:nth-child(2) { animation-delay: 0.08s; }
#results-list li:nth-child(3) { animation-delay: 0.16s; }
#results-list li:nth-child(n+4) { animation-delay: 0.24s; }
li.me { box-shadow: 0 0 0 4px var(--pink); }
/* The overall winner gets a badge instead of an emoji */
li.champion::after {
  content: "WINNER";
  float: right;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  margin-top: 2px;
}

/* --- Avatars (colour + shape, drawn by static/avatars.js) --- */
.avatar { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.avatar svg { display: block; }
.player-list li, .player-bar .name { display: inline-flex; align-items: center; }
.winner-meta .avatar { margin-right: 6px; }
/* On coloured surfaces (score bars, the yellow name chip) the avatar sits on
   a white tile so a yellow shape on a yellow bar is still visible */
#results-list .avatar, .player-bar .avatar {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 3px;
}

.picker-label { font-weight: 500; margin: 6px 0 0; }
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.picker label { cursor: pointer; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }
.picker .swatch {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid transparent;
  border-radius: 14px;
}
.picker .swatch .avatar { margin: 0; }
.picker input:checked + .swatch { border-color: var(--ink); background: #f1eefc; box-shadow: 0 4px 0 var(--ink); }
.picker input:focus-visible + .swatch { outline: 3px solid var(--cyan); }
.picker input:disabled + .swatch { opacity: 0.22; cursor: not-allowed; }
.form-error {
  width: 100%;
  font-weight: 500;
  color: #8a1238;
  background: #ffd9ea;
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0;
}

/* --- Forms / inputs --- */
input[type="text"], #answer-input {
  font: inherit;
  font-size: 1.15rem;           /* 16px+ stops phones zooming in on focus */
  color: var(--ink);
  background: var(--paper);
  padding: 14px 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  box-shadow: inset 0 3px 0 rgba(21, 12, 54, 0.12);
}
input:focus { outline: 4px solid var(--cyan); outline-offset: 2px; }
label { font-weight: 500; }

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
}
.stack button { width: 100%; max-width: 440px; margin: 2px 0; white-space: normal; }

.hint { font-size: 0.95rem; color: var(--muted); margin: 8px 0; }
.card .hint { color: #5b5578; }
.inline-form { display: inline; }
.hidden { display: none !important; }
.spaced-top { margin-top: 16px; }

/* --- Landing: one card per game --- */
.game-cards { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin: 22px 0 6px; }
.game-card {
  width: min(360px, 92vw);
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 16px;
}
.game-card h2 { text-shadow: none; font-size: 2rem; }
.game-card .players { font-size: 0.9rem; font-weight: 500; color: #5b5578; }
.game-card.back_and_forth { transform: rotate(-1.2deg); }
.game-card.last_shape { background: var(--cyan); transform: rotate(-0.6deg); }
.game-card.last_shape .players { color: var(--ink); }
.game-card.deeper { background: linear-gradient(160deg, #24344d, #101826); color: #e8eef7; border-color: var(--ink); transform: rotate(0.8deg); }
.game-card.deeper h2 { color: var(--green); }
.game-card.deeper .players { color: #9fb0c8; }
/* Shadow Council wears its own colours: gold on black and grey */
.game-card.shadow_council {
  transform: rotate(1.2deg);
  background: linear-gradient(160deg, #26242b, #0f0e12);
  color: #e9e4d4;
  border-color: #d4af37;
  box-shadow: 7px 7px 0 #000;
}
.game-card.shadow_council h2 { color: #d4af37; letter-spacing: 1px; }
.game-card.shadow_council .players { color: #9a968c; }
.game-card.shadow_council button:disabled { background: #3a3840; color: #9a968c; border-color: #6b6658; box-shadow: 0 6px 0 #000; }

/* --- Landing: how it works --- */
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 0;
  max-width: 900px;
}
.steps li {
  flex: 1 1 220px;
  max-width: 270px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}
.steps b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--yellow); }

.floaty { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(-1deg); }
}

/* --- Lobby --- */
.lobby-container {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 44px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 10px;
}
.qr-section {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px 12px;
  transform: rotate(-1.5deg);
}
.qr-section h2 { text-shadow: none; }
.qr-code { width: min(40vh, 280px); height: auto; display: block; margin: 4px auto; }
.join-url { font-size: 0.9rem; font-weight: 500; margin: 6px 0 0; }
.players-section { min-width: 280px; max-width: 420px; }
.player-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.player-list li {
  margin: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 400;
  background: var(--paper);     /* white, so every avatar colour reads on it */
  animation: pop-in 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

/* --- Host: answering --- */
.progress-container {
  width: 100%;
  max-width: 520px;
  height: 26px;
  margin: 14px auto 4px;
  background: #e6e1f7;
  border: 3px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(45deg, var(--green) 0 14px, #7af0bb 14px 28px);
  transition: width 0.35s ease;
}
#answer-progress, #final-progress { font-weight: 500; font-size: 1.15rem; }
#answer-progress.flash { animation: flash 0.4s ease-in-out; }
@keyframes flash { 50% { transform: scale(1.12); color: #0a8f58; } }

/* --- Host: head-to-head vote --- */
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}
.vs {
  align-self: center;
  font-family: var(--display);
  font-size: 1.5rem;
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: rotate(-8deg);
}
.answer-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 18px 16px 14px;
  min-width: 0;
}
.answer-card.a { background: #fff4c7; }
.answer-card.b { background: #d5f6ff; }
.vote-label {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  margin: 0;
}
.vote-row { display: flex; align-items: center; gap: 10px; }
.vote-bar-bg {
  flex: 1;
  min-width: 0;
  height: 22px;
  background: rgba(21, 12, 54, 0.12);
  border: 3px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.vote-bar { height: 100%; width: 0%; transition: width 0.4s ease-in-out; }
.answer-card.a .vote-bar { background: var(--yellow); }
.answer-card.b .vote-bar { background: var(--cyan); }
.vote-count { font-family: var(--display); font-size: 1.4rem; min-width: 1.4em; }

/* --- Host: winner --- */
.winner-question { font-weight: 500; font-size: 1.15rem; color: #5b5578; margin-bottom: 12px; }
.winner-answer-container {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  background: var(--yellow);
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 18px 20px;
  transform: rotate(-1deg);
  animation: pop-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.1s both;
}
.winner-meta { font-size: 1.05rem; font-weight: 500; margin-top: 14px; }

/* --- Host: final round answers --- */
#final-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#final-answers li { margin: 0; font-family: var(--display); font-weight: 400; background: #fff4c7; }
#final-answers li:nth-child(3n+2) { background: #d5f6ff; }
#final-answers li:nth-child(3n+3) { background: #ffd9ea; }

/* --- Confetti (final scores) --- */
.confetti {
  position: fixed;
  top: -24px;
  width: 12px;
  height: 18px;
  border: 2px solid var(--ink);
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(112vh) rotate(720deg); }
}

/* --- Phones --- */
body.phone { justify-content: flex-start; padding-top: 18px; }
.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 22px;
}
.player-bar .name {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 5px 16px;
  max-width: 62%;
}
.player-bar .code { font-family: var(--display); letter-spacing: 3px; color: var(--muted); }

body.phone button:hover { transform: none; box-shadow: 0 6px 0 var(--ink); filter: none; }  /* no hover lift on touch */
body.phone button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }

#standby-screen {
  width: 100%;
  max-width: 480px;
  margin-top: 8vh;
  padding: 30px 22px;
  font-size: 1.25rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.10);
  border: 3px dashed rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
}
/* Three bouncing dots above the waiting message */
#standby-screen::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 4px auto 22px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: -26px 0 0 var(--pink), 26px 0 0 var(--cyan);
  animation: bounce 0.9s ease-in-out infinite alternate;
}
@keyframes bounce { from { transform: translateY(6px); } to { transform: translateY(-8px); } }

/* Prompt and vote question on the phone read as a speech bubble */
#prompt-text, body.phone #vote-question {
  width: 100%;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 20px 18px;
  margin: 0 0 18px;
}

.vote-btn {
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  text-align: left;
  background: var(--paper);
  padding: 16px 18px;
  border-left-width: 14px;
}
.vote-btn[data-choice="a"] { border-left-color: var(--yellow); }
.vote-btn[data-choice="b"] { border-left-color: var(--cyan); }
.final-vote-btn { border-left-color: var(--pink); }
.final-vote-container { max-width: none; }

body.phone #results-screen h2 { margin-bottom: 4px; }
body.phone #results-list { width: 100%; }

/* --- Small screens --- */
@media (max-width: 700px) {
  .card { padding: 20px 18px; }
  .versus { grid-template-columns: 1fr; }
  .vs { justify-self: center; width: 46px; height: 46px; font-size: 1.2rem; }
  .qr-section { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Big-screen extras (static/party_host.js)
   ========================================================================== */

/* --- Sound on/off (bottom-left corner) --- */
.sound-toggle { position: fixed; left: 14px; bottom: 14px; margin: 0; z-index: 30; }
.sound-toggle.off { background: var(--pink); border-color: var(--ink); color: #fff; }

/* --- Heckle / sound toasts (top-right) --- */
.toast-box {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  max-width: min(420px, 80vw);
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 10px 16px;
  animation: toast-in 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both, toast-out 0.4s ease 3.8s both;
}
.toast-who { display: flex; align-items: center; font-weight: 500; font-size: 0.95rem; color: #5b5578; }
.toast-text { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1.15; }
.toast-to { display: block; font-size: 0.9rem; color: #5b5578; margin-top: 2px; }
@keyframes toast-in { from { transform: translateX(60px) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-16px); opacity: 0; } }

/* --- Arena: avatars steered from the phones' gamepads --- */
.arena {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(to top, rgba(21, 12, 54, 0.75), rgba(21, 12, 54, 0));
  border-bottom: 6px solid var(--yellow);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.arena.active { opacity: 1; }
.arena-player { position: absolute; left: 0; top: 0; width: 54px; text-align: center; will-change: transform; }
.arena-player .avatar { margin: 0; filter: drop-shadow(0 4px 0 rgba(21, 12, 54, 0.6)); }
.arena-player span:last-child { display: block; font-size: 0.75rem; font-weight: 700; white-space: nowrap; margin-left: -30px; margin-right: -30px; }
.arena-player.boop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 27px;
  width: 20px;
  height: 20px;
  margin: -10px;
  border: 4px solid #fff;
  border-radius: 50%;
  animation: boop 0.45s ease-out forwards;
}
@keyframes boop { to { transform: scale(12); opacity: 0; } }

/* ==========================================================================
   Stingers: full-screen transition animations (PartyHost.stinger)
   ========================================================================== */
.stinger {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  font-family: var(--display);
  animation: st-out var(--ms) linear both;
}
@keyframes st-out { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }
.stinger i { position: absolute; display: block; }
.st-title, .st-sub, .st-badge { position: relative; z-index: 2; }
.st-title {
  font-size: clamp(3.5rem, 15vw, 12rem);
  line-height: 0.95;
  color: #fff;
  text-shadow: 0.06em 0.06em 0 var(--ink);
  padding: 0 4vw;
}
.st-sub {
  font-size: clamp(1.2rem, 3.2vw, 2.6rem);
  color: var(--ink);
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 0.2em 1em;
}
.st-title.slam { animation: st-slam 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 0.25s both, st-shake 0.3s linear 0.7s 2; }
@keyframes st-slam { from { transform: scale(3.4) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }
@keyframes st-shake { 25% { translate: -10px 6px; } 50% { translate: 8px -6px; } 75% { translate: -6px 4px; } }
.st-sub.rise { animation: st-rise 0.4s ease-out 0.7s both; }
.st-sub.rise.late { animation-delay: 1.3s; }
@keyframes st-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.st-sub.drop { animation: st-drop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both; }
@keyframes st-drop { from { transform: translateY(-60px) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
.st-title.pop.late { animation: st-pop 0.6s cubic-bezier(0.2, 1.7, 0.4, 1) 0.9s both; color: var(--ink); text-shadow: 0.05em 0.05em 0 #fff; }
@keyframes st-pop { from { transform: scale(0) rotate(12deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }

/* round: diagonal bands */
.st-round .band { left: -30%; width: 160%; height: 42%; transform-origin: center; }
.st-round .b1 { top: -8%;  background: var(--pink);   animation: st-band-l var(--ms) cubic-bezier(0.7, 0, 0.3, 1) both; }
.st-round .b2 { top: 29%;  background: var(--yellow); animation: st-band-r var(--ms) cubic-bezier(0.7, 0, 0.3, 1) 0.06s both; }
.st-round .b3 { top: 66%;  background: var(--cyan);   animation: st-band-l var(--ms) cubic-bezier(0.7, 0, 0.3, 1) 0.12s both; }
@keyframes st-band-l { 0% { transform: translateX(-130%) skewY(-8deg); } 18%, 80% { transform: translateX(0) skewY(-8deg); } 100% { transform: translateX(130%) skewY(-8deg); } }
@keyframes st-band-r { 0% { transform: translateX(130%) skewY(-8deg); } 18%, 80% { transform: translateX(0) skewY(-8deg); } 100% { transform: translateX(-130%) skewY(-8deg); } }

/* vote: two halves and a spinning badge */
.st-vote .half { top: 0; width: 50.5%; height: 100%; }
.st-vote .left  { left: 0;  background: var(--yellow); border-right: 6px solid var(--ink); animation: st-half-l var(--ms) cubic-bezier(0.7, 0, 0.3, 1) both; }
.st-vote .right { right: 0; background: var(--cyan);   border-left: 6px solid var(--ink);  animation: st-half-r var(--ms) cubic-bezier(0.7, 0, 0.3, 1) both; }
@keyframes st-half-l { 0% { transform: translateX(-101%); } 20%, 78% { transform: none; } 100% { transform: translateX(-101%); } }
@keyframes st-half-r { 0% { transform: translateX(101%); } 20%, 78% { transform: none; } 100% { transform: translateX(101%); } }
.st-badge {
  display: grid;
  place-items: center;
  width: 46vmin;
  height: 46vmin;
  font-size: 13vmin;
  color: #fff;
  background: var(--ink);
  border: 1.2vmin solid #fff;
  border-radius: 50%;
  animation: st-spin 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.3s both;
}
@keyframes st-spin { from { transform: scale(0) rotate(-270deg); } to { transform: scale(1) rotate(-8deg); } }

/* final: dark stage, letters dropping in */
.st-final .dark { inset: 0; background: rgba(13, 7, 36, 0.94); animation: st-flash 0.5s steps(2) 3; }
@keyframes st-flash { 50% { background: rgba(255, 79, 154, 0.9); } }
.st-final .scan { inset: -50% 0; background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 255, 255, 0.06) 10px 12px); animation: st-scan 0.6s linear infinite; }
@keyframes st-scan { to { transform: translateY(24px); } }
.st-title.letters { font-size: clamp(3rem, 12vw, 10rem); }
.st-title.letters span { display: inline-block; white-space: nowrap; margin: 0 0.12em; }
.st-title.letters b { display: inline-block; font-weight: 400; animation: st-letter 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.st-title.letters b:nth-child(3n+1) { color: var(--yellow); }
.st-title.letters b:nth-child(3n+2) { color: var(--pink); }
.st-title.letters b:nth-child(3n+3) { color: var(--cyan); }
@keyframes st-letter { from { transform: translateY(-110vh) rotate(40deg); } to { transform: none; } }

/* winner: turning sunburst */
.st-winner .burst {
  width: 240vmax;
  height: 240vmax;
  left: 50%;
  top: 50%;
  margin: -120vmax;
  background: repeating-conic-gradient(var(--yellow) 0 10deg, #ffe89a 10deg 20deg);
  animation: st-turn 12s linear infinite, st-rise 0.3s ease-out both;
}
@keyframes st-turn { to { rotate: 360deg; } }

/* ==========================================================================
   Phone: things to do while waiting (heckles, soundboard, gamepad)
   ========================================================================== */
.extras { width: 100%; max-width: 480px; margin-top: 22px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button {
  flex: 1;
  font-size: 1rem;
  padding: 9px 6px;
  margin: 0;
  width: auto;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.tabs button.active { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
body.phone .tabs button:hover, body.phone .tabs button:active { box-shadow: none; transform: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid2 button { font-family: var(--body); font-weight: 700; font-size: 1rem; padding: 14px 8px; margin: 0; width: 100%; background: var(--paper); }
.grid2.sounds button { background: var(--cyan); text-transform: capitalize; }
button.cooling { opacity: 0.45; }

.pad { display: flex; align-items: center; justify-content: space-between; gap: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.dpad { display: grid; grid-template: repeat(3, 62px) / repeat(3, 62px); gap: 4px; }
.pad button { margin: 0; padding: 0; width: 62px; height: 62px; display: grid; place-items: center; background: var(--paper); border-radius: 14px; touch-action: none; }
.pad button svg { width: 26px; height: 26px; fill: var(--ink); pointer-events: none; }
.dpad .up { grid-area: 1 / 2; } .dpad .left { grid-area: 2 / 1; } .dpad .right { grid-area: 2 / 3; } .dpad .down { grid-area: 3 / 2; }
.dpad .left svg { rotate: -90deg; } .dpad .right svg { rotate: 90deg; } .dpad .down svg { rotate: 180deg; }
.pad .actions { display: flex; gap: 12px; }
.pad .actions button { width: 74px; height: 74px; border-radius: 50%; font-size: 1.5rem; }
.pad .actions .a { background: var(--pink); color: #fff; }
.pad .actions .b { background: var(--yellow); }
.pad button.held { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.pad-hint { font-size: 0.9rem; color: var(--muted); margin-top: 10px; }

/* --- Stinger preview page --- */
.preview-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; }

/* ---- lobby options (e.g. race or co-op), chosen by the host */
.lobby-option { border: 3px solid var(--ink); border-radius: 16px; background: rgba(255,255,255,0.08); margin: 14px 0 6px; padding: 8px 12px 10px; text-align: left; }
.lobby-option legend { font-family: var(--display); padding: 0 6px; color: var(--yellow); }
.lobby-choice { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; cursor: pointer; }
.lobby-choice input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--yellow); flex: none; }
.lobby-choice small { display: block; color: var(--muted); font-size: 0.85rem; }
.lobby-choice input:disabled + span { opacity: 0.8; }