:root {
  --bg: #0b0b12;
  --panel: #16161f;
  --panel-2: #1e1e2a;
  --line: #2a2a38;
  --text: #f6f6f8;
  --muted: #8d8d9e;
  --red: #ff2d4b;
  --red-dark: #4a1420;
  --purple: #b24bff;
  --purple-dark: #2f1548;
  --green: #16d47b;
  --amber: #ffb020;
  --blue: #4d8dff;
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  touch-action: manipulation;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

input,
textarea {
  font: inherit;
  color: inherit;
  color-scheme: dark;
}

.muted {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

/* ------------------------------------------------------------------ player */

.player-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  user-select: none;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.link-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.link-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.link-status[data-state='online']::before {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.link-status[data-state='offline']::before {
  background: var(--amber);
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    opacity: 0.2;
  }
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding-bottom: 24px;
}

.panel h1 {
  font-size: clamp(28px, 9vw, 40px);
}

.panel p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.field {
  display: block;
  width: 100%;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  caret-color: var(--amber);
  font-size: 20px;
  outline: none;
  transition: border-color 0.15s;
}

.field::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field:focus {
  border-color: var(--blue);
}

.field.code {
  font-size: clamp(34px, 13vw, 52px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  font-variant-numeric: tabular-nums;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--blue);
  font-size: 18px;
  font-weight: 700;
  transition: transform 0.08s, opacity 0.15s;
}

.btn:active {
  transform: scale(0.985);
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.btn.ghost {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.error {
  min-height: 20px;
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
}

/* buzzer */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
}

.stage-head {
  text-align: center;
}

.stage-head .who {
  font-size: 22px;
  font-weight: 700;
}

.stage-head .status {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.buzzer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 45vh;
  border-radius: 28px;
  font-size: clamp(30px, 11vw, 54px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.12s, transform 0.08s, box-shadow 0.2s;
}

.buzzer #buzzer-label {
  font-weight: 900;
  line-height: 1;
}

.buzzer .sub {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.buzzer[data-state='idle'] {
  background: var(--panel-2);
  border: 2px solid var(--line);
  color: var(--muted);
}

.buzzer[data-state='armed'] {
  background: linear-gradient(180deg, #ff3b57, #d80f2c);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 45, 75, 0.18), 0 18px 50px -18px rgba(255, 45, 75, 0.8);
  animation: ready 1.4s ease-in-out infinite;
  font-size: clamp(52px, 18vw, 92px);
  gap: 12px;
}

.buzzer[data-state='armed'] .sub {
  font-size: clamp(18px, 5.5vw, 32px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 1;
}

.buzzer[data-state='armed']:active {
  transform: scale(0.97);
  animation: none;
}

@keyframes ready {
  50% {
    box-shadow: 0 0 0 12px rgba(255, 45, 75, 0.1), 0 18px 50px -18px rgba(255, 45, 75, 0.9);
  }
}

.buzzer[data-state='won'] {
  background: linear-gradient(180deg, #1ce88a, #0fa860);
  color: #04231a;
  box-shadow: 0 0 0 4px rgba(22, 212, 123, 0.2), 0 18px 50px -18px rgba(22, 212, 123, 0.9);
  animation: pop 0.4s ease-out;
}

@keyframes pop {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.03);
  }
}

.buzzer[data-state='locked'] {
  background: var(--red-dark);
  color: #ff9aa9;
  border: 2px solid #6b1c2b;
}

.buzzer[data-state='missed'] {
  background: var(--panel-2);
  border: 2px solid var(--line);
  color: var(--muted);
}

.buzzer[data-state='tap'] {
  background: linear-gradient(180deg, #ffb020, #e88900);
  color: #1a1200;
  box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.2), 0 18px 50px -18px rgba(255, 176, 32, 0.85);
  user-select: none;
}

.buzzer[data-state='tap']:active,
.buzzer.tap-pulse {
  transform: scale(0.96);
}

.buzzer[data-state='roulette-spin'] {
  color: #fff;
  border: 2px solid transparent;
  /* One colour change per second (~0.5 full cycles/sec) — under the 3/sec limit */
  animation: roulette-rg-pulse 2s ease-in-out infinite;
}

.buzzer[data-state='roulette-out'] {
  background: linear-gradient(180deg, #6b1c2b, #4a1420);
  border: 2px solid #6b1c2b;
  color: #ff9aa9;
}

@keyframes roulette-rg-pulse {
  0%,
  40% {
    background: linear-gradient(180deg, #ff3b57, #d80f2c);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 45, 75, 0.2);
  }
  50%,
  90% {
    background: linear-gradient(180deg, #1ce88a, #0fa860);
    color: #04231a;
    box-shadow: 0 0 0 4px rgba(22, 212, 123, 0.2);
  }
  100% {
    background: linear-gradient(180deg, #ff3b57, #d80f2c);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 45, 75, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buzzer[data-state='roulette-spin'] {
    animation: none;
    background: linear-gradient(180deg, #3a3348, #241f30);
    color: #f2e9ff;
    border-color: rgba(255, 176, 32, 0.45);
    box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.2);
  }

  .host-main[data-state='roulette'] .host-state,
  .host-main[data-state='roulette'] .host-winner {
    animation: none;
  }
}

.tap-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-align: center;
}

.tap-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tap-stat-value {
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.shake {
  animation: shake 0.3s;
}

@keyframes shake {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

/* --------------------------------------------------------------- big screen */

.host {
  display: grid;
  grid-template-rows: auto 1fr;
  /* minmax(0, 1fr) rather than the default auto: a long winner name has a huge
     max-content width and would otherwise stretch the page past the viewport,
     shoving the join code off the right-hand edge of the projector. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-height: 100dvh;
  padding: 32px 40px 40px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, #1b1b2c 0%, var(--bg) 60%);
}

/* Standby: free the full stage for a huge QR.
   Only while the buzzer panel is actually visible — tap / vote / emoji hide
   .host-main, and those panels live on grid-row 2. Matching a hidden idle
   panel would keep a 1-row grid and clip the storm off the bottom. */
.host:has(.host-main[data-state='idle']:not(.hidden)) {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 10px 12px 12px;
}

.host:has(.host-main[data-state='idle']:not(.hidden)) .host-main {
  grid-row: 1;
}

.host-top {
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 32px;
  min-width: 0;
}

.host-headline {
  min-width: 0;
}

.host-title {
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.host-title span {
  color: var(--red);
}

.host-count {
  margin-top: 6px;
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 700;
  color: var(--muted);
}

.host-join {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(22, 22, 31, 0.8);
}

.host-join .label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.host-join .code {
  margin-top: 4px;
  font-size: clamp(46px, 5.4vw, 92px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  /* Balance the trailing letter-space so the digits stay optically centred. */
  text-indent: 0.1em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

.host-main,
.host-tap,
.host-vote,
.host-quiz,
.host-cards,
.host-coin,
.host-race,
.host-bingo,
.host-wheel,
.host-memory,
.host-zoom,
.host-roulette,
.host-emoji,
.host-lookalike,
.host-boxes,
.host-crowd,
.host-jump {
  grid-row: 2;
}

.host-main {
  display: grid;
  place-items: center;
  text-align: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(22, 22, 31, 0.55);
  padding: 40px;
}

.host-main[data-state='idle'] {
  place-items: center;
  align-content: stretch;
  padding: 8px 12px;
  border: none;
  background: transparent;
  /* Keep labels/URL visible — children shrink the QR instead of clipping text. */
  overflow: hidden;
}

.host-main[data-state='idle'] > div {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 4px;
  box-sizing: border-box;
}

.host-main[data-state='idle'] .host-state,
.host-main[data-state='idle'] .host-winner {
  flex: 0 0 auto;
  max-width: 100%;
  padding-inline: 8px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  line-height: 1.1;
}

.host-main[data-state='idle'] .host-winner {
  font-size: clamp(22px, 3.2vw, 48px);
  margin-top: 0;
}

.host-main[data-state='idle'] .host-state {
  font-size: clamp(22px, 3.2vw, 48px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
}

.host-main > div {
  width: 100%;
  min-width: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.host-state {
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The size here is the ideal; host.js shrinks it to fit long names. */
.host-winner {
  margin-top: 10px;
  font-size: clamp(56px, 13vw, 220px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.host-main[data-state='armed'] .host-state {
  color: var(--red);
  animation: ready-text 1.2s ease-in-out infinite;
}

@keyframes ready-text {
  50% {
    opacity: 0.45;
  }
}

.host-main[data-state='won'] {
  border-color: rgba(22, 212, 123, 0.5);
  background: rgba(22, 212, 123, 0.08);
}

.host-main[data-state='won'] .host-state {
  color: var(--green);
}

.host-main[data-state='won'] .host-winner {
  animation: pop 0.45s ease-out;
}

.host-winner-team {
  margin-top: 10px;
  font-size: clamp(18px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.host-winner-team[data-side='a'] {
  color: #7aa7ff;
}

.host-winner-team[data-side='b'] {
  color: #ff8da0;
}

.host-order-team {
  margin-left: 6px;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

.host-order-team[data-side='a'] {
  color: #7aa7ff;
}

.host-order-team[data-side='b'] {
  color: #ff8da0;
}

.host-main[data-state='roulette'] {
  border-color: rgba(255, 176, 32, 0.45);
  background: rgba(255, 176, 32, 0.06);
}

.host-main[data-state='roulette'] .host-state {
  color: var(--amber);
  animation: ready-text 1.6s ease-in-out infinite;
}

.host-main[data-state='roulette'] .host-winner {
  color: var(--amber);
  animation: roulette-pulse 2s ease-in-out infinite alternate;
}

@keyframes roulette-pulse {
  from {
    opacity: 0.7;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.host-order {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  font-size: clamp(13px, 1.1vw, 19px);
  color: var(--muted);
}

.host-order b {
  color: var(--text);
}

.host-join-cta {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin-top: 2px;
  padding-inline: 8px;
  box-sizing: border-box;
  font-size: clamp(15px, 2.1vw, 30px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  text-align: center;
}

.host-join-cta b {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 0.08em;
  font-size: clamp(18px, 3.2vw, 40px);
  font-weight: 900;
  color: var(--amber);
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}

.host-join-standby {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.host-lobby {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(8px, 1.4vh, 18px);
  box-sizing: border-box;
}

.host-lobby.hidden {
  display: none !important;
}

.host-lobby-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 42% at 50% 28%, rgba(200, 84, 255, 0.28), transparent 68%),
    radial-gradient(circle at 16% 80%, rgba(84, 215, 255, 0.14), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(255, 79, 151, 0.14), transparent 40%),
    linear-gradient(180deg, #14082a, #070318 58%, #12061f);
}

.host-lobby-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 2, 12, 0.55), transparent 18% 82%, rgba(4, 2, 12, 0.55)),
    linear-gradient(180deg, rgba(5, 2, 14, 0.18), transparent 30%, rgba(4, 1, 10, 0.62));
}

.host-lobby-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto;
  justify-items: center;
  align-content: center;
  gap: clamp(4px, 0.9vh, 10px);
  width: min(860px, 100%);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  text-align: center;
}

.host-lobby-logo {
  display: block;
  width: auto;
  max-width: min(260px, 34vw);
  height: clamp(44px, 8.5vh, 88px);
  object-fit: contain;
  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px rgba(200, 84, 255, 0.4));
}

.host-lobby-title {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 5.2vh, 58px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.host-lobby-ribbon {
  margin: 0;
  width: min(100%, 640px);
  padding: 5px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7a1fa8, #c854ff 50%, #7a1fa8);
  color: #fff;
  font-size: clamp(11px, 1.5vh, 15px);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.host-lobby .host-cta-qr {
  width: min(34vh, 32vw, 300px);
  height: min(34vh, 32vw, 300px);
  max-width: 100%;
  max-height: 100%;
  flex: none;
  min-height: 0;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 22px;
  justify-self: center;
  align-self: center;
  object-fit: contain;
}

.host-lobby-url {
  margin: 0;
  color: #d7c7ff;
  font-size: clamp(15px, 2.4vh, 26px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.host-lobby-code-label {
  margin: 0;
  color: #b7a8d6;
  font-size: clamp(11px, 1.4vh, 14px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.host-lobby-code {
  margin: 0;
  color: var(--amber);
  font-size: clamp(34px, 7.2vh, 84px);
  font-weight: 1000;
  letter-spacing: 0.14em;
  line-height: 0.9;
  text-indent: 0.08em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(255, 176, 32, 0.35);
}

.host-lobby-connected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #f4e9ff;
  font-size: clamp(12px, 1.8vh, 18px);
  font-weight: 800;
}

.host-lobby-connected strong {
  color: var(--amber);
  font-size: 1.15em;
}

body.host-lobby-open .host-top {
  display: none !important;
}

.host-cta-qr {
  display: block;
  /* Fill leftover space under the labels/URL — never force full viewport height. */
  width: auto;
  height: auto;
  max-width: min(100%, calc(100dvw - 24px));
  max-height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 28px;
  background: #fff;
  object-fit: contain;
}

/* tap race leaderboard on the projector */

.host-tap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(22, 22, 31, 0.55);
  padding: 28px 32px 24px;
}

.host-tap[data-state='live'] {
  border-color: rgba(255, 176, 32, 0.45);
}

.host-tap[data-state='finished'] {
  border-color: rgba(22, 212, 123, 0.5);
  background: rgba(22, 212, 123, 0.08);
}

.tap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.tap-headline {
  margin-top: 4px;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.tap-clock {
  flex: none;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

.host-tap[data-state='finished'] .tap-clock {
  color: var(--green);
}

.tap-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  overflow: hidden;
}

.tap-empty {
  grid-column: 1 / -1;
  padding: 40px 12px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 24px);
}

.tap-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(11, 11, 18, 0.55);
  font-size: clamp(15px, 1.4vw, 24px);
  transition: background 0.15s, transform 0.15s;
}

.tap-row.lead {
  background: rgba(255, 176, 32, 0.16);
  border: 1px solid rgba(255, 176, 32, 0.35);
}

.host-tap[data-state='finished'] .tap-row.lead {
  background: rgba(22, 212, 123, 0.16);
  border-color: rgba(22, 212, 123, 0.4);
}

.tap-place {
  font-weight: 900;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tap-row.lead .tap-place {
  color: var(--amber);
}

.host-tap[data-state='finished'] .tap-row.lead .tap-place {
  color: var(--green);
}

.tap-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tap-score {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

.host-tap[data-state='finished'] .tap-score {
  color: var(--text);
}

@media (max-width: 900px) {
  .tap-board {
    grid-template-columns: 1fr;
  }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(11, 11, 18, 0.96);
  text-align: center;
}

.overlay .inner {
  display: grid;
  gap: 18px;
  max-width: 420px;
}

/* -------------------------------------------------------------------- admin */

.admin {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.admin:has([data-section-panel='bingo']:not(.hidden)) {
  max-width: min(1540px, 100%);
}

.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.gate-logo {
  display: block;
  width: min(220px, 70%);
  height: auto;
  margin: 0 auto 4px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.admin-brand-logo {
  display: block;
  width: 96px;
  height: 64px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.podium-qr-wrap {
  margin-top: 12px;
}

.podium-qr {
  display: block;
  width: 148px;
  height: 148px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.admin-head h1 {
  font-size: 22px;
}

@media (max-width: 520px) {
  .admin-brand {
    width: 100%;
  }

  .admin-brand-logo {
    width: 56px;
    height: 38px;
  }
}

.admin-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background: linear-gradient(180deg, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}

.admin-nav-btn {
  flex: none;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-nav-btn:hover {
  color: var(--text);
  border-color: rgba(178, 75, 255, 0.45);
}

.admin-nav-btn.active {
  color: #f2e9ff;
  border-color: rgba(178, 75, 255, 0.7);
  background: rgba(178, 75, 255, 0.22);
}

.admin-nav-btn.live {
  box-shadow: inset 0 0 0 1px rgba(22, 212, 123, 0.55);
}

.show-rundown {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.show-rundown li button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.show-rundown li.active button {
  border-color: rgba(22, 212, 123, 0.65);
  background: rgba(22, 212, 123, 0.12);
}

.show-rundown li button small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.show-editor-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.show-segment-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.show-segment-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-nav-clear {
  margin-left: auto;
  color: #ffd4d4;
  border-color: rgba(255, 92, 92, 0.55);
  background: rgba(255, 92, 92, 0.14);
}

.admin-nav-clear:hover {
  color: #fff;
  border-color: rgba(255, 92, 92, 0.85);
  background: rgba(255, 92, 92, 0.24);
}

.admin-section.hidden {
  display: none;
}

.admin-hub-intro {
  margin: 0 0 18px;
}

.admin-hub-intro h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.admin-hub-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.admin-game-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  width: 100%;
  min-height: 108px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.admin-game-card:hover {
  border-color: rgba(178, 75, 255, 0.5);
  background: rgba(178, 75, 255, 0.1);
}

.admin-game-card.live {
  box-shadow: inset 0 0 0 1px rgba(22, 212, 123, 0.55);
}

.admin-game-card.live strong::after {
  content: 'Live';
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(22, 212, 123, 0.2);
  color: #7dffb2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.admin-game-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(178, 75, 255, 0.16);
  font-size: 22px;
}

.admin-game-card strong {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.admin-game-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.admin-game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.admin-game-head h2 {
  margin: 0;
  font-size: 22px;
}

.admin-back {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-back:hover {
  color: var(--text);
  border-color: rgba(178, 75, 255, 0.45);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 13px;
  font-weight: 700;
}

.pill b {
  font-variant-numeric: tabular-nums;
}

.pill[data-state='armed'] {
  border-color: var(--purple);
  color: var(--purple);
}

.pill[data-state='won'] {
  border-color: var(--green);
  color: var(--green);
}

.card {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.card h2 {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.controls .btn {
  min-height: 76px;
  flex-direction: column;
  gap: 4px;
}

.controls .btn small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.btn.arm {
  background: linear-gradient(180deg, #c56bff, #8a2be2);
}

.btn.stop {
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.btn.danger {
  background: transparent;
  border: 1px solid #5b2d82;
  color: #e0c3ff;
}

.btn.small {
  min-height: 36px;
  width: auto;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.order-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.order-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  font-size: 15px;
}

.order-row .place {
  font-weight: 900;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.order-row.first {
  background: rgba(22, 212, 123, 0.12);
  border: 1px solid rgba(22, 212, 123, 0.35);
}

.order-row.first .place {
  color: var(--green);
}

.order-row .gap {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.order-row .crowd-reveal-btn,
.order-row .btn.crowd-reveal-btn {
  color: #fff;
  background: var(--blue);
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-width: 5.5rem;
}

.crowd-admin-row .crowd-admin-answer {
  font-weight: 700;
  color: var(--text);
}

.crowd-admin-row.lead .crowd-admin-answer {
  color: var(--green);
}

.crowd-admin-shown {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

#crowd-order.order-list {
  max-height: none;
}

.roster {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
}

.roster-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
}

.roster-row .name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.roster-row[data-connected='false'] .dot {
  background: var(--amber);
}

.roster-row[data-connected='false'] .name {
  color: var(--muted);
}

.roster-row[data-locked='true'] {
  border: 1px solid #5b2d82;
}

.tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(178, 75, 255, 0.16);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e0c3ff;
}

.search {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  caret-color: var(--amber);
  font-size: 15px;
  outline: none;
}

.search::placeholder {
  color: var(--muted);
  opacity: 1;
}

.file-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}

.file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-picker-button {
  flex: none;
  width: auto;
  min-width: 9.5rem;
  margin: 0;
  cursor: pointer;
}

.file-picker-name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
  line-height: 1.4;
  color: var(--text);
  caret-color: var(--amber);
}

.gate {
  max-width: 380px;
  margin: 18vh auto;
  display: grid;
  gap: 14px;
  text-align: center;
}

.gate .btn {
  background: linear-gradient(180deg, #c56bff, #8a2be2);
}

/* --------------------------------------------------------------- voting */

.vote-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.vote-question {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.vote-options {
  display: grid;
  gap: 10px;
}

.vote-option {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}

.vote-option:active:not(:disabled) {
  transform: scale(0.985);
}

.vote-option.selected {
  border-color: var(--blue);
  background: rgba(77, 141, 255, 0.14);
}

.vote-option:disabled {
  opacity: 0.7;
}

.vote-letter {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--panel-2);
  font-weight: 900;
  color: var(--amber);
}

.vote-option.selected .vote-letter {
  background: var(--blue);
  color: #fff;
}

.vote-label {
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.vote-hint {
  text-align: center;
  font-size: 13px;
  min-height: 18px;
}

.field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-logo-preview {
  display: block;
  width: 160px;
  height: 100px;
  object-fit: contain;
  object-position: center;
  background:
    linear-gradient(45deg, #1a1a24 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a24 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a24 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a24 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #0e0e16;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
}

.teams-scoreboard-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.teams-scoreboard-title:hover,
.teams-scoreboard-title:focus-visible {
  color: var(--purple);
  text-decoration: underline;
  outline: none;
}

.host-scoreboard {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  background: #05010f;
}

.host-scoreboard.hidden {
  display: none;
}

.host-scoreboard .scoreboard {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}

body[data-host-mode='scoreboard'] .host-top,
body[data-host-mode='scoreboard'] .host-teams {
  display: none !important;
}

.vote-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

.vote-live-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.host-vote {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(22, 22, 31, 0.55);
  padding: 28px 32px 28px;
}

.host-vote[data-state='open'] {
  border-color: rgba(77, 141, 255, 0.55);
  background: radial-gradient(120% 80% at 50% 0%, rgba(77, 141, 255, 0.14), rgba(22, 22, 31, 0.55) 55%);
}

.host-vote[data-state='closed'] {
  border-color: rgba(255, 176, 32, 0.45);
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 176, 32, 0.1), rgba(22, 22, 31, 0.55) 55%);
}

.host-vote[data-state='revealed'] {
  border-color: rgba(22, 212, 123, 0.55);
  background: radial-gradient(120% 80% at 50% 0%, rgba(22, 212, 123, 0.12), rgba(22, 22, 31, 0.55) 55%);
}

.host-vote .host-state {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.host-vote[data-state='open'] .host-state {
  color: var(--blue);
}

.host-vote[data-state='closed'] .host-state {
  color: var(--amber);
  letter-spacing: 0.06em;
}

.host-vote[data-state='revealed'] .host-state {
  color: var(--green);
}

.vote-host-question {
  margin-top: 6px;
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.vote-host-meta {
  margin-top: 8px;
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 700;
  color: var(--muted);
}

.host-vote[data-state='closed'] .vote-host-meta {
  color: rgba(255, 176, 32, 0.85);
}

.vote-bars {
  display: grid;
  gap: 16px;
  min-height: 0;
}

.vote-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr minmax(5.5rem, auto);
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.vote-bar-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.vote-bar-label > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-bar-letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--panel-2);
  font-weight: 900;
  color: var(--amber);
}

.vote-bar-track {
  height: clamp(22px, 2.6vw, 34px);
  border-radius: 999px;
  background: rgba(11, 11, 18, 0.75);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.vote-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d7af5, #7aa7ff);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.vote-bar-row.pulse .vote-bar-fill {
  width: 42%;
  animation: vote-bar-pulse 1.8s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(77, 141, 255, 0.55), rgba(122, 167, 255, 0.95));
}

.vote-bar-row.pulse[data-phase='2'] .vote-bar-fill {
  animation-duration: 2.15s;
  animation-delay: -0.4s;
}

.vote-bar-row.pulse[data-phase='3'] .vote-bar-fill {
  animation-duration: 1.55s;
  animation-delay: -0.9s;
}

.vote-bar-row.pulse[data-phase='4'] .vote-bar-fill {
  animation-duration: 2.4s;
  animation-delay: -1.2s;
}

.host-vote[data-state='closed'] .vote-bar-row.pulse .vote-bar-fill {
  animation: none;
  width: 28%;
  opacity: 0.55;
  background: linear-gradient(90deg, rgba(255, 176, 32, 0.35), rgba(255, 176, 32, 0.7));
}

@keyframes vote-bar-pulse {
  0%,
  100% {
    width: 18%;
    opacity: 0.7;
  }
  50% {
    width: 78%;
    opacity: 1;
  }
}

.vote-bar-row.result .vote-bar-fill {
  background: linear-gradient(90deg, #4d8dff, #8eb6ff);
  box-shadow: 0 0 24px rgba(77, 141, 255, 0.25);
}

.vote-bar-row.lead .vote-bar-fill {
  background: linear-gradient(90deg, #12c56f, #5aefab);
  box-shadow: 0 0 28px rgba(22, 212, 123, 0.28);
}

.vote-bar-row.lead .vote-bar-letter {
  background: rgba(22, 212, 123, 0.22);
  color: var(--green);
}

.vote-bar-count {
  min-width: 5.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  display: grid;
  justify-items: end;
  gap: 2px;
  line-height: 1.05;
}

.vote-bar-count strong {
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}

.vote-bar-count span {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 700;
  color: var(--muted);
}

.vote-bar-row.lead .vote-bar-count strong {
  color: var(--green);
}

.vote-bar-row.lead .vote-bar-count span {
  color: rgba(22, 212, 123, 0.85);
}

/* Revealed results: bigger, bolder, more TV-readable */
.host-vote[data-state='revealed'] {
  gap: 28px;
  padding: 32px 36px 34px;
}

.host-vote[data-state='revealed'] .host-state {
  font-size: clamp(22px, 2.4vw, 34px);
}

.host-vote[data-state='revealed'] .vote-host-question {
  font-size: clamp(34px, 5vw, 64px);
}

.host-vote[data-state='revealed'] .vote-host-meta {
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 800;
  color: rgba(22, 212, 123, 0.9);
}

.host-vote[data-state='revealed'] .vote-bars {
  gap: 22px;
}

.host-vote[data-state='revealed'] .vote-bar-row {
  grid-template-columns: minmax(160px, 32%) 1fr minmax(7rem, auto);
  gap: 20px;
}

.host-vote[data-state='revealed'] .vote-bar-label {
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.host-vote[data-state='revealed'] .vote-bar-letter {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: clamp(20px, 2vw, 28px);
}

.host-vote[data-state='revealed'] .vote-bar-track {
  height: clamp(28px, 3.4vw, 44px);
}

.host-vote[data-state='revealed'] .vote-bar-count {
  min-width: 7rem;
  gap: 4px;
}

.host-vote[data-state='revealed'] .vote-bar-count strong {
  font-size: clamp(36px, 4.2vw, 64px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.host-vote[data-state='revealed'] .vote-bar-count span {
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.host-vote[data-state='revealed'] .vote-bar-row.lead .vote-bar-label {
  color: #fff;
}

.host-vote[data-state='revealed'] .vote-bar-row.lead .vote-bar-count strong {
  font-size: clamp(42px, 5vw, 72px);
}

@media (max-width: 800px) {
  .vote-bar-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .vote-bar-track {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------- 512×384 pixel */

/*
  Ultra-compact host layout for LED / pixel panels.
  Force with ?pixel on the host URL, or it auto-enables under 520×400.
*/
body.host-pixel {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #000;
}

body.host-pixel .overlay .inner {
  max-width: 90vw;
  gap: 10px;
  padding: 8px;
}

body.host-pixel .overlay h1 {
  font-size: 22px;
}

body.host-pixel .overlay p {
  font-size: 11px;
  line-height: 1.3;
}

body.host-pixel .overlay .btn {
  min-height: 36px;
  font-size: 14px;
  padding: 8px;
}

body.host-pixel .host {
  gap: 4px;
  padding: 4px;
  min-height: 100vh;
  height: 100vh;
  background: #0b0b12;
}

body.host-pixel .host-top {
  gap: 6px;
  align-items: center;
}

body.host-pixel .host-title {
  font-size: 11px;
  letter-spacing: 0;
}

body.host-pixel .host-count {
  margin-top: 0;
  font-size: 9px;
}

/* Code is the only join affordance that fits — QR is useless at this size. */
body.host-pixel .host-join {
  gap: 0;
  padding: 2px 6px;
  border-radius: 6px;
}

body.host-pixel .host-join .label {
  display: none;
}

body.host-pixel .host-join .code {
  font-size: 28px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}

body.host-pixel .host-cta-qr {
  width: auto;
  height: auto;
  max-width: min(220px, 100%);
  max-height: min(220px, 100%);
  padding: 8px;
  border-radius: 8px;
}

body.host-pixel .host-main,
body.host-pixel .host-tap,
body.host-pixel .host-vote,
body.host-pixel .host-quiz,
body.host-pixel .host-cards,
body.host-pixel .host-coin,
body.host-pixel .host-bingo,
body.host-pixel .host-wheel,
body.host-pixel .host-memory,
body.host-pixel .host-zoom,
body.host-pixel .host-roulette,
body.host-pixel .host-emoji,
body.host-pixel .host-jump {
  border-radius: 8px;
  padding: 6px 8px;
  gap: 4px;
}

body.host-pixel .host-main {
  padding: 4px 6px;
}

body.host-pixel .host-state {
  font-size: 9px;
  letter-spacing: 0.12em;
}

body.host-pixel .host-main[data-state='idle'] .host-state {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text);
  line-height: 1.1;
}

body.host-pixel .host-main[data-state='idle'] .host-winner {
  font-size: 18px;
  line-height: 1.1;
}

body.host-pixel .host-winner {
  margin-top: 2px;
  font-size: 42px;
  letter-spacing: -0.02em;
}

/* Armed: fill the pixel panel with huge Buzz / Buzzers are live */
body.host-pixel .host-main[data-state='armed'] {
  padding: 8px;
}

body.host-pixel .host-main[data-state='armed'] .host-state {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
}

body.host-pixel .host-main[data-state='armed'] .host-winner {
  margin-top: 4px;
  font-size: 140px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.88;
}

body.host-pixel .host-main[data-state='armed'] .host-order,
body.host-pixel .host-main[data-state='armed'] .host-join-standby {
  display: none;
}

/* Won: readable “Buzzed in first” + large winner name */
body.host-pixel .host-main[data-state='won'] {
  padding: 8px;
}

body.host-pixel .host-main[data-state='won'] .host-state {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
}

body.host-pixel .host-main[data-state='won'] .host-winner {
  margin-top: 4px;
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

body.host-pixel .host-winner-team {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.1em;
}

body.host-pixel .host-main[data-state='won'] .host-join-standby {
  display: none;
}

/* Roulette: Choosing… / ??? / Ready? readable on 512×384 */
body.host-pixel .host-main[data-state='roulette'] {
  padding: 8px;
}

body.host-pixel .host-main[data-state='roulette'] .host-state {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
}

body.host-pixel .host-main[data-state='roulette'] .host-winner {
  margin-top: 4px;
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

body.host-pixel .host-main[data-state='roulette'] .host-order {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

body.host-pixel .host-main[data-state='roulette'] .host-join-standby {
  display: none;
}

body.host-pixel .host-order {
  margin-top: 2px;
  gap: 4px 8px;
  font-size: 9px;
}

body.host-pixel .host-join-cta {
  margin-top: 0;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding-inline: 4px;
}

body.host-pixel .host-join-cta b {
  margin-top: 0.06em;
  font-size: 20px;
  line-height: 1.15;
}

body.host-pixel .host-lobby {
  padding: 8px;
}

body.host-pixel .host-lobby-stage {
  gap: 4px;
}

body.host-pixel .host-lobby-logo {
  width: 88px;
  height: 42px;
}

body.host-pixel .host-lobby-title {
  font-size: 22px;
}

body.host-pixel .host-lobby-ribbon {
  display: none;
}

body.host-pixel .host-lobby .host-cta-qr {
  width: 92px;
  max-height: 92px;
  padding: 6px;
  border-radius: 10px;
}

body.host-pixel .host-lobby-url {
  font-size: 11px;
}

body.host-pixel .host-lobby-code-label {
  font-size: 8px;
}

body.host-pixel .host-lobby-code {
  font-size: 36px;
  letter-spacing: 0.1em;
}

body.host-pixel .host-lobby-connected {
  font-size: 10px;
}

/* Tap race on the pixel panel: top 10, as large as 512×384 allows. */
body.host-pixel:has(.host-tap:not(.hidden)) .host-top {
  display: none;
}

body.host-pixel:has(.host-tap:not(.hidden)) .host {
  gap: 0;
  padding: 2px;
}

body.host-pixel .host-tap {
  gap: 4px;
  padding: 4px 6px;
}

body.host-pixel .tap-head {
  gap: 8px;
  align-items: center;
}

body.host-pixel .tap-head .host-state {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--text);
}

body.host-pixel .tap-headline {
  margin-top: 2px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

body.host-pixel .tap-clock {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

body.host-pixel .tap-board {
  flex: 1;
  min-height: 0;
  gap: 3px;
  grid-template-columns: 1fr;
  align-content: stretch;
}

body.host-pixel .tap-empty {
  padding: 12px 6px;
  font-size: 18px;
  font-weight: 700;
}

body.host-pixel .tap-row {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 26px;
  line-height: 1.05;
}

body.host-pixel .tap-place {
  font-size: 28px;
  font-weight: 900;
}

body.host-pixel .tap-name {
  font-size: 28px;
  font-weight: 900;
}

body.host-pixel .tap-score {
  font-size: 26px;
  font-weight: 900;
  min-width: 2.2ch;
  text-align: right;
}

/* Vote on the pixel panel: compact enough for 512×384 in every state
   (open / closed / revealed), including 6 options. Selectors must beat the
   large TV “revealed” rules above. */
body.host-pixel[data-host-mode='vote'] .host-top {
  display: none !important;
}

body.host-pixel[data-host-mode='vote'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 1px;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

body.host-pixel[data-host-mode='vote'] .host-vote,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='open'],
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='closed'],
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] {
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 3px !important;
  padding: 3px 5px !important;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 6px;
}

body.host-pixel[data-host-mode='vote'] .vote-host-head {
  width: 100%;
  text-align: center;
  flex: 0 0 auto;
  min-height: 0;
}

body.host-pixel[data-host-mode='vote'] .vote-host-head .host-state,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='open'] .host-state,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='closed'] .host-state,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .host-state {
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}

body.host-pixel[data-host-mode='vote'] .host-vote[data-state='open'] .host-state {
  color: #7aa7ff;
}

body.host-pixel[data-host-mode='vote'] .host-vote[data-state='closed'] .host-state {
  color: var(--amber);
}

body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .host-state {
  color: var(--green);
}

body.host-pixel[data-host-mode='vote'] .vote-host-question,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-host-question {
  margin-top: 1px !important;
  font-size: 15px !important;
  font-weight: 900;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.host-pixel[data-host-mode='vote'] .vote-host-meta,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='closed'] .vote-host-meta,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-host-meta {
  margin-top: 1px !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1.1;
}

body.host-pixel[data-host-mode='vote'] .vote-bars,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bars {
  width: 100%;
  gap: 2px !important;
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
  overflow: hidden;
}

body.host-pixel[data-host-mode='vote'] .vote-bar-row,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-row {
  grid-template-columns: minmax(72px, 34%) minmax(0, 1fr) minmax(2.8rem, auto) !important;
  gap: 4px !important;
  min-height: 0;
}

body.host-pixel[data-host-mode='vote'] .vote-bar-label,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-label {
  gap: 3px !important;
  font-size: 11px !important;
  font-weight: 900;
  text-align: left;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

body.host-pixel[data-host-mode='vote'] .vote-bar-letter,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-letter {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: 900;
}

body.host-pixel[data-host-mode='vote'] .vote-bar-track,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-track {
  height: 10px !important;
  border-radius: 4px !important;
}

body.host-pixel[data-host-mode='vote'] .vote-bar-count,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-count {
  min-width: 2.8rem !important;
  gap: 0 !important;
}

body.host-pixel[data-host-mode='vote'] .vote-bar-count strong,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-count strong,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-row.lead .vote-bar-count strong {
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1 !important;
}

body.host-pixel[data-host-mode='vote'] .vote-bar-count span,
body.host-pixel[data-host-mode='vote'] .host-vote[data-state='revealed'] .vote-bar-count span {
  font-size: 8px !important;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* --------------------------------------------------------------- emoji storm */

.emoji-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.emoji-panel:not(.hidden) {
  min-height: 260px;
}

.emoji-title {
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}

.emoji-hint {
  margin: 0;
  text-align: center;
  font-size: 14px;
  min-height: 18px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  align-content: stretch;
  min-height: 220px;
}

.emoji-btn {
  display: grid;
  place-items: center;
  min-height: 72px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 36px;
  line-height: 1;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.08s ease, border-color 0.08s ease;
}

/* Only flash via .emoji-pop — :active sticks on many phones after pointerdown. */
.emoji-btn.emoji-pop {
  animation: emoji-btn-flash 160ms ease-out;
}

@keyframes emoji-btn-flash {
  0% {
    transform: scale(0.9);
    background: rgba(255, 176, 32, 0.16);
    border-color: rgba(255, 176, 32, 0.45);
  }
  100% {
    transform: scale(1);
    background: var(--panel-2);
    border-color: var(--line);
  }
}

.emoji-btn:disabled {
  opacity: 0.4;
}

.host-emoji {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: radial-gradient(120% 90% at 50% 100%, #24182f 0%, rgba(22, 22, 31, 0.9) 55%);
  padding: 20px;
}

.emoji-host-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.emoji-host-total {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  line-height: 1;
}

.emoji-logo-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding: 0;
  --logo-scale: 50;
}

.emoji-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--logo-scale) * 1%);
  max-height: calc(var(--logo-scale) * 1%);
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

.emoji-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.emoji-fly {
  position: absolute;
  bottom: -10%;
  left: 50%;
  line-height: 1;
  animation: emoji-rise 2.8s linear forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

@keyframes emoji-rise {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift, 0), calc(-1 * var(--rise, 95vh)), 0)
      rotate(var(--spin, 20deg)) scale(1.15);
    opacity: 0;
  }
}

body.host-pixel[data-host-mode='emoji'] .host-top {
  display: none !important;
}

body.host-pixel[data-host-mode='emoji'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 2px;
}

body.host-pixel[data-host-mode='emoji'] .host-emoji {
  grid-row: 1;
  height: 100%;
  padding: 6px 8px;
  border-radius: 8px;
}

body.host-pixel .emoji-host-head .host-state {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

body.host-pixel .emoji-host-total {
  font-size: 36px;
}

body.host-pixel .emoji-logo {
  /* Scale is driven by --logo-scale; keep pixel screens from soft-clipping. */
  max-width: calc(var(--logo-scale) * 1%);
  max-height: calc(var(--logo-scale) * 1%);
}

/* ---------------------------------------------------------------- jump run */

.jump-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.jump-panel:not(.hidden) {
  display: flex;
}

.jump-btn {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 28px;
  background: #4d8dff;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: clamp(42px, 14vw, 72px);
  font-weight: 900;
  letter-spacing: 0.02em;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.18);
}

.jump-btn .sub {
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 700;
  opacity: 0.9;
}

.jump-btn[data-state='wait'],
.jump-btn[data-state='done'],
.jump-btn[data-state='crash'],
.jump-btn:disabled {
  background: #2a2a3a;
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

.jump-btn[data-state='crash'] {
  background: rgba(255, 77, 106, 0.25);
  color: #ff8da0;
}

.jump-btn[data-state='done'] {
  background: rgba(22, 212, 123, 0.2);
  color: #7dffb0;
}

.jump-btn[data-state='live']:not(:disabled):active,
.jump-btn.jump-pulse {
  transform: scale(0.97);
  filter: brightness(1.08);
}

@keyframes jump-pulse-flash {
  from {
    filter: brightness(1.25);
    transform: scale(0.96);
  }
  to {
    filter: brightness(1);
    transform: scale(1);
  }
}

.jump-btn.jump-pulse {
  animation: jump-pulse-flash 140ms ease-out;
}

.host-jump {
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto;
  gap: 14px;
  min-height: 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(22, 22, 31, 0.55);
}

.host-jump.hidden {
  display: none;
}

.jump-host-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.jump-host-name {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.05;
}

.jump-host-score {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.jump-host-canvas {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 18px;
  background: #0b0b12;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.jump-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
}

.jump-board .tap-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: clamp(14px, 1.4vw, 20px);
}

body.host-pixel[data-host-mode='jump'] .host-top {
  display: none !important;
}

body.host-pixel[data-host-mode='jump'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 2px;
}

body.host-pixel[data-host-mode='jump'] .host-jump {
  grid-row: 1;
  height: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  gap: 6px;
}

body.host-pixel .jump-host-name {
  font-size: 18px;
}

body.host-pixel .jump-host-score {
  font-size: 28px;
}

body.host-pixel .jump-host-canvas {
  min-height: 0;
  border-radius: 6px;
}

body.host-pixel .jump-board {
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
}

body.host-pixel .jump-board .tap-row {
  font-size: 11px;
}

/* --------------------------------------------------------------- cards mode */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.host-cards {
  display: grid;
  grid-template-columns: minmax(180px, 18%) minmax(0, 1fr) minmax(180px, 18%);
  gap: clamp(10px, 1.2vw, 16px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: clamp(10px, 1.2vw, 16px);
  background: #070318;
}

.cards-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cards-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.95;
}

.cards-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 3, 24, 0.72) 0%, transparent 18%, transparent 82%, rgba(7, 3, 24, 0.72) 100%),
    linear-gradient(180deg, rgba(7, 3, 24, 0.35) 0%, transparent 28%, transparent 70%, rgba(7, 3, 24, 0.55) 100%);
}

.host-cards > *:not(.cards-show-bg) {
  position: relative;
  z-index: 1;
}

.cards-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.cards-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 2px 0;
}

.cards-brand-logo {
  display: block;
  width: min(100%, 200px);
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.cards-side-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(12px, 1.3vw, 16px);
  border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(165deg, rgba(56, 20, 96, 0.92), rgba(24, 10, 48, 0.96));
  box-shadow:
    0 0 28px -6px rgba(139, 92, 246, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.cards-side-title {
  margin: 0;
  font-size: clamp(13px, 1.25vw, 15px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5e9ff;
}

.cards-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.35;
  color: #d8c7f0;
}

.cards-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}

.cards-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.55);
}

.cards-steps strong {
  color: #fff;
}

.cards-join-panel {
  flex: 0 0 auto;
  align-items: center;
  text-align: center;
}

.cards-qr {
  display: block;
  width: min(100%, 168px);
  height: auto;
  margin: 4px auto 0;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.cards-join-url {
  margin: 12px 0 4px;
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 700;
  color: #7dd3fc;
  word-break: break-all;
}

.cards-join-code {
  margin: 0;
  font-size: clamp(13px, 1.2vw, 15px);
  color: #c4b5fd;
}

.cards-join-code strong {
  color: #fbbf24;
  letter-spacing: 0.14em;
  font-size: 1.15em;
}

.cards-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  justify-items: center;
  align-content: stretch;
  gap: clamp(6px, 1vh, 12px);
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.cards-marquee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(100%, 720px);
}

.cards-title-logo {
  display: block;
  width: min(100%, 640px);
  height: auto;
  max-height: min(22vh, 180px);
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 10px 28px rgba(168, 85, 247, 0.35));
}

.cards-marquee-frame {
  position: relative;
  width: 100%;
  padding: clamp(14px, 1.8vh, 22px) clamp(22px, 3vw, 40px);
  border-radius: 22px;
  border: 3px solid #38bdf8;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(99, 102, 241, 0.45), transparent 60%),
    linear-gradient(180deg, #4c1d95 0%, #2e1065 55%, #1e0b3d 100%);
  box-shadow:
    0 0 0 4px rgba(15, 23, 42, 0.65),
    0 0 40px rgba(56, 189, 248, 0.35),
    inset 0 0 40px rgba(167, 139, 250, 0.2);
}

.cards-marquee-bulbs {
  position: absolute;
  inset: 7px;
  border-radius: 16px;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 18%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 22% 10%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 38% 8%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 54% 8%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 70% 8%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 86% 12%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 94% 28%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 94% 52%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 94% 76%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 82% 92%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 62% 94%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 42% 94%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 22% 92%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 8% 78%, #a78bfa 0 4px, transparent 5px),
    radial-gradient(circle at 6% 52%, #c084fc 0 4px, transparent 5px),
    radial-gradient(circle at 6% 34%, #a78bfa 0 4px, transparent 5px);
  animation: cards-bulb-twinkle 1.8s ease-in-out infinite;
  opacity: 0.95;
}

@keyframes cards-bulb-twinkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.cards-title {
  position: relative;
  text-align: center;
  line-height: 0.95;
}

.cards-title-top {
  display: block;
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f8fafc;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.cards-title-main {
  display: block;
  margin-top: 2px;
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff7cc 0%, #fbbf24 42%, #d97706 78%, #92400e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 3px 0 #78350f)
    drop-shadow(0 6px 0 #451a03)
    drop-shadow(0 10px 18px rgba(251, 191, 36, 0.35));
}

.cards-ribbon {
  position: relative;
  z-index: 2;
  margin-top: -6px;
  padding: 0 28px;
}

.cards-ribbon-inner {
  display: inline-block;
  padding: 8px 36px;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #6d28d9, #9333ea 40%, #7c3aed 60%, #6d28d9);
  border: 2px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.45);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
}

.host-cards[data-state='voting'] .cards-ribbon-inner {
  background: linear-gradient(90deg, #1d4ed8, #38bdf8, #1d4ed8);
}

.host-cards[data-state='revealed'] .cards-ribbon-inner {
  background: linear-gradient(90deg, #ca8a04, #fbbf24, #ca8a04);
  color: #1a1028;
}

.host-cards[data-state='over'] .cards-ribbon-inner {
  background: linear-gradient(90deg, #047857, #34d399, #047857);
}

.cards-host-meta {
  margin: 0;
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5b4fc;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.cards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: min(calc(42dvh * var(--cards-scale, 80) / 100), 100%);
  padding: 8px 2px;
  overflow: visible;
}

.show-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  max-height: 100%;
  aspect-ratio: 5 / 7;
  align-self: center;
  perspective: 900px;
  container-type: size;
}

.show-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.show-card.is-face .show-card-inner {
  transform: rotateY(180deg);
}

.show-card-back,
.show-card-face {
  position: absolute;
  inset: 0;
  border-radius: clamp(8px, 1.2vw, 14px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 14px 32px -12px rgba(0, 0, 0, 0.85),
    0 0 0 2px rgba(255, 255, 255, 0.2);
}

.show-card-back {
  background: #7f1d1d;
}

.show-card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.show-card-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(28px, 5.5cqw, 72px);
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.show-card-face {
  transform: rotateY(180deg);
}

.show-card.is-next:not(.is-face) .show-card-back {
  box-shadow:
    0 14px 32px -12px rgba(0, 0, 0, 0.85),
    0 0 0 3px rgba(251, 191, 36, 0.85),
    0 0 28px rgba(251, 191, 36, 0.45);
}

.show-card.is-current.is-face .show-card-face {
  box-shadow:
    0 14px 32px -12px rgba(0, 0, 0, 0.85),
    0 0 0 3px rgba(167, 139, 250, 0.75),
    0 0 24px rgba(167, 139, 250, 0.4);
}

.playing-card {
  position: relative;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(165deg, #fffdf8 0%, #f4efe6 55%, #ebe4d8 100%);
  color: #16161d;
  border-radius: 14px;
}

.playing-card[data-suit='hearts'],
.playing-card[data-suit='diamonds'] {
  color: #c81e3a;
}

.playing-card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 800;
}

.playing-card-corner.top {
  top: 7%;
  left: 9%;
}

.playing-card-corner.bottom {
  right: 9%;
  bottom: 7%;
  transform: rotate(180deg);
}

.playing-card-corner-rank {
  font-size: clamp(11px, 8cqh, 22px);
}

.playing-card-corner-suit {
  font-size: clamp(10px, 6cqh, 18px);
}

.playing-card-rank {
  font-size: clamp(32px, 42cqh, 88px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.playing-card-suit {
  font-size: clamp(22px, 26cqh, 52px);
  line-height: 1;
  margin-top: 2px;
}

.cards-odds {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
  width: min(100%, 720px);
}

.cards-odds-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: clamp(8px, 1vh, 12px);
  text-align: center;
}

.cards-odds-arrow {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1;
}

.cards-odds-low .cards-odds-arrow {
  color: #38bdf8;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.65));
}

.cards-odds-high .cards-odds-arrow {
  color: #f472b6;
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.65));
}

.cards-odds-label {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cards-odds-low .cards-odds-label {
  color: #7dd3fc;
}

.cards-odds-high .cards-odds-label {
  color: #f9a8d4;
}

.cards-odds-count {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.cards-jackpot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: clamp(140px, 18vw, 210px);
  padding: clamp(10px, 1.3vh, 16px) clamp(18px, 2.2vw, 28px);
  border-radius: 14px;
  border: 2px solid #fbbf24;
  background: linear-gradient(180deg, rgba(69, 26, 3, 0.75), rgba(20, 10, 0, 0.85));
  box-shadow:
    0 0 28px rgba(251, 191, 36, 0.35),
    inset 0 0 18px rgba(251, 191, 36, 0.12);
}

.cards-jackpot-label {
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fde68a;
}

.cards-jackpot-value {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, #fff7cc, #fbbf24 50%, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.45));
}

.cards-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: min(100%, 560px);
  padding: 4px 0 0;
}

.cards-progress-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.cards-progress-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(50% + 10px);
  width: calc(100% - 20px);
  height: 3px;
  border-radius: 2px;
  background: rgba(167, 139, 250, 0.35);
  z-index: 0;
}

.cards-progress-node.done:not(:last-child)::after,
.cards-progress-node.active:not(:last-child)::after {
  background: linear-gradient(90deg, #fbbf24, rgba(251, 191, 36, 0.25));
}

.cards-progress-dot {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #312e81;
  border: 2px solid #a78bfa;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.35);
}

.cards-progress-node.star .cards-progress-dot {
  display: none;
}

.cards-progress-star {
  position: relative;
  z-index: 1;
  font-size: 22px;
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.7);
  line-height: 1;
}

.cards-progress-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.cards-progress-node.done .cards-progress-label,
.cards-progress-node.active .cards-progress-label,
.cards-progress-node.star .cards-progress-label {
  color: #fde68a;
}

.cards-result {
  text-align: center;
  min-height: 0;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffaf0, #fbbf24 55%, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(251, 191, 36, 0.45));
}

.cards-result:empty {
  display: none;
}

.cards-footer-tag {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #f8fafc;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.cards-footer-star {
  color: #fbbf24;
}

.cards-footer-win {
  color: #f9a8d4;
}

.cards-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(15, 23, 42, 0.55);
  font-size: clamp(12px, 1.15vw, 14px);
  color: #e2e8f0;
  text-align: center;
  flex: 0 0 auto;
}

.cards-connected strong {
  color: #38bdf8;
  font-size: 1.2em;
}

.cards-leaderboard {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
  flex: 1 1 0;
  min-height: 0;
}

.cards-lb-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: clamp(12px, 1.15vw, 14px);
}

.cards-lb-row.place-1 {
  background: rgba(251, 191, 36, 0.1);
}

.cards-lb-rank {
  font-weight: 800;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.cards-lb-row.place-1 .cards-lb-rank { color: #fbbf24; }
.cards-lb-row.place-2 .cards-lb-rank { color: #cbd5e1; }
.cards-lb-row.place-3 .cards-lb-rank { color: #fdba74; }

.cards-lb-name {
  font-weight: 800;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cards-lb-empty {
  margin: 0;
  font-size: 13px;
}

.cards-recent-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.22);
}

.cards-recent-trophy {
  font-size: 20px;
}

.cards-recent-card {
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 900;
  color: #fde68a;
  text-transform: uppercase;
}

.cards-recent-result {
  font-size: 12px;
  font-weight: 700;
  color: #e9d5ff;
}

.cards-recent-meta {
  margin: 6px 0 0;
  font-size: 11px;
  color: #94a3b8;
}

.cards-recent-empty {
  margin: 0;
  font-size: 13px;
}

.cards-alive {
  display: none;
}

.cards-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(178, 75, 255, 0.16);
  border: 1px solid rgba(178, 75, 255, 0.35);
  color: #e0c3ff;
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 700;
}

.cards-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  align-items: stretch;
}

.cards-phone-current {
  text-align: center;
  font-size: clamp(48px, 18vw, 72px);
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}

.cards-phone-current[data-suit='hearts'],
.cards-phone-current[data-suit='diamonds'] {
  color: #ff6b84;
}

.cards-phone-prompt {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--purple);
}

.cards-guesses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cards-guess {
  min-height: 88px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
}

.cards-guess.selected {
  border-color: var(--purple);
  background: rgba(178, 75, 255, 0.18);
  color: #f2e9ff;
}

.cards-guess:disabled {
  opacity: 0.45;
}

.bingo-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  align-items: stretch;
  text-align: center;
}

.bingo-phone-label {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}

.bingo-phone-call {
  font-size: clamp(48px, 18vw, 72px);
  font-weight: 900;
  line-height: 1;
}

.bingo-phone-nick {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  color: #fbbf24;
}

.bingo-claim-btn {
  min-height: 64px;
  font-size: 1.35rem;
  font-weight: 900;
  border-radius: 18px;
  background: linear-gradient(180deg, #a855f7, #6d28d9);
  border: none;
  color: #fff;
}

.bingo-claim-btn:disabled {
  opacity: 0.5;
}

.bingo-phone-hint {
  margin: 0;
  font-size: 14px;
}

.cards-hint {
  text-align: center;
  font-size: 14px;
}

/* Cards full-bleed gameshow layout */
body[data-host-mode='cards'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
}

body[data-host-mode='cards'] .host-top {
  display: none !important;
}

body[data-host-mode='cards'] .host-teams:not(.hidden) {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  width: min(720px, 92vw);
}

body[data-host-mode='cards'] .host-cards {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

@media (max-width: 960px) {
  .host-cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    overflow-y: auto;
  }

  .cards-sidebar-left {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cards-sidebar-left .cards-howto,
  .cards-sidebar-left .cards-join-panel {
    flex: 1 1 240px;
  }

  .cards-main {
    order: 1;
  }

  .cards-sidebar-right {
    order: 3;
  }

  .cards-row {
    gap: 6px;
    min-height: 140px;
    max-height: min(calc(30dvh * var(--cards-scale, 80) / 100), 220px);
  }

  .show-card {
    max-height: 100%;
  }
}

body.host-pixel[data-host-mode='cards'] .host-top {
  display: none !important;
}

body.host-pixel[data-host-mode='cards'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
}

body.host-pixel[data-host-mode='cards'] .host-cards {
  grid-row: 1;
  height: 100%;
  padding: 4px;
  gap: 4px;
  grid-template-columns: 1fr;
}

body.host-pixel .cards-host-meta {
  font-size: 11px;
}

body.host-pixel .show-card {
  max-height: calc(88px * var(--cards-scale, 80) / 80);
}

body.host-pixel .show-card-num {
  font-size: 28px;
}

body.host-pixel .cards-chip {
  padding: 2px 6px;
  font-size: 10px;
}

body.host-pixel .cards-alive {
  gap: 4px;
  max-height: 28%;
}

body.host-pixel .cards-result {
  font-size: 18px;
}

/* --------------------------------------------------------------- side A / B */

.host-teams {
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(22, 22, 31, 0.75);
}

.host-teams.hidden {
  display: none;
}

.host-team {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.host-team.side-a {
  text-align: left;
  color: #7aa7ff;
}

.host-team.side-b {
  text-align: right;
  color: #ff8da0;
}

.host-team-label {
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.host-team-score {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.host-team-count {
  font-size: clamp(12px, 1.3vw, 16px);
  color: var(--muted);
}

.host-teams-mid {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
  color: var(--purple);
  text-align: center;
  min-width: 5em;
}

.host-teams[data-picking='true'] {
  border-color: rgba(178, 75, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(178, 75, 255, 0.2);
}

.you-team {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
}

.you-team[data-side='a'] {
  color: #7aa7ff;
}

.you-team[data-side='b'] {
  color: #ff8da0;
}

.teams-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-height: 0;
}

.teams-title {
  text-align: center;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 800;
}

.teams-sub {
  text-align: center;
}

.teams-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.team-choice {
  min-height: 120px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 26px;
  font-weight: 900;
}

.team-choice.side-a.selected,
.team-choice.side-a:not(:disabled):active {
  border-color: #4d8dff;
  background: rgba(77, 141, 255, 0.2);
  color: #cfe0ff;
}

.team-choice.side-b.selected,
.team-choice.side-b:not(:disabled):active {
  border-color: #ff2d4b;
  background: rgba(255, 45, 75, 0.18);
  color: #ffc1cb;
}

.team-choice:disabled {
  opacity: 0.45;
}

.teams-hint {
  text-align: center;
  font-size: 14px;
}

body.host-pixel .host-teams {
  padding: 4px 8px;
  border-radius: 8px;
  gap: 6px;
}

body.host-pixel .host-team-label {
  font-size: 10px;
}

body.host-pixel .host-team-score {
  font-size: 28px;
}

body.host-pixel .host-team-count {
  font-size: 10px;
}

body.host-pixel .host-teams-mid {
  font-size: 12px;
  min-width: 3em;
}

/* --------------------------------------------------------------- prize wheel */

.host-wheel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(90% 60% at 50% 46%, rgba(178, 75, 255, 0.2), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 194, 60, 0.12), rgba(15, 14, 22, 0.75) 60%);
  padding: 14px 20px 12px;
}

.host-wheel[data-state='spinning'] {
  border-color: rgba(178, 75, 255, 0.55);
  box-shadow: inset 0 0 90px -40px rgba(178, 75, 255, 0.9);
}

.host-wheel[data-state='finished'] {
  border-color: rgba(255, 194, 60, 0.6);
  box-shadow: inset 0 0 90px -40px rgba(255, 194, 60, 0.9);
}

.wheel-host-head {
  text-align: center;
}

.host-wheel .host-state {
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff6dc, #ffc23c 55%, #d99a12);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wheel-host-meta {
  margin-top: 2px;
  font-size: clamp(14px, 1.5vw, 20px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* flex-basis 0 so the canvas's intrinsic size cannot grow the big-screen row. */
.wheel-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wheel-disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.wheel-canvas {
  width: calc(min(100vw, 100dvh) * var(--wheel-scale, 80) / 100);
  height: auto;
  aspect-ratio: 1;
  max-width: calc(min(100vw, 100dvh) * var(--wheel-scale, 80) / 100);
  max-height: calc(min(100vw, 100dvh) * var(--wheel-scale, 80) / 100);
  min-width: 0;
  min-height: 0;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.75));
}

.host-wheel[data-state='spinning'] .wheel-canvas {
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 34px rgba(178, 75, 255, 0.45));
}

.host-wheel[data-state='finished'] .wheel-canvas {
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 40px rgba(255, 194, 60, 0.55));
}

.wheel-result {
  text-align: center;
  min-height: 1.1em;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffaf0, #ffc23c 55%, #d99a12);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255, 194, 60, 0.45));
}

/* Wheel sizes are % of the full page — clear the chrome so the math is honest. */
body[data-host-mode='wheel'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
}

body[data-host-mode='wheel'] .host-top {
  display: none !important;
}

body[data-host-mode='wheel'] .host-teams:not(.hidden) {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  width: min(720px, 92vw);
}

body:not(.host-pixel)[data-host-mode='wheel'] .host-teams {
  display: none !important;
}

body[data-host-mode='wheel'] .host-wheel {
  grid-row: 1;
  position: relative;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(178, 75, 255, 0.22), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 194, 60, 0.1), var(--bg) 65%);
  box-shadow: none;
}

body[data-host-mode='wheel'] .wheel-host-head {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}

body[data-host-mode='wheel'] .wheel-result {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 4;
  min-height: 0;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}

body[data-host-mode='wheel'] .wheel-stage,
body[data-host-mode='wheel'] .wheel-disc {
  width: 100%;
  height: 100%;
}

.wheel-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-height: 0;
}

.wheel-stop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 220px;
  border-radius: 28px;
  border: 2px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: clamp(42px, 12vw, 64px);
  font-weight: 900;
}

.wheel-stop-btn .sub {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

.wheel-stop-btn[data-state='live'] {
  background: linear-gradient(180deg, #c56bff, #8a2be2);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(178, 75, 255, 0.2), 0 18px 50px -18px rgba(178, 75, 255, 0.85);
}

.wheel-stop-btn[data-state='live']:active {
  transform: scale(0.98);
}

.wheel-stop-btn[data-state='won'] {
  background: linear-gradient(180deg, #1ce88a, #0fa860);
  color: #04231a;
  border-color: transparent;
}

.wheel-stop-btn[data-state='done'],
.wheel-stop-btn[data-state='locked'],
.wheel-stop-btn[data-state='idle'] {
  opacity: 0.85;
}

.wheel-phone-result {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

body.host-pixel[data-host-mode='wheel'] .host-top {
  display: none !important;
}

body.host-pixel[data-host-mode='wheel'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
}

body.host-pixel[data-host-mode='wheel'] .host-teams:not(.hidden) {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  width: min(720px, 92vw);
}

body.host-pixel[data-host-mode='wheel'] .host-wheel {
  grid-row: 1;
  height: 100%;
  padding: 0;
  border-radius: 0;
  gap: 0;
}

body.host-pixel .wheel-canvas {
  width: calc(min(100vw, 100dvh) * var(--wheel-scale, 80) / 100);
}

body.host-pixel .wheel-disc {
  width: auto;
  height: auto;
}

body.host-pixel .wheel-host-meta {
  font-size: 11px;
}

/* Gradient-clipped text turns to mush on a low-res LED wall — go flat gold. */
body.host-pixel .host-wheel .host-state,
body.host-pixel .wheel-result {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffc23c;
  filter: none;
}

body.host-pixel .wheel-result {
  font-size: 18px;
}

/* --------------------------------------------------------------- memory game */

.memory-admin-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.memory-admin-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  cursor: default;
}

.memory-admin-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.memory-admin-tile-label {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 6px;
  border-radius: 6px;
}

.memory-admin-tile.live {
  cursor: pointer;
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}

.memory-admin-tile.live:hover {
  border-color: #38bdf8;
}

.memory-admin-tile.revealed {
  opacity: 0.45;
  filter: grayscale(0.4);
}

.memory-admin-tile:disabled {
  cursor: default;
}

.host-memory {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
    rgba(15, 14, 22, 0.72);
  padding: 14px 20px 16px;
}

.memory-host-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 12px;
}

.memory-host-head .host-state {
  grid-column: 2;
  text-align: center;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memory-host-meta {
  grid-column: 1;
  font-size: clamp(14px, 1.6vw, 22px);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.memory-host-clock {
  grid-column: 3;
  justify-self: end;
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #e2e8f0;
}

.memory-host-clock.hidden {
  visibility: hidden;
}

.memory-slide-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.memory-slide-image {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.memory-slide-count {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.memory-blank {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.45);
}

.memory-blank-title {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f8fafc;
}

.memory-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 0.8vw, 12px);
}

.memory-cell {
  position: relative;
  min-height: 0;
  border-radius: 12px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  background:
    linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  overflow: hidden;
}

.memory-cell-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 2.4vw, 36px);
  font-weight: 800;
  color: rgba(148, 163, 184, 0.55);
}

.memory-cell-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 220ms ease, transform 220ms ease;
}

.memory-cell.revealed {
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25);
}

.memory-cell.revealed .memory-cell-empty {
  opacity: 0;
}

.memory-cell.revealed .memory-cell-image {
  opacity: 1;
  transform: scale(1);
}

.memory-score {
  text-align: center;
  font-size: clamp(42px, 7vw, 88px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #f8fafc;
  text-shadow: 0 4px 24px rgba(56, 189, 248, 0.35);
}

body[data-host-mode='memory'] .host-top,
body[data-host-mode='zoom'] .host-top {
  display: none !important;
}

body[data-host-mode='memory'] .host,
body[data-host-mode='zoom'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body[data-host-mode='memory'] .host-memory,
body[data-host-mode='zoom'] .host-zoom {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='memory'] .host-teams,
body:not(.host-pixel)[data-host-mode='zoom'] .host-teams {
  display: none !important;
}

body[data-host-mode='memory'] .host-teams:not(.hidden),
body[data-host-mode='zoom'] .host-teams:not(.hidden) {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  width: min(720px, 92vw);
}

body.host-pixel .host-memory {
  border-radius: 8px;
  padding: 8px 10px;
}

body.host-pixel .memory-host-head .host-state {
  font-size: 14px;
}

body.host-pixel .memory-host-meta,
body.host-pixel .memory-host-clock {
  font-size: 12px;
}

body.host-pixel .memory-blank-title {
  font-size: 28px;
}

body.host-pixel .memory-cell {
  border-radius: 6px;
  border-width: 1px;
}

body.host-pixel .memory-cell-image {
  transition: none;
}

body.host-pixel .memory-score {
  font-size: 28px;
}

/* quiz — phone/admin + shared bar highlights */
.vote-bar-row.correct .vote-bar-fill { background: linear-gradient(90deg, #16d47b, #0ea5e9); }
.vote-bar-row.correct .vote-bar-letter { color: #16d47b; }
.vote-option.correct { border-color: #16d47b; }
.vote-option.wrong { opacity: 0.55; }
.quiz-score { margin-top: 10px; text-align: center; font-weight: 700; }
.quiz-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quiz-board.hidden { display: none; }
.quiz-board-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(255, 184, 64, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: clamp(11px, 0.85vw, 14px);
}
.quiz-board-place { font-weight: 800; color: #ffd784; }
.quiz-board-score { font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }

.quiz-final.hidden { display: none; }
.quiz-live.hidden { display: none; }
.quiz-final-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(255, 184, 64, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.quiz-final-teams.hidden { display: none; }
.quiz-final-team {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quiz-final-team[data-team='b'] { text-align: right; }
.quiz-final-team-name {
  font-size: clamp(14px, 1.4vw, 22px);
  color: #c8b8a0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.quiz-final-team-score {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  color: #ffd84a;
}
.quiz-final-vs {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
  color: #c8b8a0;
}
.quiz-final-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  overflow: hidden;
}
.quiz-final-empty {
  grid-column: 1 / -1;
  padding: 40px 12px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 24px);
}
.quiz-final-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: clamp(16px, 1.8vw, 28px);
}
.quiz-final-row.lead {
  background: rgba(255, 176, 32, 0.14);
  border: 1px solid rgba(255, 176, 32, 0.35);
}
.quiz-final-place { font-weight: 800; color: var(--muted); }
.quiz-final-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-final-score { font-weight: 900; font-variant-numeric: tabular-nums; }

.host-quiz[data-state='final'] .quiz-live-strip .host-state {
  color: #16d47b;
}

.host-quiz[data-state='open'] .quiz-live-strip .host-state {
  color: #54d7ff;
}

.host-quiz[data-state='closed'] .quiz-live-strip .host-state {
  color: #ffb840;
}

.host-quiz[data-state='revealed'] .quiz-live-strip .host-state {
  color: #16d47b;
}

.quiz-phone-board {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.quiz-phone-board.hidden { display: none; }
.quiz-phone-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 15px;
}
.quiz-phone-row.mine {
  border: 1px solid rgba(255, 176, 32, 0.5);
  background: rgba(255, 176, 32, 0.12);
}

.host-prompt {
  margin: 0 0 18px;
  text-align: center;
}
.host-prompt.hidden { display: none; }
.host-prompt-question {
  margin-top: 8px;
  font-size: clamp(28px, 4.2vw, 64px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.host-prompt-image {
  margin: 16px auto 0;
  max-width: min(720px, 92vw);
}
.host-prompt-image.hidden { display: none; }
.host-prompt-image-el {
  display: block;
  width: 100%;
  max-height: min(36vh, 360px);
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.quiz-host-image {
  margin: 10px auto 0;
  max-width: min(520px, 100%);
  text-align: center;
}
.quiz-host-image.hidden { display: none; }
.quiz-host-image-el,
.quiz-host-image img {
  display: block;
  width: 100%;
  max-height: min(22vh, 220px);
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.quiz-phone-image {
  margin: 0 0 12px;
  text-align: center;
}
.quiz-phone-image.hidden { display: none; }
.quiz-phone-image img {
  display: block;
  width: 100%;
  max-height: 36vh;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.quiz-admin-image {
  max-width: 420px;
}
.quiz-admin-image.hidden { display: none; }
.quiz-admin-image img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}

/* ---------- Celebrity lookalike ---------- */

.lookalike-panel {
  width: min(100%, 420px);
  margin: 0 auto;
  text-align: center;
}

.lookalike-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.lookalike-hint {
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.lookalike-form {
  text-align: left;
}

.lookalike-phone-preview {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.lookalike-phone-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.lookalike-waiting {
  margin: 18px 0 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.lookalike-admin-preview {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.lookalike-admin-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}

.zoom-admin-preview {
  position: relative;
  margin-top: 14px;
  width: min(100%, 280px);
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

.zoom-admin-preview img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.zoom-admin-level {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 4, 20, 0.82);
  color: #ffd84a;
  font-size: 13px;
  font-weight: 800;
}

.zoom-guess-row {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.zoom-guess-row.correct {
  color: var(--green);
  font-weight: 800;
}

.zoom-panel {
  width: min(100%, 420px);
  margin: 0 auto;
  text-align: center;
}

.zoom-phone-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.zoom-phone-hint {
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.zoom-phone-form {
  text-align: left;
}

.zoom-phone-waiting {
  margin: 18px 0 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.lookalike-admin-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.lookalike-admin-celeb {
  margin: 6px 0 0;
  font-size: 1rem;
  color: var(--amber, #f5c542);
}

.host-lookalike {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 105, 180, 0.14), transparent 55%),
    rgba(15, 14, 22, 0.72);
  padding: 14px 20px 16px;
}

body[data-host-mode='lookalike'] .host-top {
  display: none !important;
}

body[data-host-mode='lookalike'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body[data-host-mode='lookalike'] .host-lookalike {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='lookalike'] .host-teams {
  display: none !important;
}

@media (max-width: 640px) {
  .lookalike-admin-preview {
    grid-template-columns: 1fr;
  }
}

/* —— Bingo calling (host) —— */
.host-bingo {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(88, 28, 135, 0.45), transparent 55%),
    linear-gradient(165deg, #12061f 0%, #070318 55%, #140828 100%);
}

.bingo-show {
  --bingo-b: #ff3b4a;
  --bingo-i: #22d3ee;
  --bingo-n: #4ade80;
  --bingo-g: #fbbf24;
  --bingo-o: #c084fc;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 20%) minmax(0, 1fr) minmax(160px, 18%);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 12px;
  padding: 10px 12px 12px;
  box-sizing: border-box;
}

.bingo-top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.bingo-brand-logo {
  height: clamp(42px, 6vh, 64px);
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.bingo-top-status {
  text-align: center;
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e9d5ff;
}

.bingo-clock {
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 0 18px rgba(253, 224, 71, 0.35);
}

.bingo-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}

.bingo-sidebar-left { grid-column: 1; grid-row: 2; }
.bingo-main { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.bingo-sidebar-right { grid-column: 3; grid-row: 2; }

.bingo-panel-box {
  background: rgba(24, 12, 48, 0.88);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bingo-panel-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c4b5fd;
}

.bingo-info {
  margin: 0;
  display: grid;
  gap: 6px;
}

.bingo-info > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  font-size: 13px;
}

.bingo-info dt {
  margin: 0;
  color: #a78bfa;
  font-weight: 700;
}

.bingo-info dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
  color: #f8fafc;
}

.bingo-prize {
  color: #fbbf24 !important;
}

.bingo-caller {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 900;
}

.bingo-history {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 28vh;
  overflow: auto;
}

.bingo-history-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

.bingo-ball {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  aspect-ratio: 1;
  font-weight: 900;
  color: #fff;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.45),
    inset 0 -6px 12px rgba(0, 0, 0, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.25);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), transparent 28%),
    radial-gradient(circle at 50% 55%, var(--ball, #ff3b4a), color-mix(in srgb, var(--ball, #ff3b4a) 55%, #000));
}

.bingo-ball[data-band='b'] { --ball: var(--bingo-b); }
.bingo-ball[data-band='i'] { --ball: var(--bingo-i); }
.bingo-ball[data-band='n'] { --ball: var(--bingo-n); }
.bingo-ball[data-band='g'] { --ball: var(--bingo-g); }
.bingo-ball[data-band='o'] { --ball: var(--bingo-o); }

.bingo-ball-sm {
  width: 34px;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
  padding: 2px;
}

.bingo-ball-md {
  width: clamp(72px, 9vw, 100px);
  margin: 0 auto;
  font-size: clamp(22px, 2.8vw, 34px);
}

.bingo-ball-lg {
  width: clamp(104px, 13vw, 156px);
  margin: 0 auto;
  font-size: clamp(32px, 4.2vw, 52px);
  animation: bingo-pop 0.55s ease;
}

.bingo-ball-letter {
  display: none;
}

.bingo-ball-num {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.35em;
  line-height: 1;
}

.bingo-ball-sm .bingo-ball-letter {
  display: none;
}

.bingo-ball-sm .bingo-ball-num {
  font-size: 14px;
}

.bingo-calls-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.bingo-call-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a78bfa;
  text-align: center;
}

.bingo-announce {
  position: relative;
  min-height: 110px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(192, 132, 252, 0.4);
  background:
    radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.35), transparent 55%),
    rgba(20, 8, 40, 0.92);
  text-align: center;
  overflow: hidden;
}

.bingo-announce-label {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
}

.bingo-announce-nick {
  margin: 8px 0 0;
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 800;
  font-style: italic;
  color: #fde047;
}

.host-bingo .bingo-announce-nick:empty,
.host-bingo .bingo-last-nick {
  display: none;
}

.bingo-announce-extra {
  margin: 6px 0 0;
  font-size: clamp(18px, 2.4vw, 32px);
  font-weight: 900;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: 1.1em;
}

.host-bingo[data-state='won'] .bingo-announce {
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.35);
}

.bingo-last-nick,
.bingo-last-ago {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: #cbd5e1;
}

.bingo-last-ago { color: #94a3b8; font-size: 11px; }

.bingo-board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  background: rgba(10, 4, 24, 0.72);
}

.bingo-letters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  text-align: center;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.bingo-letters [data-band='b'] { color: var(--bingo-b); }
.bingo-letters [data-band='i'] { color: var(--bingo-i); }
.bingo-letters [data-band='n'] { color: var(--bingo-n); }
.bingo-letters [data-band='g'] { color: var(--bingo-g); }
.bingo-letters [data-band='o'] { color: var(--bingo-o); }

.bingo-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: 4px;
}

.bingo-cell {
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: clamp(11px, 1.15vw, 16px);
  font-weight: 800;
  color: rgba(248, 250, 252, 0.55);
  background: rgba(255, 255, 255, 0.03);
}

.bingo-cell.is-called {
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), transparent 30%),
    radial-gradient(circle at 50% 55%, var(--ball), color-mix(in srgb, var(--ball) 50%, #000));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ball) 55%, transparent);
}

.bingo-cell[data-band='b'] { --ball: var(--bingo-b); }
.bingo-cell[data-band='i'] { --ball: var(--bingo-i); }
.bingo-cell[data-band='n'] { --ball: var(--bingo-n); }
.bingo-cell[data-band='g'] { --ball: var(--bingo-g); }
.bingo-cell[data-band='o'] { --ball: var(--bingo-o); }

.bingo-cell.is-current {
  outline: 2px solid #fff;
  outline-offset: 1px;
  transform: scale(1.06);
}

.bingo-footer-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.bingo-stat {
  text-align: center;
  color: #fde047;
}

.bingo-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.bingo-stat strong {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 900;
}

.bingo-call-hint {
  text-align: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.55), rgba(76, 29, 149, 0.75));
  font-size: 13px;
  font-weight: 800;
  color: #f5f3ff;
}

.bingo-connected-box { text-align: center; }
.bingo-connected-count {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  color: #4ade80;
  line-height: 1;
}
.bingo-connected-label {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86efac;
}
.bingo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
}

.bingo-pattern-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: #fde047;
  text-align: center;
}

.bingo-pattern-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: min(100%, 120px);
  margin: 0 auto;
}

.bingo-pattern-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.bingo-pattern-cell.on {
  background: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.55);
}

.bingo-winner {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bingo-winner-trophy { font-size: 28px; }
.bingo-winner-name {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #fde047;
}
.bingo-winner-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

.bingo-claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 18vh;
  overflow: auto;
  font-size: 13px;
}

.bingo-claims li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

@keyframes bingo-pop {
  0% { transform: scale(0.7); opacity: 0.4; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.bingo-claim-splash {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.28), transparent 45%),
    rgba(7, 3, 24, 0.72);
  backdrop-filter: blur(4px);
  animation: bingo-claim-in 0.45s ease both;
}

.bingo-claim-splash.hidden {
  display: none;
}

.bingo-claim-splash-logo {
  margin: 0;
  font-size: clamp(64px, 14vw, 160px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 0.9;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff7cc 0%, #fbbf24 40%, #f59e0b 70%, #b45309 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 4px 0 #78350f)
    drop-shadow(0 10px 0 #451a03)
    drop-shadow(0 16px 40px rgba(251, 191, 36, 0.45));
  animation: bingo-claim-pulse 1.4s ease-in-out infinite;
}

.bingo-claim-splash-name {
  margin: 0;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900;
  color: #f8fafc;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

.bingo-claim-splash-sub {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c4b5fd;
}

@keyframes bingo-claim-in {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bingo-claim-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

body[data-host-mode='bingo'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 8px;
}

body[data-host-mode='bingo'] .host-top,
body[data-host-mode='bingo'] .host-join {
  display: none;
}

body[data-host-mode='bingo'] .host-bingo {
  grid-row: 1;
  height: 100%;
}

@media (max-width: 980px) {
  .bingo-show {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    overflow: auto;
  }
  .bingo-sidebar-left,
  .bingo-main,
  .bingo-sidebar-right {
    grid-column: 1;
    grid-row: auto;
  }
  .bingo-calls-row {
    grid-template-columns: 1fr;
  }
}

/* —— Bingo admin desk —— */
.bingo-admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.bingo-admin-controls {
  position: sticky;
  top: 64px;
  align-self: start;
}

.bingo-admin-desk {
  --bingo-b: #ff3b4a;
  --bingo-i: #22d3ee;
  --bingo-n: #4ade80;
  --bingo-g: #fbbf24;
  --bingo-o: #c084fc;
  position: relative;
  min-width: 0;
  min-height: 680px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(88, 28, 135, 0.45), transparent 55%),
    linear-gradient(165deg, #12061f 0%, #070318 55%, #140828 100%);
}

.bingo-admin-show {
  box-sizing: border-box;
  height: 100%;
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) minmax(150px, 190px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    'top top top'
    'left main right';
  gap: 10px;
  padding: 10px 12px 12px;
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.15);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.bingo-admin-desk.is-live .bingo-admin-show {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}

.bingo-admin-show > .bingo-top {
  grid-area: top;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.bingo-admin-show > .bingo-sidebar-left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.bingo-admin-show > .bingo-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.bingo-admin-show > .bingo-sidebar-right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.bingo-admin-show .bingo-calls-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

.bingo-admin-show .bingo-board-wrap {
  flex: 1 1 auto;
  min-height: 220px;
}

.bingo-admin-show .bingo-footer-stats {
  flex: 0 0 auto;
}

.bingo-admin-show .bingo-grid {
  gap: 3px;
}

.bingo-admin-show .bingo-cell {
  font-size: clamp(10px, 1vw, 14px);
}

.bingo-admin-show .bingo-ball-lg {
  width: clamp(88px, 9vw, 128px);
  font-size: clamp(28px, 3.4vw, 44px);
}

.bingo-admin-show .bingo-ball-md {
  width: clamp(60px, 6.5vw, 84px);
  font-size: clamp(20px, 2.4vw, 30px);
}

.bingo-admin-show .bingo-brand-logo {
  height: 44px;
  width: auto;
  background: transparent;
}

.bingo-admin-idle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  background: rgba(7, 3, 24, 0.55);
  backdrop-filter: blur(2px);
}

.bingo-admin-idle.hidden {
  display: none;
}

.bingo-admin-call-btn {
  cursor: pointer;
  font: inherit;
  appearance: none;
  width: 100%;
}

.bingo-admin-call-btn:hover {
  filter: brightness(1.08);
}

.bingo-admin-claim-pick {
  appearance: none;
  border: 0;
  background: transparent;
  color: #f8fafc;
  font: inherit;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.bingo-admin-claim-pick:hover {
  color: #fde047;
}

@media (max-width: 1200px) {
  .bingo-admin-layout {
    grid-template-columns: 1fr;
  }

  .bingo-admin-controls {
    position: static;
  }

  .bingo-admin-desk,
  .bingo-admin-show {
    min-height: 0;
    height: auto;
  }

  .bingo-admin-show {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'top top'
      'main main'
      'left right';
  }

  .bingo-admin-show .bingo-board-wrap {
    min-height: 280px;
  }
}

@media (max-width: 720px) {
  .bingo-admin-show {
    grid-template-columns: 1fr;
    grid-template-areas:
      'top'
      'main'
      'left'
      'right';
  }

  .bingo-admin-show .bingo-calls-row {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------- heads or tails */

.host-coin {
  --coin-gold: #ffd56a;
  --coin-gold-deep: #e0a020;
  --coin-blue: #4ecbff;
  --coin-blue-deep: #1a8fd4;
  --coin-panel: rgba(18, 4, 36, 0.88);
  --coin-line: rgba(255, 213, 106, 0.35);
  display: grid;
  grid-template-columns: minmax(160px, 0.2fr) minmax(0, 1fr) minmax(160px, 0.2fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'top top top'
    'left main right'
    'foot foot foot';
  gap: clamp(6px, 1vh, 12px);
  column-gap: clamp(10px, 1.4vw, 20px);
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  padding: clamp(8px, 1vw, 14px);
  background: #0a0014;
  color: #f4eefc;
  box-sizing: border-box;
}

.coin-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.coin-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.coin-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 35%, rgba(120, 40, 180, 0.25), transparent 70%),
    linear-gradient(180deg, rgba(8, 0, 20, 0.35), rgba(8, 0, 20, 0.72));
}

.host-coin > *:not(.coin-show-bg) {
  position: relative;
  z-index: 1;
}

.coin-top {
  grid-area: top;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 0;
}

.coin-brand-logo {
  width: clamp(56px, 7vw, 100px);
  max-height: min(10vh, 72px);
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.coin-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.coin-title-logo {
  width: min(720px, 58vw);
  height: auto;
  max-height: min(14vh, 120px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}

.coin-cta-pill {
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--coin-gold);
  background: rgba(0, 0, 0, 0.72);
  color: var(--coin-gold);
  font-size: clamp(9px, 1vh, 13px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.coin-top-clock {
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.75);
}

.coin-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  z-index: 2;
}

.coin-sidebar-left { grid-area: left; }
.coin-sidebar-right { grid-area: right; }

.coin-panel-box {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--coin-line);
  background: var(--coin-panel);
  backdrop-filter: blur(8px);
  flex: 0 1 auto;
  min-height: 0;
}

.coin-panel-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coin-gold);
}

.coin-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coin-howto li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

.coin-howto strong {
  color: #fff;
}

.coin-howto-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
}

.coin-howto-pick {
  color: var(--coin-gold);
  border-color: rgba(255, 213, 106, 0.5);
}

.coin-live {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #6dff9a;
}

.coin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6dff9a;
  box-shadow: 0 0 10px #6dff9a;
  animation: coin-pulse 1.4s ease-in-out infinite;
}

@keyframes coin-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.coin-connected {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
}

.coin-connected strong {
  font-size: 22px;
  color: #fff;
}

.coin-last {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
}

.coin-last-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 213, 106, 0.45));
}

.coin-last-side {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--coin-gold);
}

.coin-last-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.coin-join-code {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
}

.coin-join-url {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  word-break: break-all;
}

.coin-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vh, 16px);
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

.coin-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(56px, 0.24fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(6px, 1vw, 16px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.coin-choice {
  appearance: none;
  border: 2px solid transparent;
  border-radius: 22px;
  background: rgba(10, 0, 24, 0.55);
  padding: clamp(6px, 1vh, 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: default;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.coin-choice-heads {
  border-color: rgba(255, 213, 106, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 213, 106, 0.15),
    0 0 18px rgba(255, 180, 40, 0.22),
    inset 0 0 24px rgba(255, 200, 60, 0.08);
}

.coin-choice-tails {
  border-color: rgba(78, 203, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(78, 203, 255, 0.15),
    0 0 18px rgba(40, 160, 220, 0.22),
    inset 0 0 24px rgba(60, 180, 255, 0.08);
}

.coin-choice-img {
  width: min(200px, 100%, 34vh);
  max-width: 100%;
  max-height: min(34vh, 240px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}

.coin-choice-pct {
  margin: 2px 0 0;
  font-size: clamp(22px, 3.4vh, 44px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.coin-choice-heads .coin-choice-pct { color: var(--coin-gold); }
.coin-choice-tails .coin-choice-pct { color: var(--coin-blue); }

.coin-choice-votes {
  margin: 0;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.coin-choice-heads .coin-choice-votes { color: var(--coin-gold); }
.coin-choice-tails .coin-choice-votes { color: var(--coin-blue); }

.host-coin[data-state='picking'] .coin-choice,
.host-coin[data-state='locked'] .coin-choice {
  animation: coin-choice-breathe 2.4s ease-in-out infinite;
}

.host-coin[data-state='revealed'] .coin-choice.is-winner,
.host-coin[data-state='over'] .coin-choice.is-winner {
  transform: scale(1.04);
}

.host-coin[data-state='revealed'] .coin-choice.is-loser,
.host-coin[data-state='over'] .coin-choice.is-loser {
  opacity: 0.45;
  filter: grayscale(0.35);
}

@keyframes coin-choice-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.coin-spin-wrap {
  position: relative;
  width: min(150px, 100%, 22vh);
  max-width: min(16vw, 22vh);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  justify-self: center;
}

.coin-spin-img,
.coin-result-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  grid-area: 1 / 1;
}

.coin-result-img {
  opacity: 0;
  transform: scale(0.7) rotateY(90deg);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
  filter: drop-shadow(0 0 28px rgba(255, 213, 106, 0.55));
}

.coin-spin-img {
  opacity: 0.35;
  filter: drop-shadow(0 0 24px rgba(255, 213, 106, 0.35));
}

.host-coin[data-state='ready'] .coin-spin-img,
.host-coin[data-state='picking'] .coin-spin-img,
.host-coin[data-state='locked'] .coin-spin-img {
  opacity: 0.55;
  animation: coin-idle-tilt 3.2s ease-in-out infinite;
}

.host-coin[data-state='flipping'] .coin-spin-img {
  opacity: 1;
  animation: coin-flip-spin 0.35s linear infinite;
}

.host-coin[data-state='revealed'] .coin-spin-img,
.host-coin[data-state='over'] .coin-spin-img {
  opacity: 0;
}

.host-coin[data-state='revealed'] .coin-result-img,
.host-coin[data-state='over'] .coin-result-img {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
}

.host-coin[data-state='revealed'] .coin-spin-wrap[data-side='tails'] .coin-result-img,
.host-coin[data-state='over'] .coin-spin-wrap[data-side='tails'] .coin-result-img {
  filter: drop-shadow(0 0 28px rgba(78, 203, 255, 0.55));
}

@keyframes coin-idle-tilt {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.04); }
}

@keyframes coin-flip-spin {
  0% { transform: rotateY(0deg) scaleX(1); }
  50% { transform: rotateY(180deg) scaleX(0.35); }
  100% { transform: rotateY(360deg) scaleX(1); }
}

.coin-flare {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 70%;
  height: 24%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 240, 180, 0.85), rgba(80, 180, 255, 0.35), transparent 70%);
  filter: blur(8px);
  opacity: 0.55;
  pointer-events: none;
}

.host-coin[data-state='flipping'] .coin-flare {
  animation: coin-flare-pulse 0.6s ease-in-out infinite;
}

@keyframes coin-flare-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(0.9); }
  50% { opacity: 0.95; transform: translateX(-50%) scale(1.15); }
}

.coin-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(720px, 92%);
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.coin-progress-coin {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.coin-progress-label {
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.coin-progress-chevrons {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.12em;
  opacity: 0.7;
}

.coin-progress-left { color: var(--coin-gold); }
.coin-progress-right { color: var(--coin-blue); }

.host-coin[data-state='flipping'] .coin-progress-chevrons {
  animation: coin-chevron 0.5s linear infinite;
}

@keyframes coin-chevron {
  0% { opacity: 0.35; }
  50% { opacity: 1; }
  100% { opacity: 0.35; }
}

.coin-round {
  margin: 0;
  font-size: clamp(18px, 2.2vh, 28px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.coin-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(18vh, 160px);
  overflow: auto;
}

.coin-history li {
  display: grid;
  grid-template-columns: 52px 28px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}

.coin-history-rnd {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.coin-history-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.coin-history-badge[data-side='heads'] {
  background: rgba(255, 180, 40, 0.2);
  color: var(--coin-gold);
  border: 1px solid rgba(255, 213, 106, 0.45);
}

.coin-history-badge[data-side='tails'] {
  background: rgba(40, 160, 220, 0.2);
  color: var(--coin-blue);
  border: 1px solid rgba(78, 203, 255, 0.45);
}

.coin-history-empty {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.coin-points {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--coin-gold);
}

.coin-points strong {
  font-size: 32px;
  font-weight: 900;
}

.coin-footer {
  grid-area: foot;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.coin-footer-left { justify-self: start; color: rgba(255, 255, 255, 0.75); }
.coin-footer-mid { justify-self: center; color: var(--coin-gold); text-align: center; }
.coin-footer-right {
  justify-self: end;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
}

.coin-footer-right strong { color: #fff; }

/* phone picks */
.coin-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  align-items: stretch;
}

.coin-phone-prompt {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--purple);
  margin: 0;
}

.coin-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.coin-pick {
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(22, 22, 31, 0.85);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.coin-pick img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.coin-pick[data-side='heads'] {
  border-color: rgba(255, 213, 106, 0.45);
}

.coin-pick[data-side='tails'] {
  border-color: rgba(78, 203, 255, 0.45);
}

.coin-pick.selected[data-side='heads'],
.coin-pick:active[data-side='heads'] {
  background: rgba(255, 180, 40, 0.18);
  box-shadow: 0 0 0 2px rgba(255, 213, 106, 0.55);
}

.coin-pick.selected[data-side='tails'],
.coin-pick:active[data-side='tails'] {
  background: rgba(40, 160, 220, 0.18);
  box-shadow: 0 0 0 2px rgba(78, 203, 255, 0.55);
}

.coin-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.coin-phone-result {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  margin: 0;
}

.coin-phone-result[data-side='heads'] { color: #ffd56a; }
.coin-phone-result[data-side='tails'] { color: #4ecbff; }

.race-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  align-items: stretch;
}

.race-phone-prompt {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--purple);
  margin: 0;
}

.race-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.race-pick {
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(22, 22, 31, 0.85);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
}

.race-pick-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.race-pick.selected,
.race-pick:active {
  background: rgba(200, 84, 255, 0.16);
  box-shadow: 0 0 0 2px rgba(200, 84, 255, 0.55);
}

.race-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.race-phone-result {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  color: #ffe08a;
}

.race-hint {
  text-align: center;
  margin: 0;
}

@media (max-width: 1100px) {
  .host-coin {
    grid-template-columns: minmax(140px, 0.22fr) minmax(0, 1fr) minmax(140px, 0.22fr);
    column-gap: clamp(8px, 1.2vw, 14px);
  }
  .coin-choice-img { width: min(150px, 100%, 28vh); max-height: min(28vh, 180px); }
  .coin-spin-wrap { width: min(110px, 100%, 18vh); max-width: min(14vw, 18vh); }
}

@media (max-width: 820px) {
  .host-coin {
    grid-template-columns: 1fr;
    grid-template-areas:
      'top'
      'main'
      'left'
      'right'
      'foot';
    overflow: auto;
  }
  .coin-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .coin-footer-left,
  .coin-footer-mid,
  .coin-footer-right { justify-self: center; }
}

/* Coin full-bleed gameshow layout — same pattern as cards/bingo */
body[data-host-mode='coin'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
}

body[data-host-mode='coin'] .host-top {
  display: none !important;
}

body[data-host-mode='coin'] .host-teams:not(.hidden) {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  width: min(720px, 92vw);
}

body[data-host-mode='coin'] .host-coin {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

/* Heads or Tails — full-screen TV game-show stage */
body:not(.host-pixel) .host-coin {
  --coin-gold: #ffd84a;
  --coin-gold-deep: #d98800;
  --coin-blue: #54d7ff;
  --coin-blue-deep: #087ac5;
  --coin-purple: #c854ff;
  --coin-ink: #070211;
  --coin-panel: linear-gradient(145deg, rgba(31, 8, 55, 0.96), rgba(8, 7, 29, 0.97));
  --coin-line: rgba(200, 84, 255, 0.55);
  grid-template-columns: minmax(270px, 18fr) minmax(0, 64fr) minmax(270px, 18fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: 'left main right';
  gap: 12px;
  width: 100vw;
  height: 100dvh;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 48% 32% at 50% 37%, rgba(176, 48, 255, 0.28), transparent 72%),
    radial-gradient(circle at 20% 34%, rgba(255, 185, 32, 0.13), transparent 30%),
    radial-gradient(circle at 82% 34%, rgba(46, 180, 255, 0.14), transparent 30%),
    #07000f;
}

body:not(.host-pixel) .coin-show-bg-img {
  opacity: 0.62;
  filter: saturate(1.22) brightness(0.72);
}

body:not(.host-pixel) .coin-show-bg::before {
  content: '';
  position: absolute;
  inset: -18% -8% 0;
  background:
    conic-gradient(from 198deg at 18% 0%, transparent 0 7deg, rgba(255, 207, 72, 0.14) 8deg 12deg, transparent 13deg 46deg),
    conic-gradient(from 145deg at 82% 0%, transparent 0 7deg, rgba(74, 204, 255, 0.15) 8deg 12deg, transparent 13deg 46deg);
  opacity: 0.9;
  animation: coin-stage-lights 9s ease-in-out infinite alternate;
}

body:not(.host-pixel) .coin-show-bg::after {
  background:
    linear-gradient(90deg, rgba(3, 0, 12, 0.52), transparent 18% 82%, rgba(3, 0, 12, 0.52)),
    linear-gradient(180deg, rgba(5, 0, 15, 0.12), rgba(5, 0, 15, 0.55));
}

@keyframes coin-stage-lights {
  from { transform: translateX(-2%) rotate(-1deg); opacity: 0.62; }
  to { transform: translateX(2%) rotate(1deg); opacity: 1; }
}

body:not(.host-pixel) .coin-sidebar {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 10px;
  overflow: hidden;
}

body:not(.host-pixel) .coin-sidebar-left {
  grid-area: left;
}

body:not(.host-pixel) .coin-sidebar-right {
  grid-area: right;
}

body:not(.host-pixel) .coin-brand {
  flex: 0 0 clamp(90px, 11.6vh, 126px);
  display: grid;
  place-items: center;
  min-height: 0;
}

body:not(.host-pixel) .coin-brand-logo {
  display: block;
  width: min(274px, 96%);
  height: clamp(84px, 11vh, 120px);
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 0 14px rgba(191, 67, 255, 0.85))
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.68));
}

body:not(.host-pixel) .coin-panel-box {
  position: relative;
  min-width: 0;
  padding: clamp(10px, 1.25vh, 14px);
  border: 1px solid var(--coin-line);
  border-radius: 14px;
  background: var(--coin-panel);
  box-shadow:
    inset 0 0 24px rgba(127, 38, 190, 0.12),
    0 0 16px rgba(130, 34, 190, 0.12);
  backdrop-filter: blur(9px);
  overflow: hidden;
}

body:not(.host-pixel) .coin-panel-box::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 54%;
  height: 2px;
  background: linear-gradient(90deg, var(--coin-purple), transparent);
}

body:not(.host-pixel) .coin-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 clamp(8px, 1vh, 11px);
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(200, 84, 255, 0.32);
  color: #f5cbff;
  font-size: clamp(11px, 0.8vw, 15px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(200, 84, 255, 0.7);
}

body:not(.host-pixel) .coin-panel-title > span {
  color: var(--coin-gold);
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.7);
}

body:not(.host-pixel) .coin-howto-panel {
  flex: 0 0 auto;
}

body:not(.host-pixel) .coin-howto {
  display: grid;
  gap: clamp(7px, 0.9vh, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .coin-howto li {
  display: grid;
  grid-template-columns: clamp(28px, 2.1vw, 38px) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: rgba(239, 236, 250, 0.74);
  font-size: clamp(10px, 0.73vw, 13px);
  line-height: 1.25;
}

body:not(.host-pixel) .coin-howto strong {
  color: #fff;
  font-size: 1.08em;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

body:not(.host-pixel) .coin-step-num {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.1vw, 38px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 216, 74, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 74, 0.24), rgba(105, 56, 0, 0.3));
  color: #fff4b4;
  font-weight: 1000;
  box-shadow: 0 0 12px rgba(255, 216, 74, 0.28);
}

body:not(.host-pixel) .coin-join-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  text-align: center;
}

body:not(.host-pixel) .coin-join-panel .coin-panel-title {
  align-self: stretch;
}

body:not(.host-pixel) .coin-qr {
  display: block;
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  padding: 7px;
  border: 2px solid var(--coin-gold);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 0 22px rgba(255, 216, 74, 0.38),
    0 0 42px rgba(182, 61, 255, 0.22);
}

body:not(.host-pixel) .coin-join-url {
  margin: 7px 0 2px;
  color: #fff;
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 800;
  word-break: normal;
}

body:not(.host-pixel) .coin-join-code {
  margin: 1px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body:not(.host-pixel) .coin-join-code strong {
  color: var(--coin-gold);
  font-size: 1.45em;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.65);
}

body:not(.host-pixel) .coin-main {
  --coin-gap: clamp(5px, 0.75vh, 8px);
  grid-area: main;
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  grid-template-rows:
    clamp(126px, 17.6vh, 190px)
    clamp(32px, 3.8vh, 41px)
    minmax(0, 1fr)
    clamp(50px, 5.9vh, 64px)
    clamp(42px, 5.1vh, 55px);
  gap: var(--coin-gap);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

body:not(.host-pixel) .coin-marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .coin-title-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: clamp(98px, 14.6vh, 158px);
  max-width: 94%;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255, 202, 53, 0.35))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7));
}

body:not(.host-pixel) .coin-ribbon {
  z-index: 3;
  width: min(84%, 760px);
  margin: -2px auto 0;
  text-align: center;
}

body:not(.host-pixel) .coin-ribbon-inner {
  display: block;
  width: 100%;
  padding: 7px 28px;
  border: 1px solid rgba(255, 235, 138, 0.78);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(76, 12, 126, 0.94), #b52dea 48%, rgba(76, 12, 126, 0.94));
  color: #fff8c9;
  box-shadow:
    0 0 18px rgba(185, 54, 255, 0.58),
    inset 0 0 14px rgba(255, 255, 255, 0.13);
  font-size: clamp(11px, 0.9vw, 16px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .coin-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 6px 15px;
  border: 1px solid rgba(84, 215, 255, 0.48);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(5, 44, 75, 0.92), rgba(15, 8, 42, 0.95), rgba(78, 15, 81, 0.91));
  box-shadow: inset 0 0 18px rgba(84, 215, 255, 0.08);
}

body:not(.host-pixel) .coin-live-badge,
body:not(.host-pixel) .coin-live-rule {
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .coin-live-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8affb3;
}

body:not(.host-pixel) .coin-live-badge i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #50ff8d;
  box-shadow: 0 0 10px #50ff8d;
  animation: coin-pulse 1.3s ease-in-out infinite;
}

body:not(.host-pixel) .coin-live-rule {
  color: #f0b6ff;
}

body:not(.host-pixel) .coin-round {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: clamp(12px, 1vw, 18px);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(200, 84, 255, 0.72);
}

body:not(.host-pixel) .coin-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(34px, 4.6vh, 50px) 18px clamp(12px, 1.8vh, 20px);
  border: 2px solid rgba(113, 207, 255, 0.64);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 28% 70% at 16% 54%, rgba(255, 188, 36, 0.18), transparent 72%),
    radial-gradient(ellipse 28% 70% at 84% 54%, rgba(35, 171, 255, 0.2), transparent 72%),
    radial-gradient(ellipse 40% 80% at 50% 52%, rgba(187, 54, 255, 0.16), transparent 76%),
    linear-gradient(180deg, rgba(9, 7, 37, 0.96), rgba(20, 4, 38, 0.97));
  box-shadow:
    inset 0 0 60px rgba(72, 130, 255, 0.12),
    0 0 24px rgba(67, 177, 255, 0.2);
  overflow: hidden;
}

body:not(.host-pixel) .coin-stage::before,
body:not(.host-pixel) .coin-stage::after {
  content: '';
  position: absolute;
  top: 0;
  width: 32%;
  height: 3px;
}

body:not(.host-pixel) .coin-stage::before {
  left: 4%;
  background: linear-gradient(90deg, transparent, var(--coin-gold), transparent);
  box-shadow: 0 0 16px var(--coin-gold);
}

body:not(.host-pixel) .coin-stage::after {
  right: 4%;
  background: linear-gradient(90deg, transparent, var(--coin-blue), transparent);
  box-shadow: 0 0 16px var(--coin-blue);
}

body:not(.host-pixel) .coin-stage-kicker {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  width: 100%;
  margin: 0;
  transform: translateX(-50%);
  color: #f5dfff;
  font-size: clamp(11px, 0.88vw, 16px);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 13px rgba(200, 84, 255, 0.8);
}

body:not(.host-pixel) .coin-arena {
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(112px, 14vw, 230px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(8px, 1.15vw, 20px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

body:not(.host-pixel) .coin-choice {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  place-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: clamp(8px, 1vh, 12px);
  border-width: 2px;
  border-radius: 18px;
  overflow: hidden;
}

body:not(.host-pixel) .coin-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
}

body:not(.host-pixel) .coin-choice-heads {
  border-color: rgba(255, 216, 74, 0.75);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 210, 64, 0.18), transparent 58%),
    rgba(18, 9, 24, 0.68);
  box-shadow:
    inset 0 0 34px rgba(255, 183, 30, 0.1),
    0 0 22px rgba(255, 183, 30, 0.2);
}

body:not(.host-pixel) .coin-choice-tails {
  border-color: rgba(84, 215, 255, 0.75);
  background:
    radial-gradient(circle at 50% 42%, rgba(48, 178, 255, 0.2), transparent 58%),
    rgba(7, 13, 31, 0.72);
  box-shadow:
    inset 0 0 34px rgba(48, 178, 255, 0.12),
    0 0 22px rgba(48, 178, 255, 0.2);
}

body:not(.host-pixel) .coin-choice-label {
  align-self: start;
  width: 100%;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: clamp(16px, 1.6vw, 29px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body:not(.host-pixel) .coin-choice-heads .coin-choice-label {
  color: var(--coin-gold);
  text-shadow: 0 0 14px rgba(255, 216, 74, 0.66);
}

body:not(.host-pixel) .coin-choice-tails .coin-choice-label {
  color: var(--coin-blue);
  text-shadow: 0 0 14px rgba(84, 215, 255, 0.66);
}

body:not(.host-pixel) .coin-choice-img {
  width: auto;
  height: min(100%, 28vh, 292px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 13px 17px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 16px rgba(255, 216, 74, 0.18));
}

body:not(.host-pixel) .coin-choice-tails .coin-choice-img {
  filter:
    drop-shadow(0 13px 17px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 16px rgba(84, 215, 255, 0.25));
}

body:not(.host-pixel) .coin-choice-pct {
  margin: 0;
  font-size: clamp(32px, 4.4vh, 54px);
  line-height: 0.95;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.52), 0 0 17px currentColor;
}

body:not(.host-pixel) .coin-choice-votes {
  margin: 0;
  padding: 3px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  font-size: clamp(10px, 0.8vw, 14px);
}

body:not(.host-pixel) .coin-spin-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

body:not(.host-pixel) .coin-spin-label {
  color: #f0b6ff;
  font-size: clamp(10px, 0.78vw, 14px);
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body:not(.host-pixel) .coin-spin-wrap {
  width: min(100%, 18vh, 196px);
  max-width: none;
  filter: drop-shadow(0 0 18px rgba(200, 84, 255, 0.46));
}

body:not(.host-pixel) .coin-vs {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(54px, 4.2vw, 76px);
  aspect-ratio: 1;
  margin-top: -14px;
  border: 2px solid rgba(255, 218, 98, 0.8);
  border-radius: 50%;
  background: radial-gradient(circle, #cb39ff, #64139a 62%, #18042d);
  color: #fff8cf;
  font-size: clamp(20px, 1.8vw, 32px);
  font-weight: 1000;
  font-style: italic;
  text-shadow: 0 2px 0 #542000, 0 0 10px #fff;
  box-shadow: 0 0 24px rgba(200, 84, 255, 0.76);
}

body:not(.host-pixel) .host-coin[data-state='flipping'] .coin-stage {
  box-shadow:
    inset 0 0 70px rgba(197, 59, 255, 0.25),
    0 0 35px rgba(200, 84, 255, 0.38);
}

body:not(.host-pixel) .host-coin[data-state='revealed'] .coin-choice.is-winner,
body:not(.host-pixel) .host-coin[data-state='over'] .coin-choice.is-winner {
  z-index: 2;
  transform: scale(1.025);
  opacity: 1;
  filter: saturate(1.25);
  animation: coin-winner-hit 0.7s cubic-bezier(0.2, 0.9, 0.28, 1.2);
}

body:not(.host-pixel) .host-coin[data-state='revealed'] .coin-choice.is-loser,
body:not(.host-pixel) .host-coin[data-state='over'] .coin-choice.is-loser {
  opacity: 0.3;
  filter: grayscale(0.72) brightness(0.72);
}

@keyframes coin-winner-hit {
  0% { transform: scale(0.94); filter: brightness(2); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1.025); filter: brightness(1); }
}

body:not(.host-pixel) .coin-progress {
  align-self: stretch;
  width: 100%;
  height: 100%;
  padding: 7px 18px;
  border: 1px solid rgba(200, 84, 255, 0.72);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(63, 12, 102, 0.95), rgba(151, 31, 203, 0.96), rgba(63, 12, 102, 0.95));
  box-shadow: inset 0 0 21px rgba(255, 255, 255, 0.09), 0 0 20px rgba(180, 47, 255, 0.22);
}

body:not(.host-pixel) .coin-progress-coin {
  width: clamp(30px, 3.4vh, 40px);
  height: clamp(30px, 3.4vh, 40px);
}

body:not(.host-pixel) .coin-progress-label {
  color: #fff;
  font-size: clamp(15px, 1.35vw, 24px);
  font-weight: 1000;
  text-shadow: 0 0 13px rgba(255, 255, 255, 0.45);
}

body:not(.host-pixel) .coin-progress-chevrons {
  font-size: clamp(21px, 2vw, 35px);
}

body:not(.host-pixel) .coin-footer-tag {
  align-self: stretch;
  display: grid;
  grid-template-columns: auto 1fr auto;
  place-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px 18px;
  border: 1px solid rgba(255, 216, 74, 0.5);
  border-radius: 12px;
  background: rgba(6, 3, 20, 0.88);
  color: #f2ddff;
  font-size: clamp(10px, 0.82vw, 15px);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel) .coin-footer-tag > span:first-child,
body:not(.host-pixel) .coin-footer-tag strong {
  color: var(--coin-gold);
}

body:not(.host-pixel) .coin-show-time {
  justify-self: end;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

body:not(.host-pixel) .coin-show-time b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

body:not(.host-pixel) .coin-connected {
  flex: 0 0 clamp(50px, 6.3vh, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(84, 215, 255, 0.56);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(6, 49, 79, 0.94), rgba(17, 8, 44, 0.96));
  color: #d9f6ff;
  font-size: clamp(10px, 0.76vw, 14px);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow: inset 0 0 20px rgba(84, 215, 255, 0.09);
}

body:not(.host-pixel) .coin-connected > span:first-child {
  font-size: 20px;
}

body:not(.host-pixel) .coin-connected strong {
  color: #fff;
  font-size: clamp(20px, 1.75vw, 32px);
  line-height: 1;
}

body:not(.host-pixel) .coin-last-panel {
  flex: 0 0 auto;
}

body:not(.host-pixel) .coin-last {
  grid-template-columns: clamp(62px, 5vw, 88px) minmax(0, 1fr);
  gap: 11px;
}

body:not(.host-pixel) .coin-last-img {
  width: clamp(62px, 5vw, 88px);
  height: clamp(62px, 5vw, 88px);
}

body:not(.host-pixel) .coin-last-side {
  font-size: clamp(18px, 1.45vw, 26px);
  text-shadow: 0 0 13px rgba(255, 216, 74, 0.6);
}

body:not(.host-pixel) .coin-last-meta {
  font-size: clamp(10px, 0.72vw, 13px);
  line-height: 1.25;
}

body:not(.host-pixel) .coin-history-panel {
  flex: 1 1 auto;
  min-height: 0;
}

body:not(.host-pixel) .coin-history {
  display: grid;
  gap: 6px;
  max-height: none;
  overflow: hidden;
}

body:not(.host-pixel) .coin-history li {
  grid-template-columns: 54px 30px minmax(0, 1fr);
  gap: 7px;
  min-height: 31px;
  padding: 3px 6px;
  border: 1px solid rgba(200, 84, 255, 0.2);
  border-radius: 8px;
  background: rgba(8, 3, 24, 0.5);
  font-size: clamp(10px, 0.72vw, 13px);
}

body:not(.host-pixel) .coin-history-badge {
  width: 26px;
  height: 26px;
}

body:not(.host-pixel) .coin-points-box {
  flex: 0 0 auto;
}

body:not(.host-pixel) .coin-points {
  justify-content: center;
  padding: 8px 6px;
  border: 1px solid rgba(255, 216, 74, 0.48);
  border-radius: 10px;
  background: rgba(104, 58, 0, 0.2);
  font-size: clamp(13px, 0.95vw, 17px);
}

body:not(.host-pixel) .coin-points strong {
  font-size: clamp(28px, 2.25vw, 42px);
  text-shadow: 0 0 14px rgba(255, 216, 74, 0.58);
}

body:not(.host-pixel) .coin-top-clock {
  flex: 0 0 clamp(36px, 4.4vh, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(200, 84, 255, 0.34);
  border-radius: 10px;
  background: rgba(7, 3, 20, 0.8);
  color: rgba(255, 255, 255, 0.52);
  font-size: clamp(9px, 0.65vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .coin-top-clock strong {
  color: #fff;
  font-size: clamp(13px, 0.92vw, 17px);
  font-variant-numeric: tabular-nums;
}

body.host-pixel[data-host-mode='coin'] .host-top {
  display: none !important;
}

body.host-pixel[data-host-mode='coin'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
}

body.host-pixel[data-host-mode='coin'] .host-coin {
  grid-row: 1;
  height: 100%;
  border-radius: 0;
  padding: 4px 6px;
}

/* --------------------------------------------------------------- podium */

.podium-body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(90, 30, 140, 0.35), transparent 65%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(40, 10, 60, 0.55), transparent 55%),
    #0a0014;
  color: #fff;
  overflow: hidden;
}

.podium-body[data-side='a'] {
  --podium-accent: #ffd56a;
  --podium-glow: rgba(255, 180, 40, 0.35);
}

.podium-body[data-side='b'] {
  --podium-accent: #4ecbff;
  --podium-glow: rgba(40, 160, 220, 0.35);
}

.podium {
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 24px);
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  text-align: center;
}

.podium-logo {
  width: clamp(88px, 14vw, 140px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
  margin-bottom: clamp(4px, 1vh, 12px);
}

.podium-label {
  margin: 0;
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--podium-accent);
  text-shadow: 0 0 28px var(--podium-glow);
  max-width: 92vw;
  line-height: 1.1;
  word-break: break-word;
}

.podium-score {
  margin: 0;
  font-size: clamp(120px, 42vw, 420px);
  font-weight: 900;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow:
    0 0 40px var(--podium-glow),
    0 12px 40px rgba(0, 0, 0, 0.55);
}

.podium-score.is-bump {
  animation: podium-bump 0.45s ease;
}

@keyframes podium-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.podium-hint {
  margin: 8px 0 0;
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.podium-hint.hidden {
  display: none;
}

/* ---------------------------------------------------------- teams scoreboard */

.scoreboard-body {
  margin: 0;
  min-height: 100dvh;
  background: #05010f;
  color: #fff;
  overflow: hidden;
  font-family: Montserrat, 'Segoe UI', sans-serif;
}

.scoreboard {
  --sb-purple: #c84bff;
  --sb-blue: #3b9eff;
  --sb-gold: #ffd24a;
  --sb-pink: #ff4fc4;
  --sb-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --sb-body: Montserrat, 'Segoe UI', sans-serif;
  box-sizing: border-box;
  width: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  max-width: 100vw;
  aspect-ratio: 16 / 9;
  max-height: 100dvh;
  margin: 0 auto;
  padding:
    clamp(8px, 1.5vh, 18px)
    clamp(14px, 2vw, 28px)
    clamp(6px, 1vh, 12px);
  display: grid;
  grid-template-rows: auto minmax(0, 1.45fr) auto auto auto;
  gap: clamp(6px, 1.1vh, 12px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 2, 22, 0.28) 0%, rgba(5, 1, 15, 0.42) 55%, rgba(5, 1, 15, 0.72) 100%),
    url('/img/scoreboard-stage-bg.png') center / cover no-repeat,
    #05010f;
}

.scoreboard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 12% 0%, rgba(180, 60, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 0%, rgba(50, 120, 255, 0.18), transparent 70%);
}

.scoreboard > * {
  position: relative;
  z-index: 1;
}

.sb-top {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(0, 1.7fr) minmax(160px, 1fr);
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
}

.sb-logo {
  width: clamp(110px, 13vw, 190px);
  height: auto;
  max-height: 15vh;
  object-fit: contain;
  object-position: left center;
  justify-self: start;
  margin-top: -2px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.sb-title-wrap {
  text-align: center;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.sb-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(10px, 1.3vw, 18px);
  padding: 6px 22px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 8, 40, 0.82), rgba(8, 2, 20, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  font-family: var(--sb-body);
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.sb-title-a,
.sb-title-b {
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 255, 255, 0.12);
}

.sb-title-vs {
  color: var(--sb-gold);
  font-size: 0.82em;
  text-shadow: 0 0 18px rgba(255, 210, 74, 0.65);
}

.sb-ribbon {
  margin: -6px 0 0;
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(100%, 520px);
  pointer-events: none;
}

.sb-ribbon-img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  max-height: clamp(48px, 7.5vh, 78px);
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(120, 40, 220, 0.55));
  animation: sb-ribbon-glow 2.8s ease-in-out infinite;
}

@keyframes sb-ribbon-glow {
  0%,
  100% {
    filter: drop-shadow(0 8px 16px rgba(120, 40, 220, 0.45))
      drop-shadow(0 0 10px rgba(255, 210, 80, 0.18));
    transform: translateY(0);
  }
  50% {
    filter: drop-shadow(0 10px 22px rgba(160, 70, 255, 0.7))
      drop-shadow(0 0 16px rgba(255, 210, 80, 0.35));
    transform: translateY(-1px);
  }
}

.sb-connected {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: clamp(160px, 17vw, 240px);
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

.sb-connected strong {
  font-family: var(--sb-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sb-connected-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #fff;
}

.sb-arena {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 22px);
  padding-top: clamp(10px, 1.6vh, 18px);
}

.sb-side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, 4.2vh, 48px) clamp(22px, 2.8vw, 40px);
  border-radius: clamp(22px, 2.4vw, 34px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 42%),
    linear-gradient(180deg, rgba(16, 8, 36, 0.92), rgba(8, 2, 20, 0.94));
  border: 3px solid transparent;
  overflow: visible;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.sb-side::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.22;
  background-image: radial-gradient(rgba(255, 255, 255, 0.65) 0.7px, transparent 0.85px);
  background-size: 15px 15px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 35%, transparent 85%);
}

.sb-side-a {
  border-color: #c84bff;
  box-shadow:
    0 0 0 1px rgba(200, 75, 255, 0.35),
    0 0 34px rgba(180, 60, 255, 0.55),
    0 0 60px rgba(140, 40, 220, 0.28),
    inset 0 0 42px rgba(160, 50, 255, 0.14);
}

.sb-side-b {
  border-color: #3b9eff;
  box-shadow:
    0 0 0 1px rgba(59, 158, 255, 0.35),
    0 0 34px rgba(50, 140, 255, 0.5),
    0 0 60px rgba(40, 110, 230, 0.26),
    inset 0 0 42px rgba(50, 130, 255, 0.14);
}

.scoreboard[data-lead='a'] .sb-side-a,
.sb-side-a.is-lead {
  box-shadow:
    0 0 0 2px rgba(236, 200, 255, 0.55),
    0 0 46px rgba(200, 75, 255, 0.7),
    0 0 70px rgba(160, 50, 255, 0.35),
    inset 0 0 50px rgba(180, 70, 255, 0.2);
}

.scoreboard[data-lead='b'] .sb-side-b,
.sb-side-b.is-lead {
  box-shadow:
    0 0 0 2px rgba(190, 220, 255, 0.55),
    0 0 46px rgba(59, 158, 255, 0.7),
    0 0 70px rgba(50, 130, 255, 0.35),
    inset 0 0 50px rgba(70, 150, 255, 0.2);
}

.scoreboard[data-lead='tie'] .sb-side-a,
.scoreboard[data-lead='tie'] .sb-side-b,
.sb-side.is-tie {
  box-shadow:
    0 0 0 2px rgba(255, 210, 74, 0.45),
    0 0 40px rgba(255, 210, 74, 0.3),
    inset 0 0 40px rgba(255, 210, 74, 0.08);
}

.sb-side.is-pulse {
  animation: sb-lead-pulse 0.7s ease;
}

@keyframes sb-lead-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.sb-side-tab {
  position: absolute;
  top: 0;
  z-index: 2;
  padding: 8px 22px 9px;
  border-radius: 10px;
  font-family: var(--sb-body);
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: #fff;
  transform: translateY(-48%);
}

.sb-side-a .sb-side-tab {
  left: 18%;
  background: linear-gradient(180deg, #d06bff, #8a22e8);
  box-shadow: 0 8px 20px rgba(138, 34, 232, 0.55);
}

.sb-side-b .sb-side-tab {
  right: 18%;
  left: auto;
  background: linear-gradient(180deg, #5eb0ff, #2563eb);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.55);
}

.sb-side-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
}

.sb-side-b .sb-side-inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sb-side-mark {
  --mark-size: clamp(92px, 11.5vw, 158px);
  width: var(--mark-size);
  height: var(--mark-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  isolation: isolate;
}

.sb-side-mark::before,
.sb-side-mark::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Soft outer halo */
.sb-side-mark::before {
  inset: -18%;
  z-index: -1;
  background: radial-gradient(circle, var(--mark-glow) 0%, transparent 68%);
  opacity: 0.9;
  filter: blur(2px);
  animation: sb-mark-pulse 2.8s ease-in-out infinite;
}

/* Gloss highlight on the sphere */
.sb-side-mark::after {
  inset: 8%;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.55), transparent 34%),
    radial-gradient(circle at 70% 78%, rgba(0, 0, 0, 0.22), transparent 42%);
  mix-blend-mode: soft-light;
}

.sb-side-ring {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  z-index: 2;
  overflow: visible;
  animation: sb-mark-spin 14s linear infinite;
  filter: drop-shadow(0 0 6px var(--mark-glow));
}

.sb-side-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.4;
}

.sb-side-ring-dots {
  fill: none;
  stroke: #fff;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-dasharray: 0.01 4.15;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px var(--mark-glow));
  animation: sb-dot-twinkle 1.8s ease-in-out infinite;
}

.sb-side-mark span {
  position: relative;
  z-index: 3;
  font-family: var(--sb-body);
  font-size: clamp(44px, 5.6vw, 78px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.sb-side-a .sb-side-mark {
  --mark-glow: rgba(210, 90, 255, 0.75);
  background:
    radial-gradient(circle at 30% 24%, #f0c6ff 0%, #d86bff 28%, #a433f0 58%, #5a149e 100%);
  box-shadow:
    inset 0 -10px 18px rgba(40, 0, 80, 0.35),
    inset 0 8px 14px rgba(255, 255, 255, 0.18),
    0 0 0 3px rgba(220, 140, 255, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(200, 75, 255, 0.75);
}

.sb-side-b .sb-side-mark {
  --mark-glow: rgba(80, 160, 255, 0.75);
  background:
    radial-gradient(circle at 30% 24%, #c8e4ff 0%, #6db8ff 28%, #2f74ff 58%, #123d96 100%);
  box-shadow:
    inset 0 -10px 18px rgba(0, 20, 70, 0.35),
    inset 0 8px 14px rgba(255, 255, 255, 0.18),
    0 0 0 3px rgba(140, 200, 255, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(59, 158, 255, 0.75);
}

@keyframes sb-mark-spin {
  to { transform: rotate(360deg); }
}

@keyframes sb-mark-pulse {
  0%,
  100% { opacity: 0.7; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes sb-dot-twinkle {
  0%,
  100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.sb-score-block {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.sb-side-a .sb-score-block { justify-items: start; }
.sb-side-b .sb-score-block { justify-items: end; }

.sb-score {
  margin: 0;
  font-family: var(--sb-body);
  font-size: clamp(88px, 16.5vh, 210px);
  font-weight: 900;
  font-style: italic;
  line-height: 0.86;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow:
    0 5px 0 rgba(0, 0, 0, 0.22),
    0 16px 36px rgba(0, 0, 0, 0.48);
}

.sb-score.is-bump {
  animation: sb-score-bump 0.45s ease;
}

@keyframes sb-score-bump {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.08); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

.sb-points-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sb-body);
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.sb-points-label i {
  display: block;
  width: clamp(18px, 2.2vw, 34px);
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.8;
}

.sb-side-a .sb-points-label { color: #d19bff; }
.sb-side-b .sb-points-label { color: #7eb8ff; }

.sb-vs {
  align-self: center;
  width: clamp(62px, 6.8vw, 96px);
  height: clamp(62px, 6.8vw, 96px);
  margin: 0 -18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sb-body);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--sb-gold);
  background: radial-gradient(circle at 35% 30%, #3a2158, #12061f 72%);
  border: 2px solid rgba(255, 210, 74, 0.9);
  box-shadow:
    0 0 0 5px rgba(120, 40, 200, 0.2),
    0 0 28px rgba(255, 210, 74, 0.55),
    0 0 36px rgba(178, 75, 255, 0.28);
  z-index: 4;
}

.sb-status {
  margin: 0 auto;
  width: fit-content;
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 22px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 210, 74, 0.32);
  box-shadow: 0 0 26px rgba(255, 210, 74, 0.18);
  font-family: var(--sb-body);
  font-size: clamp(16px, 2.1vw, 26px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-gold);
  text-shadow: 0 0 16px rgba(255, 210, 74, 0.5);
}

.sb-status-bolt {
  font-style: normal;
  font-size: 0.85em;
  filter: drop-shadow(0 0 8px rgba(255, 210, 74, 0.7));
}

.sb-events {
  padding: clamp(8px, 1.1vh, 12px) clamp(12px, 1.3vw, 18px) clamp(10px, 1.25vh, 14px);
  border-radius: 16px;
  background: rgba(4, 2, 14, 0.78);
  border: 1px solid rgba(180, 90, 255, 0.28);
  backdrop-filter: blur(6px);
  min-height: 0;
}

.sb-events-title {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--sb-body);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.78);
}

.sb-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  align-items: start;
}

.sb-events-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(12px, 1.3vw, 15px);
  color: rgba(255, 255, 255, 0.42);
  font-weight: 700;
  padding: 8px 0;
}

.sb-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 800;
}

.sb-event-icon {
  width: clamp(30px, 3.1vw, 40px);
  height: clamp(30px, 3.1vw, 40px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 16px currentColor;
}

.sb-event-icon svg {
  width: 55%;
  height: 55%;
  display: block;
}

.sb-event[data-side='a'] .sb-event-icon {
  color: #efc2ff;
  background: radial-gradient(circle at 35% 30%, #d06bff, #6d1fd4);
}

.sb-event[data-side='b'] .sb-event-icon {
  color: #c5dfff;
  background: radial-gradient(circle at 35% 30%, #5eb0ff, #1d4ed8);
}

.sb-event-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sb-event-main,
.sb-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  min-width: 0;
}

.sb-event-side,
.sb-event-delta { white-space: nowrap; }

.sb-event[data-side='a'] .sb-event-side,
.sb-event[data-side='a'] .sb-event-delta { color: #e0b0ff; }

.sb-event[data-side='b'] .sb-event-side,
.sb-event[data-side='b'] .sb-event-delta { color: #95c8ff; }

.sb-event-label,
.sb-event-ago {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sb-event-ago {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.92em;
}

.sb-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-family: var(--sb-body);
  font-size: clamp(14px, 1.7vw, 22px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe08a;
  text-shadow: 0 0 14px rgba(255, 210, 74, 0.28);
}

.sb-footer-line {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em;
}

.sb-footer-star {
  color: var(--sb-gold);
  filter: drop-shadow(0 0 8px rgba(255, 210, 74, 0.55));
}

.sb-footer-accent {
  color: var(--sb-pink);
  text-shadow: 0 0 16px rgba(255, 79, 196, 0.55);
}

@media (max-aspect-ratio: 16/10) {
  .scoreboard {
    aspect-ratio: auto;
    height: 100dvh;
  }
  .sb-score {
    font-size: clamp(78px, 15vh, 190px);
  }
}

@media (max-width: 900px) {
  .sb-top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .sb-logo,
  .sb-connected {
    justify-self: center;
  }
  .sb-arena {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
  }
  .sb-vs {
    justify-self: center;
    margin: -8px 0;
  }
  .sb-side-inner,
  .sb-side-b .sb-side-inner {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .sb-side-b .sb-side-mark { order: -1; }
  .sb-side-a .sb-score-block,
  .sb-side-b .sb-score-block { justify-items: start; }
  .sb-events-list {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------- balloon pop */

.host-balloons {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  background: #05010f;
}

.host-balloons.hidden {
  display: none;
}

.balloons-stage {
  --sb-purple: #c84bff;
  --sb-blue: #3b9eff;
  --sb-gold: #ffd24a;
  --sb-pink: #ff4fc4;
  --sb-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --sb-body: Montserrat, 'Segoe UI', sans-serif;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding:
    clamp(8px, 1.5vh, 18px)
    clamp(14px, 2vw, 28px)
    clamp(6px, 1vh, 12px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(6px, 1.1vh, 12px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 2, 22, 0.28) 0%, rgba(5, 1, 15, 0.42) 55%, rgba(5, 1, 15, 0.72) 100%),
    url('/img/scoreboard-stage-bg.png') center / cover no-repeat,
    #05010f;
  font-family: var(--sb-body);
  color: #fff;
}

.balloons-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 12% 0%, rgba(180, 60, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 0%, rgba(50, 120, 255, 0.18), transparent 70%);
}

.balloons-stage > * {
  position: relative;
  z-index: 1;
}

.balloons-ribbon {
  margin: 4px 0 0;
  padding: 8px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c84bff, #ff4fc4 50%, #3b9eff);
  font-family: var(--sb-display);
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: 0 10px 28px rgba(120, 40, 220, 0.45);
}

.balloons-arena {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(10px, 1.6vw, 22px);
}

.balloon-side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 3.5vh, 40px) clamp(16px, 2vw, 28px);
  border-radius: clamp(22px, 2.4vw, 34px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 42%),
    linear-gradient(180deg, rgba(16, 8, 36, 0.92), rgba(8, 2, 20, 0.94));
  border: 3px solid transparent;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.balloon-side-a {
  border-color: #c84bff;
  box-shadow:
    0 0 0 1px rgba(200, 75, 255, 0.35),
    0 0 34px rgba(180, 60, 255, 0.45),
    inset 0 0 42px rgba(160, 50, 255, 0.12);
}

.balloon-side-b {
  border-color: #3b9eff;
  box-shadow:
    0 0 0 1px rgba(59, 158, 255, 0.35),
    0 0 34px rgba(50, 140, 255, 0.4),
    inset 0 0 42px rgba(50, 130, 255, 0.12);
}

.balloons-stage[data-lead='a'] .balloon-side-a,
.balloons-stage[data-winner='a'] .balloon-side-a {
  box-shadow:
    0 0 0 2px rgba(236, 200, 255, 0.55),
    0 0 50px rgba(200, 75, 255, 0.75),
    inset 0 0 50px rgba(180, 70, 255, 0.22);
}

.balloons-stage[data-lead='b'] .balloon-side-b,
.balloons-stage[data-winner='b'] .balloon-side-b {
  box-shadow:
    0 0 0 2px rgba(190, 220, 255, 0.55),
    0 0 50px rgba(59, 158, 255, 0.75),
    inset 0 0 50px rgba(70, 150, 255, 0.22);
}

.balloon-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 420px);
}

.balloon-visual {
  --fill: 0;
  width: min(58vw, 320px);
  aspect-ratio: 120 / 150;
  position: relative;
  transform-origin: 50% 85%;
  transform: scale(calc(0.42 + (var(--fill) / 100) * 0.78));
  transition: transform 0.12s linear;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}

.balloon-visual.is-shaking {
  animation: balloon-wobble 0.28s ease-in-out infinite;
}

.balloon-visual.is-deflating {
  animation: balloon-sag 0.9s ease-in-out infinite;
}

.balloon-visual.is-popped {
  animation: balloon-pop 0.55s ease-out forwards;
}

@keyframes balloon-wobble {
  0%,
  100% { transform: scale(calc(0.42 + (var(--fill) / 100) * 0.78)) rotate(-2.2deg); }
  50% { transform: scale(calc(0.44 + (var(--fill) / 100) * 0.8)) rotate(2.2deg); }
}

@keyframes balloon-sag {
  0%,
  100% { transform: scale(calc(0.42 + (var(--fill) / 100) * 0.78)) translateY(0); }
  50% { transform: scale(calc(0.4 + (var(--fill) / 100) * 0.76)) translateY(4px); }
}

@keyframes balloon-pop {
  0% { transform: scale(1.2); opacity: 1; filter: brightness(1.4); }
  40% { transform: scale(1.55); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

.balloon-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.balloon-burst {
  position: absolute;
  inset: 10% 8% 18%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.95) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 35%, rgba(255, 210, 74, 0.95) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 60%, rgba(255, 79, 196, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 40% 70%, rgba(59, 158, 255, 0.9) 0 5px, transparent 6px);
  animation: balloon-sparks 0.7s ease-out forwards;
}

@keyframes balloon-sparks {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

.balloon-pct {
  margin: 0;
  font-family: var(--sb-display);
  font-size: clamp(42px, 6vw, 84px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

.balloon-side-a .balloon-pct { color: #f0c0ff; }
.balloon-side-b .balloon-pct { color: #b8dcff; }

.balloon-players {
  margin: 0;
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.balloons-vs {
  align-self: center;
}

body[data-host-mode='balloons'] .host-top,
body[data-host-mode='balloons'] .host-teams {
  visibility: hidden;
}

/* Balloon Pop TV display — fixed 16:9 composition for venue screens. */
body[data-host-mode='balloons'] {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #020008;
}

body[data-host-mode='balloons'] .host {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.balloons-stage {
  --balloon-blue: #079cff;
  --balloon-blue-light: #70d9ff;
  --balloon-red: #ff263d;
  --balloon-red-light: #ff8f83;
  width: 100vw;
  height: 100vh;
  padding: 14px 18px 0;
  grid-template-rows: minmax(0, 1fr) 48px;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(3, 0, 14, 0.1), rgba(3, 0, 14, 0.48)),
    url('/img/scoreboard-stage-bg.png') center / cover no-repeat,
    #03000c;
}

.balloons-stage::before {
  background:
    radial-gradient(ellipse 31% 30% at 34% 38%, rgba(0, 137, 255, 0.19), transparent 72%),
    radial-gradient(ellipse 31% 30% at 66% 38%, rgba(255, 24, 54, 0.17), transparent 72%),
    radial-gradient(ellipse 45% 38% at 50% 2%, rgba(154, 35, 255, 0.25), transparent 68%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 20% 80%, rgba(0, 0, 0, 0.18));
}

.balloons-stage::after {
  content: '';
  position: absolute;
  inset: auto 0 42px;
  z-index: 0;
  height: 94px;
  opacity: 0.74;
  pointer-events: none;
  background:
    radial-gradient(circle at 2% 84%, #06030e 0 29px, transparent 30px),
    radial-gradient(circle at 7% 78%, #06030e 0 36px, transparent 37px),
    radial-gradient(circle at 13% 87%, #06030e 0 30px, transparent 31px),
    radial-gradient(circle at 19% 76%, #06030e 0 37px, transparent 38px),
    radial-gradient(circle at 26% 86%, #06030e 0 33px, transparent 34px),
    radial-gradient(circle at 33% 78%, #06030e 0 38px, transparent 39px),
    radial-gradient(circle at 41% 86%, #06030e 0 34px, transparent 35px),
    radial-gradient(circle at 49% 76%, #06030e 0 39px, transparent 40px),
    radial-gradient(circle at 57% 87%, #06030e 0 34px, transparent 35px),
    radial-gradient(circle at 65% 78%, #06030e 0 38px, transparent 39px),
    radial-gradient(circle at 73% 86%, #06030e 0 33px, transparent 34px),
    radial-gradient(circle at 81% 76%, #06030e 0 37px, transparent 38px),
    radial-gradient(circle at 88% 87%, #06030e 0 31px, transparent 32px),
    radial-gradient(circle at 95% 78%, #06030e 0 38px, transparent 39px),
    linear-gradient(transparent 46%, #06030e 47%);
}

.balloons-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(276px, 18fr) minmax(0, 64fr) minmax(276px, 18fr);
  gap: 16px;
}

.balloons-sidebar {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.balloons-brand {
  display: block;
  width: min(100%, 274px);
  height: 126px;
  margin: -8px auto -2px;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 15px rgba(132, 37, 255, 0.42));
}

.balloons-info-card {
  position: relative;
  padding: 12px 14px;
  border: 1px solid rgba(179, 90, 255, 0.65);
  border-radius: 11px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(31, 10, 57, 0.94), rgba(7, 2, 20, 0.94)),
    rgba(5, 1, 16, 0.92);
  box-shadow:
    inset 0 0 24px rgba(125, 34, 227, 0.09),
    0 0 20px rgba(93, 21, 165, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.32);
}

.balloons-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.07), transparent 24%);
}

.balloons-info-card h2 {
  position: relative;
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid rgba(173, 75, 255, 0.62);
  font: 400 24px/1 var(--sb-display);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 12px rgba(207, 95, 255, 0.65);
}

.balloons-info-card h2 span {
  color: var(--sb-gold);
}

.how-to-card {
  flex: 1.08 1 0;
}

.balloons-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.balloons-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.22;
  color: rgba(255, 255, 255, 0.93);
}

.balloons-steps li b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid #ffe773;
  border-radius: 50%;
  background: linear-gradient(#ffca26, #ee7f00);
  color: #160526;
  font: 400 22px/1 var(--sb-display);
  box-shadow: 0 0 13px rgba(255, 188, 31, 0.54);
}

.balloons-steps strong {
  color: #ffd648;
}

.game-status-card {
  flex: 0.7 1 0;
}

.balloons-live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7cff88;
  font: 900 18px/1 var(--sb-body);
  letter-spacing: 0.1em;
}

.balloons-live i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #42ff6e;
  box-shadow: 0 0 12px #42ff6e;
  animation: balloons-live-pulse 1.25s ease-in-out infinite;
}

.balloons-player-total {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.balloons-player-total strong {
  color: #fff;
  font: 400 42px/.8 var(--sb-display);
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.35);
}

.balloons-player-total span {
  max-width: 130px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #d4b8ea;
}

.round-card {
  flex: 1.1 1 0;
}

.balloons-stats {
  display: grid;
  gap: 7px;
  margin: 0;
}

.balloons-stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.balloons-stats dt {
  color: #b9a6ce;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.balloons-stats dd {
  margin: 0;
  color: #ffd94d;
  font: 400 21px/1 var(--sb-display);
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
}

.balloons-main-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 132px minmax(0, 1fr) 108px 80px;
  gap: 10px;
  padding: 0 4px 8px;
}

.balloons-show-title {
  position: relative;
  display: grid;
  place-items: center;
  align-content: start;
  text-align: center;
  filter: drop-shadow(0 12px 13px rgba(0, 0, 0, 0.65));
}

.balloons-show-title::before {
  content: '';
  position: absolute;
  top: -34px;
  width: 580px;
  height: 175px;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(151, 38, 255, 0.34), transparent 68%);
}

.balloons-show-title h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: -7px 0 -3px;
  font-family: var(--sb-display);
  font-style: italic;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: skew(-3deg);
}

.balloons-title-top {
  color: #fff;
  font-size: clamp(64px, 5.1vw, 98px);
  -webkit-text-stroke: 1px #f5f7ff;
  text-shadow:
    0 2px 0 #cdd1db,
    0 5px 0 #626a78,
    0 9px 0 #242936,
    0 0 20px rgba(255, 255, 255, 0.58),
    0 0 36px rgba(157, 63, 255, 0.48);
}

.balloons-title-pop {
  color: #ffd42a;
  font-size: clamp(78px, 6.4vw, 122px);
  -webkit-text-stroke: 2px #7d2100;
  text-shadow:
    0 2px 0 #fff17b,
    0 5px 0 #f28b00,
    0 9px 0 #7c1f00,
    0 0 23px rgba(255, 171, 0, 0.82);
}

.balloons-show-title p {
  margin: 0;
  padding: 5px 24px 6px;
  border: 1px solid rgba(242, 186, 255, 0.65);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(82, 10, 141, 0.8), rgba(185, 35, 247, 0.94), rgba(82, 10, 141, 0.8));
  box-shadow: 0 0 18px rgba(199, 65, 255, 0.48);
  color: #fff;
  font: italic 900 15px/1 var(--sb-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.balloons-arena {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 105px minmax(0, 1fr);
  gap: 2px;
  align-items: center;
  overflow: visible;
}

.balloon-side {
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.balloon-side-a,
.balloon-side-b,
.balloons-stage[data-lead='a'] .balloon-side-a,
.balloons-stage[data-winner='a'] .balloon-side-a,
.balloons-stage[data-lead='b'] .balloon-side-b,
.balloons-stage[data-winner='b'] .balloon-side-b {
  border: 0;
  background: none;
  box-shadow: none;
}

.balloon-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 25px;
  gap: 0;
  place-items: center;
}

.balloon-visual {
  --fill: 0;
  width: min(100%, 390px);
  aspect-ratio: 320 / 390;
  align-self: center;
  transform-origin: 50% 88%;
  transform: scale(calc(0.78 + (var(--fill) / 100) * 0.22));
  transition: transform 0.16s linear, filter 0.24s ease;
  filter:
    drop-shadow(0 17px 15px rgba(0, 0, 0, 0.68))
    brightness(calc(0.88 + (var(--fill) / 100) * 0.18));
}

.balloon-aura {
  opacity: calc(0.34 + (var(--fill) / 100) * 0.46);
}

.balloon-copy {
  position: absolute;
  inset: 17% 13% 21%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.34), 0 0 13px rgba(255, 255, 255, 0.33);
}

.balloon-team-label {
  margin-bottom: -9px;
  font: 400 28px/1 var(--sb-display);
  letter-spacing: 0.16em;
}

.balloon-team-letter {
  font: 400 81px/.86 var(--sb-display);
}

.balloon-pct {
  margin: 0;
  color: #fff !important;
  font: 400 72px/.84 var(--sb-display);
  letter-spacing: -0.01em;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
}

.balloon-pct.is-bump {
  animation: balloon-number-bump 0.28s ease-out;
}

.balloon-inflated {
  margin-top: 7px;
  padding-top: 5px;
  border-top: 2px solid rgba(255, 255, 255, 0.57);
  font: 900 12px/1 var(--sb-body);
  letter-spacing: 0.2em;
}

.balloon-players {
  align-self: end;
  margin: 0;
  padding: 4px 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(5, 1, 15, 0.78);
  font-size: 11px;
  letter-spacing: 0.1em;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.35);
}

.balloon-side-a .balloon-players {
  color: #8ee5ff;
  border-color: rgba(0, 168, 255, 0.45);
}

.balloon-side-b .balloon-players {
  color: #ffaaa2;
  border-color: rgba(255, 49, 65, 0.45);
}

.balloon-visual.is-shaking,
.balloon-visual[data-pressure='high'] {
  animation: balloon-wobble-tv 0.42s ease-in-out infinite;
}

.balloon-visual[data-pressure='critical'] {
  animation: balloon-wobble-critical 0.24s ease-in-out infinite;
  filter: drop-shadow(0 0 28px currentColor) brightness(1.2) saturate(1.18);
}

.balloon-side-a .balloon-visual[data-pressure='critical'] { color: var(--balloon-blue); }
.balloon-side-b .balloon-visual[data-pressure='critical'] { color: var(--balloon-red); }

.balloon-visual.is-deflating {
  animation: balloon-sag-tv 1.2s ease-in-out infinite;
}

.balloon-visual.is-popped {
  animation: balloon-pop-tv 0.68s cubic-bezier(.16,.8,.2,1) forwards;
}

.balloon-burst {
  inset: -5%;
  z-index: 8;
  background:
    conic-gradient(from 4deg, transparent 0 7%, #ffd93a 8% 9%, transparent 10% 18%, #ff49d0 19% 21%, transparent 22% 34%, #4fe1ff 35% 37%, transparent 38% 49%, #ffd93a 50% 53%, transparent 54% 67%, #ff493f 68% 70%, transparent 71% 83%, #ae55ff 84% 87%, transparent 88%);
  clip-path: polygon(50% 0, 58% 32%, 80% 8%, 69% 38%, 100% 30%, 73% 51%, 98% 68%, 65% 62%, 69% 100%, 51% 70%, 33% 100%, 36% 64%, 3% 78%, 29% 52%, 0 34%, 36% 39%);
  animation: balloon-sparks-tv 0.9s ease-out forwards;
}

.balloons-vs {
  position: relative;
  align-self: center;
  justify-self: center;
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  border: 3px solid #f3b7ff;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 73, 229, 0.87), rgba(113, 11, 188, 0.92) 55%, rgba(24, 2, 54, 0.96));
  box-shadow:
    0 0 12px #fff,
    0 0 28px #ed4dff,
    0 0 65px rgba(132, 37, 255, 0.75);
  animation: vs-energy 2.2s ease-in-out infinite;
}

.balloons-vs::before,
.balloons-vs::after {
  content: '';
  position: absolute;
  inset: -21px;
  z-index: -1;
  border: 2px solid rgba(224, 100, 255, 0.29);
  transform: rotate(45deg);
}

.balloons-vs::after {
  inset: -34px;
  border-style: dashed;
  animation: vs-spin 11s linear infinite;
}

.balloons-vs span {
  font: italic 400 56px/.8 var(--sb-display);
  color: #fff;
  transform: skew(-5deg);
  text-shadow: 0 3px 0 #54106e, 0 0 14px #fff;
}

.pop-zone {
  position: relative;
  padding: 5px 17px 7px;
  border: 2px solid rgba(255, 203, 55, 0.72);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(23, 4, 42, 0.96), rgba(5, 1, 17, 0.96));
  box-shadow: 0 0 18px rgba(255, 165, 0, 0.19), inset 0 0 22px rgba(171, 52, 255, 0.12);
}

.pop-zone-heading {
  position: absolute;
  inset: -14px 12px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.pop-zone-heading span {
  padding: 3px 18px;
  border: 2px solid #ffe067;
  border-radius: 999px;
  background: linear-gradient(#9d36e8, #541287);
  color: #fff;
  font: 400 22px/1 var(--sb-display);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  box-shadow: 0 0 13px rgba(201, 82, 255, 0.7);
}

.pop-zone-heading b {
  display: grid;
  width: 75px;
  height: 52px;
  place-items: center;
  background: #ffd833;
  clip-path: polygon(50% 0, 60% 25%, 82% 7%, 78% 35%, 100% 42%, 78% 58%, 91% 84%, 62% 73%, 50% 100%, 39% 73%, 10% 88%, 21% 59%, 0 43%, 25% 35%, 18% 8%, 40% 26%);
  color: #eb1827;
  font: italic 400 25px/1 var(--sb-display);
  text-shadow: 1px 2px 0 #fff;
  transform: rotate(7deg);
  filter: drop-shadow(0 0 9px rgba(255, 196, 0, 0.7));
}

.pop-zone-track {
  position: relative;
  height: 24px;
  margin: 22px 18px 0;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: linear-gradient(90deg, #1dcc64 0 24%, #d7da32 40%, #ffc325 60%, #ff7b1e 78%, #f21e32 100%);
  box-shadow: 0 0 14px rgba(255, 119, 20, 0.37), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}

.pop-zone-track::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(0, 0, 0, 0.25) 9.4% 10%);
}

.pop-marker {
  --marker: 0;
  position: absolute;
  left: calc(var(--marker) * 1%);
  top: 50%;
  z-index: 2;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font: 400 18px/1 var(--sb-display);
  transition: left 0.16s linear;
}

.pop-marker-a { background: #007ce8; box-shadow: 0 0 12px #00b7ff; }
.pop-marker-b { background: #e21429; box-shadow: 0 0 12px #ff344d; }

.pop-zone-scale {
  display: flex;
  justify-content: space-between;
  margin: 3px 16px 0;
  color: rgba(255, 255, 255, 0.82);
  font: 900 9px/1 var(--sb-body);
}

.pop-zone > p {
  margin: 4px 0 0;
  color: #ffd84c;
  font: italic 900 11px/1 var(--sb-body);
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.balloons-shake-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 2px solid #c759ff;
  border-radius: 14px;
  background:
    linear-gradient(100deg, rgba(75, 10, 128, 0.94), rgba(170, 34, 225, 0.97) 50%, rgba(75, 10, 128, 0.94));
  box-shadow:
    0 0 19px rgba(206, 71, 255, 0.55),
    inset 0 0 26px rgba(255, 255, 255, 0.1);
  text-align: center;
  text-transform: uppercase;
}

.balloons-stage[data-active='true'] .balloons-shake-callout {
  animation: shake-callout-pulse 1.5s ease-in-out infinite;
}

.balloons-shake-callout strong {
  display: block;
  color: #fff;
  font: italic 400 40px/.84 var(--sb-display);
  letter-spacing: 0.09em;
  text-shadow: 0 3px 0 #511070, 0 0 15px #fff;
}

.balloons-shake-callout small {
  display: block;
  margin-top: 6px;
  color: #ffe74d;
  font: 900 12px/1 var(--sb-body);
  letter-spacing: 0.18em;
}

.shake-phone {
  font-size: 38px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.55));
  transform: rotate(-12deg);
}

.shake-lines {
  color: #ffe44a;
  font: 900 28px/1 var(--sb-body);
  letter-spacing: -0.25em;
}

.team-power-card {
  flex: 0.85 1 0;
}

.team-power {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  margin-top: 10px;
}

.team-power span,
.team-power b {
  font: 400 20px/1 var(--sb-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.team-power-a span,
.team-power-a b { color: #62d6ff; }
.team-power-b span,
.team-power-b b { color: #ff756f; }

.team-power-track {
  grid-column: 1 / -1;
  height: 18px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, #140d1e 0 8%, #030108 8% 10%);
}

.team-power-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  transition: width 0.16s linear;
  mask-image: repeating-linear-gradient(90deg, #000 0 8%, transparent 8% 10%);
}

.team-power-a i {
  background: linear-gradient(90deg, #075bcc, #33caff 68%, #d1f6ff);
  box-shadow: 0 0 14px #10aaff;
}

.team-power-b i {
  background: linear-gradient(90deg, #a5061a, #ff3348 68%, #ffd0cd);
  box-shadow: 0 0 14px #ff263c;
}

.activity-card {
  flex: 1.2 1 0;
}

.balloons-activity,
.balloons-results {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.balloons-activity li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 800;
}

.balloons-activity li > b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font: 400 16px/1 var(--sb-display);
}

.balloons-activity li[data-side='a'] > b { background: #087be3; box-shadow: 0 0 8px #079cff; }
.balloons-activity li[data-side='b'] > b { background: #d3162c; box-shadow: 0 0 8px #ff263d; }
.balloons-activity li em { color: #ffd74d; font-style: normal; }
.balloons-activity li.is-empty {
  display: block;
  color: #aa94bd;
  text-align: center;
}

.previous-card {
  flex: 0.95 1 0;
}

.balloons-results li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.balloons-results span { color: #bda9cd; }
.balloons-results b { color: #ffd74d; text-align: right; }

.prize-card {
  flex: 0.52 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-color: rgba(255, 209, 50, 0.72);
  background: linear-gradient(135deg, rgba(92, 47, 4, 0.93), rgba(28, 8, 33, 0.95));
}

.prize-trophy {
  font-size: 34px;
  filter: drop-shadow(0 0 9px rgba(255, 202, 30, 0.66));
}

.prize-card small,
.prize-card strong {
  display: block;
  text-transform: uppercase;
}

.prize-card small {
  color: #fff0a3;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.prize-card strong {
  margin-top: 3px;
  color: #ffd63a;
  font: 400 21px/1 var(--sb-display);
  letter-spacing: 0.04em;
}

.balloons-bottom-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px;
  padding: 0 30px;
  border-top: 2px solid rgba(197, 78, 255, 0.7);
  background: linear-gradient(90deg, rgba(27, 4, 51, 0.98), rgba(78, 13, 109, 0.98), rgba(27, 4, 51, 0.98));
  box-shadow: 0 -7px 20px rgba(125, 27, 190, 0.28);
  color: #fff;
  font: italic 900 14px/1 var(--sb-body);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.balloons-bottom-bar b {
  color: #ffd83f;
  font-variant-numeric: tabular-nums;
}

.balloons-confetti {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.82;
  background-image:
    radial-gradient(ellipse, #ffdc35 0 3px, transparent 4px),
    radial-gradient(ellipse, #35c8ff 0 4px, transparent 5px),
    radial-gradient(ellipse, #ff4bbc 0 3px, transparent 4px),
    radial-gradient(ellipse, #9c55ff 0 4px, transparent 5px),
    radial-gradient(ellipse, #ff4d42 0 3px, transparent 4px);
  background-size: 127px 173px, 181px 211px, 149px 197px, 213px 239px, 167px 223px;
  background-position: 0 -173px, 34px -211px, 81px -197px, 107px -239px, 51px -223px;
  animation: confetti-fall 1.2s linear infinite;
}

.balloons-stage[data-winner='a'] .balloons-confetti,
.balloons-stage[data-winner='b'] .balloons-confetti {
  display: block;
}

.balloons-stage[data-winner='a'],
.balloons-stage[data-winner='b'] {
  animation: balloons-screen-flash 0.7s ease-out;
}

@keyframes balloons-live-pulse {
  50% { opacity: 0.38; transform: scale(0.75); }
}

@keyframes balloon-number-bump {
  45% { transform: scale(1.14); filter: brightness(1.35); }
}

@keyframes balloon-wobble-tv {
  0%, 100% { transform: scale(calc(0.78 + (var(--fill) / 100) * 0.22)) rotate(-1.3deg); }
  50% { transform: scale(calc(0.79 + (var(--fill) / 100) * 0.225)) rotate(1.3deg); }
}

@keyframes balloon-wobble-critical {
  0%, 100% { transform: scale(calc(0.79 + (var(--fill) / 100) * 0.22)) rotate(-2.2deg) skewX(-.7deg); }
  50% { transform: scale(calc(0.8 + (var(--fill) / 100) * 0.23)) rotate(2.2deg) skewX(.7deg); }
}

@keyframes balloon-sag-tv {
  0%, 100% { transform: scale(calc(0.78 + (var(--fill) / 100) * 0.22)) translateY(0); }
  50% { transform: scaleX(calc(0.79 + (var(--fill) / 100) * 0.22)) scaleY(calc(0.76 + (var(--fill) / 100) * 0.22)) translateY(5px); }
}

@keyframes balloon-pop-tv {
  0% { transform: scale(1); opacity: 1; filter: brightness(1.4); }
  28% { transform: scale(1.16); opacity: 1; filter: brightness(2); }
  60% { transform: scale(1.28); opacity: .9; }
  100% { transform: scale(.08); opacity: 0; }
}

@keyframes balloon-sparks-tv {
  0% { opacity: 0; transform: scale(.3) rotate(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.1) rotate(20deg); }
}

@keyframes vs-energy {
  50% { transform: scale(1.055); box-shadow: 0 0 16px #fff, 0 0 38px #ed4dff, 0 0 78px rgba(132,37,255,.9); }
}

@keyframes vs-spin {
  to { transform: rotate(405deg); }
}

@keyframes shake-callout-pulse {
  50% { box-shadow: 0 0 31px rgba(216, 91, 255, .78), inset 0 0 32px rgba(255,255,255,.17); filter: brightness(1.08); }
}

@keyframes confetti-fall {
  from { transform: translateY(-110px); }
  to { transform: translateY(110px); }
}

@keyframes balloons-screen-flash {
  0%, 100% { filter: brightness(1); }
  22% { filter: brightness(2.1); }
}

/* ------------------------------------------------ Tap Attack TV leaderboard */

.host-tap {
  position: fixed;
  inset: 0;
  grid-row: auto;
  z-index: 6;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #03000c;
}

.host-tap.hidden {
  display: none;
}

.tap-stage {
  --tap-purple: #b83cff;
  --tap-pink: #ff46c8;
  --tap-blue: #159dff;
  --tap-gold: #ffd43c;
  --tap-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --tap-body: Montserrat, 'Segoe UI', sans-serif;
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  padding: 14px 18px 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 48px;
  overflow: hidden;
  color: #fff;
  font-family: var(--tap-body);
  background:
    linear-gradient(180deg, rgba(3, 0, 14, 0.08), rgba(3, 0, 14, 0.5)),
    url('/img/scoreboard-stage-bg.png') center / cover no-repeat,
    #03000c;
}

.tap-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 38% at 50% 7%, rgba(184, 60, 255, 0.3), transparent 68%),
    radial-gradient(ellipse 34% 42% at 29% 48%, rgba(21, 157, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 34% 42% at 71% 48%, rgba(255, 70, 200, 0.13), transparent 70%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 20% 80%, rgba(0, 0, 0, 0.18));
}

.tap-stage::after {
  content: '';
  position: absolute;
  inset: auto 0 44px;
  z-index: 0;
  height: 90px;
  opacity: 0.7;
  pointer-events: none;
  background:
    radial-gradient(circle at 4% 84%, #06030e 0 30px, transparent 31px),
    radial-gradient(circle at 12% 75%, #06030e 0 37px, transparent 38px),
    radial-gradient(circle at 21% 86%, #06030e 0 31px, transparent 32px),
    radial-gradient(circle at 30% 76%, #06030e 0 38px, transparent 39px),
    radial-gradient(circle at 40% 87%, #06030e 0 33px, transparent 34px),
    radial-gradient(circle at 50% 75%, #06030e 0 40px, transparent 41px),
    radial-gradient(circle at 60% 87%, #06030e 0 33px, transparent 34px),
    radial-gradient(circle at 70% 76%, #06030e 0 38px, transparent 39px),
    radial-gradient(circle at 79% 86%, #06030e 0 31px, transparent 32px),
    radial-gradient(circle at 88% 75%, #06030e 0 37px, transparent 38px),
    radial-gradient(circle at 96% 84%, #06030e 0 30px, transparent 31px),
    linear-gradient(transparent 46%, #06030e 47%);
}

.tap-stage > * {
  position: relative;
  z-index: 1;
}

.tap-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(276px, 18fr) minmax(0, 64fr) minmax(276px, 18fr);
  gap: 16px;
}

.tap-sidebar {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tap-brand {
  display: block;
  width: min(100%, 274px);
  height: 126px;
  margin: -8px auto -2px;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 15px rgba(132, 37, 255, 0.42));
}

.tap-info-card {
  position: relative;
  padding: 12px 14px;
  border: 1px solid rgba(179, 90, 255, 0.65);
  border-radius: 11px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(31, 10, 57, 0.94), rgba(7, 2, 20, 0.94)),
    rgba(5, 1, 16, 0.92);
  box-shadow:
    inset 0 0 24px rgba(125, 34, 227, 0.09),
    0 0 20px rgba(93, 21, 165, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.32);
}

.tap-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.07), transparent 24%);
}

.tap-info-card h2 {
  position: relative;
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid rgba(173, 75, 255, 0.62);
  color: #fff;
  font: 400 24px/1 var(--tap-display);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(207, 95, 255, 0.65);
}

.tap-info-card h2 span {
  color: var(--tap-gold);
}

.tap-how-card {
  flex: 1.05 1 0;
}

.tap-steps {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tap-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.93);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.22;
}

.tap-steps b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid #ffe773;
  border-radius: 50%;
  background: linear-gradient(#ffca26, #ee7f00);
  color: #160526;
  font: 400 22px/1 var(--tap-display);
  box-shadow: 0 0 13px rgba(255, 188, 31, 0.54);
}

.tap-status-card {
  flex: 0.68 1 0;
}

.tap-live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7cff88;
  font: 900 18px/1 var(--tap-body);
  letter-spacing: 0.1em;
}

.tap-live i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #42ff6e;
  box-shadow: 0 0 12px #42ff6e;
  animation: tap-live-pulse 1.25s ease-in-out infinite;
}

.host-tap[data-state='idle'] .tap-live {
  color: #ffd65a;
}

.host-tap[data-state='idle'] .tap-live i {
  background: #ffc52e;
  box-shadow: 0 0 12px #ffc52e;
  animation: none;
}

.tap-player-total {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.tap-player-total strong {
  color: #fff;
  font: 400 42px/.8 var(--tap-display);
}

.tap-player-total span {
  max-width: 135px;
  color: #d4b8ea;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tap-round-card {
  flex: 1.05 1 0;
}

.tap-round-stats {
  display: grid;
  gap: 7px;
  margin: 0;
}

.tap-round-stats div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.tap-round-stats dt {
  color: #b9a6ce;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tap-round-stats dd {
  max-width: 170px;
  margin: 0;
  overflow: hidden;
  color: #ffd94d;
  font: 400 21px/1 var(--tap-display);
  letter-spacing: 0.04em;
  text-align: right;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tap-main-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 226px 96px minmax(0, 1fr) 78px;
  gap: 10px;
  padding: 0 4px 8px;
}

.tap-show-title {
  position: relative;
  display: grid;
  place-items: center;
  align-content: start;
  text-align: center;
  filter: drop-shadow(0 12px 13px rgba(0, 0, 0, 0.65));
}

.tap-show-title::before {
  content: '';
  position: absolute;
  top: -26px;
  z-index: -1;
  width: 620px;
  height: 250px;
  background: radial-gradient(ellipse, rgba(151, 38, 255, 0.34), transparent 68%);
}

.tap-title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Intrinsic 768x452. Both axes are capped so the lockup keeps its own aspect
   ratio whichever way the stage runs out of room first. */
.tap-title-art {
  display: block;
  width: auto;
  max-width: min(94%, 336px);
  height: auto;
  max-height: 198px;
  margin-top: -6px;
  filter:
    drop-shadow(0 8px 4px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 13px rgba(212, 53, 255, 0.48))
    drop-shadow(0 0 19px rgba(22, 164, 255, 0.24));
  animation: tap-title-energy 3s ease-in-out infinite;
}

.tap-show-title p {
  margin: -10px 0 0;
  padding: 5px 22px 6px;
  border: 1px solid rgba(242, 186, 255, 0.65);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(82, 10, 141, 0.8), rgba(185, 35, 247, 0.94), rgba(82, 10, 141, 0.8));
  box-shadow: 0 0 18px rgba(199, 65, 255, 0.48);
  color: #fff;
  font: italic 900 13px/1 var(--tap-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tap-race-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 18px 10px 22px;
  border: 2px solid rgba(191, 81, 255, 0.72);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 50%, rgba(21, 157, 255, 0.15), transparent 32%),
    linear-gradient(100deg, rgba(25, 5, 48, 0.97), rgba(65, 12, 91, 0.96), rgba(25, 5, 48, 0.97));
  box-shadow: 0 0 22px rgba(174, 53, 242, 0.33), inset 0 0 24px rgba(255, 255, 255, 0.05);
}

.tap-race-header .host-state {
  color: #58d5ff;
  font: 900 12px/1 var(--tap-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tap-headline {
  max-width: 760px;
  margin-top: 6px;
  overflow: hidden;
  color: #fff;
  font: italic 400 clamp(36px, 3.25vw, 62px)/.86 var(--tap-display);
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-shadow: 0 3px 0 #341042, 0 0 18px rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  white-space: nowrap;
}

.tap-clock-wrap {
  flex: none;
  display: grid;
  min-width: 185px;
  padding: 7px 15px 5px;
  border: 2px solid #ffe267;
  border-radius: 11px;
  place-items: center;
  background: linear-gradient(180deg, rgba(78, 17, 112, 0.94), rgba(17, 3, 31, 0.97));
  box-shadow: 0 0 20px rgba(255, 202, 41, 0.32), inset 0 0 18px rgba(186, 67, 255, 0.2);
}

.tap-clock-wrap span {
  color: #e8d8ef;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tap-clock {
  color: #ffd747;
  font: 400 64px/.78 var(--tap-display);
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255, 204, 45, 0.65);
}

.host-tap[data-state='finished'] .tap-clock {
  color: #66ff91;
  text-shadow: 0 0 18px rgba(52, 255, 111, 0.68);
}

.tap-leaderboard-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  padding: 10px 14px 14px;
  border: 2px solid rgba(80, 196, 255, 0.7);
  border-radius: 15px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 15, 38, 0.96), rgba(8, 2, 20, 0.97)),
    rgba(5, 1, 16, 0.95);
  box-shadow:
    0 0 24px rgba(22, 157, 255, 0.25),
    inset 0 0 36px rgba(89, 42, 179, 0.12);
}

.tap-board-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 4px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tap-board-title span {
  color: #fff;
  font: 400 25px/1 var(--tap-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(88, 197, 255, 0.5);
}

.tap-board-title small {
  color: #a9cbe2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tap-board {
  min-height: 0;
  align-content: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(50px, 1fr);
  gap: 8px 14px;
  margin: 0;
  padding: 10px 0 0;
  overflow: hidden;
  list-style: none;
}

.tap-board[data-count='1'],
.tap-board[data-count='2'],
.tap-board[data-count='3'],
.tap-board[data-count='4'],
.tap-board[data-count='5'],
.tap-board[data-count='6'] {
  grid-template-columns: 1fr;
}

.tap-board[data-count='1'],
.tap-board[data-count='2'],
.tap-board[data-count='3'] {
  grid-auto-rows: 88px;
  align-content: start;
}

.tap-empty {
  grid-column: 1 / -1;
  padding: 60px 12px;
  color: #b9a7c8;
  font: 400 30px/1 var(--tap-display);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.tap-row {
  --tap-share: 0;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 7px;
  border: 1px solid rgba(133, 90, 171, 0.42);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(14, 7, 25, 0.88);
  font-size: 19px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.tap-row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: calc(var(--tap-share) * 1%);
  background: linear-gradient(90deg, rgba(25, 142, 255, 0.31), rgba(183, 51, 255, 0.18));
  border-right: 1px solid rgba(84, 206, 255, 0.32);
  transition: width 0.18s ease;
}

.tap-row.lead {
  border-color: rgba(255, 211, 56, 0.86);
  background: linear-gradient(90deg, rgba(104, 58, 4, 0.8), rgba(46, 13, 63, 0.9));
  box-shadow: 0 0 17px rgba(255, 198, 31, 0.28), inset 0 0 16px rgba(255, 211, 56, 0.08);
}

.tap-row.lead::before {
  background: linear-gradient(90deg, rgba(255, 181, 23, 0.32), rgba(255, 74, 188, 0.18));
}

.host-tap[data-state='finished'] .tap-row.lead {
  border-color: #66ff91;
  background: linear-gradient(90deg, rgba(13, 97, 47, 0.74), rgba(38, 13, 65, 0.9));
  box-shadow: 0 0 22px rgba(68, 255, 123, 0.38);
}

.tap-place {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #cdb8dc;
  font: 400 22px/1 var(--tap-display);
}

.tap-row.lead .tap-place {
  border-color: #ffea78;
  background: linear-gradient(#ffd83e, #d98000);
  color: #250827;
  box-shadow: 0 0 12px rgba(255, 205, 42, 0.58);
}

.tap-name {
  overflow: hidden;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tap-score {
  color: #ffd747;
  font: 400 29px/1 var(--tap-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 207, 48, 0.5);
}

.tap-score::after {
  content: ' TAPS';
  color: #a995b8;
  font: 900 8px/1 var(--tap-body);
  letter-spacing: 0.08em;
}

.tap-action-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border: 2px solid #c759ff;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(75, 10, 128, 0.94), rgba(170, 34, 225, 0.97) 50%, rgba(75, 10, 128, 0.94));
  box-shadow: 0 0 19px rgba(206, 71, 255, 0.55), inset 0 0 26px rgba(255, 255, 255, 0.1);
  text-align: center;
  text-transform: uppercase;
}

.host-tap[data-state='live'] .tap-action-callout {
  animation: tap-callout-pulse 1.35s ease-in-out infinite;
}

.tap-action-callout strong {
  display: block;
  color: #fff;
  font: italic 400 40px/.84 var(--tap-display);
  letter-spacing: 0.09em;
  text-shadow: 0 3px 0 #511070, 0 0 15px #fff;
}

.tap-action-callout small {
  display: block;
  margin-top: 6px;
  color: #ffe74d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.tap-action-icon {
  font-size: 38px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.55));
}

.tap-action-bolts {
  color: #ffe44a;
  font-size: 27px;
  filter: drop-shadow(0 0 8px rgba(255, 218, 50, 0.7));
}

.tap-stats-card {
  flex: 0.9 1 0;
}

.tap-big-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tap-big-stat strong {
  color: #ffd747;
  font: 400 50px/.85 var(--tap-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(255, 205, 45, 0.48);
}

.tap-big-stat span,
.tap-mini-stats span {
  color: #bda8cc;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tap-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.tap-mini-stats div {
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}

.tap-mini-stats strong,
.tap-mini-stats span {
  display: block;
}

.tap-mini-stats strong {
  margin-bottom: 3px;
  color: #5fd7ff;
  font: 400 26px/1 var(--tap-display);
}

.tap-podium-card {
  flex: 1.28 1 0;
}

.tap-podium {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tap-podium li {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.tap-podium li > b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #432252;
  color: #fff;
  font: 400 18px/1 var(--tap-display);
}

.tap-podium li:first-child > b {
  background: linear-gradient(#ffe470, #c98400);
  color: #251027;
  box-shadow: 0 0 10px rgba(255, 209, 46, 0.52);
}

.tap-podium li span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tap-podium li em {
  color: #ffd747;
  font: normal 400 22px/1 var(--tap-display);
}

.tap-podium li.is-empty {
  display: block;
  padding: 20px 8px;
  color: #aa94bd;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.tap-energy-card {
  flex: 0.67 1 0;
}

.tap-energy-track {
  height: 22px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: #090411;
}

.tap-energy-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #126dff, #c541ff 60%, #ffcf2e);
  box-shadow: 0 0 14px rgba(196, 61, 255, 0.65);
  transition: width 0.25s ease;
}

.tap-energy-card p {
  margin: 8px 0 0;
  color: #ffd84c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.tap-prize-card {
  flex: 0.5 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-color: rgba(255, 209, 50, 0.72);
  background: linear-gradient(135deg, rgba(92, 47, 4, 0.93), rgba(28, 8, 33, 0.95));
}

.tap-prize-card > span {
  font-size: 34px;
  filter: drop-shadow(0 0 9px rgba(255, 202, 30, 0.66));
}

.tap-prize-card small,
.tap-prize-card strong {
  display: block;
  text-transform: uppercase;
}

.tap-prize-card small {
  color: #fff0a3;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.tap-prize-card strong {
  margin-top: 3px;
  color: #ffd63a;
  font: 400 21px/1 var(--tap-display);
  letter-spacing: 0.04em;
}

.tap-bottom-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px;
  padding: 0 30px;
  border-top: 2px solid rgba(197, 78, 255, 0.7);
  background: linear-gradient(90deg, rgba(27, 4, 51, 0.98), rgba(78, 13, 109, 0.98), rgba(27, 4, 51, 0.98));
  box-shadow: 0 -7px 20px rgba(125, 27, 190, 0.28);
  color: #fff;
  font: italic 900 14px/1 var(--tap-body);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.tap-bottom-bar b {
  color: #ffd83f;
}

.tap-celebration {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  pointer-events: none;
  opacity: 0.84;
  background-image:
    radial-gradient(ellipse, #ffdc35 0 3px, transparent 4px),
    radial-gradient(ellipse, #35c8ff 0 4px, transparent 5px),
    radial-gradient(ellipse, #ff4bbc 0 3px, transparent 4px),
    radial-gradient(ellipse, #9c55ff 0 4px, transparent 5px);
  background-size: 127px 173px, 181px 211px, 149px 197px, 213px 239px;
  animation: tap-confetti 1.2s linear infinite;
}

.host-tap[data-state='finished'] .tap-celebration {
  display: block;
}

.host-tap[data-state='finished'] {
  animation: tap-screen-flash 0.7s ease-out;
}

body[data-host-mode='tap'] {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body[data-host-mode='tap'] .host {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body[data-host-mode='tap'] .host-top,
body[data-host-mode='tap'] .host-teams {
  visibility: hidden;
}

@keyframes tap-live-pulse {
  50% { opacity: 0.38; transform: scale(0.75); }
}

@keyframes tap-title-energy {
  50% {
    transform: translateY(-2px) scale(1.012);
    filter:
      drop-shadow(0 10px 5px rgba(0, 0, 0, 0.68))
      drop-shadow(0 0 18px rgba(224, 68, 255, 0.66))
      drop-shadow(0 0 25px rgba(22, 164, 255, 0.36));
  }
}

@keyframes tap-callout-pulse {
  50% { box-shadow: 0 0 31px rgba(216, 91, 255, 0.78), inset 0 0 32px rgba(255, 255, 255, 0.17); filter: brightness(1.08); }
}

@keyframes tap-confetti {
  from { transform: translateY(-110px); }
  to { transform: translateY(110px); }
}

@keyframes tap-screen-flash {
  0%, 100% { filter: brightness(1); }
  22% { filter: brightness(1.85); }
}

/* Keep the compact 512×384 pixel-screen variant intact. */
body.host-pixel .tap-stage {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  background: #05050a;
}

body.host-pixel .tap-sidebar,
body.host-pixel .tap-show-title,
body.host-pixel .tap-action-callout,
body.host-pixel .tap-bottom-bar,
body.host-pixel .tap-board-title,
body.host-pixel .tap-celebration {
  display: none;
}

body.host-pixel .tap-layout,
body.host-pixel .tap-main-stage {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

body.host-pixel .tap-race-header {
  min-height: 54px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
}

body.host-pixel .tap-leaderboard-panel {
  height: calc(100% - 54px);
  padding: 2px;
  border: 0;
  border-radius: 0;
  display: block;
}

body.host-pixel .tap-board {
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 0;
}

body.host-pixel .tap-row {
  min-height: 0;
  padding: 2px 5px;
  border-radius: 2px;
}

/* Player phone UI */
.balloons-panel {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(100%, 360px);
  margin: 0 auto;
}

.balloons-panel.hidden {
  display: none;
}

.balloons-phone-side {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #9aa0b5);
}

.balloons-phone-meter {
  --fill: 0;
  position: relative;
  width: 100%;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.balloons-phone-fill {
  height: 100%;
  width: calc(var(--fill) * 1%);
  background: linear-gradient(90deg, #c84bff, #ff4fc4 55%, #ffd24a);
  transition: width 0.12s linear;
}

.balloons-panel[data-side='b'] .balloons-phone-fill {
  background: linear-gradient(90deg, #3b9eff, #7ad0ff 55%, #ffd24a);
}

.balloons-phone-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.balloons-shake-btn {
  width: 100%;
  min-height: 160px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(160deg, #c84bff, #6a1a9a);
  color: #fff;
  box-shadow: 0 16px 40px rgba(160, 50, 255, 0.4);
  display: grid;
  place-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Blocks scroll while rubbing the pad without preventDefault(), which would
     stop Safari granting motion access on tap. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.balloons-panel[data-side='b'] .balloons-shake-btn {
  background: linear-gradient(160deg, #3b9eff, #154a9a);
  box-shadow: 0 16px 40px rgba(50, 130, 255, 0.4);
}

.balloons-shake-btn .sub {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}

.balloons-shake-btn[data-state='shaking'] {
  transform: scale(1.03);
  filter: brightness(1.12);
}

.balloons-shake-btn[data-state='done'] {
  opacity: 0.7;
}

.balloons-phone-hint {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
}

/* ------------------------------------------------ Higher or Lower TV stage
   Fullscreen presentation only. The compact 512x384 host keeps the original
   rules above through body.host-pixel. */

body:not(.host-pixel) .host-cards {
  --cards-gold: #ffd84a;
  --cards-purple: #b936ff;
  --cards-blue: #30bfff;
  --cards-red: #ff3d67;
  --cards-ink: #050512;
  grid-template-columns: minmax(270px, 18fr) minmax(0, 64fr) minmax(270px, 18fr);
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(136, 38, 230, 0.33), transparent 48%),
    #050512;
  color: #fff;
  font-family: Montserrat, 'Segoe UI', sans-serif;
}

body:not(.host-pixel) .cards-show-bg-img {
  opacity: 0.76;
  filter: saturate(1.2) contrast(1.08) brightness(0.72);
}

body:not(.host-pixel) .cards-show-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 8%, rgba(48, 191, 255, 0.08) 9%, transparent 16%),
    linear-gradient(248deg, transparent 0 8%, rgba(255, 61, 103, 0.07) 9%, transparent 16%),
    radial-gradient(circle at 50% 38%, transparent 0 30%, rgba(2, 3, 18, 0.42) 72%);
  mix-blend-mode: screen;
  animation: cards-stage-lights 7s ease-in-out infinite alternate;
}

body:not(.host-pixel) .cards-show-bg::after {
  background:
    linear-gradient(90deg, rgba(4, 4, 18, 0.88) 0%, transparent 19%, transparent 81%, rgba(4, 4, 18, 0.88) 100%),
    linear-gradient(180deg, rgba(3, 3, 16, 0.3) 0%, transparent 35%, rgba(2, 2, 12, 0.72) 100%);
}

body:not(.host-pixel) .cards-sidebar {
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

/* Matches the Tap Attack sidebar brand so the logo sits identically across modes. */
body:not(.host-pixel) .cards-brand {
  display: block;
  flex: 0 0 auto;
  padding: 0;
}

body:not(.host-pixel) .cards-brand-logo {
  width: min(100%, 250px);
  height: clamp(72px, 10vh, 110px);
  max-height: none;
  margin: 0 auto;
  object-position: center;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 15px rgba(132, 37, 255, 0.42));
}

body:not(.host-pixel) .cards-side-panel,
body:not(.host-pixel) .cards-connected {
  position: relative;
  border: 1px solid rgba(196, 76, 255, 0.58);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(51, 14, 79, 0.9), rgba(8, 8, 30, 0.96) 60%),
    #09091f;
  box-shadow:
    0 0 18px rgba(151, 36, 236, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 0 24px rgba(90, 24, 145, 0.18);
}

body:not(.host-pixel) .cards-side-panel::before,
body:not(.host-pixel) .cards-connected::before {
  content: '';
  position: absolute;
  inset: -1px auto auto 14px;
  width: 44%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cards-gold), #ff8c42, transparent);
  box-shadow: 0 0 10px rgba(255, 216, 74, 0.8);
}

body:not(.host-pixel) .cards-side-panel {
  padding: 14px;
  gap: 12px;
}

body:not(.host-pixel) .cards-side-title {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(206, 93, 255, 0.38);
  color: #fff;
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 950;
  letter-spacing: 0.075em;
  text-shadow: 0 0 10px rgba(221, 127, 255, 0.4);
}

body:not(.host-pixel) .cards-side-title span {
  color: var(--cards-gold);
  text-shadow: 0 0 9px rgba(255, 216, 74, 0.8);
}

body:not(.host-pixel) .cards-howto {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 38%;
  overflow: auto;
}

body:not(.host-pixel) .cards-steps {
  gap: 13px;
  font-size: clamp(12px, 0.82vw, 16px);
  line-height: 1.28;
}

body:not(.host-pixel) .cards-steps li {
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(136, 39, 201, 0.18), transparent);
}

body:not(.host-pixel) .cards-step-num {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 216, 74, 0.82);
  background: linear-gradient(180deg, #a52feb, #581589);
  box-shadow:
    0 0 12px rgba(185, 54, 255, 0.65),
    inset 0 0 7px rgba(255, 255, 255, 0.24);
  color: #fff8c9;
}

body:not(.host-pixel) .cards-steps strong {
  color: var(--cards-gold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body:not(.host-pixel) .cards-join-panel {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  margin-top: auto;
}

body:not(.host-pixel) .cards-qr {
  width: min(100%, 22vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 11px;
  box-shadow:
    0 0 0 3px rgba(185, 54, 255, 0.5),
    0 0 25px rgba(48, 191, 255, 0.32);
}

body:not(.host-pixel) .cards-join-url {
  margin-top: 8px;
  color: #8edfff;
  font-size: clamp(12px, 0.84vw, 16px);
}

body:not(.host-pixel) .cards-join-code {
  font-size: clamp(13px, 0.92vw, 17px);
  text-transform: uppercase;
}

body:not(.host-pixel) .cards-join-code strong {
  color: var(--cards-gold);
  font-size: 1.35em;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.6);
}

/* Rows scale with viewport height: fixed pixels starve the card row on a 720p
   projector, where the title alone would claim a quarter of the screen. */
body:not(.host-pixel) .cards-main {
  --cards-gap: clamp(5px, 0.75vh, 8px);
  --cards-odds-h: clamp(86px, 10.4vh, 112px);
  --cards-progress-h: clamp(26px, 3.5vh, 38px);
  --cards-footer-h: clamp(40px, 5vh, 54px);
  /* Everything below the card row, so overlays can be anchored to the row. */
  --cards-lower-stack: calc(
    var(--cards-odds-h) + var(--cards-progress-h) + var(--cards-footer-h) + 2 * var(--cards-gap)
  );
  position: relative;
  min-height: 0;
  grid-template-rows:
    clamp(88px, 12.5vh, 158px)
    clamp(28px, 3.2vh, 36px)
    minmax(0, 1fr)
    var(--cards-odds-h)
    var(--cards-progress-h)
    var(--cards-footer-h);
  gap: var(--cards-gap);
  overflow: hidden;
}

body:not(.host-pixel) .cards-marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 4px;
  overflow: hidden;
}

body:not(.host-pixel) .cards-marquee::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  width: min(690px, 100%);
  height: 180px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(170, 42, 255, 0.32), transparent 68%);
  pointer-events: none;
}

body:not(.host-pixel) .cards-title-logo {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  max-width: 92%;
  max-height: min(100%, clamp(64px, 10vh, 128px));
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 4px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 13px rgba(185, 54, 255, 0.48))
    drop-shadow(0 0 24px rgba(48, 191, 255, 0.2));
  animation: cards-title-float 3.4s ease-in-out infinite;
}

body:not(.host-pixel) .cards-ribbon {
  z-index: 3;
  flex: 0 0 auto;
  width: min(84%, 720px);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

body:not(.host-pixel) .cards-ribbon-inner {
  display: block;
  width: 100%;
  padding: 7px 30px;
  border: 1px solid rgba(255, 235, 138, 0.76);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(75, 10, 126, 0.9), #b52dea 48%, rgba(75, 10, 126, 0.9));
  clip-path: none;
  box-shadow:
    0 0 17px rgba(185, 54, 255, 0.56),
    inset 0 0 14px rgba(255, 255, 255, 0.12);
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1;
  white-space: nowrap;
}

body:not(.host-pixel) .cards-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 7px 15px;
  border: 1px solid rgba(48, 191, 255, 0.46);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(7, 34, 65, 0.9), rgba(12, 9, 41, 0.92), rgba(58, 11, 73, 0.88));
  box-shadow: inset 0 0 18px rgba(48, 191, 255, 0.08);
}

body:not(.host-pixel) .cards-live-badge,
body:not(.host-pixel) .cards-live-rule {
  font-size: clamp(10px, 0.65vw, 12px);
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .cards-live-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7fe5ff;
}

body:not(.host-pixel) .cards-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3dff8e;
  box-shadow: 0 0 10px #3dff8e;
  animation: cards-live-pulse 1.2s ease-in-out infinite;
}

body:not(.host-pixel) .cards-live-rule {
  color: #ffe77d;
}

body:not(.host-pixel) .cards-host-meta {
  overflow: hidden;
  color: #f6ecff;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.host-pixel) .cards-row {
  position: relative;
  align-items: center;
  gap: clamp(9px, 0.9vw, 17px);
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: clamp(30px, 3.8vh, 44px) 16px clamp(10px, 1.6vh, 18px);
  overflow: hidden;
  border: 2px solid rgba(99, 200, 255, 0.64);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(118, 30, 203, 0.28), transparent 62%),
    linear-gradient(180deg, rgba(6, 12, 40, 0.88), rgba(4, 4, 19, 0.96));
  box-shadow:
    0 0 25px rgba(48, 191, 255, 0.2),
    inset 0 0 34px rgba(104, 36, 182, 0.19);
}

body:not(.host-pixel) .cards-row::before {
  content: 'THE NEXT CARD DECIDES YOUR FATE';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: #d8c8f3;
  font-size: clamp(11px, 0.76vw, 14px);
  font-weight: 950;
  letter-spacing: 0.18em;
  text-shadow: 0 0 12px rgba(185, 54, 255, 0.55);
  white-space: nowrap;
}

body:not(.host-pixel) .cards-row::after {
  content: '';
  position: absolute;
  top: 39px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(195, 90, 255, 0.72), transparent);
}

/* Cards are sized from their height so the 5:7 aspect stays exact, but the row's
   own width has to cap that height or a short-and-wide screen pushes them out
   over the sidebars. Measuring the row (cqw) rather than the viewport keeps this
   correct when the sidebars hit their 270px minimum and squeeze the centre.
   2.82 = the five cards' combined width as a multiple of hero height:
   (2 hero + 3 deck at 0.65) x 5/7. */
body:not(.host-pixel) .cards-row {
  container-type: size;
  --hero-card-h: min(100%, 520px, calc((100cqw - 112px) / 2.82));
}

body:not(.host-pixel) .show-card {
  flex: 0 0 auto;
  width: auto;
  height: var(--hero-card-h);
  max-width: none;
  max-height: 100%;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    filter 0.35s ease;
}

body:not(.host-pixel) .show-card[data-slot='1'],
body:not(.host-pixel) .show-card[data-slot='2'] {
  z-index: 2;
}

body:not(.host-pixel) .show-card[data-slot='3'],
body:not(.host-pixel) .show-card[data-slot='4'],
body:not(.host-pixel) .show-card[data-slot='5'] {
  height: calc(var(--hero-card-h) * 0.65);
  opacity: 0.72;
  filter: saturate(0.75) brightness(0.78);
  /* No scale() here: it would shrink the card visually while still reserving the
     unscaled width in the flex row, overflowing the stage. */
  transform: translateY(11px);
}

body:not(.host-pixel) .show-card[data-slot='1']::before,
body:not(.host-pixel) .show-card[data-slot='2']::before {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  font-size: clamp(10px, 0.67vw, 12px);
  font-weight: 950;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

body:not(.host-pixel) .show-card[data-slot='1']::before {
  content: 'CURRENT CARD';
  color: #8bddff;
}

body:not(.host-pixel) .show-card[data-slot='2']::before {
  content: 'MYSTERY CARD';
  color: #ffe271;
}

body:not(.host-pixel) .show-card-back,
body:not(.host-pixel) .show-card-face {
  border-radius: 14px;
  box-shadow:
    0 18px 26px -12px rgba(0, 0, 0, 0.9),
    0 0 0 2px rgba(255, 255, 255, 0.32);
}

body:not(.host-pixel) .show-card.is-current.is-face .show-card-face {
  box-shadow:
    0 20px 32px -12px rgba(0, 0, 0, 0.92),
    0 0 0 3px #42cfff,
    0 0 28px rgba(48, 191, 255, 0.58);
}

body:not(.host-pixel) .show-card.is-next:not(.is-face) .show-card-back {
  box-shadow:
    0 20px 32px -12px rgba(0, 0, 0, 0.92),
    0 0 0 3px #ffdf4d,
    0 0 31px rgba(255, 216, 74, 0.58);
  animation: cards-mystery-pulse 1.65s ease-in-out infinite;
}

body:not(.host-pixel) .host-cards[data-state='revealed'] .show-card[data-slot='2'] {
  animation: cards-reveal-hit 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

body:not(.host-pixel) .cards-odds {
  gap: 14px;
  width: min(100%, 720px);
  min-height: 0;
  align-self: stretch;
}

/* Must track the odds row height above, or these spill over the progress rail. */
body:not(.host-pixel) .cards-odds-box,
body:not(.host-pixel) .cards-jackpot {
  min-height: 0;
  height: 100%;
  border-radius: 14px;
}

body:not(.host-pixel) .cards-odds-box {
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0 10px;
  padding: 12px 18px;
  border: 1px solid currentColor;
}

body:not(.host-pixel) .cards-odds-low {
  color: #55d5ff;
  background: linear-gradient(135deg, rgba(12, 99, 164, 0.6), rgba(5, 17, 47, 0.94));
  box-shadow: 0 0 20px rgba(48, 191, 255, 0.25), inset 0 0 24px rgba(48, 191, 255, 0.08);
}

body:not(.host-pixel) .cards-odds-high {
  color: #ff6687;
  background: linear-gradient(225deg, rgba(158, 21, 72, 0.58), rgba(42, 5, 30, 0.94));
  box-shadow: 0 0 20px rgba(255, 61, 103, 0.25), inset 0 0 24px rgba(255, 61, 103, 0.08);
}

body:not(.host-pixel) .cards-odds-arrow {
  grid-row: 1 / 3;
  align-self: center;
  font-size: clamp(38px, 3vw, 58px);
}

body:not(.host-pixel) .cards-odds-low .cards-odds-arrow,
body:not(.host-pixel) .cards-odds-high .cards-odds-arrow {
  color: currentColor;
}

body:not(.host-pixel) .cards-odds-label {
  align-self: end;
  color: #fff;
  font-size: clamp(11px, 0.74vw, 14px);
  text-align: left;
}

body:not(.host-pixel) .cards-odds-count {
  align-self: start;
  color: currentColor;
  font-size: clamp(30px, 2.35vw, 44px);
  line-height: 1;
  text-align: left;
  text-shadow: 0 0 13px currentColor;
}

body:not(.host-pixel) .cards-jackpot {
  min-width: clamp(160px, 13vw, 230px);
  padding: 9px 22px;
  border-color: var(--cards-gold);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 198, 46, 0.23), transparent 55%),
    linear-gradient(180deg, #321b07, #120a05);
}

body:not(.host-pixel) .cards-jackpot-label {
  font-size: clamp(11px, 0.72vw, 14px);
}

body:not(.host-pixel) .cards-jackpot-value {
  font-size: clamp(36px, 3vw, 58px);
}

body:not(.host-pixel) .cards-progress {
  width: min(100%, 680px);
  padding-top: 3px;
}

body:not(.host-pixel) .cards-progress-node {
  gap: 4px;
}

body:not(.host-pixel) .cards-progress-node:not(:last-child)::after {
  top: 9px;
  height: 4px;
  background: rgba(153, 78, 220, 0.32);
}

body:not(.host-pixel) .cards-progress-dot {
  width: 19px;
  height: 19px;
  border-color: #be55ff;
}

body:not(.host-pixel) .cards-progress-star {
  font-size: 21px;
}

/* Lower third: parks exactly on the odds row so the revealed cards stay fully
   visible. The 0/0/0 odds are useless once the round is over anyway. */
body:not(.host-pixel) .cards-result {
  position: absolute;
  z-index: 20;
  top: auto;
  bottom: calc(var(--cards-progress-h) + var(--cards-footer-h) + 2 * var(--cards-gap));
  left: 50%;
  width: 100%;
  height: var(--cards-odds-h);
  padding: 0 28px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffdc55;
  font-size: clamp(22px, 2.8vw, 52px);
  filter: none;
  text-shadow:
    0 3px 0 #6b3400,
    0 0 20px rgba(255, 216, 74, 0.55);
  animation: cards-winner-arrive 0.62s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

body:not(.host-pixel) .cards-result::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 2px solid var(--cards-gold);
  border-radius: 16px;
  background: rgba(17, 6, 33, 0.97);
  box-shadow:
    0 0 45px rgba(255, 216, 74, 0.4),
    inset 0 0 26px rgba(185, 54, 255, 0.22);
}

body:not(.host-pixel) .cards-result:empty {
  display: none;
}

body:not(.host-pixel) .host-cards[data-state='revealed'] .cards-odds,
body:not(.host-pixel) .host-cards[data-state='over'] .cards-odds,
body:not(.host-pixel) .cards-main:has(.cards-result:not(:empty)) .cards-odds {
  visibility: hidden;
}

body:not(.host-pixel) .cards-footer-tag {
  align-self: stretch;
  display: grid;
  grid-template-columns: auto 1fr auto;
  place-items: center;
  gap: 18px;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 6px 24px;
  border: 1px solid rgba(214, 95, 255, 0.78);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(72, 9, 114, 0.9), rgba(180, 38, 224, 0.95), rgba(72, 9, 114, 0.9));
  box-shadow:
    0 0 24px rgba(185, 54, 255, 0.42),
    inset 0 0 16px rgba(255, 255, 255, 0.1);
  font-size: clamp(15px, 1.15vw, 22px);
  font-style: italic;
}

body:not(.host-pixel) .cards-footer-star {
  font-size: 1.5em;
  text-shadow: 0 0 12px var(--cards-gold);
}

body:not(.host-pixel) .cards-footer-win {
  color: var(--cards-gold);
}

body:not(.host-pixel) .cards-connected {
  flex: 0 0 74px;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  color: #d9eaff;
  font-size: clamp(11px, 0.74vw, 14px);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.host-pixel) .cards-connected-icon {
  display: none;
}

body:not(.host-pixel) .cards-connected strong {
  color: var(--cards-gold);
  font-size: clamp(25px, 1.85vw, 36px);
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.55);
}

body:not(.host-pixel) .cards-leaderboard-panel {
  flex: 1 1 auto;
}

body:not(.host-pixel) .cards-leaderboard {
  gap: 7px;
}

body:not(.host-pixel) .cards-lb-row {
  grid-template-columns: 38px 1fr;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid rgba(152, 93, 205, 0.19);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(99, 36, 143, 0.2), rgba(255, 255, 255, 0.025));
  font-size: clamp(12px, 0.8vw, 15px);
}

body:not(.host-pixel) .cards-lb-row.place-1 {
  border-color: rgba(255, 216, 74, 0.44);
  background: linear-gradient(90deg, rgba(255, 197, 35, 0.18), rgba(255, 255, 255, 0.025));
  box-shadow: inset 3px 0 0 var(--cards-gold);
}

body:not(.host-pixel) .cards-lb-rank {
  text-align: center;
}

body:not(.host-pixel) .cards-lb-name {
  font-weight: 900;
}

body:not(.host-pixel) .cards-recent-panel {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 28%;
  overflow: auto;
}

body:not(.host-pixel) .cards-recent-row {
  min-height: 74px;
  padding: 12px;
  border-color: rgba(48, 191, 255, 0.25);
  background: linear-gradient(115deg, rgba(27, 86, 139, 0.18), rgba(255, 188, 43, 0.08));
}

body:not(.host-pixel) .cards-recent-card {
  color: var(--cards-gold);
  font-size: clamp(15px, 0.95vw, 18px);
}

body:not(.host-pixel) .cards-recent-result {
  color: #e4d8f4;
}

body:not(.host-pixel) .host-cards[data-state='voting'] .cards-ribbon-inner {
  border-color: #7ee4ff;
  background: linear-gradient(90deg, #064f91, #19a9dd, #064f91);
  animation: cards-banner-pulse 1.4s ease-in-out infinite;
}

body:not(.host-pixel) .host-cards[data-state='revealed'] .cards-ribbon-inner {
  border-color: #fff0a0;
  background: linear-gradient(90deg, #9d5100, #ffd84a, #9d5100);
  color: #211100;
}

body:not(.host-pixel) .host-cards[data-state='over'] .cards-ribbon-inner {
  border-color: #8bffc0;
  background: linear-gradient(90deg, #087a49, #35dc8b, #087a49);
}

body:not(.host-pixel) .host-cards[data-state='over'] .cards-main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, #ffd84a 0 4px, transparent 5px),
    radial-gradient(circle at 18% 31%, #ff4b79 0 5px, transparent 6px),
    radial-gradient(circle at 31% 8%, #4bd7ff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 22%, #d850ff 0 5px, transparent 6px),
    radial-gradient(circle at 64% 9%, #ffd84a 0 5px, transparent 6px),
    radial-gradient(circle at 78% 27%, #4bd7ff 0 4px, transparent 5px),
    radial-gradient(circle at 91% 14%, #ff4b79 0 5px, transparent 6px);
  opacity: 0;
  animation: cards-confetti-drop 2.4s ease-out forwards;
}

@keyframes cards-stage-lights {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 1; transform: scale(1.025); }
}

@keyframes cards-title-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.012); }
}

@keyframes cards-live-pulse {
  0%, 100% { opacity: 0.58; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes cards-mystery-pulse {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-4px) scale(1.025); filter: brightness(1.12); }
}

@keyframes cards-reveal-hit {
  0% { transform: scale(0.88) rotate(-3deg); filter: brightness(2); }
  65% { transform: scale(1.08) rotate(1deg); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes cards-banner-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(48, 191, 255, 0.42); }
  50% { box-shadow: 0 0 28px rgba(48, 191, 255, 0.75); }
}

@keyframes cards-winner-arrive {
  from { opacity: 0; transform: translateX(-50%) scale(0.7) rotate(-2deg); }
  to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
}

@keyframes cards-confetti-drop {
  0% { opacity: 0; transform: translateY(-70px); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translateY(390px) rotate(16deg); }
}

@media (max-height: 720px) {
  body:not(.host-pixel) .cards-main {
    --cards-odds-h: clamp(78px, 9.6vh, 100px);
    --cards-footer-h: clamp(34px, 4.4vh, 46px);
    grid-template-rows:
      clamp(72px, 11vh, 120px)
      clamp(24px, 2.8vh, 32px)
      minmax(0, 1fr)
      var(--cards-odds-h)
      var(--cards-progress-h)
      var(--cards-footer-h);
  }

  body:not(.host-pixel) .cards-title-logo {
    max-height: min(100%, clamp(52px, 8vh, 96px));
  }

  body:not(.host-pixel) .cards-row {
    padding: clamp(26px, 3.2vh, 36px) 14px clamp(8px, 1.2vh, 14px);
  }
}

/* ------------------------------------------------ Buzzer Battle TV stage */

body:not(.host-pixel)[data-host-mode='buzzer'] .host {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  gap: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
}

body:not(.host-pixel)[data-host-mode='buzzer'] .host-top,
body:not(.host-pixel)[data-host-mode='buzzer'] .host-teams {
  display: none !important;
}

body:not(.host-pixel) .host-main {
  --buzzer-gold: #ffd84a;
  --buzzer-purple: #c854ff;
  --buzzer-blue: #46c9ff;
  --buzzer-red: #ff4868;
  --buzzer-green: #50ff9a;
  --buzzer-panel: linear-gradient(145deg, rgba(31, 8, 55, 0.96), rgba(8, 7, 29, 0.97));
}

body:not(.host-pixel)[data-host-mode='buzzer'] .host-main,
body:not(.host-pixel)[data-host-mode='buzzer'] .host-main[data-state='idle'] {
  position: relative;
  isolation: isolate;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(270px, 18fr) minmax(0, 64fr) minmax(270px, 18fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  align-content: stretch;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  color: #f7f3ff;
  text-align: initial;
  background:
    radial-gradient(ellipse 48% 35% at 50% 38%, rgba(176, 48, 255, 0.3), transparent 72%),
    radial-gradient(circle at 19% 38%, rgba(48, 178, 255, 0.15), transparent 29%),
    radial-gradient(circle at 82% 38%, rgba(255, 57, 91, 0.14), transparent 29%),
    #07000f;
}

body:not(.host-pixel) .buzzer-show-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  max-height: none;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 0, 12, 0.58), transparent 18% 82%, rgba(3, 0, 12, 0.58)),
    linear-gradient(180deg, rgba(5, 0, 15, 0.12), rgba(5, 0, 15, 0.7)),
    radial-gradient(ellipse 70% 24% at 50% 100%, rgba(92, 31, 130, 0.52), transparent 72%);
}

body:not(.host-pixel) .buzzer-show-bg::before {
  content: '';
  position: absolute;
  inset: -20% -8% 0;
  background:
    conic-gradient(from 198deg at 16% 0%, transparent 0 8deg, rgba(73, 198, 255, 0.16) 9deg 13deg, transparent 14deg 48deg),
    conic-gradient(from 145deg at 84% 0%, transparent 0 8deg, rgba(255, 74, 112, 0.16) 9deg 13deg, transparent 14deg 48deg);
  animation: buzzer-stage-lights 8s ease-in-out infinite alternate;
}

body:not(.host-pixel) .buzzer-show-bg::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 11%;
  opacity: 0.48;
  background:
    radial-gradient(ellipse at 5% 100%, #05020a 0 36%, transparent 37%),
    radial-gradient(ellipse at 14% 100%, #05020a 0 31%, transparent 32%),
    radial-gradient(ellipse at 25% 100%, #05020a 0 39%, transparent 40%),
    radial-gradient(ellipse at 38% 100%, #05020a 0 33%, transparent 34%),
    radial-gradient(ellipse at 51% 100%, #05020a 0 40%, transparent 41%),
    radial-gradient(ellipse at 64% 100%, #05020a 0 32%, transparent 33%),
    radial-gradient(ellipse at 76% 100%, #05020a 0 38%, transparent 39%),
    radial-gradient(ellipse at 88% 100%, #05020a 0 31%, transparent 32%),
    radial-gradient(ellipse at 97% 100%, #05020a 0 37%, transparent 38%);
}

@keyframes buzzer-stage-lights {
  from { transform: translateX(-2%) rotate(-1deg); opacity: 0.58; }
  to { transform: translateX(2%) rotate(1deg); opacity: 1; }
}

body:not(.host-pixel) .host-main > *:not(.buzzer-show-bg) {
  position: relative;
  z-index: 1;
}

body:not(.host-pixel) .buzzer-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .buzzer-brand {
  flex: 0 0 clamp(90px, 11.6vh, 126px);
  display: grid;
  place-items: center;
  min-height: 0;
}

body:not(.host-pixel) .buzzer-brand-logo {
  display: block;
  width: min(274px, 96%);
  height: clamp(84px, 11vh, 120px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 14px rgba(191, 67, 255, 0.85))
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.68));
}

body:not(.host-pixel) .buzzer-panel {
  position: relative;
  min-width: 0;
  padding: clamp(10px, 1.25vh, 14px);
  border: 1px solid rgba(200, 84, 255, 0.52);
  border-radius: 14px;
  background: var(--buzzer-panel);
  box-shadow:
    inset 0 0 24px rgba(127, 38, 190, 0.12),
    0 0 16px rgba(130, 34, 190, 0.12);
  backdrop-filter: blur(9px);
  overflow: hidden;
}

body:not(.host-pixel) .buzzer-panel::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 54%;
  height: 2px;
  background: linear-gradient(90deg, var(--buzzer-purple), transparent);
}

body:not(.host-pixel) .buzzer-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 clamp(8px, 1vh, 11px);
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(200, 84, 255, 0.32);
  color: #f5cbff;
  font-size: clamp(11px, 0.8vw, 15px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(200, 84, 255, 0.7);
}

body:not(.host-pixel) .buzzer-panel-title > span {
  color: var(--buzzer-gold);
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.7);
}

body:not(.host-pixel) .buzzer-howto-panel {
  flex: 0 0 auto;
}

body:not(.host-pixel) .buzzer-howto {
  display: grid;
  gap: clamp(7px, 0.9vh, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .buzzer-howto li {
  display: grid;
  grid-template-columns: clamp(28px, 2.1vw, 38px) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: rgba(239, 236, 250, 0.74);
  font-size: clamp(10px, 0.73vw, 13px);
  line-height: 1.25;
}

body:not(.host-pixel) .buzzer-howto strong {
  color: #fff;
  font-size: 1.08em;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-step-num {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.1vw, 38px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 216, 74, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 74, 0.24), rgba(105, 56, 0, 0.3));
  color: #fff4b4;
  font-weight: 1000;
  box-shadow: 0 0 12px rgba(255, 216, 74, 0.28);
}

body:not(.host-pixel) .buzzer-join-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  text-align: center;
}

body:not(.host-pixel) .buzzer-join-panel .buzzer-panel-title {
  align-self: stretch;
}

body:not(.host-pixel) .buzzer-qr {
  display: block;
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  padding: 7px;
  border: 2px solid var(--buzzer-gold);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 0 22px rgba(255, 216, 74, 0.38),
    0 0 42px rgba(182, 61, 255, 0.22);
}

body:not(.host-pixel) .buzzer-join-url {
  margin: 7px 0 2px;
  color: #fff;
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 800;
}

body:not(.host-pixel) .buzzer-join-code {
  margin: 1px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(11px, 0.78vw, 14px);
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-join-code strong {
  color: var(--buzzer-gold);
  font-size: 1.45em;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.65);
}

body:not(.host-pixel) .buzzer-main-stage {
  --buzzer-gap: clamp(5px, 0.75vh, 8px);
  display: grid;
  grid-template-rows:
    clamp(126px, 17.6vh, 190px)
    clamp(32px, 3.8vh, 41px)
    minmax(0, 1fr)
    clamp(52px, 6vh, 65px)
    clamp(42px, 5.1vh, 55px);
  gap: var(--buzzer-gap);
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body:not(.host-pixel) .buzzer-marquee {
  display: grid;
  place-items: center;
  align-content: start;
  min-width: 0;
  min-height: 0;
}

body:not(.host-pixel) .buzzer-title {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(96%, 940px);
  margin: 0;
  line-height: 0.86;
  text-transform: uppercase;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7));
}

body:not(.host-pixel) .buzzer-title::before,
body:not(.host-pixel) .buzzer-title::after {
  position: absolute;
  top: 57%;
  z-index: 0;
  color: #57d9ff;
  font-size: clamp(25px, 3.4vh, 42px);
  line-height: 1;
  text-shadow: 0 0 16px #1597ff, 0 0 30px rgba(200, 84, 255, 0.9);
  content: '✦';
  transform: translateY(-50%) rotate(12deg);
}

body:not(.host-pixel) .buzzer-title::before {
  left: 0;
}

body:not(.host-pixel) .buzzer-title::after {
  right: 0;
  transform: translateY(-50%) rotate(-12deg);
}

body:not(.host-pixel) .buzzer-title-top {
  position: relative;
  z-index: 3;
  margin-bottom: -2px;
  padding: 5px 24px 4px;
  border: 2px solid #fff2a2;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff4f75, #b40d58);
  color: #fff8bf;
  box-shadow:
    0 3px 0 #64052e,
    0 0 18px rgba(255, 71, 131, 0.78);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(13px, 1.4vh, 20px);
  font-style: italic;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.2em;
  text-shadow: 0 2px 0 #7a1235;
  transform: rotate(-2deg);
}

body:not(.host-pixel) .buzzer-title-top i {
  color: #fff;
  font-style: normal;
}

body:not(.host-pixel) .buzzer-title-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-family: 'Bebas Neue', 'Montserrat', sans-serif;
  font-size: clamp(55px, 9.5vh, 106px);
  font-weight: 1000;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

body:not(.host-pixel) .buzzer-title-word {
  position: relative;
  display: inline-block;
  -webkit-text-stroke: 3px #160329;
  paint-order: stroke fill;
  text-shadow:
    4px 6px 0 #160329,
    0 0 20px currentColor;
}

body:not(.host-pixel) .buzzer-title-word-hot {
  color: #fff;
}

body:not(.host-pixel) .buzzer-title-word-gold {
  color: #ffe24f;
}

body:not(.host-pixel) .buzzer-title-bolt {
  position: relative;
  z-index: 3;
  display: inline-block;
  margin: 0 0.08em;
  color: #ff3f75;
  font-size: 0.66em;
  font-style: normal;
  -webkit-text-stroke: 2px #fff4a3;
  paint-order: stroke fill;
  text-shadow:
    3px 4px 0 #5b0932,
    0 0 18px #ff3979;
  transform: rotate(8deg);
}

body:not(.host-pixel) .buzzer-title-ribbon {
  z-index: 3;
  width: min(84%, 760px);
  margin: 1px auto 0;
  padding: 7px 28px;
  border: 1px solid rgba(255, 235, 138, 0.78);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(76, 12, 126, 0.94), #b52dea 48%, rgba(76, 12, 126, 0.94));
  color: #fff8c9;
  box-shadow:
    0 0 18px rgba(185, 54, 255, 0.58),
    inset 0 0 14px rgba(255, 255, 255, 0.13);
  font-size: clamp(10px, 0.86vw, 15px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}

body:not(.host-pixel) .buzzer-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 6px 15px;
  border: 1px solid rgba(70, 201, 255, 0.48);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(5, 44, 75, 0.92), rgba(15, 8, 42, 0.95), rgba(78, 15, 81, 0.91));
}

body:not(.host-pixel) .buzzer-live-badge,
body:not(.host-pixel) .buzzer-live-rule {
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .buzzer-live-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8affb3;
}

body:not(.host-pixel) .buzzer-live-badge i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--buzzer-green);
  box-shadow: 0 0 10px var(--buzzer-green);
  animation: buzzer-live-pulse 1.3s ease-in-out infinite;
}

body:not(.host-pixel) .buzzer-live-rule {
  color: #f0b6ff;
}

body:not(.host-pixel) .buzzer-live-strip .host-state {
  overflow: hidden;
  color: #fff;
  font-size: clamp(12px, 1vw, 18px);
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 0 12px rgba(200, 84, 255, 0.72);
  white-space: nowrap;
}

@keyframes buzzer-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.52; transform: scale(0.82); }
}

body:not(.host-pixel) .buzzer-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 1.6vh, 18px);
  border: 2px solid rgba(93, 197, 255, 0.64);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 49%, rgba(200, 65, 255, 0.25), transparent 38%),
    radial-gradient(ellipse 38% 80% at 16% 55%, rgba(53, 179, 255, 0.17), transparent 75%),
    radial-gradient(ellipse 38% 80% at 84% 55%, rgba(255, 65, 94, 0.16), transparent 75%),
    linear-gradient(180deg, rgba(9, 7, 37, 0.96), rgba(20, 4, 38, 0.97));
  box-shadow:
    inset 0 0 65px rgba(72, 130, 255, 0.12),
    0 0 24px rgba(67, 177, 255, 0.2);
}

body:not(.host-pixel) .buzzer-hero::before,
body:not(.host-pixel) .buzzer-hero::after {
  content: '';
  position: absolute;
  top: 0;
  width: 34%;
  height: 3px;
}

body:not(.host-pixel) .buzzer-hero::before {
  left: 4%;
  background: linear-gradient(90deg, transparent, var(--buzzer-blue), transparent);
  box-shadow: 0 0 16px var(--buzzer-blue);
}

body:not(.host-pixel) .buzzer-hero::after {
  right: 4%;
  background: linear-gradient(90deg, transparent, var(--buzzer-red), transparent);
  box-shadow: 0 0 16px var(--buzzer-red);
}

body:not(.host-pixel) .buzzer-core,
body:not(.host-pixel) .buzzer-result,
body:not(.host-pixel) .buzzer-hero .host-prompt {
  grid-area: 1 / 1;
}

body:not(.host-pixel) .buzzer-core {
  position: relative;
  display: grid;
  place-items: center;
  width: min(35vh, 370px);
  aspect-ratio: 1;
  margin-top: 8px;
  filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.62));
}

body:not(.host-pixel) .buzzer-core-light {
  position: absolute;
  width: 108%;
  aspect-ratio: 1;
  border: 2px solid rgba(200, 84, 255, 0.42);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(200, 84, 255, 0.38),
    inset 0 0 30px rgba(200, 84, 255, 0.25);
}

body:not(.host-pixel) .buzzer-core-button {
  position: relative;
  z-index: 2;
  width: 67%;
  aspect-ratio: 1;
  border: clamp(9px, 1.1vh, 13px) solid #7a0017;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.92) 0 4%, rgba(255, 164, 178, 0.75) 5% 12%, transparent 25%),
    radial-gradient(circle at 44% 38%, #ff6781 0 12%, #f21d46 32%, #a60022 68%, #52000e 100%);
  box-shadow:
    inset -17px -22px 30px rgba(53, 0, 9, 0.7),
    inset 11px 12px 18px rgba(255, 255, 255, 0.25),
    0 9px 0 #380008,
    0 0 38px rgba(255, 48, 87, 0.72);
}

body:not(.host-pixel) .buzzer-core-base {
  position: absolute;
  z-index: 1;
  bottom: 7%;
  width: 82%;
  height: 35%;
  border: 3px solid #27103d;
  border-radius: 50%;
  background: linear-gradient(180deg, #a54eda, #481568 58%, #170621);
  box-shadow: 0 14px 18px rgba(0, 0, 0, 0.58);
}

body:not(.host-pixel) .buzzer-result {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  max-width: 92%;
  min-width: 0;
  text-align: center;
}

body:not(.host-pixel) .buzzer-result-kicker {
  align-self: end;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(11px, 0.82vw, 15px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-result .host-winner {
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-family: 'Bebas Neue', 'Montserrat', sans-serif;
  font-size: clamp(58px, 8vw, 146px);
  line-height: 0.9;
  letter-spacing: 0.015em;
  text-shadow:
    0 5px 0 #3d0c52,
    0 0 20px rgba(200, 84, 255, 0.76),
    0 0 46px rgba(200, 84, 255, 0.42);
}

body:not(.host-pixel) .buzzer-result .host-winner-team {
  margin-top: 12px;
  padding: 7px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(5, 2, 17, 0.78);
  font-size: clamp(14px, 1.35vw, 24px);
  box-shadow: 0 0 18px currentColor;
}

body:not(.host-pixel) .buzzer-hero .host-prompt {
  position: relative;
  z-index: 6;
  display: grid;
  place-items: center;
  align-content: center;
  width: min(92%, 900px);
  max-height: 100%;
  padding: clamp(16px, 2.2vh, 26px);
  border: 1px solid rgba(255, 216, 74, 0.62);
  border-radius: 18px;
  background: rgba(10, 4, 25, 0.93);
  box-shadow: 0 0 35px rgba(255, 216, 74, 0.22);
  text-align: center;
}

body:not(.host-pixel) .buzzer-hero .host-prompt.hidden {
  display: none;
}

body:not(.host-pixel) .buzzer-prompt-label {
  margin-bottom: 8px;
  color: var(--buzzer-gold);
  font-size: clamp(11px, 0.8vw, 15px);
  font-weight: 950;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-hero .host-prompt-question {
  color: #fff;
  font-size: clamp(27px, 3vw, 56px);
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(200, 84, 255, 0.48);
}

body:not(.host-pixel) .buzzer-hero .host-prompt-image {
  max-height: min(27vh, 270px);
}

body:not(.host-pixel) .buzzer-hero .host-prompt-image-el {
  max-height: min(27vh, 270px);
}

/* While a question is up and nobody has buzzed yet, fade the decorative
   buzzer so the prompt stays readable. Once someone buzzes in, keep the
   question and bring the name back in a stacked layout. */
body:not(.host-pixel) .host-main:has(.host-prompt:not(.hidden)):not([data-state='won']) .buzzer-core,
body:not(.host-pixel) .host-main:has(.host-prompt:not(.hidden)):not([data-state='won']) .buzzer-result {
  opacity: 0.08;
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: center;
  gap: clamp(8px, 1.2vh, 14px);
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-core {
  display: none;
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-hero .host-prompt {
  grid-area: auto;
  align-self: end;
  width: min(94%, 940px);
  max-height: none;
  padding: clamp(12px, 1.6vh, 20px);
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-hero .host-prompt-question {
  font-size: clamp(22px, 2.4vw, 44px);
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-hero .host-prompt-image {
  max-height: min(18vh, 180px);
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-hero .host-prompt-image-el {
  max-height: min(18vh, 180px);
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-result {
  grid-area: auto;
  align-self: start;
  opacity: 1;
  z-index: 7;
  width: min(94%, 940px);
  padding: 10px 16px 6px;
  border: 1px solid rgba(80, 255, 154, 0.55);
  border-radius: 16px;
  background: rgba(4, 28, 18, 0.88);
  box-shadow: 0 0 28px rgba(80, 255, 154, 0.28);
}

body:not(.host-pixel) .host-main[data-state='won']:has(.host-prompt:not(.hidden)) .buzzer-result .host-winner {
  font-size: clamp(48px, 6.4vw, 110px);
}

body:not(.host-pixel) .host-main[data-state='armed'] .buzzer-core {
  animation: buzzer-core-ready 0.72s ease-in-out infinite alternate;
}

body:not(.host-pixel) .host-main[data-state='armed'] .buzzer-core-light {
  border-color: rgba(255, 60, 99, 0.85);
  box-shadow: 0 0 48px rgba(255, 60, 99, 0.78), inset 0 0 38px rgba(255, 60, 99, 0.35);
}

body:not(.host-pixel) .host-main[data-state='armed'] .buzzer-result .host-winner {
  color: #fff6a8;
  text-shadow: 0 5px 0 #7b2400, 0 0 24px #ff4a66, 0 0 52px rgba(255, 72, 104, 0.9);
  animation: buzzer-word-pulse 0.72s ease-in-out infinite alternate;
}

body:not(.host-pixel) .host-main[data-state='won'] .buzzer-hero {
  border-color: rgba(80, 255, 154, 0.82);
  background:
    radial-gradient(circle at 50% 49%, rgba(80, 255, 154, 0.25), transparent 40%),
    linear-gradient(180deg, rgba(7, 34, 29, 0.96), rgba(10, 19, 28, 0.98));
  box-shadow: inset 0 0 70px rgba(80, 255, 154, 0.15), 0 0 32px rgba(80, 255, 154, 0.3);
}

body:not(.host-pixel) .host-main[data-state='won'] .buzzer-result-kicker {
  color: #a6ffc8;
}

body:not(.host-pixel) .host-main[data-state='won'] .buzzer-result .host-winner {
  color: #fff;
  text-shadow: 0 5px 0 #075b38, 0 0 24px #50ff9a, 0 0 52px rgba(80, 255, 154, 0.72);
  animation: buzzer-winner-arrive 0.55s cubic-bezier(0.2, 0.9, 0.28, 1.25);
}

@keyframes buzzer-core-ready {
  from { transform: scale(0.96); filter: brightness(0.92); }
  to { transform: scale(1.035); filter: brightness(1.18); }
}

@keyframes buzzer-word-pulse {
  from { transform: scale(0.97); }
  to { transform: scale(1.025); }
}

@keyframes buzzer-winner-arrive {
  from { opacity: 0; transform: scale(0.68) rotate(-2deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

body:not(.host-pixel) .buzzer-action-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  place-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 7px 20px;
  border: 1px solid rgba(200, 84, 255, 0.72);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(63, 12, 102, 0.95), rgba(151, 31, 203, 0.96), rgba(63, 12, 102, 0.95));
  color: #fff;
  box-shadow: inset 0 0 21px rgba(255, 255, 255, 0.09), 0 0 20px rgba(180, 47, 255, 0.22);
  font-size: clamp(17px, 1.55vw, 28px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-action-panel strong,
body:not(.host-pixel) .buzzer-action-bolt {
  color: var(--buzzer-gold);
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.7);
}

body:not(.host-pixel) .host-main[data-state='armed'] .buzzer-action-panel {
  border-color: rgba(255, 72, 104, 0.9);
  background: linear-gradient(90deg, #6f0920, #dc1944, #6f0920);
  animation: buzzer-action-pulse 0.72s ease-in-out infinite alternate;
}

body:not(.host-pixel) .host-main[data-state='won'] .buzzer-action-panel {
  border-color: rgba(80, 255, 154, 0.82);
  background: linear-gradient(90deg, #075b38, #14965e, #075b38);
}

@keyframes buzzer-action-pulse {
  from { box-shadow: 0 0 16px rgba(255, 72, 104, 0.3); }
  to { box-shadow: 0 0 30px rgba(255, 72, 104, 0.75); }
}

body:not(.host-pixel) .buzzer-footer-tag {
  display: grid;
  grid-template-columns: auto 1fr auto;
  place-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px 18px;
  border: 1px solid rgba(255, 216, 74, 0.48);
  border-radius: 12px;
  background: rgba(6, 3, 20, 0.88);
  color: #f2ddff;
  font-size: clamp(10px, 0.82vw, 15px);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-footer-tag > span:first-child,
body:not(.host-pixel) .buzzer-footer-tag strong {
  color: var(--buzzer-gold);
}

body:not(.host-pixel) .buzzer-footer-round {
  justify-self: end;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}

body:not(.host-pixel) .buzzer-footer-round b {
  color: #fff;
  font-size: 1.25em;
}

body:not(.host-pixel) .buzzer-connected {
  flex: 0 0 clamp(50px, 6.3vh, 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(70, 201, 255, 0.56);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(6, 49, 79, 0.94), rgba(17, 8, 44, 0.96));
  color: #d9f6ff;
  font-size: clamp(10px, 0.76vw, 14px);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-connected > span:first-child {
  font-size: 20px;
}

body:not(.host-pixel) .buzzer-connected strong {
  color: #fff;
  font-size: clamp(20px, 1.75vw, 32px);
  line-height: 1;
}

body:not(.host-pixel) .buzzer-score-panel {
  flex: 0 0 auto;
}

body:not(.host-pixel) .buzzer-team-score {
  display: grid;
  grid-template-columns: clamp(38px, 3vw, 52px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid currentColor;
  border-radius: 11px;
  background: rgba(5, 2, 17, 0.54);
}

body:not(.host-pixel) .buzzer-team-score-a {
  color: var(--buzzer-blue);
}

body:not(.host-pixel) .buzzer-team-score-b {
  color: var(--buzzer-red);
}

body:not(.host-pixel) .buzzer-team-letter {
  display: grid;
  place-items: center;
  width: clamp(38px, 3vw, 52px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: clamp(18px, 1.4vw, 26px);
  font-weight: 1000;
  box-shadow: 0 0 14px currentColor;
}

body:not(.host-pixel) .buzzer-team-score > span:nth-child(2) {
  display: grid;
}

body:not(.host-pixel) .buzzer-team-score b {
  color: #fff;
  font-size: clamp(13px, 0.92vw, 17px);
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-team-score small {
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(9px, 0.65vw, 12px);
}

body:not(.host-pixel) .buzzer-team-score > strong {
  font-size: clamp(30px, 2.5vw, 46px);
  line-height: 1;
  text-shadow: 0 0 13px currentColor;
}

body:not(.host-pixel) .buzzer-score-vs {
  margin: -2px 0;
  color: var(--buzzer-gold);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-align: center;
}

body:not(.host-pixel) .buzzer-order-panel {
  flex: 1 1 auto;
  min-height: 0;
}

body:not(.host-pixel) .buzzer-order-panel .host-order {
  display: grid;
  align-content: start;
  gap: 7px;
  margin: 0;
  max-height: calc(100% - 32px);
  overflow: hidden;
}

body:not(.host-pixel) .buzzer-order-panel .host-order > span {
  display: block;
  padding: 8px 9px;
  border: 1px solid rgba(200, 84, 255, 0.24);
  border-radius: 9px;
  background: rgba(7, 3, 22, 0.62);
  color: rgba(255, 255, 255, 0.64);
  font-size: clamp(10px, 0.73vw, 13px);
}

body:not(.host-pixel) .buzzer-order-panel .host-order b {
  color: #fff;
  font-size: 1.08em;
}

body:not(.host-pixel) .buzzer-order-empty {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: clamp(10px, 0.72vw, 13px);
  text-align: center;
}

body:not(.host-pixel) .buzzer-order-panel:has(.host-order:not(:empty)) .buzzer-order-empty {
  display: none;
}

body:not(.host-pixel) .buzzer-status-panel {
  flex: 0 0 auto;
}

body:not(.host-pixel) .buzzer-status-panel p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: clamp(10px, 0.72vw, 13px);
  text-transform: uppercase;
}

body:not(.host-pixel) .buzzer-status-panel strong {
  color: #fff;
  font-size: 1.08em;
  letter-spacing: 0.06em;
}

body:not(.host-pixel) .host-main[data-state='armed'] #buzzer-status-side {
  color: var(--buzzer-red);
  text-shadow: 0 0 10px rgba(255, 72, 104, 0.7);
}

body:not(.host-pixel) .host-main[data-state='won'] #buzzer-status-side {
  color: var(--buzzer-green);
  text-shadow: 0 0 10px rgba(80, 255, 154, 0.7);
}

/* Keep the dedicated 512×384 projector mode compact and functional. */
body.host-pixel[data-host-mode='buzzer'] .buzzer-sidebar,
body.host-pixel[data-host-mode='buzzer'] .buzzer-show-bg,
body.host-pixel[data-host-mode='buzzer'] .buzzer-marquee,
body.host-pixel[data-host-mode='buzzer'] .buzzer-action-panel,
body.host-pixel[data-host-mode='buzzer'] .buzzer-footer-tag {
  display: none !important;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-main-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-live-strip {
  display: grid;
  place-items: center;
  padding: 4px;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-live-badge,
body.host-pixel[data-host-mode='buzzer'] .buzzer-live-rule {
  display: none;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-live-strip .host-state {
  font-size: 20px;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-core,
body.host-pixel[data-host-mode='buzzer'] .buzzer-result,
body.host-pixel[data-host-mode='buzzer'] .buzzer-hero .host-prompt {
  grid-area: 1 / 1;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-core {
  display: none;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-result {
  max-width: 100%;
  text-align: center;
}

body.host-pixel[data-host-mode='buzzer'] .buzzer-result-kicker {
  display: none;
}

body.host-pixel[data-host-mode='buzzer'] .host-main[data-state='idle']:has(.host-prompt.hidden) .buzzer-main-stage {
  display: none;
}

/* ------------------------------------------------ Spin Spectacular TV stage */

body:not(.host-pixel)[data-host-mode='wheel'] .host-wheel {
  --wheel-gold: #ffd84a;
  --wheel-gold-deep: #c57a00;
  --wheel-pink: #ff4f97;
  --wheel-purple: #c854ff;
  --wheel-blue: #54d7ff;
  --wheel-ink: #070211;
  --wheel-panel: linear-gradient(145deg, rgba(31, 8, 55, 0.96), rgba(8, 7, 29, 0.97));
  --wheel-line: rgba(200, 84, 255, 0.55);
  display: block;
  width: 100vw;
  height: 100dvh;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 48% 32% at 50% 37%, rgba(176, 48, 255, 0.28), transparent 72%),
    radial-gradient(circle at 18% 34%, rgba(255, 185, 32, 0.15), transparent 30%),
    radial-gradient(circle at 84% 34%, rgba(255, 79, 151, 0.14), transparent 30%),
    #07000f;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(250px, 18fr) minmax(0, 64fr) minmax(250px, 18fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-tv-shell::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -8% -4% auto;
  height: 48%;
  pointer-events: none;
  background:
    conic-gradient(from 198deg at 16% 0%, transparent 0 8deg, rgba(255, 207, 72, 0.16) 9deg 13deg, transparent 14deg 48deg),
    conic-gradient(from 145deg at 84% 0%, transparent 0 8deg, rgba(255, 79, 151, 0.16) 9deg 13deg, transparent 14deg 48deg);
  animation: wheel-stage-lights 8s ease-in-out infinite alternate;
}

@keyframes wheel-stage-lights {
  from { transform: translateX(-2%) rotate(-1deg); opacity: 0.55; }
  to { transform: translateX(2%) rotate(1deg); opacity: 1; }
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-sidebar,
body:not(.host-pixel)[data-host-mode='wheel'] .wheel-main-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-brand-lockup {
  display: grid;
  place-items: center;
  padding: 6px 8px 2px;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--wheel-line);
  border-radius: 18px;
  background: var(--wheel-panel);
  box-shadow:
    inset 0 0 24px rgba(200, 84, 255, 0.12),
    0 0 18px rgba(84, 215, 255, 0.08);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #f4e9ff;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(200, 84, 255, 0.7);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-panel-title > span {
  color: var(--wheel-gold);
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.7);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 216, 74, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe27a, #d98800);
  color: #3a1d00;
  font-weight: 1000;
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.55);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-howto small {
  color: #b7a8d6;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-join-panel .wheel-panel-title,
body:not(.host-pixel)[data-host-mode='wheel'] .wheel-status-panel .wheel-panel-title {
  align-self: stretch;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 22px rgba(255, 216, 74, 0.28);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-join-url {
  margin: 4px 0 0;
  color: #d7c7ff;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.04em;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-join-code strong {
  color: var(--wheel-gold);
  font-size: 1.15em;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.65);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-main-stage {
  display: grid;
  grid-template-rows:
    clamp(150px, 25vh, 290px)
    clamp(32px, 3.8vh, 42px)
    minmax(0, 1fr)
    clamp(48px, 5.6vh, 62px)
    clamp(36px, 4.4vh, 48px);
  gap: clamp(5px, 0.75vh, 8px);
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-marquee {
  display: grid;
  place-items: center;
  align-content: start;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-title {
  margin: 0;
  line-height: 0;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-title-logo {
  display: block;
  width: min(720px, 94%);
  height: auto;
  max-height: clamp(120px, 22vh, 260px);
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.7));
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-title-ribbon {
  z-index: 2;
  width: min(84%, 760px);
  margin: -4px auto 0;
  padding: 7px 24px;
  border: 1px solid rgba(255, 235, 138, 0.78);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(76, 12, 126, 0.94), #b52dea 48%, rgba(76, 12, 126, 0.94));
  color: #fff8c9;
  box-shadow:
    0 0 18px rgba(185, 54, 255, 0.58),
    inset 0 0 14px rgba(255, 255, 255, 0.13);
  font-size: clamp(10px, 0.86vw, 15px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 6px 15px;
  border: 1px solid rgba(70, 201, 255, 0.48);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(5, 44, 75, 0.92), rgba(15, 8, 42, 0.95), rgba(78, 15, 81, 0.91));
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-live-badge,
body:not(.host-pixel)[data-host-mode='wheel'] .wheel-live-rule {
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9ef0ff;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39ff95;
  box-shadow: 0 0 10px #39ff95;
  animation: wheel-live-pulse 1.2s ease-in-out infinite;
}

@keyframes wheel-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-live-rule {
  color: #ffd98a;
  text-align: right;
}

body:not(.host-pixel)[data-host-mode='wheel'] .host-wheel .host-state {
  margin: 0;
  color: #fff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-size: clamp(18px, 1.8vw, 30px);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 0 16px rgba(200, 84, 255, 0.55);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  /* Keep the prize panel's strip clear so it never sits over the wheel. */
  padding-bottom: clamp(92px, 9.5vh, 118px);
  overflow: hidden;
  border: 2px solid rgba(93, 197, 255, 0.58);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 48%, rgba(200, 65, 255, 0.28), transparent 42%),
    radial-gradient(ellipse 40% 70% at 14% 55%, rgba(255, 185, 32, 0.16), transparent 72%),
    radial-gradient(ellipse 40% 70% at 86% 55%, rgba(255, 65, 140, 0.15), transparent 72%),
    linear-gradient(180deg, rgba(9, 7, 37, 0.96), rgba(20, 4, 38, 0.97));
  box-shadow:
    inset 0 0 65px rgba(72, 130, 255, 0.12),
    0 0 24px rgba(67, 177, 255, 0.2);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-stage-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 216, 74, 0.18), transparent 18%),
    radial-gradient(circle at 88% 18%, rgba(255, 79, 151, 0.16), transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(84, 215, 255, 0.12), transparent 34%);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-disc {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-canvas {
  width: min(
    100%,
    calc(min(62vw, 68dvh) * var(--wheel-scale, 80) / 100),
    820px
  );
  max-width: min(100%, 820px);
  max-height: min(100%, calc(68dvh * var(--wheel-scale, 80) / 100));
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-result {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(10px, 1.8vh, 20px);
  right: auto;
  width: min(88%, 720px);
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 1px solid rgba(255, 216, 74, 0.7);
  border-radius: 14px;
  background: rgba(12, 4, 28, 0.88);
  box-shadow: 0 0 28px rgba(255, 194, 60, 0.35);
  font-size: clamp(26px, 2.8vw, 46px);
  line-height: 1.05;
  /* The panel needs a real background, so the gradient text fill has to go. */
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffe08a;
  -webkit-text-fill-color: #ffe08a;
  filter: none;
  text-shadow:
    0 0 18px rgba(255, 194, 60, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.8);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-result:empty {
  display: none;
}

body:not(.host-pixel)[data-host-mode='wheel'] .host-wheel[data-state='spinning'] .wheel-stage {
  border-color: rgba(200, 84, 255, 0.85);
  box-shadow:
    inset 0 0 70px rgba(200, 84, 255, 0.22),
    0 0 34px rgba(200, 84, 255, 0.35);
}

body:not(.host-pixel)[data-host-mode='wheel'] .host-wheel[data-state='finished'] .wheel-stage {
  border-color: rgba(255, 216, 74, 0.9);
  box-shadow:
    inset 0 0 70px rgba(255, 194, 60, 0.22),
    0 0 34px rgba(255, 194, 60, 0.4);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-action-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgba(200, 84, 255, 0.5);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(88, 12, 126, 0.95), rgba(28, 8, 58, 0.96), rgba(88, 12, 126, 0.95));
  color: #fff;
  font-size: clamp(16px, 1.5vw, 26px);
  font-weight: 950;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .host-wheel[data-state='spinning'] .wheel-action-panel {
  border-color: rgba(255, 79, 151, 0.7);
  background: linear-gradient(90deg, rgba(120, 8, 70, 0.95), rgba(50, 6, 40, 0.96), rgba(120, 8, 70, 0.95));
  animation: wheel-action-pulse 0.9s ease-in-out infinite alternate;
}

body:not(.host-pixel)[data-host-mode='wheel'] .host-wheel[data-state='finished'] .wheel-action-panel {
  border-color: rgba(80, 255, 154, 0.7);
  background: linear-gradient(90deg, rgba(8, 90, 48, 0.95), rgba(6, 40, 28, 0.96), rgba(8, 90, 48, 0.95));
}

@keyframes wheel-action-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.18); }
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-footer-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: #d9c8ff;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-footer-tag strong {
  color: var(--wheel-gold);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-footer-connected {
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 216, 74, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(84, 215, 255, 0.42);
  border-radius: 14px;
  background: rgba(8, 30, 52, 0.88);
  color: #dff7ff;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-connected strong {
  color: var(--wheel-gold);
  font-size: 1.15em;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-prize-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-prize-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-prize-list li span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(200, 84, 255, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-prize-list li b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-prize-list li.is-won {
  border-color: rgba(255, 216, 74, 0.75);
  background: linear-gradient(90deg, rgba(120, 70, 0, 0.55), rgba(40, 18, 0, 0.4));
  box-shadow: 0 0 16px rgba(255, 194, 60, 0.35);
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-prize-list li.is-won span {
  background: linear-gradient(180deg, #ffe27a, #d98800);
  color: #3a1d00;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-status-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}


body:not(.host-pixel)[data-host-mode='wheel'] .wheel-status-orb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 4px auto 2px;
  border: 3px solid rgba(255, 216, 74, 0.7);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 28%),
    radial-gradient(circle at 50% 50%, #ff4f97, #7a1238 70%, #2a0412);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 0 22px rgba(255, 79, 151, 0.45);
}

body:not(.host-pixel)[data-host-mode='wheel'] .host-wheel[data-state='spinning'] .wheel-status-orb {
  animation: wheel-orb-spin 1.1s linear infinite;
}

@keyframes wheel-orb-spin {
  to { transform: rotate(360deg); }
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-status-big {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-status-small {
  margin: 2px 0 0;
  color: #c8b7ea;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-side-tag {
  margin: auto 0 0;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 216, 74, 0.45);
  border-radius: 12px;
  color: var(--wheel-gold);
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 950;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel)[data-host-mode='wheel'] .wheel-host-head {
  display: none;
}

/* Compact LED-wall mode keeps the classic canvas-first layout. */
body.host-pixel[data-host-mode='wheel'] .wheel-tv-shell {
  display: contents;
}

body.host-pixel[data-host-mode='wheel'] .wheel-sidebar,
body.host-pixel[data-host-mode='wheel'] .wheel-marquee,
body.host-pixel[data-host-mode='wheel'] .wheel-live-strip,
body.host-pixel[data-host-mode='wheel'] .wheel-action-panel,
body.host-pixel[data-host-mode='wheel'] .wheel-footer-tag,
body.host-pixel[data-host-mode='wheel'] .wheel-stage-lights {
  display: none !important;
}

body.host-pixel[data-host-mode='wheel'] .wheel-main-stage {
  display: contents;
}

body.host-pixel[data-host-mode='wheel'] .wheel-stage {
  width: 100%;
  height: 100%;
}

body.host-pixel[data-host-mode='wheel'] .wheel-result {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 4;
}

/* ------------------------------------------------ Race Night TV stage */

body:not(.host-pixel)[data-host-mode='race'] .host-teams {
  display: none !important;
}

body:not(.host-pixel)[data-host-mode='race'] .host {
  --race-line: rgba(255, 216, 74, 0.35);
  --race-panel: linear-gradient(145deg, rgba(31, 8, 55, 0.96), rgba(8, 7, 29, 0.97));
  --race-gold: #ffd84a;
}

body:not(.host-pixel) .host-race {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 20%, rgba(255, 79, 151, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 50% at 15% 80%, rgba(84, 215, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #12082a, #07041a 55%, #140820);
}

body:not(.host-pixel) .race-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .race-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

body:not(.host-pixel) .race-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--race-line);
  border-radius: 18px;
  background: var(--race-panel);
  box-shadow: inset 0 0 24px rgba(200, 84, 255, 0.12);
}

body:not(.host-pixel) .race-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #f4e9ff;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-panel-title > span {
  color: var(--race-gold);
}

body:not(.host-pixel) .race-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .race-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 216, 74, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .race-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe27a, #d98800);
  color: #3a1d00;
  font-weight: 1000;
}

body:not(.host-pixel) .race-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .race-howto small {
  color: #b7a8d6;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .race-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .race-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .race-join-url {
  margin: 4px 0 0;
  color: #d7c7ff;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .race-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-join-code strong {
  color: var(--race-gold);
}

body:not(.host-pixel) .race-main-stage {
  display: grid;
  grid-template-rows:
    clamp(110px, 16vh, 180px)
    clamp(32px, 3.8vh, 42px)
    minmax(0, 1fr)
    clamp(48px, 5.6vh, 62px)
    clamp(36px, 4.4vh, 48px);
  gap: clamp(5px, 0.75vh, 8px);
  min-height: 0;
}

body:not(.host-pixel) .race-marquee {
  display: grid;
  place-items: center;
  align-content: center;
}

body:not(.host-pixel) .race-title {
  margin: 0;
  text-align: center;
  line-height: 0.95;
}

body:not(.host-pixel) .race-title-top {
  display: block;
  color: #ff9ad4;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-title-main {
  display: block;
  margin-top: 4px;
  font-size: clamp(42px, 6.5vw, 92px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff7d1, #ffd84a 55%, #ff9a3c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(255, 120, 40, 0.45));
}

body:not(.host-pixel) .race-title-ribbon {
  margin: 10px auto 0;
  width: min(84%, 760px);
  padding: 7px 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7a1fa8, #c854ff 50%, #7a1fa8);
  color: #fff;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(12, 4, 28, 0.85);
  border: 1px solid rgba(200, 84, 255, 0.35);
}

body:not(.host-pixel) .race-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9dffb8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3dff7a;
  box-shadow: 0 0 10px #3dff7a;
}

body:not(.host-pixel) .race-round {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 26px);
  font-weight: 1000;
  letter-spacing: 0.08em;
}

body:not(.host-pixel) .race-live-rule {
  color: #d7c7ff;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 800;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-stage {
  position: relative;
  display: grid;
  place-items: stretch;
  min-height: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 216, 74, 0.55);
  border-radius: 20px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 2px,
      transparent 2px 48px
    ),
    linear-gradient(180deg, rgba(18, 40, 18, 0.95), rgba(8, 22, 10, 0.98));
  box-shadow: inset 0 0 50px rgba(255, 194, 60, 0.08);
}

body:not(.host-pixel) .race-track {
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 14px 18px 14px 12px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .race-lane {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

body:not(.host-pixel) .race-lane-label {
  position: absolute;
  left: 10px;
  z-index: 2;
  max-width: 34%;
  color: #fff;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body:not(.host-pixel) .race-lane-votes {
  position: absolute;
  right: 12px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .race-horse {
  position: absolute;
  left: 8px;
  width: clamp(36px, 4.2vw, 56px);
  height: clamp(24px, 3.2vh, 40px);
  border-radius: 999px 14px 14px 999px;
  transform: translateX(0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  z-index: 1;
  will-change: transform;
}

body:not(.host-pixel) .race-horse::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
}

body:not(.host-pixel) .race-finish-post {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 18px;
  width: 6px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    180deg,
    #fff 0 10px,
    #111 10px 20px
  );
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
  z-index: 3;
  pointer-events: none;
}

body:not(.host-pixel) .race-result-banner {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(88%, 720px);
  margin: 0;
  padding: 12px 18px;
  border: 1px solid rgba(255, 216, 74, 0.7);
  border-radius: 14px;
  background: rgba(12, 4, 28, 0.9);
  color: #ffe08a;
  font-size: clamp(24px, 3vw, 46px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 194, 60, 0.55);
}

body:not(.host-pixel) .race-result-banner.hidden {
  display: none;
}

body:not(.host-pixel) .race-action-panel {
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(200, 84, 255, 0.45);
  background: linear-gradient(90deg, rgba(90, 20, 140, 0.85), rgba(40, 10, 70, 0.9));
  color: #fff;
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.host-pixel) .host-race[data-state='racing'] .race-action-panel {
  border-color: rgba(255, 216, 74, 0.7);
  background: linear-gradient(90deg, rgba(140, 80, 10, 0.9), rgba(70, 30, 0, 0.92));
  animation: race-banner-pulse 0.9s ease-in-out infinite alternate;
}

body:not(.host-pixel) .host-race[data-state='revealed'] .race-action-panel,
body:not(.host-pixel) .host-race[data-state='over'] .race-action-panel {
  border-color: rgba(93, 255, 154, 0.55);
  background: linear-gradient(90deg, rgba(20, 90, 50, 0.9), rgba(10, 40, 24, 0.92));
}

@keyframes race-banner-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}

body:not(.host-pixel) .race-footer-tag {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #cbb8ef;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-footer-tag strong {
  color: #fff;
}

body:not(.host-pixel) .race-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 216, 74, 0.28);
  background: rgba(12, 4, 28, 0.75);
  color: #f4e9ff;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
}

body:not(.host-pixel) .race-field-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}

body:not(.host-pixel) .race-field-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
}

body:not(.host-pixel) .race-field-list li.is-won {
  border-color: rgba(255, 216, 74, 0.7);
  background: linear-gradient(90deg, rgba(120, 70, 0, 0.5), rgba(40, 18, 0, 0.35));
}

body:not(.host-pixel) .race-field-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

body:not(.host-pixel) .race-status-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body:not(.host-pixel) .race-status-big {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-status-copy,
body:not(.host-pixel) .race-last-meta,
body:not(.host-pixel) .race-points-line {
  margin: 4px 0 0;
  color: #b7a8d6;
  font-size: clamp(12px, 0.95vw, 15px);
}

body:not(.host-pixel) .race-last-label {
  margin: 0;
  color: var(--race-gold);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 1000;
  text-transform: uppercase;
}

body:not(.host-pixel) .race-points-line strong {
  color: var(--race-gold);
}

body.host-pixel .host-race {
  display: grid;
  place-items: center;
  padding: 8px;
}

body.host-pixel .race-sidebar,
body.host-pixel .race-marquee,
body.host-pixel .race-live-strip,
body.host-pixel .race-action-panel,
body.host-pixel .race-footer-tag,
body.host-pixel .race-finish-post {
  display: none !important;
}

body.host-pixel .race-main-stage {
  display: contents;
}

body.host-pixel .race-stage {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------ Memory Match TV stage */

body:not(.host-pixel)[data-host-mode='memory'] .host-teams,
body:not(.host-pixel)[data-host-mode='zoom'] .host-teams {
  display: none !important;
}

body:not(.host-pixel)[data-host-mode='memory'] .host {
  --memory-line: rgba(84, 215, 255, 0.42);
  --memory-panel: linear-gradient(145deg, rgba(18, 28, 58, 0.96), rgba(8, 7, 29, 0.97));
  --memory-gold: #ffd84a;
  --memory-cyan: #54d7ff;
  --memory-purple: #c854ff;
}

body:not(.host-pixel) .host-memory {
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: #070318;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
}

body:not(.host-pixel) .memory-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .memory-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.74;
  filter: saturate(1.18) contrast(1.06) brightness(0.7);
}

body:not(.host-pixel) .memory-show-bg::before {
  content: '';
  position: absolute;
  inset: -18% -8% 0;
  background:
    conic-gradient(from 198deg at 18% 0%, transparent 0 7deg, rgba(84, 215, 255, 0.14) 8deg 12deg, transparent 13deg 46deg),
    conic-gradient(from 145deg at 82% 0%, transparent 0 7deg, rgba(200, 84, 255, 0.14) 8deg 12deg, transparent 13deg 46deg);
  opacity: 0.9;
  animation: memory-stage-lights 9s ease-in-out infinite alternate;
}

body:not(.host-pixel) .memory-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 18, 0.78) 0%, transparent 18%, transparent 82%, rgba(4, 4, 18, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 3, 16, 0.28) 0%, transparent 32%, rgba(2, 2, 12, 0.7) 100%),
    radial-gradient(ellipse 48% 32% at 50% 36%, rgba(84, 215, 255, 0.12), transparent 70%);
}

body:not(.host-pixel) .memory-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}

body:not(.host-pixel) .memory-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .memory-brand-lockup {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

body:not(.host-pixel) .memory-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(84, 215, 255, 0.35));
}

body:not(.host-pixel) .memory-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--memory-line);
  border-radius: 18px;
  background: var(--memory-panel);
  box-shadow:
    inset 0 0 24px rgba(84, 215, 255, 0.08),
    0 0 16px rgba(84, 215, 255, 0.1);
}

body:not(.host-pixel) .memory-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #e8f7ff;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .memory-panel-title > span {
  color: var(--memory-gold);
}

body:not(.host-pixel) .memory-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .memory-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(84, 215, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .memory-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #9cebff, #087ac5);
  color: #031525;
  font-weight: 1000;
}

body:not(.host-pixel) .memory-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .memory-howto small {
  color: #a8c0d8;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .memory-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .memory-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .memory-join-url {
  margin: 4px 0 0;
  color: #c7e7ff;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .memory-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.host-pixel) .memory-join-code strong {
  color: var(--memory-gold);
}

body:not(.host-pixel) .memory-main-stage {
  display: grid;
  grid-template-rows:
    auto
    clamp(40px, 4.8vh, 52px)
    minmax(0, 1fr)
    clamp(48px, 5.6vh, 62px)
    clamp(36px, 4.4vh, 48px);
  gap: clamp(8px, 1vh, 12px);
  min-height: 0;
}

body:not(.host-pixel) .memory-marquee {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}

body:not(.host-pixel) .memory-title {
  margin: 0;
  text-align: center;
  line-height: 0;
}

body:not(.host-pixel) .memory-title-logo {
  display: block;
  width: auto;
  height: clamp(56px, 8.5vh, 96px);
  max-width: min(96%, 1100px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 4px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 14px rgba(84, 215, 255, 0.45))
    drop-shadow(0 0 22px rgba(200, 84, 255, 0.25));
  animation: memory-title-float 3.4s ease-in-out infinite;
}

@keyframes memory-title-float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

body:not(.host-pixel) .memory-title-ribbon {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width: min(84%, 760px);
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 235, 138, 0.55);
  background: linear-gradient(90deg, #0a4a6e, #1a7aad 50%, #0a4a6e);
  color: #fff;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(84, 215, 255, 0.35);
}

body:not(.host-pixel) .memory-live-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: clamp(40px, 4.8vh, 52px);
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(8, 16, 36, 0.88);
  border: 1px solid rgba(84, 215, 255, 0.35);
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .memory-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9dffb8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .memory-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3dff7a;
  box-shadow: 0 0 10px #3dff7a;
}

body:not(.host-pixel) .memory-live-strip .host-state {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 26px);
  font-weight: 1000;
  letter-spacing: 0.08em;
}

body:not(.host-pixel) .memory-live-rule {
  min-width: 0;
  color: #c7e7ff;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .host-memory[data-state='play'] .memory-live-rule {
  color: var(--memory-gold);
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: none;
}

body:not(.host-pixel) .memory-stage {
  position: relative;
  display: grid;
  place-items: stretch;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border: 2px solid rgba(84, 215, 255, 0.55);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(40, 90, 140, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(10, 22, 42, 0.95), rgba(4, 10, 24, 0.98));
  box-shadow: inset 0 0 50px rgba(84, 215, 255, 0.08);
}

body:not(.host-pixel) .memory-stage-lights {
  position: absolute;
  inset: -20% -10% 0;
  pointer-events: none;
  background:
    conic-gradient(from 200deg at 18% 0%, transparent 0 7deg, rgba(84, 215, 255, 0.12) 8deg 12deg, transparent 13deg 46deg),
    conic-gradient(from 140deg at 82% 0%, transparent 0 7deg, rgba(200, 84, 255, 0.12) 8deg 12deg, transparent 13deg 46deg);
  opacity: 0.85;
  animation: memory-stage-lights 9s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes memory-stage-lights {
  from { transform: translateX(-2%) rotate(-1deg); opacity: 0.55; }
  to { transform: translateX(2%) rotate(1deg); opacity: 1; }
}

body:not(.host-pixel) .memory-slide-wrap,
body:not(.host-pixel) .memory-blank,
body:not(.host-pixel) .memory-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

body:not(.host-pixel) .memory-slide-wrap {
  display: block;
  padding: 0;
}

body:not(.host-pixel) .memory-slide-image {
  position: absolute;
  inset: 16px;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

body:not(.host-pixel) .memory-slide-count {
  z-index: 2;
  right: 18px;
  bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(4, 12, 28, 0.78);
  border: 1px solid rgba(84, 215, 255, 0.45);
  font-size: clamp(14px, 1.6vw, 22px);
}

body:not(.host-pixel) .memory-blank {
  display: grid;
  place-items: center;
}

body:not(.host-pixel) .memory-blank-title {
  font-size: clamp(52px, 8vw, 110px);
  background: linear-gradient(180deg, #fff7d1, #54d7ff 55%, #c854ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(84, 215, 255, 0.35));
  animation: memory-blank-pulse 1.4s ease-in-out infinite alternate;
}

@keyframes memory-blank-pulse {
  from { filter: drop-shadow(0 8px 18px rgba(84, 215, 255, 0.25)) brightness(1); }
  to { filter: drop-shadow(0 8px 28px rgba(200, 84, 255, 0.45)) brightness(1.08); }
}

body:not(.host-pixel) .memory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 0.8vw, 12px);
  padding: 14px;
}

body:not(.host-pixel) .memory-cell {
  border-radius: 12px;
  border: 2px solid rgba(148, 180, 220, 0.28);
  background: linear-gradient(145deg, rgba(24, 40, 70, 0.92), rgba(10, 16, 36, 0.96));
}

body:not(.host-pixel) .memory-cell.revealed {
  border-color: rgba(84, 215, 255, 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(84, 215, 255, 0.3),
    0 0 18px rgba(84, 215, 255, 0.22);
}

body:not(.host-pixel) .memory-score {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(88%, 520px);
  margin: 0;
  padding: 12px 18px;
  border: 1px solid rgba(255, 216, 74, 0.7);
  border-radius: 14px;
  background: rgba(8, 16, 36, 0.92);
  color: #ffe08a;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 0 18px rgba(255, 194, 60, 0.55);
}

body:not(.host-pixel) .memory-action-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(84, 215, 255, 0.45);
  background: linear-gradient(90deg, rgba(20, 70, 120, 0.9), rgba(30, 20, 70, 0.92));
  color: #fff;
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.host-pixel) .host-memory[data-state='slideshow'] .memory-action-panel {
  border-color: rgba(84, 215, 255, 0.7);
  animation: memory-banner-pulse 1.1s ease-in-out infinite alternate;
}

body:not(.host-pixel) .host-memory[data-state='blank'] .memory-action-panel {
  border-color: rgba(200, 84, 255, 0.65);
  background: linear-gradient(90deg, rgba(90, 20, 140, 0.9), rgba(40, 10, 70, 0.92));
}

body:not(.host-pixel) .host-memory[data-state='play'] .memory-action-panel {
  border-color: rgba(255, 216, 74, 0.7);
  background: linear-gradient(90deg, rgba(140, 80, 10, 0.9), rgba(70, 30, 0, 0.92));
  animation: memory-banner-pulse 0.9s ease-in-out infinite alternate;
}

body:not(.host-pixel) .host-memory[data-state='finished'] .memory-action-panel {
  border-color: rgba(93, 255, 154, 0.55);
  background: linear-gradient(90deg, rgba(20, 90, 50, 0.9), rgba(10, 40, 24, 0.92));
}

@keyframes memory-banner-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}

body:not(.host-pixel) .memory-footer-tag {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #a8c0d8;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body:not(.host-pixel) .memory-footer-tag strong {
  color: #fff;
}

body:not(.host-pixel) .memory-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(84, 215, 255, 0.28);
  background: rgba(8, 16, 36, 0.75);
  color: #e8f7ff;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
}

body:not(.host-pixel) .memory-status-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

body:not(.host-pixel) .memory-status-big {
  margin: 4px 0 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 2px;
  color: #fff;
  font-size: clamp(15px, 1.35vw, 24px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body:not(.host-pixel) .memory-status-copy,
body:not(.host-pixel) .memory-side-score-meta {
  margin: 4px 0 0;
  color: #a8c0d8;
  font-size: clamp(12px, 0.95vw, 15px);
}

body:not(.host-pixel) .memory-host-clock {
  margin: 10px 0 0;
  color: var(--memory-gold);
  font-size: clamp(36px, 4vw, 64px);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  justify-self: center;
  grid-column: auto;
}

body:not(.host-pixel) .memory-side-score {
  margin: 4px 0 0;
  color: var(--memory-gold);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-align: center;
}

body.host-pixel .memory-sidebar,
body.host-pixel .memory-marquee,
body.host-pixel .memory-live-strip,
body.host-pixel .memory-action-panel,
body.host-pixel .memory-footer-tag,
body.host-pixel .memory-stage-lights,
body.host-pixel .memory-show-bg {
  display: none !important;
}

body.host-pixel .memory-tv-shell,
body.host-pixel .memory-main-stage {
  display: contents;
}

body.host-pixel .memory-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ------------------------------------------------ Spin Roulette TV stage */

body[data-host-mode='roulette'] .host-top {
  display: none !important;
}

body[data-host-mode='roulette'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body[data-host-mode='roulette'] .host-roulette {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='roulette'] .host-teams {
  display: none !important;
}

body[data-host-mode='roulette'] .host-teams:not(.hidden) {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  width: min(720px, 92vw);
}

body:not(.host-pixel)[data-host-mode='roulette'] .host {
  --roulette-line: rgba(255, 180, 60, 0.42);
  --roulette-panel: linear-gradient(145deg, rgba(42, 12, 28, 0.96), rgba(8, 7, 29, 0.97));
  --roulette-gold: #ffd84a;
  --roulette-magenta: #ff4f97;
  --roulette-cyan: #54d7ff;
}

body:not(.host-pixel) .host-roulette {
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: #12040e;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
}

body:not(.host-pixel) .roulette-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .roulette-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.7;
  filter: saturate(1.25) contrast(1.08) brightness(0.62) hue-rotate(-12deg);
}

body:not(.host-pixel) .roulette-show-bg::before {
  content: '';
  position: absolute;
  inset: -18% -8% 0;
  background:
    conic-gradient(from 198deg at 18% 0%, transparent 0 7deg, rgba(255, 79, 151, 0.16) 8deg 12deg, transparent 13deg 46deg),
    conic-gradient(from 145deg at 82% 0%, transparent 0 7deg, rgba(255, 216, 74, 0.14) 8deg 12deg, transparent 13deg 46deg);
  opacity: 0.95;
  animation: roulette-stage-lights 8s ease-in-out infinite alternate;
}

body:not(.host-pixel) .roulette-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 2, 10, 0.82) 0%, transparent 18%, transparent 82%, rgba(12, 2, 10, 0.82) 100%),
    linear-gradient(180deg, rgba(8, 2, 12, 0.3) 0%, transparent 32%, rgba(4, 1, 8, 0.78) 100%),
    radial-gradient(ellipse 48% 34% at 50% 42%, rgba(255, 120, 40, 0.16), transparent 70%);
}

@keyframes roulette-stage-lights {
  from { transform: translateY(0) rotate(0deg); opacity: 0.85; }
  to { transform: translateY(2%) rotate(4deg); opacity: 1; }
}

body:not(.host-pixel) .roulette-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}

body:not(.host-pixel) .roulette-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .roulette-brand-lockup {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

body:not(.host-pixel) .roulette-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 79, 151, 0.35));
}

body:not(.host-pixel) .roulette-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--roulette-line);
  border-radius: 18px;
  background: var(--roulette-panel);
  box-shadow:
    inset 0 0 24px rgba(255, 79, 151, 0.1),
    0 0 16px rgba(255, 180, 60, 0.08);
}

body:not(.host-pixel) .roulette-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #ffe9f4;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-panel-title > span {
  color: var(--roulette-gold);
}

body:not(.host-pixel) .roulette-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .roulette-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 216, 74, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .roulette-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe27a, #d98800);
  color: #3a1d00;
  font-weight: 1000;
}

body:not(.host-pixel) .roulette-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-howto small {
  color: #d4a8c0;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .roulette-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .roulette-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .roulette-join-url {
  margin: 4px 0 0;
  color: #f0c7db;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .roulette-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-join-code strong {
  color: var(--roulette-gold);
}

body:not(.host-pixel) .roulette-main-stage {
  display: grid;
  grid-template-rows:
    clamp(110px, 16vh, 180px)
    clamp(32px, 3.8vh, 42px)
    minmax(0, 1fr)
    clamp(48px, 5.6vh, 62px)
    clamp(36px, 4.4vh, 48px);
  gap: clamp(5px, 0.75vh, 8px);
  min-height: 0;
}

body:not(.host-pixel) .roulette-marquee {
  display: grid;
  place-items: center;
  align-content: center;
}

body:not(.host-pixel) .roulette-title {
  margin: 0;
  text-align: center;
  line-height: 0;
}

body:not(.host-pixel) .roulette-title-logo {
  display: block;
  width: min(92%, 920px);
  height: auto;
  max-height: clamp(72px, 12vh, 140px);
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}

body:not(.host-pixel) .roulette-title-ribbon {
  margin: 8px auto 0;
  width: min(84%, 760px);
  padding: 7px 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7a1448, #ff4f97 50%, #7a1448);
  color: #fff;
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(255, 79, 151, 0.35);
}

body:not(.host-pixel) .roulette-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 216, 74, 0.22);
}

body:not(.host-pixel) .roulette-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffb4d4;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4f97;
  box-shadow: 0 0 10px #ff4f97;
  animation: roulette-live-pulse 1.2s ease-in-out infinite;
}

@keyframes roulette-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

body:not(.host-pixel) .roulette-live-strip .host-state {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-live-rule {
  color: var(--roulette-gold);
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 216, 74, 0.28);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 120, 40, 0.22), transparent 55%),
    rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 40px rgba(255, 79, 151, 0.12);
}

body:not(.host-pixel) .roulette-stage-lights {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 216, 74, 0.12) 9deg 14deg, transparent 15deg 45deg);
  animation: roulette-spin-slow 18s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}

body:not(.host-pixel) .roulette-orbit {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 216, 74, 0.28);
  pointer-events: none;
  animation: roulette-spin-slow 28s linear infinite reverse;
}

body:not(.host-pixel) .roulette-orbit span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd84a 55%, #ff4f97);
  box-shadow: 0 0 12px rgba(255, 216, 74, 0.8);
}

body:not(.host-pixel) .roulette-orbit span:nth-child(1) { top: -6px; left: 50%; transform: translateX(-50%); }
body:not(.host-pixel) .roulette-orbit span:nth-child(2) { right: -6px; top: 50%; transform: translateY(-50%); }
body:not(.host-pixel) .roulette-orbit span:nth-child(3) { bottom: -6px; left: 50%; transform: translateX(-50%); }
body:not(.host-pixel) .roulette-orbit span:nth-child(4) { left: -6px; top: 50%; transform: translateY(-50%); }

body:not(.host-pixel) .roulette-reveal {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
  padding: 8% 6% 6%;
  background:
    radial-gradient(circle at 50% 48%, rgba(8, 2, 12, 0.18), transparent 42%),
    linear-gradient(180deg, transparent 35%, rgba(8, 2, 12, 0.55) 78%, rgba(8, 2, 12, 0.72) 100%);
}

body:not(.host-pixel) .roulette-reveal-kicker {
  margin: 0;
  color: #ffb4d4;
  font-size: clamp(14px, 1.4vw, 22px);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
}

body:not(.host-pixel) .roulette-reveal-name {
  margin: 4px 0 0;
  max-width: 92%;
  color: #fff;
  font-size: clamp(42px, 7vw, 110px);
  font-weight: 1000;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow:
    0 0 24px rgba(255, 79, 151, 0.45),
    0 8px 28px rgba(0, 0, 0, 0.7);
  overflow-wrap: anywhere;
}

body:not(.host-pixel) .roulette-reveal-meta {
  margin: 8px 0 0;
  color: var(--roulette-gold);
  font-size: clamp(14px, 1.3vw, 22px);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-action-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 216, 74, 0.28);
  background: linear-gradient(90deg, rgba(122, 20, 72, 0.75), rgba(42, 12, 28, 0.9) 50%, rgba(122, 20, 72, 0.75));
  color: #fff;
  font-size: clamp(16px, 1.6vw, 26px);
  font-weight: 950;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-footer-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: #e8c0d4;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 750;
}

body:not(.host-pixel) .roulette-footer-tag strong {
  color: var(--roulette-gold);
}

body:not(.host-pixel) .roulette-connected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 216, 74, 0.25);
  background: rgba(0, 0, 0, 0.28);
  color: #ffe9f4;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 850;
}

body:not(.host-pixel) .roulette-connected strong {
  color: var(--roulette-gold);
  font-size: 1.15em;
}

body:not(.host-pixel) .roulette-status-panel {
  text-align: center;
}

body:not(.host-pixel) .roulette-status-big {
  margin: 4px 0 0;
  color: #fff;
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body:not(.host-pixel) .roulette-status-copy,
body:not(.host-pixel) .roulette-last-meta {
  margin: 4px 0 0;
  color: #d4a8c0;
  font-size: clamp(12px, 0.95vw, 15px);
}

body:not(.host-pixel) .roulette-pool-line {
  margin: 10px 0 0;
  color: #ffe9f4;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 800;
}

body:not(.host-pixel) .roulette-pool-line strong {
  color: var(--roulette-gold);
  font-size: 1.35em;
}

body:not(.host-pixel) .roulette-last-name {
  margin: 4px 0 0;
  color: var(--roulette-gold);
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

@keyframes roulette-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes roulette-spin-idle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes roulette-spin-fast {
  from { transform: rotate(0deg); }
  to { transform: rotate(720deg); }
}

@keyframes roulette-reveal-pop {
  0% { transform: scale(0.82); opacity: 0.4; filter: blur(4px); }
  55% { transform: scale(1.06); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

@keyframes roulette-mystery-pulse {
  0%, 100% { opacity: 0.75; letter-spacing: 0.18em; }
  50% { opacity: 1; letter-spacing: 0.32em; }
}

body:not(.host-pixel) .host-roulette[data-state='spinning'] .roulette-reveal-name {
  animation: roulette-mystery-pulse 1.4s ease-in-out infinite;
  color: #ffe9a8;
}

body:not(.host-pixel) .host-roulette[data-state='spinning'] .roulette-orbit {
  animation-duration: 4s;
  border-color: rgba(255, 79, 151, 0.55);
}

body:not(.host-pixel) .host-roulette[data-state='result'] .roulette-reveal-name {
  animation: roulette-reveal-pop 0.7s ease-out both;
  color: #fff7d1;
}

body:not(.host-pixel) .host-roulette[data-state='result'] .roulette-action-panel {
  background: linear-gradient(90deg, rgba(180, 110, 0, 0.85), rgba(70, 30, 10, 0.92) 50%, rgba(180, 110, 0, 0.85));
  border-color: rgba(255, 216, 74, 0.55);
}

body:not(.host-pixel) .host-roulette[data-state='ready'] .roulette-reveal-name {
  color: #ffe9f4;
  font-size: clamp(36px, 5.5vw, 84px);
}

/* Compact pixel / admin embed */
.host-roulette {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 79, 151, 0.16), transparent 55%),
    rgba(15, 14, 22, 0.72);
  padding: 14px 20px 16px;
}

body.host-pixel .host-roulette {
  border-radius: 8px;
  padding: 8px 10px;
}

body.host-pixel .roulette-sidebar,
body.host-pixel .roulette-marquee,
body.host-pixel .roulette-live-strip,
body.host-pixel .roulette-action-panel,
body.host-pixel .roulette-footer-tag,
body.host-pixel .roulette-stage-lights,
body.host-pixel .roulette-orbit,
body.host-pixel .roulette-show-bg {
  display: none !important;
}

body.host-pixel .roulette-tv-shell,
body.host-pixel .roulette-main-stage {
  display: contents;
}

body.host-pixel .roulette-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.host-pixel .roulette-reveal {
  text-align: center;
}

body.host-pixel .roulette-reveal-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

body.host-pixel .roulette-reveal-name {
  margin: 2px 0 0;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

body.host-pixel .roulette-reveal-meta {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* Name scanner replaces the traditional roulette wheel. */
body:not(.host-pixel) .roulette-name-board {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto 1fr auto;
  align-items: center;
  justify-items: center;
  width: min(88%, 980px);
  height: min(82%, 520px);
  padding: clamp(20px, 3vh, 38px) clamp(24px, 4vw, 64px);
  overflow: hidden;
  border: 4px solid #fff0b0;
  border-radius: 34px;
  background: rgba(8, 8, 12, 0.88);
  box-shadow:
    0 0 0 8px rgba(255, 216, 74, 0.24),
    0 24px 60px rgba(0, 0, 0, 0.58),
    inset 0 0 45px rgba(255, 255, 255, 0.08);
}

body:not(.host-pixel) .roulette-name-board::before,
body:not(.host-pixel) .roulette-name-board::after {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  height: 7px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    #fff7c2 0 12px,
    transparent 12px 26px
  );
  filter: drop-shadow(0 0 8px #fff1a0);
}

body:not(.host-pixel) .roulette-name-board::before {
  top: 13px;
}

body:not(.host-pixel) .roulette-name-board::after {
  bottom: 13px;
}

body:not(.host-pixel) .roulette-reel-name {
  max-width: 94%;
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: clamp(22px, 2.6vw, 42px);
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body:not(.host-pixel) .roulette-name-board .roulette-reveal-name {
  max-width: 96%;
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 8vw, 132px);
  line-height: 0.9;
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.72);
}

body:not(.host-pixel) .roulette-name-board .roulette-reveal-kicker,
body:not(.host-pixel) .roulette-name-board .roulette-reveal-meta {
  position: relative;
  z-index: 2;
}

body:not(.host-pixel) .host-roulette[data-state='spinning'][data-flash='red'] .roulette-stage {
  border-color: #ff837b;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 80, 70, 0.95), rgba(124, 4, 14, 0.92) 58%, #3d0008 100%);
  box-shadow:
    inset 0 0 70px rgba(255, 230, 220, 0.35),
    0 0 30px rgba(255, 35, 35, 0.45);
}

body:not(.host-pixel) .host-roulette[data-state='spinning'][data-flash='green'] .roulette-stage {
  border-color: #8dff9d;
  background:
    radial-gradient(circle at 50% 45%, rgba(30, 220, 90, 0.95), rgba(0, 102, 46, 0.94) 58%, #002d19 100%);
  box-shadow:
    inset 0 0 70px rgba(220, 255, 225, 0.34),
    0 0 30px rgba(25, 230, 95, 0.42);
}

body:not(.host-pixel) .host-roulette[data-state='spinning'][data-flash='red'] .roulette-name-board {
  border-color: #ffd6d2;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.2),
    0 0 48px rgba(255, 20, 30, 0.7),
    inset 0 0 44px rgba(255, 50, 50, 0.18);
}

body:not(.host-pixel) .host-roulette[data-state='spinning'][data-flash='green'] .roulette-name-board {
  border-color: #d8ffe0;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.2),
    0 0 48px rgba(20, 255, 90, 0.65),
    inset 0 0 44px rgba(30, 255, 100, 0.16);
}

body:not(.host-pixel) .host-roulette[data-state='spinning'] .roulette-stage-lights {
  display: none;
}

body:not(.host-pixel) .host-roulette[data-state='spinning'] .roulette-reveal-name {
  animation: none;
  color: #fff;
  letter-spacing: -0.02em;
}

body:not(.host-pixel) .host-roulette[data-state='result'] .roulette-stage {
  border-color: #8dff9d;
  background:
    radial-gradient(circle at 50% 45%, rgba(25, 194, 81, 0.78), rgba(0, 74, 35, 0.9) 64%, #002314 100%);
  box-shadow:
    inset 0 0 80px rgba(210, 255, 220, 0.2),
    0 0 35px rgba(30, 230, 95, 0.38);
}

body:not(.host-pixel) .host-roulette[data-state='result'] .roulette-reel-name {
  display: none;
}

body:not(.host-pixel) .host-roulette[data-state='result'] .roulette-name-board {
  grid-template-rows: auto 1fr auto;
}

body.host-pixel .roulette-name-board {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

body.host-pixel .roulette-reel-name {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

body.host-pixel .host-roulette[data-flash='red'] {
  background: #8d1018;
}

body.host-pixel .host-roulette[data-flash='green'] {
  background: #087132;
}

/* ------------------------------------------------ Zoom Out TV stage */

.host-zoom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(200, 84, 255, 0.16), transparent 55%),
    rgba(15, 14, 22, 0.72);
  padding: 14px 20px 16px;
}

body:not(.host-pixel)[data-host-mode='zoom'] .host {
  --zoom-line: rgba(200, 84, 255, 0.42);
  --zoom-panel: linear-gradient(145deg, rgba(38, 18, 58, 0.96), rgba(8, 7, 29, 0.97));
  --zoom-gold: #ffd84a;
  --zoom-cyan: #54d7ff;
  --zoom-purple: #c854ff;
}

body:not(.host-pixel) .host-zoom {
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: #070318;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
}

body:not(.host-pixel) .zoom-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .zoom-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.74;
  filter: saturate(1.18) contrast(1.06) brightness(0.7);
}

body:not(.host-pixel) .zoom-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 18, 0.78) 0%, transparent 18%, transparent 82%, rgba(4, 4, 18, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 3, 16, 0.28) 0%, transparent 32%, rgba(2, 2, 12, 0.7) 100%),
    radial-gradient(ellipse 48% 32% at 50% 36%, rgba(200, 84, 255, 0.14), transparent 70%);
}

body:not(.host-pixel) .zoom-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .zoom-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .zoom-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(200, 84, 255, 0.35));
}

body:not(.host-pixel) .zoom-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--zoom-line);
  border-radius: 18px;
  background: var(--zoom-panel);
  box-shadow:
    inset 0 0 24px rgba(200, 84, 255, 0.08),
    0 0 16px rgba(200, 84, 255, 0.1);
}

body:not(.host-pixel) .zoom-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #f4e9ff;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .zoom-panel-title > span {
  color: var(--zoom-gold);
}

body:not(.host-pixel) .zoom-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .zoom-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(200, 84, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .zoom-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0b3ff, #8a1fc5);
  color: #1a0524;
  font-weight: 1000;
}

body:not(.host-pixel) .zoom-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .zoom-howto small {
  color: #c8b0d8;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .zoom-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .zoom-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .zoom-join-url {
  margin: 4px 0 0;
  color: #e7c7ff;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .zoom-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.host-pixel) .zoom-join-code strong,
body:not(.host-pixel) .zoom-connected strong,
body:not(.host-pixel) .zoom-side-score {
  color: var(--zoom-gold);
}

body:not(.host-pixel) .zoom-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f4e9ff;
  font-weight: 800;
}

body:not(.host-pixel) .zoom-status-big {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 1000;
}

body:not(.host-pixel) .zoom-status-copy,
body:not(.host-pixel) .zoom-side-score-meta {
  margin: 0;
  color: #c8b0d8;
  font-size: 13px;
}

body:not(.host-pixel) .zoom-side-score {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 1000;
}

body:not(.host-pixel) .zoom-host-clock {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

body:not(.host-pixel) .zoom-main-stage {
  display: grid;
  grid-template-rows:
    auto
    clamp(40px, 4.8vh, 52px)
    minmax(0, 1fr)
    clamp(48px, 5.6vh, 62px)
    clamp(36px, 4.4vh, 48px);
  gap: clamp(8px, 1vh, 12px);
  min-height: 0;
}

body:not(.host-pixel) .zoom-title {
  margin: 0;
  text-align: center;
  line-height: 0;
}

body:not(.host-pixel) .zoom-title-logo {
  display: block;
  width: auto;
  height: clamp(56px, 8.5vh, 96px);
  max-width: min(96%, 1100px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 4px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 14px rgba(200, 84, 255, 0.45));
}

body:not(.host-pixel) .zoom-title-ribbon {
  margin: 6px auto 0;
  width: min(84%, 760px);
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 235, 138, 0.55);
  background: linear-gradient(90deg, #5a1478, #c854ff 50%, #5a1478);
  color: #fff;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel) .zoom-live-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: clamp(40px, 4.8vh, 52px);
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(16, 8, 36, 0.88);
  border: 1px solid rgba(200, 84, 255, 0.35);
  overflow: hidden;
}

body:not(.host-pixel) .zoom-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9dffb8;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

body:not(.host-pixel) .zoom-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16d47b;
  box-shadow: 0 0 10px #16d47b;
}

body:not(.host-pixel) .host-zoom .host-state {
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 1.6vw, 24px);
}

body:not(.host-pixel) .zoom-live-rule {
  color: #e7c7ff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

body:not(.host-pixel) .zoom-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(200, 84, 255, 0.28);
  background: #050210;
}

body:not(.host-pixel) .zoom-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050210;
}

body:not(.host-pixel) .zoom-crop {
  position: absolute;
  inset: 0;
  overflow: visible;
}

body:not(.host-pixel) .zoom-image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

body:not(.host-pixel) .zoom-level {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 216, 74, 0.55);
  background: rgba(8, 4, 20, 0.82);
  color: #ffd84a;
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
}

body:not(.host-pixel) .zoom-idle-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #c8b0d8;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
  pointer-events: none;
}

body:not(.host-pixel) .zoom-reveal-banner {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 4, 22, 0.2), rgba(10, 4, 22, 0.88));
  text-align: center;
}

body:not(.host-pixel) .zoom-reveal-answer {
  margin: 0;
  color: var(--zoom-gold);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 1000;
  line-height: 0.95;
  text-transform: uppercase;
}

body:not(.host-pixel) .zoom-reveal-winner {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 800;
}

body:not(.host-pixel) .zoom-action-panel,
body:not(.host-pixel) .zoom-footer-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

body:not(.host-pixel) .zoom-footer-tag {
  color: #e7c7ff;
  font-size: clamp(12px, 1vw, 16px);
}

body:not(.host-pixel) .zoom-footer-tag strong {
  color: var(--zoom-gold);
}

body.host-pixel .host-zoom {
  border-radius: 8px;
  padding: 8px 10px;
}

body.host-pixel .zoom-show-bg,
body.host-pixel .zoom-sidebar,
body.host-pixel .zoom-live-strip,
body.host-pixel .zoom-action-panel,
body.host-pixel .zoom-footer-tag,
body.host-pixel .zoom-title-ribbon {
  display: none;
}

body.host-pixel .zoom-tv-shell,
body.host-pixel .zoom-main-stage {
  display: block;
  height: 100%;
}

body.host-pixel .zoom-title-logo {
  display: block;
  height: 28px;
  width: auto;
  margin: 0 auto 6px;
  object-fit: contain;
}

body.host-pixel .zoom-stage,
body.host-pixel .zoom-frame {
  position: relative;
  height: calc(100% - 34px);
  min-height: 0;
  overflow: hidden;
}

body.host-pixel .zoom-crop {
  position: absolute;
  inset: 0;
  overflow: visible;
}

body.host-pixel .zoom-image {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

body.host-pixel .zoom-level {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  color: #ffd84a;
  font-size: 12px;
  font-weight: 900;
}

body.host-pixel .zoom-idle-copy {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

body.host-pixel .zoom-reveal-answer {
  margin: 0;
  color: var(--amber);
  font-size: 16px;
  font-weight: 900;
}

body.host-pixel .zoom-reveal-winner {
  margin: 0;
  font-size: 11px;
}

/* ---------- Pub Quiz host TV layout ---------- */

body[data-host-mode='quiz'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
  background: #050512;
  overflow: hidden;
}

body[data-host-mode='quiz'] .host-top {
  display: none !important;
}

body[data-host-mode='quiz'] .host-quiz {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='quiz'] .host {
  --quiz-line: rgba(255, 196, 84, 0.5);
  --quiz-panel: linear-gradient(160deg, rgba(18, 10, 36, 0.72), rgba(6, 4, 18, 0.78));
  --quiz-gold: #ffd84a;
  --quiz-cyan: #54d7ff;
  --quiz-amber: #ffb840;
}

body:not(.host-pixel) .host-quiz {
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  isolation: isolate;
}

body:not(.host-pixel) .quiz-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .quiz-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.92;
  filter: saturate(1.18) contrast(1.06) brightness(0.82);
}

body:not(.host-pixel) .quiz-show-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 8%, rgba(255, 184, 64, 0.1) 9%, transparent 16%),
    linear-gradient(248deg, transparent 0 8%, rgba(84, 215, 255, 0.08) 9%, transparent 16%);
  mix-blend-mode: screen;
  animation: quiz-stage-lights 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes quiz-stage-lights {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

body:not(.host-pixel) .quiz-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 3, 14, 0.78) 0%, transparent 16%, transparent 84%, rgba(4, 3, 14, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 2, 12, 0.22) 0%, transparent 34%, rgba(2, 2, 10, 0.55) 100%),
    radial-gradient(ellipse 52% 36% at 50% 34%, rgba(255, 184, 64, 0.12), transparent 72%);
}

body:not(.host-pixel) .quiz-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .quiz-tv-shell.quiz-final {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

body:not(.host-pixel) .quiz-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .quiz-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 184, 64, 0.28));
}

body:not(.host-pixel) .quiz-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--quiz-line);
  border-radius: 18px;
  background: var(--quiz-panel);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 24px rgba(255, 184, 64, 0.05),
    0 0 18px rgba(255, 184, 64, 0.1);
}

body:not(.host-pixel) .quiz-leader-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body:not(.host-pixel) .quiz-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body:not(.host-pixel) .quiz-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #fff4df;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .quiz-panel-title > span {
  color: var(--quiz-gold);
}

body:not(.host-pixel) .quiz-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .quiz-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 184, 64, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .quiz-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c87800);
  color: #2a1400;
  font-weight: 1000;
}

body:not(.host-pixel) .quiz-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .quiz-howto small {
  color: #d8c4a8;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .quiz-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .quiz-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .quiz-join-url {
  margin: 4px 0 0;
  color: #ffe8c0;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .quiz-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.host-pixel) .quiz-join-code strong,
body:not(.host-pixel) .quiz-connected strong {
  color: var(--quiz-gold);
}

body:not(.host-pixel) .quiz-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff4df;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
}

body:not(.host-pixel) .quiz-main-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .quiz-marquee {
  text-align: center;
  flex: none;
}

body:not(.host-pixel) .quiz-title {
  margin: 0;
  line-height: 0.95;
}

body:not(.host-pixel) .quiz-title-text {
  display: inline-block;
  font-size: clamp(34px, 4.8vw, 72px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff8dc 0%, #ffd84a 42%, #ff9a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

body:not(.host-pixel) .quiz-title-ribbon {
  margin: 4px 0 0;
  color: #ffd784;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body:not(.host-pixel) .quiz-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 184, 64, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  flex: none;
}

body:not(.host-pixel) .quiz-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffd784;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:not(.host-pixel) .quiz-live-badge i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px rgba(255, 59, 59, 0.8);
  animation: quiz-live-pulse 1.2s ease-in-out infinite;
}

@keyframes quiz-live-pulse {
  0%,
  100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

body:not(.host-pixel) .quiz-live-strip .host-state {
  text-align: center;
  font-size: clamp(16px, 1.6vw, 28px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .quiz-live-rule {
  color: #d8c4a8;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .quiz-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 184, 64, 0.28);
  border-radius: 22px;
  background: rgba(6, 4, 18, 0.28);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

body:not(.host-pixel) .quiz-stage-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 216, 74, 0.12), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(255, 216, 74, 0.12), transparent 34%);
}

body:not(.host-pixel) .quiz-host-question {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(22px, 2.8vw, 44px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-align: center;
  color: #fff;
  overflow-wrap: anywhere;
}

body:not(.host-pixel) .quiz-stage .vote-bars {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  gap: 10px;
}

body:not(.host-pixel) .quiz-stage .vote-bar-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

body:not(.host-pixel) .quiz-stage .vote-bar-label {
  color: #fff;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 800;
}

body:not(.host-pixel) .quiz-stage .vote-bar-letter {
  color: var(--quiz-gold);
  font-size: clamp(16px, 1.3vw, 22px);
}

body:not(.host-pixel) .quiz-stage .vote-bar-track {
  height: clamp(14px, 1.6vh, 22px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

body:not(.host-pixel) .quiz-stage .vote-bar-count {
  color: #ffd784;
  font-size: clamp(12px, 0.95vw, 16px);
}

body:not(.host-pixel) .quiz-action-panel,
body:not(.host-pixel) .quiz-footer-tag {
  flex: none;
  margin: 0;
  text-align: center;
  color: #d8c4a8;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
}

body:not(.host-pixel) .quiz-action-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 184, 64, 0.22);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
}

body:not(.host-pixel) .quiz-footer-tag strong {
  color: var(--quiz-gold);
}

body:not(.host-pixel) .quiz-status-big {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 1000;
  line-height: 1;
}

body:not(.host-pixel) .quiz-status-copy,
body:not(.host-pixel) .quiz-host-meta,
body:not(.host-pixel) .quiz-side-score-meta {
  margin: 0;
  color: #d8c4a8;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 700;
  line-height: 1.35;
}

body:not(.host-pixel) .quiz-final-stage {
  max-width: 1100px;
  margin: 0 auto;
}

body:not(.host-pixel) .quiz-final-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

body:not(.host-pixel) .quiz-final-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body:not(.host-pixel) .quiz-final-row {
  padding: 10px 12px;
  border: 1px solid rgba(255, 184, 64, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: clamp(14px, 1.2vw, 20px);
}

body:not(.host-pixel) .quiz-final-row.lead {
  border-color: rgba(255, 216, 74, 0.55);
  background: rgba(255, 216, 74, 0.1);
}

body.host-pixel .host-quiz {
  border-radius: 8px;
  padding: 8px 10px;
}

body.host-pixel .quiz-show-bg,
body.host-pixel .quiz-sidebar,
body.host-pixel .quiz-live-strip,
body.host-pixel .quiz-action-panel,
body.host-pixel .quiz-footer-tag,
body.host-pixel .quiz-title-ribbon {
  display: none;
}

body.host-pixel .quiz-tv-shell,
body.host-pixel .quiz-main-stage {
  display: block;
  height: 100%;
}

body.host-pixel .quiz-title-text {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--amber);
  text-align: center;
}

body.host-pixel .quiz-host-question {
  font-size: 16px;
  text-align: center;
  margin-bottom: 6px;
}

body.host-pixel .quiz-stage .vote-bar-label {
  font-size: 10px;
}

body.host-pixel .quiz-stage .vote-bar-letter {
  font-size: 12px;
}

/* ---------- Audience Vote host TV layout ---------- */

body[data-host-mode='vote'] .host-top {
  display: none !important;
}

body[data-host-mode='vote'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
  background: #050512;
  overflow: hidden;
}

body[data-host-mode='vote'] .host-vote {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel)[data-host-mode='vote'] .host {
  --vote-line: rgba(84, 215, 255, 0.5);
  --vote-panel: linear-gradient(160deg, rgba(14, 18, 48, 0.72), rgba(6, 4, 22, 0.78));
  --vote-gold: #54d7ff;
  --vote-purple: #c854ff;
  --vote-cyan: #54d7ff;
}

body:not(.host-pixel) .host-vote,
body:not(.host-pixel) .host-vote[data-state='open'],
body:not(.host-pixel) .host-vote[data-state='closed'],
body:not(.host-pixel) .host-vote[data-state='revealed'] {
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  gap: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  isolation: isolate;
}

body:not(.host-pixel) .vote-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .vote-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.92;
  filter: saturate(1.2) contrast(1.06) brightness(0.82);
}

body:not(.host-pixel) .vote-show-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 8%, rgba(84, 215, 255, 0.1) 9%, transparent 16%),
    linear-gradient(248deg, transparent 0 8%, rgba(200, 84, 255, 0.1) 9%, transparent 16%);
  mix-blend-mode: screen;
  animation: vote-stage-lights 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes vote-stage-lights {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

body:not(.host-pixel) .vote-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 18, 0.78) 0%, transparent 16%, transparent 84%, rgba(4, 4, 18, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 3, 16, 0.22) 0%, transparent 34%, rgba(2, 2, 12, 0.55) 100%),
    radial-gradient(ellipse 52% 36% at 50% 34%, rgba(84, 215, 255, 0.14), transparent 72%);
}

body:not(.host-pixel) .vote-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .vote-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .vote-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(84, 215, 255, 0.28));
}

body:not(.host-pixel) .vote-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--vote-line);
  border-radius: 18px;
  background: var(--vote-panel);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 24px rgba(84, 215, 255, 0.05),
    0 0 18px rgba(84, 215, 255, 0.1);
}

body:not(.host-pixel) .vote-results-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body:not(.host-pixel) .vote-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #e8f8ff;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .vote-panel-title > span {
  color: var(--vote-gold);
}

body:not(.host-pixel) .vote-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .vote-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(84, 215, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .vote-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #9ae8ff, #2a88cc);
  color: #041018;
  font-weight: 1000;
}

body:not(.host-pixel) .vote-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .vote-howto small {
  color: #b8d4e8;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .vote-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .vote-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .vote-join-url {
  margin: 4px 0 0;
  color: #c8ecff;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .vote-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.host-pixel) .vote-join-code strong,
body:not(.host-pixel) .vote-connected strong {
  color: var(--vote-gold);
}

body:not(.host-pixel) .vote-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8f8ff;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
}

body:not(.host-pixel) .vote-main-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .vote-marquee {
  text-align: center;
  flex: none;
}

body:not(.host-pixel) .vote-title {
  margin: 0;
  line-height: 0.95;
}

body:not(.host-pixel) .vote-title-text {
  display: inline-block;
  font-size: clamp(34px, 4.8vw, 72px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #e8fbff 0%, #54d7ff 42%, #c854ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

body:not(.host-pixel) .vote-title-ribbon {
  margin: 4px 0 0;
  color: #9ae8ff;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body:not(.host-pixel) .vote-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(84, 215, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  flex: none;
}

body:not(.host-pixel) .vote-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ae8ff;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:not(.host-pixel) .vote-live-badge i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px rgba(255, 59, 59, 0.8);
  animation: vote-live-pulse 1.2s ease-in-out infinite;
}

@keyframes vote-live-pulse {
  0%,
  100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

body:not(.host-pixel) .vote-live-strip .host-state {
  text-align: center;
  font-size: clamp(16px, 1.6vw, 28px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .vote-live-rule {
  color: #b8d4e8;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .vote-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(84, 215, 255, 0.28);
  border-radius: 22px;
  background: rgba(6, 4, 22, 0.28);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

body:not(.host-pixel) .vote-stage-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(84, 215, 255, 0.12), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(200, 84, 255, 0.1), transparent 34%);
}

body:not(.host-pixel) .vote-question-wrap {
  position: relative;
  z-index: 1;
}

body:not(.host-pixel) .vote-stage .vote-host-question {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 44px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-align: center;
  color: #fff;
  overflow-wrap: anywhere;
}

body:not(.host-pixel) .vote-stage .vote-bars {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  gap: 10px;
}

body:not(.host-pixel) .vote-stage .vote-bar-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

body:not(.host-pixel) .vote-stage .vote-bar-label {
  color: #fff;
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 800;
}

body:not(.host-pixel) .vote-stage .vote-bar-letter {
  color: var(--vote-gold);
  font-size: clamp(16px, 1.3vw, 22px);
}

body:not(.host-pixel) .vote-stage .vote-bar-track {
  height: clamp(14px, 1.6vh, 22px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

body:not(.host-pixel) .vote-stage .vote-bar-count {
  color: #9ae8ff;
  font-size: clamp(12px, 0.95vw, 16px);
}

body:not(.host-pixel) .vote-stage .vote-bar-row.lead .vote-bar-fill {
  background: linear-gradient(90deg, #54d7ff, #c854ff);
}

body:not(.host-pixel) .vote-action-panel,
body:not(.host-pixel) .vote-footer-tag {
  flex: none;
  margin: 0;
  text-align: center;
  color: #b8d4e8;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
}

body:not(.host-pixel) .vote-action-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(84, 215, 255, 0.22);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
}

body:not(.host-pixel) .vote-footer-tag strong {
  color: var(--vote-gold);
}

body:not(.host-pixel) .vote-status-big {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 1000;
  line-height: 1;
}

body:not(.host-pixel) .vote-status-copy,
body:not(.host-pixel) .vote-host-meta,
body:not(.host-pixel) .vote-side-meta {
  margin: 0;
  color: #b8d4e8;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 700;
  line-height: 1.35;
}

body:not(.host-pixel) .vote-side-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body:not(.host-pixel) .vote-side-results.hidden {
  display: none;
}

body:not(.host-pixel) .vote-side-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(84, 215, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
}

body:not(.host-pixel) .vote-side-row.lead {
  border-color: rgba(84, 215, 255, 0.55);
  background: rgba(84, 215, 255, 0.1);
}

body:not(.host-pixel) .vote-side-letter {
  color: var(--vote-gold);
  font-weight: 1000;
}

body:not(.host-pixel) .vote-side-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

body:not(.host-pixel) .vote-side-score {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #9ae8ff;
}

.host-vote[data-state='open'] .vote-live-strip .host-state {
  color: #54d7ff;
}

.host-vote[data-state='closed'] .vote-live-strip .host-state {
  color: #ffb840;
}

.host-vote[data-state='revealed'] .vote-live-strip .host-state {
  color: #16d47b;
}

body.host-pixel .host-vote {
  border-radius: 8px;
  padding: 8px 10px;
}

body.host-pixel .vote-show-bg,
body.host-pixel .vote-sidebar,
body.host-pixel .vote-live-strip,
body.host-pixel .vote-action-panel,
body.host-pixel .vote-footer-tag,
body.host-pixel .vote-title-ribbon {
  display: none;
}

body.host-pixel .vote-tv-shell,
body.host-pixel .vote-main-stage {
  display: block;
  height: 100%;
}

body.host-pixel .vote-title-text {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--blue);
  text-align: center;
}

body.host-pixel .vote-stage .vote-host-question {
  font-size: 16px;
  text-align: center;
  margin-bottom: 6px;
}

@media (max-height: 720px) {
  body:not(.host-pixel) .vote-title-text {
    font-size: clamp(28px, 4vw, 48px);
  }

  body:not(.host-pixel) .vote-main-stage {
    gap: 6px;
  }
}

/* ------------------------------------------------ Celebrity Lookalike TV stage */

body:not(.host-pixel)[data-host-mode='lookalike'] .host {
  --lookalike-line: rgba(255, 105, 180, 0.42);
  --lookalike-panel: linear-gradient(145deg, rgba(58, 12, 42, 0.96), rgba(10, 6, 24, 0.97));
  --lookalike-gold: #ffd84a;
  --lookalike-pink: #ff6eb4;
  --lookalike-rose: #ff3d8a;
}

body:not(.host-pixel) .host-lookalike {
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: #070318;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
}

body:not(.host-pixel) .lookalike-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .lookalike-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.72;
  filter: saturate(1.15) contrast(1.05) brightness(0.68);
}

body:not(.host-pixel) .lookalike-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 18, 0.78) 0%, transparent 18%, transparent 82%, rgba(4, 4, 18, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 3, 16, 0.28) 0%, transparent 32%, rgba(2, 2, 12, 0.7) 100%),
    radial-gradient(ellipse 48% 32% at 50% 36%, rgba(255, 61, 138, 0.12), transparent 70%);
}

body:not(.host-pixel) .lookalike-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

body:not(.host-pixel) .lookalike-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .lookalike-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 61, 138, 0.35));
}

body:not(.host-pixel) .lookalike-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--lookalike-line);
  border-radius: 18px;
  background: var(--lookalike-panel);
  box-shadow:
    inset 0 0 24px rgba(255, 61, 138, 0.08),
    0 0 16px rgba(255, 61, 138, 0.1);
}

body:not(.host-pixel) .lookalike-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #ffe9f4;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .lookalike-panel-title > span {
  color: var(--lookalike-gold);
}

body:not(.host-pixel) .lookalike-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}

body:not(.host-pixel) .lookalike-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 105, 180, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .lookalike-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffb3d9, #c41e6a);
  color: #1a0524;
  font-weight: 1000;
}

body:not(.host-pixel) .lookalike-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .lookalike-howto small {
  color: #e8b8d0;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .lookalike-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .lookalike-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .lookalike-join-url {
  margin: 4px 0 0;
  color: #ffc8e4;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .lookalike-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

body:not(.host-pixel) .lookalike-join-code strong,
body:not(.host-pixel) .lookalike-connected strong,
body:not(.host-pixel) .lookalike-side-name {
  color: var(--lookalike-gold);
}

body:not(.host-pixel) .lookalike-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffe9f4;
  font-weight: 800;
}

body:not(.host-pixel) .lookalike-status-big {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 1000;
}

body:not(.host-pixel) .lookalike-status-copy,
body:not(.host-pixel) .lookalike-side-celeb {
  margin: 0;
  color: #e8b8d0;
  font-size: 13px;
}

body:not(.host-pixel) .lookalike-side-name {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 950;
}

body:not(.host-pixel) .lookalike-status-panel {
  flex: 0 1 auto;
}

body:not(.host-pixel) .lookalike-sidebar-right .lookalike-panel-box:last-child {
  flex: 0 1 auto;
  min-height: 0;
}

body:not(.host-pixel) .lookalike-main-stage {
  display: grid;
  grid-template-rows:
    auto
    clamp(40px, 4.8vh, 52px)
    minmax(0, 1fr)
    clamp(48px, 5.6vh, 62px)
    clamp(36px, 4.4vh, 48px);
  gap: clamp(8px, 1vh, 12px);
  min-height: 0;
  overflow: hidden;
}

body:not(.host-pixel) .lookalike-marquee {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

body:not(.host-pixel) .lookalike-title {
  margin: 0;
  text-align: center;
  line-height: 0;
}

body:not(.host-pixel) .lookalike-title-logo {
  display: block;
  width: auto;
  height: clamp(48px, 7.5vh, 88px);
  max-width: min(98%, 920px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 4px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 14px rgba(255, 61, 138, 0.45));
}

body:not(.host-pixel) .lookalike-title-ribbon {
  margin: 6px auto 0;
  width: min(84%, 760px);
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 235, 138, 0.55);
  background: linear-gradient(90deg, #6b1048, #ff3d8a 50%, #6b1048);
  color: #fff;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

body:not(.host-pixel) .lookalike-live-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: clamp(40px, 4.8vh, 52px);
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(24, 6, 28, 0.88);
  border: 1px solid rgba(255, 105, 180, 0.35);
  overflow: hidden;
}

body:not(.host-pixel) .lookalike-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9dffb8;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

body:not(.host-pixel) .lookalike-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16d47b;
  box-shadow: 0 0 10px #16d47b;
}

body:not(.host-pixel) .host-lookalike .host-state {
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 1.6vw, 24px);
}

body:not(.host-pixel) .lookalike-live-rule {
  color: #ffc8e4;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

body:not(.host-pixel) .lookalike-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 105, 180, 0.28);
  background: #050210;
}

body:not(.host-pixel) .lookalike-stage-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 216, 74, 0.14), transparent 62%),
    radial-gradient(ellipse 40% 30% at 20% 100%, rgba(255, 61, 138, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 100%, rgba(255, 61, 138, 0.12), transparent 70%);
}

body:not(.host-pixel) .lookalike-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body:not(.host-pixel) .lookalike-idle-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

body:not(.host-pixel) .lookalike-idle-icon {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(255, 216, 74, 0.45));
}

body:not(.host-pixel) .lookalike-idle-title {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body:not(.host-pixel) .lookalike-idle-hint {
  margin: 0;
  color: #e8b8d0;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 700;
}

body:not(.host-pixel) .lookalike-reveal {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .lookalike-photo-wrap {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 1.6vh, 20px);
}

body:not(.host-pixel) .lookalike-host-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 680px);
  max-height: 100%;
  object-fit: contain;
  border-radius: 18px;
  border: 3px solid rgba(255, 216, 74, 0.75);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(255, 61, 138, 0.35);
  background: rgba(0, 0, 0, 0.35);
}

body:not(.host-pixel) .lookalike-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 255, 255, 0.08), transparent 70%);
}

body:not(.host-pixel) .lookalike-reveal-banner {
  padding: clamp(10px, 1.4vh, 16px) clamp(16px, 2vw, 28px);
  border-top: 1px solid rgba(255, 216, 74, 0.45);
  background: linear-gradient(180deg, rgba(58, 12, 42, 0.92), rgba(10, 6, 24, 0.96));
  text-align: center;
}

body:not(.host-pixel) .lookalike-host-player {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 950;
  letter-spacing: 0.02em;
}

body:not(.host-pixel) .lookalike-host-celeb {
  margin: 4px 0 0;
  color: var(--lookalike-gold);
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 800;
}

body:not(.host-pixel) .lookalike-action-panel,
body:not(.host-pixel) .lookalike-footer-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  min-height: 0;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

body:not(.host-pixel) .lookalike-action-panel {
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 216, 74, 0.35);
  background: linear-gradient(90deg, rgba(58, 12, 42, 0.88), rgba(120, 20, 68, 0.92), rgba(58, 12, 42, 0.88));
  font-size: clamp(14px, 1.2vw, 18px);
}

body:not(.host-pixel) .lookalike-footer-tag {
  color: #ffc8e4;
  font-size: clamp(12px, 1vw, 16px);
}

body:not(.host-pixel) .lookalike-footer-tag strong {
  color: var(--lookalike-gold);
}

body:not(.host-pixel) .host-lookalike[data-state='open'] .lookalike-title-ribbon {
  animation: lookalike-banner-pulse 1.4s ease-in-out infinite;
}

body:not(.host-pixel) .host-lookalike[data-state='pending'] .lookalike-title-ribbon {
  border-color: #7ee4ff;
  background: linear-gradient(90deg, #064f91, #19a9dd, #064f91);
}

body:not(.host-pixel) .host-lookalike[data-state='shown'] .lookalike-title-ribbon {
  border-color: #fff0a0;
  background: linear-gradient(90deg, #9d5100, #ffd84a, #9d5100);
  color: #211100;
}

@keyframes lookalike-banner-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 61, 138, 0.42); }
  50% { box-shadow: 0 0 28px rgba(255, 61, 138, 0.75); }
}

body.host-pixel .lookalike-show-bg,
body.host-pixel .lookalike-sidebar,
body.host-pixel .lookalike-live-strip,
body.host-pixel .lookalike-action-panel,
body.host-pixel .lookalike-footer-tag,
body.host-pixel .lookalike-title-ribbon {
  display: none;
}

body.host-pixel .lookalike-tv-shell,
body.host-pixel .lookalike-main-stage {
  display: block;
  height: 100%;
}

body.host-pixel .lookalike-title-logo {
  display: block;
  height: 24px;
  width: auto;
  margin: 0 auto 6px;
  object-fit: contain;
}

body.host-pixel .lookalike-stage,
body.host-pixel .lookalike-frame {
  position: relative;
  height: calc(100% - 34px);
  min-height: 0;
  overflow: hidden;
}

body.host-pixel .lookalike-host-image {
  display: block;
  width: 100%;
  max-height: calc(100% - 40px);
  object-fit: contain;
  margin: 0 auto;
}

body.host-pixel .lookalike-reveal-banner {
  text-align: center;
  font-size: 12px;
}

body.host-pixel .lookalike-host-player {
  font-size: 14px;
  font-weight: 900;
}

body.host-pixel .lookalike-host-celeb {
  font-size: 12px;
  color: var(--amber);
}

@media (max-height: 720px) {
  body:not(.host-pixel) .lookalike-title-logo {
    height: clamp(40px, 6.5vh, 72px);
  }

  body:not(.host-pixel) .lookalike-main-stage {
    grid-template-rows:
      auto
      clamp(36px, 4.2vh, 46px)
      minmax(0, 1fr)
      clamp(40px, 4.8vh, 52px)
      clamp(32px, 3.8vh, 42px);
  }
}

/* ------------------------------------------------------------------ Mystery Boxes */

body[data-host-mode='boxes'] .host-top {
  display: none;
}

body[data-host-mode='boxes'] .host {
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

body[data-host-mode='boxes'] .host-boxes {
  grid-row: 1 / -1;
}

body:not(.host-pixel)[data-host-mode='boxes'] .host {
  --boxes-gold: #ffd84a;
  --boxes-orange: #ff9a3c;
  --boxes-purple: #c854ff;
  --boxes-line: rgba(255, 216, 74, 0.38);
  --boxes-panel: linear-gradient(145deg, rgba(48, 32, 8, 0.96), rgba(8, 7, 18, 0.97));
}

body:not(.host-pixel) .host-boxes {
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: #070318;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
}

body:not(.host-pixel) .boxes-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .boxes-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.74;
  filter: saturate(1.12) contrast(1.06) brightness(0.68);
}

body:not(.host-pixel) .boxes-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 4, 18, 0.78) 0%, transparent 18%, transparent 82%, rgba(4, 4, 18, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 3, 16, 0.28) 0%, transparent 32%, rgba(2, 2, 12, 0.72) 100%),
    radial-gradient(ellipse 48% 32% at 50% 36%, rgba(255, 154, 60, 0.12), transparent 70%);
}

body:not(.host-pixel) .boxes-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .boxes-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .boxes-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 216, 74, 0.28));
}

body:not(.host-pixel) .boxes-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--boxes-line);
  border-radius: 18px;
  background: var(--boxes-panel);
  box-shadow:
    inset 0 0 24px rgba(255, 216, 74, 0.06),
    0 0 16px rgba(255, 216, 74, 0.08);
}

body:not(.host-pixel) .boxes-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #fff4df;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .boxes-panel-title > span {
  color: var(--boxes-gold);
}

body:not(.host-pixel) .boxes-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body:not(.host-pixel) .boxes-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 216, 74, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .boxes-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c87800);
  color: #2a1400;
  font-weight: 1000;
}

body:not(.host-pixel) .boxes-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .boxes-howto small {
  color: #d8c4a8;
  font-size: clamp(11px, 0.8vw, 13px);
  margin-top: 2px;
  display: block;
}

body:not(.host-pixel) .boxes-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
  min-height: 0;
  overflow: hidden;
}

body:not(.host-pixel) .boxes-qr {
  width: min(100%, 22vh, 210px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
  display: block;
  margin: 0 auto;
}

body:not(.host-pixel) .boxes-join-url {
  margin: 4px 0 0;
  color: #ffe8c0;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  text-align: center;
}

body:not(.host-pixel) .boxes-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
}

body:not(.host-pixel) .boxes-join-code strong,
body:not(.host-pixel) .boxes-connected strong {
  color: var(--boxes-gold);
}

body:not(.host-pixel) .boxes-main-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .boxes-marquee {
  text-align: center;
  flex: none;
  min-width: 0;
}

body:not(.host-pixel) .boxes-title-logo {
  display: block;
  width: auto;
  max-width: min(100%, 760px);
  height: clamp(48px, 8vh, 96px);
  margin: 0 auto;
  object-fit: contain;
}

body:not(.host-pixel) .boxes-title-ribbon {
  margin: 4px 0 0;
  color: #ffd784;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body:not(.host-pixel) .boxes-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 216, 74, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  flex: none;
}

body:not(.host-pixel) .boxes-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffd784;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:not(.host-pixel) .boxes-live-badge i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px rgba(255, 59, 59, 0.8);
  animation: boxes-live-pulse 1.2s ease-in-out infinite;
}

@keyframes boxes-live-pulse {
  0%,
  100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

body:not(.host-pixel) .boxes-live-rule {
  color: #d8c4a8;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

body:not(.host-pixel) .boxes-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 216, 74, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 216, 74, 0.08), transparent 70%),
    rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

body:not(.host-pixel) .boxes-stage-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 216, 74, 0.12), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(200, 84, 255, 0.12), transparent 34%);
}

body:not(.host-pixel) .boxes-contestant-banner {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: none;
}

body:not(.host-pixel) .boxes-contestant-kicker {
  margin: 0;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 800;
}

body:not(.host-pixel) .boxes-contestant-name {
  margin: 4px 0 0;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 1000;
  color: var(--boxes-gold);
  text-shadow: 0 0 24px rgba(255, 216, 74, 0.35);
  line-height: 1.05;
}

body:not(.host-pixel) .boxes-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
  max-width: min(100%, 920px);
  min-height: 0;
  flex: 1 1 auto;
  align-content: center;
  justify-content: center;
  padding: 4px 0;
}

body:not(.host-pixel) .boxes-grid[data-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 680px;
}

body:not(.host-pixel) .boxes-grid[data-count='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 820px;
}

body:not(.host-pixel) .boxes-grid[data-count='5'],
body:not(.host-pixel) .boxes-grid[data-count='6'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:not(.host-pixel) .boxes-grid[data-count='7'],
body:not(.host-pixel) .boxes-grid[data-count='8'],
body:not(.host-pixel) .boxes-grid[data-count='9'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:not(.host-pixel) .boxes-grid[data-count='10'],
body:not(.host-pixel) .boxes-grid[data-count='11'],
body:not(.host-pixel) .boxes-grid[data-count='12'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body:not(.host-pixel) .boxes-tile {
  --box-a: #ff9a3c;
  --box-b: #c854ff;
  position: relative;
  aspect-ratio: 0.88;
  max-height: min(28vh, 210px);
  min-height: 0;
  width: 100%;
  justify-self: center;
  perspective: 900px;
  transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
  animation: boxes-tile-float 3.6s ease-in-out infinite;
}

body:not(.host-pixel) .boxes-tile[data-tone='1'] {
  --box-a: #ff9a3c;
  --box-b: #ffd84a;
  animation-delay: 0s;
}

body:not(.host-pixel) .boxes-tile[data-tone='2'] {
  --box-a: #c854ff;
  --box-b: #54d7ff;
  animation-delay: 0.35s;
}

body:not(.host-pixel) .boxes-tile[data-tone='3'] {
  --box-a: #ff4f97;
  --box-b: #ffd84a;
  animation-delay: 0.7s;
}

body:not(.host-pixel) .boxes-tile[data-tone='4'] {
  --box-a: #54d7ff;
  --box-b: #c854ff;
  animation-delay: 1.05s;
}

@keyframes boxes-tile-float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

body:not(.host-pixel) .boxes-tile.is-preview {
  animation: boxes-tile-float 3.6s ease-in-out infinite, boxes-tile-shimmer 2.8s ease-in-out infinite;
}

@keyframes boxes-tile-shimmer {
  0%,
  100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

body:not(.host-pixel) .boxes-tile.is-dim {
  opacity: 0.28;
  filter: saturate(0.45) brightness(0.7);
  transform: scale(0.92);
  animation: none;
}

body:not(.host-pixel) .boxes-tile-glow {
  position: absolute;
  inset: -8%;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--box-a) 35%, transparent), transparent 68%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

body:not(.host-pixel) .boxes-tile-body {
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: 16px;
  border: 2px solid rgba(255, 216, 74, 0.55);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--box-a) 55%, #2a1408) 0%, #1a0c08 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 18px rgba(0, 0, 0, 0.35),
    0 14px 30px rgba(0, 0, 0, 0.45),
    0 0 24px color-mix(in srgb, var(--box-a) 28%, transparent);
  display: grid;
  place-items: center;
  overflow: hidden;
}

body:not(.host-pixel) .boxes-tile-ribbon {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 216, 74, 0.75) 46%, rgba(255, 216, 74, 0.75) 54%, transparent 54%);
  opacity: 0.85;
  pointer-events: none;
}

body:not(.host-pixel) .boxes-tile-lid {
  position: absolute;
  inset: 0 0 58%;
  z-index: 3;
  border-radius: 16px 16px 8px 8px;
  border: 2px solid rgba(255, 232, 160, 0.75);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--box-b) 80%, #fff) 0%, var(--box-a) 100%);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.2, 0.9, 0.2, 1.15), opacity 0.5s ease;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

body:not(.host-pixel) .boxes-tile-bow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffb020 55%, #c87800 100%);
  box-shadow:
    -12px 0 0 -5px #ffd84a,
    12px 0 0 -5px #ffd84a,
    0 0 12px rgba(255, 216, 74, 0.55);
}

body:not(.host-pixel) .boxes-tile-q {
  position: relative;
  z-index: 2;
  margin-top: 18%;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 1000;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 18px rgba(255, 216, 74, 0.55);
}

body:not(.host-pixel) .boxes-tile-num {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.04em;
  color: #2a1400;
  background: linear-gradient(180deg, #ffe08a, #ffb020);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

body:not(.host-pixel) .boxes-tile-prize {
  display: none;
  position: relative;
  z-index: 2;
  padding: 0 10px;
  text-align: center;
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 900;
  color: var(--boxes-gold);
  line-height: 1.15;
  text-shadow: 0 0 16px rgba(255, 216, 74, 0.4);
}

body:not(.host-pixel) .boxes-tile.is-selected {
  z-index: 4;
  transform: scale(1.06);
  animation: none;
}

body:not(.host-pixel) .boxes-tile.is-selected .boxes-tile-body {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    0 0 0 3px rgba(255, 216, 74, 0.7),
    0 18px 40px rgba(255, 154, 60, 0.35);
}

body:not(.host-pixel) .boxes-tile.is-opening {
  animation: boxes-shake 0.45s ease-in-out infinite;
  z-index: 5;
}

body:not(.host-pixel) .boxes-tile.is-opening .boxes-tile-lid,
body:not(.host-pixel) .boxes-tile.is-opened .boxes-tile-lid {
  transform: rotateX(-118deg) translateY(-12%);
}

body:not(.host-pixel) .boxes-tile.is-opened .boxes-tile-lid {
  opacity: 0.4;
}

body:not(.host-pixel) .boxes-tile.is-opened .boxes-tile-q,
body:not(.host-pixel) .boxes-tile.is-opened .boxes-tile-ribbon {
  display: none;
}

body:not(.host-pixel) .boxes-tile.is-opened .boxes-tile-prize {
  display: block;
}

body:not(.host-pixel) .boxes-tile.is-opened .boxes-tile-body {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 216, 74, 0.32), transparent 55%),
    linear-gradient(180deg, rgba(48, 24, 8, 0.95), rgba(8, 8, 18, 0.98));
}

body:not(.host-pixel) .boxes-reveal-panel {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(100%, 720px);
  text-align: center;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 216, 74, 0.35);
  background: rgba(0, 0, 0, 0.45);
  animation: boxes-reveal-pop 0.7s cubic-bezier(0.2, 0.9, 0.2, 1.1);
}

body:not(.host-pixel) .boxes-has-reveal .boxes-grid {
  flex: 0 1 auto;
  max-height: 42%;
}

body:not(.host-pixel) .boxes-reveal-kicker {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 800;
}

body:not(.host-pixel) .boxes-reveal-prize {
  margin: 8px 0 0;
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 1000;
  color: var(--boxes-gold);
  text-shadow: 0 0 30px rgba(255, 216, 74, 0.45);
  line-height: 1.05;
}

body:not(.host-pixel) .boxes-action-panel,
body:not(.host-pixel) .boxes-footer-tag {
  flex: none;
  margin: 0;
  text-align: center;
  color: #d8c4a8;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
}

body:not(.host-pixel) .boxes-action-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 216, 74, 0.22);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.host-pixel) .boxes-footer-tag strong {
  color: var(--boxes-gold);
}

body:not(.host-pixel) .boxes-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff4df;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--boxes-line);
  background: rgba(255, 216, 74, 0.08);
}

body:not(.host-pixel) .boxes-status-big {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 1000;
  line-height: 1;
}

body:not(.host-pixel) .boxes-status-copy,
body:not(.host-pixel) .boxes-side-meta {
  margin: 6px 0 0;
  color: #d8c4a8;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 700;
  line-height: 1.35;
}

body:not(.host-pixel) .boxes-side-prize {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 900;
  color: #fff;
}

body:not(.host-pixel) .host-boxes .host-state {
  text-align: center;
  font-size: clamp(16px, 1.6vw, 28px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

body:not(.host-pixel) .host-boxes[data-state='picking'] .boxes-live-strip .host-state {
  color: #54d7ff;
}

body:not(.host-pixel) .host-boxes[data-state='opening'] .boxes-live-strip .host-state {
  color: #ffb840;
}

body:not(.host-pixel) .host-boxes[data-state='revealed'] .boxes-live-strip .host-state {
  color: #16d47b;
}

body:not(.host-pixel) .host-boxes[data-state='opening'] .boxes-stage {
  box-shadow: inset 0 0 60px rgba(255, 216, 74, 0.12);
}

body:not(.host-pixel) .host-boxes[data-state='revealed'] .boxes-stage {
  box-shadow:
    inset 0 0 80px rgba(255, 216, 74, 0.16),
    0 0 40px rgba(255, 154, 60, 0.12);
}

@keyframes boxes-shake {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1.04);
  }
  25% {
    transform: translateY(-4px) rotate(-2deg) scale(1.06);
  }
  75% {
    transform: translateY(4px) rotate(2deg) scale(1.06);
  }
}

@keyframes boxes-reveal-pop {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.boxes-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.boxes-pick {
  position: relative;
  display: grid;
  gap: 4px;
  place-items: center;
  min-height: 88px;
  padding: 14px 8px;
  border-radius: 16px;
  border: 2px solid rgba(255, 216, 74, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 154, 60, 0.28), rgba(20, 12, 4, 0.94));
  color: #fff;
  font-weight: 800;
  overflow: hidden;
}

.boxes-pick::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255, 216, 74, 0.55) 44%, rgba(255, 216, 74, 0.55) 56%, transparent 56%),
    linear-gradient(180deg, transparent 38%, rgba(255, 216, 74, 0.55) 38%, rgba(255, 216, 74, 0.55) 62%, transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}

.boxes-pick-icon,
.boxes-pick-num {
  position: relative;
  z-index: 1;
}

.boxes-pick-icon {
  font-size: 24px;
}

.boxes-pick-num {
  font-size: 20px;
  font-weight: 1000;
}

.boxes-pick.selected,
.boxes-pick:active {
  border-color: #ffd84a;
  box-shadow: 0 0 0 2px rgba(255, 216, 74, 0.3);
  transform: scale(0.98);
}

.boxes-pick:disabled {
  opacity: 0.45;
}

.boxes-phone-result {
  font-size: 22px;
  font-weight: 800;
  color: var(--amber);
  text-align: center;
}

@media (max-height: 720px) {
  body:not(.host-pixel) .boxes-title-logo {
    height: clamp(40px, 6.5vh, 72px);
  }

  body:not(.host-pixel) .boxes-tile {
    max-height: min(24vh, 160px);
  }

  body:not(.host-pixel) .boxes-contestant-name {
    font-size: clamp(18px, 2.6vw, 28px);
  }
}

/* ---------- Crowd Says host TV layout ---------- */

body[data-host-mode='crowd'] .host-top {
  display: none !important;
}

body[data-host-mode='crowd'] .host-teams {
  display: none !important;
}

body[data-host-mode='crowd'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
  background: #050512;
  overflow: hidden;
}

body[data-host-mode='crowd'] .host-crowd {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-crowd {
  --crowd-line: rgba(255, 196, 84, 0.5);
  --crowd-panel: linear-gradient(160deg, rgba(18, 10, 36, 0.72), rgba(6, 4, 18, 0.78));
  --crowd-gold: #ffd84a;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
}

body:not(.host-pixel) .crowd-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .crowd-show-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.92;
  filter: saturate(1.18) contrast(1.06) brightness(0.82);
}

body:not(.host-pixel) .crowd-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 3, 14, 0.78) 0%, transparent 16%, transparent 84%, rgba(4, 3, 14, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 2, 12, 0.22) 0%, transparent 34%, rgba(2, 2, 10, 0.55) 100%),
    radial-gradient(ellipse 52% 36% at 50% 34%, rgba(255, 184, 64, 0.14), transparent 72%);
}

body:not(.host-pixel) .crowd-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .crowd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .crowd-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 184, 64, 0.28));
}

body:not(.host-pixel) .crowd-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--crowd-line);
  border-radius: 18px;
  background: var(--crowd-panel);
  backdrop-filter: blur(10px);
}

body:not(.host-pixel) .crowd-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #fff4df;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .crowd-panel-title > span {
  color: var(--crowd-gold);
}

body:not(.host-pixel) .crowd-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .crowd-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 184, 64, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .crowd-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c87800);
  color: #2a1400;
  font-weight: 1000;
}

body:not(.host-pixel) .crowd-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .crowd-howto small {
  color: #d8c4a8;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .crowd-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .crowd-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .crowd-join-url {
  margin: 4px 0 0;
  color: #ffe8c0;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .crowd-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 800;
}

body:not(.host-pixel) .crowd-main-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .crowd-title-text {
  display: block;
  margin: 0;
  text-align: center;
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

body:not(.host-pixel) .crowd-title-ribbon {
  margin: 4px 0 0;
  text-align: center;
  color: var(--crowd-gold);
  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body:not(.host-pixel) .crowd-live-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 184, 64, 0.28);
  border-radius: 999px;
  background: rgba(6, 4, 18, 0.4);
}

body:not(.host-pixel) .crowd-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffd84a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .crowd-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d;
}

body:not(.host-pixel) .crowd-live-rule {
  color: #d8c4a8;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body:not(.host-pixel) .crowd-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 184, 64, 0.28);
  border-radius: 22px;
  background: rgba(6, 4, 18, 0.28);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

body:not(.host-pixel) .crowd-host-question {
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 2.8vw, 44px);
  font-weight: 900;
  line-height: 1.12;
  color: #fff;
}

body:not(.host-pixel) .crowd-strikes {
  display: flex;
  justify-content: center;
  gap: 10px;
}

body:not(.host-pixel) .crowd-strike {
  width: clamp(36px, 4vw, 56px);
  height: clamp(36px, 4vw, 56px);
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: transparent;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 1000;
  background: rgba(0, 0, 0, 0.25);
}

body:not(.host-pixel) .crowd-strike.on {
  color: #ff4d4d;
  border-color: rgba(255, 77, 77, 0.85);
  background: rgba(255, 40, 40, 0.18);
  text-shadow: 0 0 12px rgba(255, 77, 77, 0.65);
}

body:not(.host-pixel) .crowd-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body:not(.host-pixel) .crowd-answer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
}

body:not(.host-pixel) .crowd-answer.revealed {
  border-color: rgba(255, 216, 74, 0.55);
  background: rgba(255, 184, 64, 0.14);
  animation: crowd-reveal-pop 0.45s ease;
}

@keyframes crowd-reveal-pop {
  from {
    transform: scale(0.96);
    filter: brightness(1.4);
  }
  to {
    transform: scale(1);
    filter: none;
  }
}

body:not(.host-pixel) .crowd-answer-num {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c87800);
  color: #2a1400;
  font-weight: 1000;
}

body:not(.host-pixel) .crowd-answer-label {
  color: #fff;
  font-size: clamp(16px, 1.6vw, 28px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

body:not(.host-pixel) .crowd-answer:not(.revealed) .crowd-answer-label {
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.2em;
}

body:not(.host-pixel) .crowd-answer-pts {
  color: var(--crowd-gold);
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

body:not(.host-pixel) .crowd-board-points {
  margin: 0;
  text-align: center;
  color: #ffe8c0;
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 800;
}

body:not(.host-pixel) .crowd-board-points strong {
  color: #fff;
  font-size: 1.35em;
}

body:not(.host-pixel) .crowd-action-panel,
body:not(.host-pixel) .crowd-footer-tag {
  margin: 0;
  text-align: center;
  color: #ffe8c0;
  font-weight: 800;
}

body:not(.host-pixel) .crowd-connected {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--crowd-line);
  background: var(--crowd-panel);
  color: #fff;
  font-weight: 800;
  text-align: center;
}

body:not(.host-pixel) .crowd-status-big {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 1000;
}

body:not(.host-pixel) .crowd-status-copy {
  margin: 0;
  color: #d8c4a8;
  font-size: 13px;
}

body:not(.host-pixel) .crowd-team-scores {
  display: grid;
  gap: 8px;
}

body:not(.host-pixel) .crowd-team-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 800;
}

body:not(.host-pixel) .crowd-team-score strong {
  color: var(--crowd-gold);
  font-size: 1.4em;
}

body:not(.host-pixel) .host-crowd[data-state='steal'] .crowd-live-badge,
body:not(.host-pixel) .host-crowd[data-state='steal'] .crowd-status-big {
  color: #ff7a7a;
}

body.host-pixel .crowd-show-bg,
body.host-pixel .crowd-sidebar,
body.host-pixel .crowd-live-strip,
body.host-pixel .crowd-action-panel,
body.host-pixel .crowd-footer-tag,
body.host-pixel .crowd-title-ribbon {
  display: none;
}

body.host-pixel .crowd-tv-shell,
body.host-pixel .crowd-main-stage {
  display: block;
  height: 100%;
}

.crowd-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 420px);
  margin: 0 auto;
}

.crowd-phone-prompt {
  margin: 0;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
}

.crowd-phone-question {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.crowd-guess-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Price Bid host TV + phone ---------- */

body[data-host-mode='price'] .host-top,
body[data-host-mode='price'] .host-teams {
  display: none !important;
}

body[data-host-mode='price'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
  background: #050512;
  overflow: hidden;
}

body[data-host-mode='price'] .host-price {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-price {
  --price-line: rgba(255, 196, 84, 0.55);
  --price-panel: linear-gradient(160deg, rgba(28, 16, 8, 0.78), rgba(8, 4, 12, 0.82));
  --price-gold: #ffd84a;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
}

body:not(.host-pixel) .price-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .price-show-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  filter: saturate(1.15) contrast(1.05) brightness(0.82);
}

body:not(.host-pixel) .price-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 3, 14, 0.78) 0%, transparent 16%, transparent 84%, rgba(4, 3, 14, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 2, 12, 0.22) 0%, transparent 34%, rgba(2, 2, 10, 0.55) 100%),
    radial-gradient(ellipse 52% 36% at 50% 34%, rgba(255, 184, 64, 0.18), transparent 72%);
}

body:not(.host-pixel) .price-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .price-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .price-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 184, 64, 0.28));
}

body:not(.host-pixel) .price-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--price-line);
  border-radius: 18px;
  background: var(--price-panel);
  backdrop-filter: blur(10px);
}

body:not(.host-pixel) .price-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #fff4df;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .price-panel-title > span { color: var(--price-gold); }

body:not(.host-pixel) .price-howto {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.host-pixel) .price-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 184, 64, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

body:not(.host-pixel) .price-howto li > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #c87800);
  color: #2a1400;
  font-weight: 1000;
}

body:not(.host-pixel) .price-howto b {
  color: #fff;
  font-size: clamp(12px, 0.95vw, 15px);
  text-transform: uppercase;
}

body:not(.host-pixel) .price-howto small {
  color: #d8c4a8;
  font-size: clamp(11px, 0.8vw, 13px);
}

body:not(.host-pixel) .price-join-panel {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

body:not(.host-pixel) .price-qr {
  width: min(100%, 24.5vh, 238px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
}

body:not(.host-pixel) .price-join-url {
  margin: 4px 0 0;
  color: #ffe8c0;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
}

body:not(.host-pixel) .price-join-code {
  margin: 2px 0 0;
  color: #fff;
  font-weight: 800;
}

body:not(.host-pixel) .price-main-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 8px 10px 6px;
  border: 1px solid var(--price-line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20, 10, 6, 0.72), rgba(6, 4, 14, 0.78));
}

body:not(.host-pixel) .price-title {
  margin: 0;
  text-align: center;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: 0.04em;
  color: #fff8e8;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

body:not(.host-pixel) .price-title-ribbon {
  margin: 0;
  text-align: center;
  color: var(--price-gold);
  font-weight: 900;
  letter-spacing: 0.18em;
  font-size: clamp(12px, 1.1vw, 16px);
}

body:not(.host-pixel) .price-live-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 196, 84, 0.28);
}

body:not(.host-pixel) .price-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ff8d8d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.host-pixel) .price-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 10px #ff3b3b;
}

body:not(.host-pixel) .price-live-strip .host-state {
  text-align: center;
  margin: 0;
  font-size: clamp(16px, 1.6vw, 22px);
}

body:not(.host-pixel) .price-live-rule {
  color: var(--price-gold);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}

body:not(.host-pixel) .price-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  padding: 12px;
}

body:not(.host-pixel) .price-item {
  margin: 0;
  text-align: center;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 950;
  line-height: 1.15;
  color: #fff;
  max-width: 18ch;
}

body:not(.host-pixel) .price-true-reveal {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(64px, 10vw, 120px);
  line-height: 1;
  color: var(--price-gold);
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}

body:not(.host-pixel)[data-host-mode='price'] .host-price[data-state='revealed'] .price-true-reveal {
  animation: price-reveal-pop 0.55s ease;
}

@keyframes price-reveal-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

body:not(.host-pixel) .price-winner-line {
  margin: 0;
  min-height: 1.2em;
  text-align: center;
  color: #fff4df;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 800;
}

body:not(.host-pixel) .price-board {
  display: grid;
  gap: 6px;
  width: min(100%, 520px);
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  max-height: 28vh;
  overflow: auto;
}

body:not(.host-pixel) .price-bid-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 196, 84, 0.18);
  font-weight: 800;
}

body:not(.host-pixel) .price-bid-row.winner {
  background: rgba(255, 216, 74, 0.18);
  border-color: rgba(255, 216, 74, 0.55);
  color: #ffe8a0;
}

body:not(.host-pixel) .price-bid-row.over {
  opacity: 0.45;
  text-decoration: line-through;
}

body:not(.host-pixel) .price-action-panel,
body:not(.host-pixel) .price-footer-tag {
  margin: 6px 0 0;
  text-align: center;
  font-weight: 800;
  color: #ffe8c0;
}

body:not(.host-pixel) .price-connected {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--price-line);
  background: var(--price-panel);
  text-align: center;
  font-weight: 800;
}

body:not(.host-pixel) .price-status-big {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 950;
  color: #fff;
}

body:not(.host-pixel) .price-status-copy,
body:not(.host-pixel) .price-side-meta {
  margin: 0;
  color: #d8c4a8;
  font-size: 13px;
}

body:not(.host-pixel) .price-side-prize {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 950;
  color: var(--price-gold);
}

.price-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 420px);
  margin: 0 auto;
}

.price-phone-prompt {
  margin: 0;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
}

.price-phone-item {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.price-bid-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-bid-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.price-bid-currency {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--amber);
}

.price-phone-result {
  margin: 0;
  text-align: center;
  font-weight: 900;
  color: var(--green);
}

.price-admin-thumb {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

body:not(.host-pixel) .price-product-image {
  width: min(42vh, 320px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22px;
  border: 2px solid rgba(255, 216, 74, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.25);
}

.price-phone-image {
  display: block;
  width: min(100%, 180px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

/* —— Word Clock (host + phone) —— */
body[data-host-mode='countdown'] .host-countdown {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-countdown {
  --cd-line: rgba(90, 210, 230, 0.5);
  --cd-panel: linear-gradient(160deg, rgba(8, 22, 32, 0.82), rgba(4, 10, 18, 0.88));
  --cd-accent: #5ad6e6;
  --cd-gold: #ffd84a;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
  color: #e8f4ff;
}

body:not(.host-pixel) .countdown-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .countdown-show-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  filter: saturate(1.05) contrast(1.05) brightness(0.78) hue-rotate(168deg);
}

body:not(.host-pixel) .countdown-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 14, 0.8) 0%, transparent 16%, transparent 84%, rgba(2, 8, 14, 0.8) 100%),
    linear-gradient(180deg, rgba(2, 6, 12, 0.25) 0%, transparent 34%, rgba(2, 4, 10, 0.58) 100%),
    radial-gradient(ellipse 52% 36% at 50% 34%, rgba(60, 180, 210, 0.2), transparent 72%);
}

body:not(.host-pixel) .countdown-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .countdown-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .countdown-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(90, 214, 230, 0.28));
}

body:not(.host-pixel) .countdown-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--cd-line);
  border-radius: 18px;
  background: var(--cd-panel);
  backdrop-filter: blur(10px);
}

body:not(.host-pixel) .countdown-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8eef8;
}

body:not(.host-pixel) .countdown-panel-title > span { color: var(--cd-accent); }

body:not(.host-pixel) .countdown-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body:not(.host-pixel) .countdown-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: baseline;
}

body:not(.host-pixel) .countdown-howto li > span {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #041018;
  background: var(--cd-accent);
}

body:not(.host-pixel) .countdown-howto b {
  font-size: 0.92rem;
  color: #f2fbff;
}

body:not(.host-pixel) .countdown-howto small {
  color: rgba(200, 230, 240, 0.72);
  font-size: 0.78rem;
}

body:not(.host-pixel) .countdown-join-panel {
  margin-top: auto;
  align-items: center;
  text-align: center;
}

body:not(.host-pixel) .countdown-qr {
  width: min(180px, 100%);
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

body:not(.host-pixel) .countdown-join-url {
  margin: 0;
  font-size: 0.78rem;
  color: #9fd4ea;
  word-break: break-all;
}

body:not(.host-pixel) .countdown-join-code {
  margin: 0;
  font-size: 0.9rem;
  color: #e8f4ff;
}

body:not(.host-pixel) .countdown-main-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .countdown-title {
  margin: 0;
  text-align: center;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  letter-spacing: 0.06em;
  color: #f2fbff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .countdown-title-ribbon {
  margin: 2px 0 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--cd-accent);
}

body:not(.host-pixel) .countdown-live-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

body:not(.host-pixel) .countdown-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cd-line);
  background: rgba(8, 28, 40, 0.7);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.host-pixel) .countdown-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 10px #ff5a5a;
  animation: countdown-live-blink 1.2s ease-in-out infinite;
}

@keyframes countdown-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

body:not(.host-pixel) .countdown-live-strip .host-state {
  font-size: clamp(1rem, 2vw, 1.35rem);
}

body:not(.host-pixel) .countdown-live-rule {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fd4ea;
}

body:not(.host-pixel) .countdown-digital-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}

body:not(.host-pixel) .countdown-digital {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 28px 14px;
  border-radius: 16px;
  border: 2px solid rgba(90, 214, 230, 0.35);
  background:
    linear-gradient(180deg, rgba(6, 14, 10, 0.95), rgba(2, 8, 6, 0.98));
  box-shadow:
    inset 0 0 24px rgba(40, 255, 120, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .countdown-digital-label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(120, 220, 160, 0.7);
}

body:not(.host-pixel) .countdown-digital-face {
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #3dff7a;
  text-shadow:
    0 0 8px rgba(61, 255, 122, 0.55),
    0 0 24px rgba(61, 255, 122, 0.25);
}

body:not(.host-pixel) .host-countdown[data-state='playing'] .countdown-digital-face {
  animation: countdown-digital-tick 1s steps(1) infinite;
}

body:not(.host-pixel) .countdown-digital[data-low='true'] .countdown-digital-face {
  color: #ffb020;
  text-shadow:
    0 0 8px rgba(255, 176, 32, 0.65),
    0 0 24px rgba(255, 120, 32, 0.35);
}

@keyframes countdown-digital-tick {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.88; }
}

body:not(.host-pixel) .countdown-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-height: 0;
  overflow: auto;
}

body:not(.host-pixel) .countdown-kind-label {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cd-accent);
}

body:not(.host-pixel) .countdown-board-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

body:not(.host-pixel) .countdown-tile {
  width: clamp(44px, 6.2vw, 78px);
  height: clamp(54px, 7.5vw, 92px);
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(1.7rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  color: #041018;
  background: linear-gradient(180deg, #f4fbff 0%, #c5e7f5 100%);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body:not(.host-pixel) .countdown-tile.empty {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(90, 214, 230, 0.35);
  color: transparent;
}

body:not(.host-pixel) .countdown-numbers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

body:not(.host-pixel) .countdown-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

body:not(.host-pixel) .countdown-num {
  min-width: clamp(52px, 7vw, 84px);
  padding: 10px 14px;
  border-radius: 14px;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  color: #e8f4ff;
  background: rgba(12, 40, 56, 0.9);
  border: 2px solid rgba(90, 214, 230, 0.45);
}

body:not(.host-pixel) .countdown-target-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 216, 74, 0.95), rgba(240, 150, 60, 0.95));
  color: #1a0e04;
}

body:not(.host-pixel) .countdown-target-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: 800;
}

body:not(.host-pixel) .countdown-target {
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1;
}

body:not(.host-pixel) .countdown-winner-line {
  margin: 0;
  min-height: 1.3em;
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  font-weight: 800;
  color: var(--cd-gold);
}

body:not(.host-pixel) .countdown-board {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(640px, 100%);
  display: grid;
  gap: 6px;
}

body:not(.host-pixel) .countdown-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(8, 28, 40, 0.72);
  border: 1px solid rgba(90, 214, 230, 0.25);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}

body:not(.host-pixel) .countdown-entry.winner {
  border-color: rgba(255, 216, 74, 0.7);
  background: rgba(80, 50, 10, 0.55);
  color: #fff2b0;
}

body:not(.host-pixel) .countdown-action-panel,
body:not(.host-pixel) .countdown-footer-tag {
  margin: 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c8eef8;
}

body:not(.host-pixel) .countdown-connected {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--cd-line);
  background: var(--cd-panel);
  text-align: center;
  font-size: 0.9rem;
}

body:not(.host-pixel) .countdown-status-big {
  margin: 0;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.04em;
  color: #f2fbff;
}

body:not(.host-pixel) .countdown-status-copy,
body:not(.host-pixel) .countdown-side-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #9fd4ea;
}

body:not(.host-pixel) .countdown-side-prize {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--cd-gold);
}

.countdown-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.countdown-phone-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.countdown-phone-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 1.35rem;
}

.countdown-phone-meta {
  margin: 0;
  text-align: center;
}

.countdown-submit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.countdown-phone-result {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

/* —— Stop the Clock (host + phone) —— */
body[data-host-mode='stopclock'] .host-stopclock {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-stopclock {
  --sc-line: rgba(255, 196, 84, 0.5);
  --sc-panel: linear-gradient(160deg, rgba(28, 16, 8, 0.82), rgba(8, 4, 12, 0.88));
  --sc-accent: #ffd84a;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
  color: #fff6e8;
}

body:not(.host-pixel) .stopclock-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .stopclock-show-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  filter: saturate(1.12) contrast(1.05) brightness(0.8);
}

body:not(.host-pixel) .stopclock-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 3, 14, 0.8) 0%, transparent 16%, transparent 84%, rgba(4, 3, 14, 0.8) 100%),
    linear-gradient(180deg, rgba(3, 2, 12, 0.25) 0%, transparent 34%, rgba(2, 2, 10, 0.58) 100%),
    radial-gradient(ellipse 52% 36% at 50% 34%, rgba(255, 184, 64, 0.2), transparent 72%);
}

body:not(.host-pixel) .stopclock-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .stopclock-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .stopclock-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 184, 64, 0.28));
}

body:not(.host-pixel) .stopclock-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--sc-line);
  border-radius: 18px;
  background: var(--sc-panel);
  backdrop-filter: blur(10px);
}

body:not(.host-pixel) .stopclock-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe7b0;
}

body:not(.host-pixel) .stopclock-panel-title > span { color: var(--sc-accent); }

body:not(.host-pixel) .stopclock-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body:not(.host-pixel) .stopclock-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: baseline;
}

body:not(.host-pixel) .stopclock-howto li > span {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #1a0e04;
  background: var(--sc-accent);
}

body:not(.host-pixel) .stopclock-howto b {
  font-size: 0.92rem;
  color: #fff8ea;
}

body:not(.host-pixel) .stopclock-howto small {
  color: rgba(255, 230, 180, 0.72);
  font-size: 0.78rem;
}

body:not(.host-pixel) .stopclock-join-panel {
  margin-top: auto;
  align-items: center;
  text-align: center;
}

body:not(.host-pixel) .stopclock-qr {
  width: min(180px, 100%);
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

body:not(.host-pixel) .stopclock-join-url {
  margin: 0;
  font-size: 0.78rem;
  color: #ffd89a;
  word-break: break-all;
}

body:not(.host-pixel) .stopclock-join-code {
  margin: 0;
  font-size: 0.9rem;
  color: #fff6e8;
}

body:not(.host-pixel) .stopclock-main-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .stopclock-title {
  margin: 0;
  text-align: center;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  letter-spacing: 0.06em;
  color: #fff8ea;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .stopclock-title-ribbon {
  margin: 2px 0 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--sc-accent);
}

body:not(.host-pixel) .stopclock-live-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

body:not(.host-pixel) .stopclock-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--sc-line);
  background: rgba(28, 14, 6, 0.72);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.host-pixel) .stopclock-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 10px #ff5a5a;
  animation: countdown-live-blink 1.2s ease-in-out infinite;
}

body:not(.host-pixel) .stopclock-live-strip .host-state {
  font-size: clamp(1rem, 2vw, 1.35rem);
}

body:not(.host-pixel) .stopclock-live-rule {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd89a;
}

body:not(.host-pixel) .stopclock-target-chip {
  align-self: center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--sc-line);
  background: rgba(20, 10, 4, 0.7);
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe7b0;
}

body:not(.host-pixel) .stopclock-target-chip strong {
  color: var(--sc-accent);
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

body:not(.host-pixel) .stopclock-digital-wrap {
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
}

body:not(.host-pixel) .stopclock-digital {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 36px 18px;
  border-radius: 18px;
  border: 2px solid rgba(255, 216, 74, 0.35);
  background: linear-gradient(180deg, rgba(6, 14, 10, 0.96), rgba(2, 8, 6, 0.98));
  box-shadow:
    inset 0 0 28px rgba(61, 255, 122, 0.08),
    0 14px 40px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .stopclock-digital-label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(120, 220, 160, 0.7);
}

body:not(.host-pixel) .stopclock-digital-face {
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: clamp(3.6rem, 10vw, 6.4rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #3dff7a;
  text-shadow:
    0 0 8px rgba(61, 255, 122, 0.55),
    0 0 24px rgba(61, 255, 122, 0.25);
}

body:not(.host-pixel) .stopclock-digital[data-running='true'] .stopclock-digital-face {
  animation: countdown-digital-tick 1s steps(1) infinite;
}

body:not(.host-pixel) .stopclock-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-height: 0;
  overflow: auto;
}

body:not(.host-pixel) .stopclock-winner-line {
  margin: 0;
  min-height: 1.3em;
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  font-weight: 800;
  color: var(--sc-accent);
}

body:not(.host-pixel) .stopclock-board {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(640px, 100%);
  display: grid;
  gap: 6px;
}

body:not(.host-pixel) .stopclock-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(20, 10, 4, 0.72);
  border: 1px solid rgba(255, 196, 84, 0.25);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
}

body:not(.host-pixel) .stopclock-entry.winner {
  border-color: rgba(255, 216, 74, 0.75);
  background: rgba(80, 50, 10, 0.55);
  color: #fff2b0;
}

body:not(.host-pixel) .stopclock-action-panel,
body:not(.host-pixel) .stopclock-footer-tag {
  margin: 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffe7b0;
}

body:not(.host-pixel) .stopclock-connected {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
  text-align: center;
  font-size: 0.9rem;
}

body:not(.host-pixel) .stopclock-status-big {
  margin: 0;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.04em;
  color: #fff8ea;
}

body:not(.host-pixel) .stopclock-status-copy,
body:not(.host-pixel) .stopclock-side-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #ffd89a;
}

body:not(.host-pixel) .stopclock-side-prize {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--sc-accent);
}

.stopclock-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.stopclock-phone-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.stopclock-phone-target {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
}

.stopclock-buzz-btn {
  width: min(100%, 280px);
  min-height: 160px;
  border-radius: 50%;
  border: 4px solid rgba(255, 80, 80, 0.85);
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #c01818 70%);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(180, 20, 20, 0.45);
}

.stopclock-buzz-btn:disabled {
  opacity: 0.45;
  filter: grayscale(0.35);
}

.stopclock-phone-result {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

/* —— Scream Meter (host + phone) —— */
body[data-host-mode='scream'] .host-scream {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-scream {
  --sm-line: rgba(255, 120, 90, 0.45);
  --sm-panel: linear-gradient(160deg, rgba(28, 10, 12, 0.84), rgba(8, 4, 10, 0.9));
  --sm-accent: #ff6b4a;
  --sm-gold: #ffd84a;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
  color: #fff2ea;
}

body:not(.host-pixel) .scream-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .scream-show-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  filter: saturate(1.2) contrast(1.08) brightness(0.72) hue-rotate(-8deg);
}

body:not(.host-pixel) .scream-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 2, 6, 0.82) 0%, transparent 16%, transparent 84%, rgba(10, 2, 6, 0.82) 100%),
    linear-gradient(180deg, rgba(8, 2, 4, 0.28) 0%, transparent 36%, rgba(4, 2, 6, 0.62) 100%),
    radial-gradient(ellipse 55% 40% at 50% 42%, rgba(255, 80, 60, 0.22), transparent 72%);
}

body:not(.host-pixel) .host-scream[data-band='roaring'] .scream-show-bg::after,
body:not(.host-pixel) .host-scream[data-band='deafening'] .scream-show-bg::after,
body:not(.host-pixel) .host-scream[data-band='legendary'] .scream-show-bg::after {
  background:
    linear-gradient(90deg, rgba(10, 2, 6, 0.78) 0%, transparent 16%, transparent 84%, rgba(10, 2, 6, 0.78) 100%),
    radial-gradient(ellipse 60% 48% at 50% 45%, rgba(255, 60, 40, 0.38), transparent 70%);
}

body:not(.host-pixel) .scream-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .scream-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

body:not(.host-pixel) .scream-brand-logo {
  display: block;
  width: min(250px, 96%);
  height: clamp(72px, 10vh, 110px);
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 100, 70, 0.28));
}

body:not(.host-pixel) .scream-panel-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--sm-line);
  border-radius: 18px;
  background: var(--sm-panel);
  backdrop-filter: blur(10px);
}

body:not(.host-pixel) .scream-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd0c0;
}

body:not(.host-pixel) .scream-panel-title > span { color: var(--sm-accent); }

body:not(.host-pixel) .scream-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body:not(.host-pixel) .scream-howto li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: baseline;
}

body:not(.host-pixel) .scream-howto li > span {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #1a0804;
  background: var(--sm-accent);
}

body:not(.host-pixel) .scream-howto b {
  font-size: 0.92rem;
  color: #fff6f0;
}

body:not(.host-pixel) .scream-howto small {
  color: rgba(255, 210, 190, 0.72);
  font-size: 0.78rem;
}

body:not(.host-pixel) .scream-join-panel {
  margin-top: auto;
  align-items: center;
  text-align: center;
}

body:not(.host-pixel) .scream-qr {
  width: min(180px, 100%);
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

body:not(.host-pixel) .scream-join-url {
  margin: 0;
  font-size: 0.78rem;
  color: #ffc4b0;
  word-break: break-all;
}

body:not(.host-pixel) .scream-join-code {
  margin: 0;
  font-size: 0.9rem;
  color: #fff2ea;
}

body:not(.host-pixel) .scream-main-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

body:not(.host-pixel) .scream-title {
  margin: 0;
  text-align: center;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  letter-spacing: 0.06em;
  color: #fff6f0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .scream-title-ribbon {
  margin: 2px 0 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--sm-accent);
}

body:not(.host-pixel) .scream-live-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

body:not(.host-pixel) .scream-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--sm-line);
  background: rgba(30, 8, 10, 0.72);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.host-pixel) .scream-live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 10px #ff5a5a;
  animation: countdown-live-blink 1.2s ease-in-out infinite;
}

body:not(.host-pixel) .scream-live-strip .host-state {
  font-size: clamp(1rem, 2vw, 1.35rem);
}

body:not(.host-pixel) .scream-live-rule {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffc4b0;
}

body:not(.host-pixel) .scream-meter-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr auto 1fr;
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding: 4px 8px;
}

body:not(.host-pixel) .scream-gauge-wrap {
  display: flex;
  justify-content: center;
}

body:not(.host-pixel) .scream-gauge {
  width: min(100%, 340px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}

body:not(.host-pixel) .scream-gauge-track {
  stroke: rgba(255, 255, 255, 0.12);
}

body:not(.host-pixel) .scream-gauge-fill {
  transition: stroke-dasharray 0.12s linear;
}

body:not(.host-pixel) .scream-gauge-needle {
  stroke: #fff6f0;
  stroke-width: 4;
  transform-origin: 120px 120px;
  transition: transform 0.12s linear;
  filter: drop-shadow(0 0 8px rgba(255, 200, 120, 0.55));
}

body:not(.host-pixel) .scream-gauge-hub {
  fill: #fff6f0;
  stroke: var(--sm-accent);
  stroke-width: 3;
}

body:not(.host-pixel) .scream-tube {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: min(52vh, 420px);
}

body:not(.host-pixel) .scream-tube-glass {
  position: relative;
  width: clamp(54px, 7vw, 78px);
  border-radius: 999px;
  border: 2px solid rgba(255, 210, 180, 0.35);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25)),
    rgba(8, 4, 6, 0.75);
  overflow: hidden;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.45),
    0 12px 32px rgba(0, 0, 0, 0.4);
}

body:not(.host-pixel) .scream-tube-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, #ff4d4d 0%, #ffd84a 45%, #3dff7a 100%);
  box-shadow: 0 0 28px rgba(255, 90, 60, 0.45);
  transition: height 0.12s linear;
}

body:not(.host-pixel) .scream-tube-peak {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  bottom: 0%;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transition: bottom 0.18s ease-out;
  z-index: 2;
}

body:not(.host-pixel) .scream-tube-leds {
  position: absolute;
  inset: 8px 10px;
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  z-index: 1;
  pointer-events: none;
}

body:not(.host-pixel) .scream-led {
  flex: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.35;
  transition: opacity 0.1s linear, background 0.1s linear;
}

body:not(.host-pixel) .scream-led.on {
  opacity: 1;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 8px rgba(255, 220, 160, 0.55);
}

body:not(.host-pixel) .scream-tube-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 0.78rem;
  color: rgba(255, 210, 190, 0.7);
  padding: 4px 0;
}

body:not(.host-pixel) .scream-readout {
  text-align: center;
}

body:not(.host-pixel) .scream-readout-kicker {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffc4b0;
}

body:not(.host-pixel) .scream-readout-value {
  margin: 4px 0 0;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 1;
  color: #3dff7a;
  text-shadow:
    0 0 10px rgba(61, 255, 122, 0.45),
    0 0 28px rgba(61, 255, 122, 0.22);
}

body:not(.host-pixel) .host-scream[data-band='roaring'] .scream-readout-value,
body:not(.host-pixel) .host-scream[data-band='deafening'] .scream-readout-value {
  color: #ffd84a;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.5);
}

body:not(.host-pixel) .host-scream[data-band='legendary'] .scream-readout-value {
  color: #ff5a5a;
  text-shadow: 0 0 16px rgba(255, 80, 80, 0.65);
  animation: scream-pulse 0.55s ease-in-out infinite;
}

@keyframes scream-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

body:not(.host-pixel) .scream-readout-label {
  margin: 6px 0 0;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  letter-spacing: 0.08em;
  color: #fff6f0;
}

body:not(.host-pixel) .scream-readout-peak {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: #ffc4b0;
}

body:not(.host-pixel) .scream-readout-peak strong {
  font-family: "Share Tech Mono", "Courier New", monospace;
  color: var(--sm-gold);
  font-size: 1.15rem;
}

body:not(.host-pixel) .scream-winner-line {
  margin: 0;
  min-height: 1.2em;
  text-align: center;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 800;
  color: var(--sm-gold);
}

body:not(.host-pixel) .scream-board {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(560px, 100%);
  display: grid;
  gap: 5px;
}

body:not(.host-pixel) .scream-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  border-radius: 12px;
  background: rgba(24, 8, 10, 0.72);
  border: 1px solid rgba(255, 120, 90, 0.25);
  font-size: clamp(0.9rem, 1.7vw, 1.1rem);
}

body:not(.host-pixel) .scream-entry.winner {
  border-color: rgba(255, 216, 74, 0.7);
  background: rgba(80, 40, 10, 0.55);
  color: #fff2b0;
}

body:not(.host-pixel) .scream-action-panel,
body:not(.host-pixel) .scream-footer-tag {
  margin: 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffd0c0;
}

body:not(.host-pixel) .scream-connected {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--sm-line);
  background: var(--sm-panel);
  text-align: center;
  font-size: 0.9rem;
}

body:not(.host-pixel) .scream-status-big {
  margin: 0;
  font-family: "Bebas Neue", "Impact", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.04em;
  color: #fff6f0;
}

body:not(.host-pixel) .scream-status-copy,
body:not(.host-pixel) .scream-side-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #ffc4b0;
}

body:not(.host-pixel) .scream-side-prize {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--sm-gold);
}

@media (max-width: 980px) {
  body:not(.host-pixel) .scream-meter-stage {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  body:not(.host-pixel) .scream-tube {
    height: 220px;
  }
}

.scream-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.scream-phone-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.scream-phone-meter {
  width: min(100%, 260px);
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border: 1px solid var(--line);
}

.scream-phone-meter > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3dff7a, #ffd84a, #ff4d4d);
  transition: width 0.08s linear;
}

.scream-phone-level {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.scream-mic-btn {
  width: min(100%, 240px);
  min-height: 56px;
}

.scream-phone-result {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

/* —— Name That Tune (host TV shell) —— */
body[data-host-mode='tune'] .host-tune {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-tune {
  --nt-line: rgba(80, 220, 200, 0.4);
  --nt-panel: linear-gradient(160deg, rgba(8, 22, 28, 0.88), rgba(4, 10, 16, 0.92));
  --nt-accent: #3ecfbf;
  --nt-gold: #f0c14a;
  --nt-warm: #ff8a5c;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
  color: #e8fff9;
}

body:not(.host-pixel) .tune-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .tune-show-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  filter: saturate(1.15) contrast(1.06) brightness(0.68) hue-rotate(160deg);
}

body:not(.host-pixel) .tune-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 10, 14, 0.84) 0%, transparent 16%, transparent 84%, rgba(2, 10, 14, 0.84) 100%),
    linear-gradient(180deg, rgba(2, 8, 12, 0.3) 0%, transparent 36%, rgba(2, 6, 10, 0.65) 100%),
    radial-gradient(ellipse 55% 42% at 50% 40%, rgba(62, 207, 191, 0.22), transparent 72%);
}

body:not(.host-pixel) .host-tune.is-playing .tune-show-bg::after {
  background:
    linear-gradient(90deg, rgba(2, 10, 14, 0.78) 0%, transparent 16%, transparent 84%, rgba(2, 10, 14, 0.78) 100%),
    radial-gradient(ellipse 60% 48% at 50% 42%, rgba(240, 193, 74, 0.28), transparent 70%);
}

body:not(.host-pixel) .tune-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .tune-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

body:not(.host-pixel) .tune-brand-lockup {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}

body:not(.host-pixel) .tune-brand-logo {
  width: min(100%, 180px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

body:not(.host-pixel) .tune-panel-box {
  border: 1px solid var(--nt-line);
  border-radius: 16px;
  background: var(--nt-panel);
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

body:not(.host-pixel) .tune-panel-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 255, 249, 0.72);
  display: flex;
  align-items: center;
  gap: 8px;
}

body:not(.host-pixel) .tune-panel-title > span { color: var(--nt-accent); }

body:not(.host-pixel) .tune-howto {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body:not(.host-pixel) .tune-howto li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px 10px;
  align-items: start;
}

body:not(.host-pixel) .tune-howto li > span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  background: var(--nt-accent);
  color: #042018;
}

body:not(.host-pixel) .tune-howto b {
  font-size: 0.95rem;
  line-height: 1.2;
}

body:not(.host-pixel) .tune-howto small {
  grid-column: 2;
  color: rgba(232, 255, 249, 0.62);
  font-size: 0.78rem;
}

body:not(.host-pixel) .tune-join-panel { text-align: center; }

body:not(.host-pixel) .tune-qr {
  width: min(100%, 160px);
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  margin: 0 auto 8px;
}

body:not(.host-pixel) .tune-join-url,
body:not(.host-pixel) .tune-join-code {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(232, 255, 249, 0.78);
}

body:not(.host-pixel) .tune-join-code strong {
  color: var(--nt-gold);
  letter-spacing: 0.08em;
}

body:not(.host-pixel) .tune-main-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  text-align: center;
  padding: 4px 8px;
}

body:not(.host-pixel) .tune-marquee { margin-bottom: 2px; }

body:not(.host-pixel) .tune-title {
  margin: 0;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  letter-spacing: 0.06em;
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .tune-title-ribbon {
  margin: 6px 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  color: var(--nt-gold);
  text-transform: uppercase;
}

body:not(.host-pixel) .tune-live-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: min(100%, 720px);
}

body:not(.host-pixel) .tune-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 255, 249, 0.85);
}

body:not(.host-pixel) .tune-live-badge > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nt-accent);
  box-shadow: 0 0 10px var(--nt-accent);
  animation: tune-pulse 1.2s ease-in-out infinite;
}

body:not(.host-pixel) .host-tune.is-playing .tune-live-badge > i {
  background: var(--nt-warm);
  box-shadow: 0 0 12px var(--nt-warm);
}

@keyframes tune-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

body:not(.host-pixel) .tune-live-rule {
  font-size: 0.85rem;
  color: rgba(232, 255, 249, 0.7);
}

body:not(.host-pixel) .tune-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  width: min(100%, 860px);
  margin: 8px 0;
}

body:not(.host-pixel) .tune-vinyl-wrap {
  position: relative;
  width: clamp(160px, 22vw, 240px);
  aspect-ratio: 1;
}

body:not(.host-pixel) .tune-vinyl {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a1a1a 0 18%, transparent 19%),
    repeating-radial-gradient(circle at 50% 50%, #0a0a0a 0 2px, #151515 3px, #0c0c0c 4px);
  box-shadow:
    0 0 0 6px rgba(62, 207, 191, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(0, 0, 0, 0.65);
  position: relative;
  transition: transform 0.4s ease;
}

body:not(.host-pixel) .host-tune.is-playing .tune-vinyl {
  animation: tune-spin 3.6s linear infinite;
}

@keyframes tune-spin {
  to { transform: rotate(360deg); }
}

body:not(.host-pixel) .tune-vinyl-label {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: linear-gradient(145deg, #f0c14a, #c4782a);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

body:not(.host-pixel) .tune-vinyl-mark {
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #2a1608;
  font-size: 0.95rem;
}

body:not(.host-pixel) .tune-eq {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  opacity: 0.35;
}

body:not(.host-pixel) .host-tune.is-playing .tune-eq {
  opacity: 1;
}

body:not(.host-pixel) .tune-eq > i {
  display: block;
  width: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--nt-gold), var(--nt-accent));
  height: 30%;
}

body:not(.host-pixel) .host-tune.is-playing .tune-eq > i {
  animation: tune-eq 0.85s ease-in-out infinite;
}

body:not(.host-pixel) .host-tune.is-playing .tune-eq > i:nth-child(2) { animation-delay: 0.08s; }
body:not(.host-pixel) .host-tune.is-playing .tune-eq > i:nth-child(3) { animation-delay: 0.16s; }
body:not(.host-pixel) .host-tune.is-playing .tune-eq > i:nth-child(4) { animation-delay: 0.04s; }
body:not(.host-pixel) .host-tune.is-playing .tune-eq > i:nth-child(5) { animation-delay: 0.22s; }
body:not(.host-pixel) .host-tune.is-playing .tune-eq > i:nth-child(6) { animation-delay: 0.12s; }
body:not(.host-pixel) .host-tune.is-playing .tune-eq > i:nth-child(7) { animation-delay: 0.18s; }
body:not(.host-pixel) .host-tune.is-playing .tune-eq > i:nth-child(8) { animation-delay: 0.06s; }

@keyframes tune-eq {
  0%, 100% { height: 28%; }
  50% { height: 100%; }
}

body:not(.host-pixel) .tune-answer-plate {
  border: 1px solid var(--nt-line);
  border-radius: 20px;
  background: var(--nt-panel);
  padding: 22px 26px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

body:not(.host-pixel) .host-tune.is-revealed .tune-answer-plate {
  transform: scale(1.02);
  box-shadow: 0 20px 48px rgba(240, 193, 74, 0.22);
  border-color: rgba(240, 193, 74, 0.55);
}

body:not(.host-pixel) .tune-answer-kicker {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nt-accent);
}

body:not(.host-pixel) .tune-answer-title {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

body:not(.host-pixel) .tune-answer-artist {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(232, 255, 249, 0.72);
}

body:not(.host-pixel) .tune-winner-line {
  margin: 0;
  min-height: 1.4em;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--nt-gold);
}

body:not(.host-pixel) .tune-board {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  width: min(100%, 820px);
  max-height: 22vh;
  overflow: auto;
}

body:not(.host-pixel) .tune-entry {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(80, 220, 200, 0.22);
  background: rgba(4, 16, 20, 0.55);
  font-size: 0.9rem;
}

body:not(.host-pixel) .tune-entry.winner {
  border-color: rgba(240, 193, 74, 0.65);
  background: rgba(240, 193, 74, 0.12);
}

body:not(.host-pixel) .tune-entry.correct span:last-child {
  color: var(--nt-accent);
}

body:not(.host-pixel) .tune-action-panel {
  margin: 4px 0 0;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: rgba(232, 255, 249, 0.9);
}

body:not(.host-pixel) .tune-footer-tag {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(232, 255, 249, 0.65);
}

body:not(.host-pixel) .tune-connected {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--nt-line);
  background: var(--nt-panel);
  text-align: center;
  font-size: 0.9rem;
}

body:not(.host-pixel) .tune-status-big {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--nt-gold);
}

body:not(.host-pixel) .tune-status-copy,
body:not(.host-pixel) .tune-side-meta {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: rgba(232, 255, 249, 0.68);
}

body:not(.host-pixel) .tune-side-prize {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  body:not(.host-pixel) .tune-tv-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  body:not(.host-pixel) .tune-sidebar { display: none; }
  body:not(.host-pixel) .tune-stage {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* Name That Tune — phone */
.tune-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.tune-phone-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.tune-guess-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tune-phone-result {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

/* —— Fruit Machine (host TV shell) —— */
body[data-host-mode='fruit'] .host-fruit {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-fruit {
  --fm-line: rgba(255, 190, 70, 0.42);
  --fm-panel: linear-gradient(160deg, rgba(28, 14, 8, 0.88), rgba(8, 4, 6, 0.92));
  --fm-accent: #ffb84a;
  --fm-gold: #ffe08a;
  --fm-ruby: #ff5c6a;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
  color: #fff6e8;
}

body:not(.host-pixel) .fruit-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .fruit-show-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  filter: saturate(1.2) contrast(1.08) brightness(0.68) hue-rotate(-18deg);
}

body:not(.host-pixel) .fruit-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 4, 2, 0.84) 0%, transparent 16%, transparent 84%, rgba(12, 4, 2, 0.84) 100%),
    linear-gradient(180deg, rgba(10, 4, 2, 0.3) 0%, transparent 36%, rgba(6, 2, 2, 0.65) 100%),
    radial-gradient(ellipse 55% 42% at 50% 40%, rgba(255, 140, 60, 0.24), transparent 72%);
}

body:not(.host-pixel) .fruit-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .fruit-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

body:not(.host-pixel) .fruit-brand-logo {
  width: min(100%, 180px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  display: block;
  margin: 0 auto;
}

body:not(.host-pixel) .fruit-panel-box {
  border: 1px solid var(--fm-line);
  border-radius: 16px;
  background: var(--fm-panel);
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

body:not(.host-pixel) .fruit-panel-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 246, 232, 0.72);
  display: flex;
  align-items: center;
  gap: 8px;
}

body:not(.host-pixel) .fruit-panel-title > span { color: var(--fm-accent); }

body:not(.host-pixel) .fruit-howto {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body:not(.host-pixel) .fruit-howto li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px 10px;
}

body:not(.host-pixel) .fruit-howto li > span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--fm-accent);
  color: #3a2208;
}

body:not(.host-pixel) .fruit-howto small {
  grid-column: 2;
  color: rgba(255, 246, 232, 0.62);
  font-size: 0.78rem;
}

body:not(.host-pixel) .fruit-join-panel { text-align: center; }

body:not(.host-pixel) .fruit-qr {
  width: min(100%, 160px);
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  margin: 0 auto 8px;
}

body:not(.host-pixel) .fruit-join-url,
body:not(.host-pixel) .fruit-join-code {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 246, 232, 0.78);
}

body:not(.host-pixel) .fruit-join-code strong {
  color: var(--fm-gold);
  letter-spacing: 0.08em;
}

body:not(.host-pixel) .fruit-main-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  text-align: center;
  padding: 4px 8px;
}

body:not(.host-pixel) .fruit-title {
  margin: 0;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  letter-spacing: 0.06em;
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .fruit-title-ribbon {
  margin: 6px 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  color: var(--fm-gold);
  text-transform: uppercase;
}

body:not(.host-pixel) .fruit-live-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: min(100%, 720px);
}

body:not(.host-pixel) .fruit-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.host-pixel) .fruit-live-badge > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fm-ruby);
  box-shadow: 0 0 10px var(--fm-ruby);
  animation: fruit-pulse 1.2s ease-in-out infinite;
}

@keyframes fruit-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* Reel strip mechanics (all host themes): 3 visible rows, strip scrolls in Y. */
.fruit-reel-window {
  position: relative;
  aspect-ratio: 0.68;
  overflow: hidden;
  background: #fff;
}

.fruit-reel-strip {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--count, 3) * 100% / 3);
  will-change: transform;
}

.fruit-cell {
  height: calc(100% / var(--count, 3));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fruit-sym {
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  line-height: 1;
}

.fruit-sym-art {
  display: block;
  width: 90%;
  height: 96%;
  object-fit: contain;
  mix-blend-mode: multiply;
  user-select: none;
  pointer-events: none;
}

.fruit-sym-bar {
  width: 92%;
}

.fruit-reel.is-spinning .fruit-reel-strip {
  filter: blur(3px);
}

/* ── Vegas cabinet (non-pixel themes) ── */
body:not(.host-pixel) .fruit-machine {
  position: relative;
  width: min(100%, 860px, calc((100dvh - 300px) * 1.02));
  margin: 18px 0 6px;
  padding-right: 60px;
  box-sizing: border-box;
}

body:not(.host-pixel) .fruit-cabinet {
  position: relative;
  padding: 0 24px 18px;
  border-radius: 26px 26px 18px 18px;
  background:
    radial-gradient(130% 50% at 50% 34%, rgba(255, 40, 110, 0.18), transparent 70%),
    linear-gradient(90deg, #07070a 0%, #1b1822 9%, #2b2734 50%, #1b1822 91%, #07070a 100%);
  box-shadow:
    0 0 0 2px #eceef1,
    0 0 0 5px #6b7079,
    0 0 0 7px #d4d7dc,
    0 0 0 9px #1a1b1f,
    0 40px 80px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Neon tube around the cabinet */
body:not(.host-pixel) .fruit-cabinet::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 40px 40px 30px 30px;
  border: 3px solid #ff4fb0;
  box-shadow:
    0 0 10px #ff4fb0,
    0 0 28px rgba(255, 79, 176, 0.65),
    inset 0 0 10px rgba(255, 79, 176, 0.7);
  pointer-events: none;
  animation: fruit-neon-hum 5s linear infinite;
}

/* Chrome side pillars */
body:not(.host-pixel) .fruit-cabinet::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 18px;
  left: 7px;
  right: 7px;
  pointer-events: none;
  background:
    linear-gradient(90deg, #6f747d, #f7f8fa 45%, #9ea3ab 70%, #4f545c) left / 9px 100% no-repeat,
    linear-gradient(90deg, #4f545c, #9ea3ab 30%, #f7f8fa 55%, #6f747d) right / 9px 100% no-repeat;
  border-radius: 4px;
}

@keyframes fruit-neon-hum {
  0%, 46%, 49%, 52%, 100% { opacity: 1; }
  47% { opacity: 0.45; }
  50% { opacity: 0.7; }
}

body:not(.host-pixel) .fruit-machine[data-win='win'] .fruit-cabinet::before {
  animation: fruit-neon-flash 0.3s steps(1) infinite;
}

body:not(.host-pixel) .fruit-machine[data-win='jackpot'] .fruit-cabinet::before {
  animation: fruit-neon-flash 0.22s steps(1) infinite, fruit-neon-rainbow 1.2s linear infinite;
}

@keyframes fruit-neon-flash {
  50% {
    border-color: #ffd84a;
    box-shadow: 0 0 14px #ffd84a, 0 0 40px rgba(255, 216, 74, 0.8), inset 0 0 12px rgba(255, 216, 74, 0.8);
  }
}

@keyframes fruit-neon-rainbow {
  to { filter: hue-rotate(360deg); }
}

/* Illuminated topper sign */
body:not(.host-pixel) .fruit-topper {
  position: relative;
  z-index: 1;
  margin: -14px -30px 14px;
  aspect-ratio: 3;
  border-radius: 24px 24px 10px 10px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 2px #2a2b30,
    0 8px 0 #050507,
    0 14px 28px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(255, 190, 60, 0.25);
}

body:not(.host-pixel) .fruit-topper-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: fruit-topper-glow 2.6s ease-in-out infinite;
}

body:not(.host-pixel) .fruit-topper-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 48%, transparent 58%);
  background-size: 260% 100%;
  mix-blend-mode: screen;
  animation: fruit-sheen 5s ease-in-out infinite;
}

@keyframes fruit-topper-glow {
  0%, 100% { filter: brightness(1) saturate(1.05); }
  50% { filter: brightness(1.14) saturate(1.18); }
}

@keyframes fruit-sheen {
  0% { background-position: 160% 0; }
  55%, 100% { background-position: -60% 0; }
}

body:not(.host-pixel) .fruit-machine[data-spinning='true'] .fruit-topper-art {
  animation-duration: 0.7s;
}

body:not(.host-pixel) .fruit-machine[data-spinning='true'] .fruit-topper-sheen {
  animation-duration: 1.2s;
}

body:not(.host-pixel) .fruit-machine[data-win='win'] .fruit-topper-art,
body:not(.host-pixel) .fruit-machine[data-win='jackpot'] .fruit-topper-art {
  animation: fruit-topper-strobe 0.28s steps(1) infinite;
}

@keyframes fruit-topper-strobe {
  0% { filter: brightness(1.35) saturate(1.3); }
  50% { filter: brightness(0.9) saturate(1); }
}

/* LED credit meters */
body:not(.host-pixel) .fruit-leds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, #040406, #121217);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.95),
    0 0 0 2px #2c2c34,
    0 1px 0 3px rgba(255, 255, 255, 0.07);
}

body:not(.host-pixel) .fruit-led {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 6px 5px;
  border-radius: 8px;
  background: radial-gradient(120% 120% at 50% 0%, #1c0506, #070102 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body:not(.host-pixel) .fruit-led-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8f95a3;
}

body:not(.host-pixel) .fruit-led-value {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: #ff2a1f;
  text-shadow: 0 0 6px #ff2a1f, 0 0 16px rgba(255, 42, 31, 0.5);
  font-variant-numeric: tabular-nums;
}

body:not(.host-pixel) .fruit-led-win .fruit-led-value {
  color: #3dff74;
  text-shadow: 0 0 6px #3dff74, 0 0 16px rgba(61, 255, 116, 0.5);
}

body:not(.host-pixel) .fruit-machine[data-win='win'] .fruit-led-win,
body:not(.host-pixel) .fruit-machine[data-win='jackpot'] .fruit-led-win {
  animation: fruit-led-flash 0.3s steps(1) infinite;
}

@keyframes fruit-led-flash {
  50% { box-shadow: inset 0 0 0 2px #3dff74, 0 0 14px rgba(61, 255, 116, 0.6); }
}

/* Chrome reel bezel + glass */
body:not(.host-pixel) .fruit-reel-bay {
  position: relative;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    #fbfcfd 0%,
    #c3c7ce 10%,
    #727780 38%,
    #dadde2 52%,
    #8c919a 74%,
    #eef0f3 100%
  );
  box-shadow:
    0 0 0 2px #1d1e22,
    0 10px 22px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .fruit-machine-chrome {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  border: none;
  border-radius: 12px;
  background: #050507;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 1), 0 1px 0 rgba(255, 255, 255, 0.6);
}

body:not(.host-pixel) .fruit-reel-window {
  aspect-ratio: 1;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}

/* Curved-drum shading over each reel */
body:not(.host-pixel) .fruit-reel-window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.3)),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.32) 14%,
      rgba(0, 0, 0, 0) 32%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(0, 0, 0, 0) 68%,
      rgba(0, 0, 0, 0.32) 86%,
      rgba(0, 0, 0, 0.82) 100%
    );
}

body:not(.host-pixel) .fruit-glass {
  position: absolute;
  inset: 18px;
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  background:
    linear-gradient(162deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 20%, transparent 21%),
    linear-gradient(162deg, transparent 72%, rgba(255, 255, 255, 0.07) 73%, transparent 90%);
}

body:not(.host-pixel) .fruit-reel.is-landed .fruit-reel-strip {
  animation: fruit-reel-clunk 0.26s ease-out;
}

@keyframes fruit-reel-clunk {
  0% { translate: 0 3%; }
  60% { translate: 0 -1%; }
  100% { translate: 0 0; }
}

body:not(.host-pixel) .fruit-payline {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  z-index: 2;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 2%, rgba(255, 30, 60, 0.9) 5%, rgba(255, 30, 60, 0.9) 95%, transparent 98%);
  box-shadow: 0 0 8px rgba(255, 30, 60, 0.8);
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body:not(.host-pixel) .fruit-payline-tab {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  filter: drop-shadow(0 0 4px rgba(255, 34, 56, 0.9));
}

body:not(.host-pixel) .fruit-payline-tab:first-child {
  border-left: 12px solid #ff2238;
  margin-left: -6px;
}

body:not(.host-pixel) .fruit-payline-tab:last-child {
  border-right: 12px solid #ff2238;
  margin-right: -6px;
}

body:not(.host-pixel) .fruit-machine[data-win='win'] .fruit-payline,
body:not(.host-pixel) .fruit-machine[data-win='jackpot'] .fruit-payline {
  height: 4px;
  background: #ffe14a;
  box-shadow: 0 0 18px 4px rgba(255, 225, 74, 0.9);
  animation: fruit-payline-flash 0.3s steps(1) infinite;
}

body:not(.host-pixel) .fruit-machine[data-win='win'] .fruit-payline-tab,
body:not(.host-pixel) .fruit-machine[data-win='jackpot'] .fruit-payline-tab {
  border-left-color: #ffe14a;
  border-right-color: #ffe14a;
}

@keyframes fruit-payline-flash {
  50% { opacity: 0.35; }
}

body:not(.host-pixel) .fruit-machine[data-win='win'] .fruit-cell[data-row='1'] .fruit-sym,
body:not(.host-pixel) .fruit-machine[data-win='jackpot'] .fruit-cell[data-row='1'] .fruit-sym {
  animation: fruit-sym-pop 0.5s ease-in-out infinite alternate;
}

@keyframes fruit-sym-pop {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

body:not(.host-pixel) .fruit-payout-line {
  margin: 14px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #040406, #101015);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 0 2px #2c2c34;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffbf2e;
  text-shadow: 0 0 6px rgba(255, 191, 46, 0.8);
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button deck + coin tray */
body:not(.host-pixel) .fruit-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2c2933, #111015);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px #09090c;
}

body:not(.host-pixel) .fruit-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 120px;
  padding: 8px 10px 7px;
  border-radius: 8px;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  color: #3a2200;
  background: radial-gradient(130% 100% at 50% 15%, #fffbe2, #ffd84a 42%, #e39600 100%);
  box-shadow:
    0 0 0 2px #d9dce1,
    0 0 0 4px #5b5f67,
    0 5px 0 4px #1d1e22,
    0 0 18px rgba(255, 200, 60, 0.5);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.2s;
}

body:not(.host-pixel) .fruit-btn-start {
  flex-grow: 1.4;
  max-width: 150px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  background: radial-gradient(130% 100% at 50% 15%, #d6ffe0, #31e86c 42%, #0a8a30 100%);
  box-shadow:
    0 0 0 2px #d9dce1,
    0 0 0 4px #5b5f67,
    0 5px 0 4px #1d1e22,
    0 0 22px rgba(49, 232, 108, 0.6);
  animation: fruit-start-pulse 1.6s ease-in-out infinite;
}

@keyframes fruit-start-pulse {
  50% { filter: brightness(1.18); }
}

body:not(.host-pixel) .fruit-machine[data-spinning='true'] .fruit-btn-hold {
  filter: brightness(0.55) saturate(0.6);
}

body:not(.host-pixel) .fruit-machine[data-spinning='true'] .fruit-btn-start {
  animation: none;
  transform: translateY(4px);
  box-shadow:
    0 0 0 2px #d9dce1,
    0 0 0 4px #5b5f67,
    0 1px 0 4px #1d1e22,
    0 0 30px rgba(49, 232, 108, 0.9);
}

body:not(.host-pixel) .fruit-tray {
  margin: 16px auto 0;
  width: 50%;
  height: 26px;
  border-radius: 4px 4px 22px 22px;
  background: linear-gradient(180deg, #060608 0%, #26282d 40%, #b9bdc4 82%, #f2f3f5 100%);
  box-shadow: 0 0 0 2px #8b9099, 0 0 0 4px #1d1e22, inset 0 8px 10px rgba(0, 0, 0, 0.9);
  display: grid;
  place-items: center;
}

body:not(.host-pixel) .fruit-tray > span {
  width: 28%;
  height: 4px;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Chrome pull lever */
body:not(.host-pixel) .fruit-lever {
  position: absolute;
  right: 0;
  top: 34%;
  width: 60px;
  height: 44%;
}

body:not(.host-pixel) .fruit-lever-base {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 78px;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(180deg, #f7f8fa 0%, #b3b7bf 30%, #5a5f68 52%, #9ea3ab 70%, #e3e5e9 100%);
  box-shadow: 0 0 0 2px #1d1e22, 0 8px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 #fff;
}

body:not(.host-pixel) .fruit-lever-base::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #ffffff, #9ea3ab 55%, #3f434a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

body:not(.host-pixel) .fruit-lever-arm {
  position: absolute;
  left: 12px;
  bottom: 39px;
  width: 12px;
  height: 82%;
  border-radius: 6px;
  background: linear-gradient(90deg, #4b5058 0%, #c7cbd2 28%, #ffffff 40%, #a9aeb6 60%, #42464d 100%);
  box-shadow: 3px 2px 6px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 100%;
  transform: rotate(7deg);
}

body:not(.host-pixel) .fruit-lever-knob {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at 34% 28%,
    #ffffff 0 5%,
    #ffb0b8 10%,
    #ef1d38 36%,
    #a3001a 72%,
    #4a0009 100%
  );
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(255, 40, 70, 0.45),
    inset 0 -4px 8px rgba(0, 0, 0, 0.35);
}

body:not(.host-pixel) .fruit-lever.is-pulled .fruit-lever-arm {
  animation: fruit-lever-pull 0.7s ease-in-out;
}

@keyframes fruit-lever-pull {
  0% { transform: rotate(7deg) scaleY(1); }
  40% { transform: rotate(7deg) scaleY(-0.35); }
  100% { transform: rotate(7deg) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.host-pixel) .fruit-cabinet::before,
  body:not(.host-pixel) .fruit-topper-art,
  body:not(.host-pixel) .fruit-topper-sheen,
  body:not(.host-pixel) .fruit-btn-start,
  body:not(.host-pixel) .fruit-lever.is-pulled .fruit-lever-arm,
  body:not(.host-pixel) .fruit-machine[data-win] .fruit-cell .fruit-sym {
    animation: none !important;
  }
}

body:not(.host-pixel) .fruit-winner-line {
  margin: 0;
  min-height: 1.3em;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fm-accent);
}

body:not(.host-pixel) .fruit-board {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  width: min(100%, 820px);
  max-height: 18vh;
  overflow: auto;
}

body:not(.host-pixel) .fruit-entry {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 184, 74, 0.25);
  background: rgba(20, 8, 4, 0.55);
  font-size: 0.9rem;
}

body:not(.host-pixel) .fruit-entry.winner {
  border-color: rgba(255, 224, 138, 0.65);
  background: rgba(255, 184, 74, 0.14);
}

body:not(.host-pixel) .fruit-paytable {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

body:not(.host-pixel) .fruit-paytable li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
}

body:not(.host-pixel) .fruit-action-panel {
  margin: 4px 0 0;
  font-size: 1.05rem;
}

body:not(.host-pixel) .fruit-footer-tag {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 246, 232, 0.65);
}

body:not(.host-pixel) .fruit-connected {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--fm-line);
  background: var(--fm-panel);
  text-align: center;
}

body:not(.host-pixel) .fruit-status-big {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--fm-gold);
}

body:not(.host-pixel) .fruit-status-copy {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 246, 232, 0.68);
}

@media (max-width: 980px) {
  body:not(.host-pixel) .fruit-tv-shell {
    grid-template-columns: 1fr;
  }
  body:not(.host-pixel) .fruit-sidebar { display: none; }
}

/* Fruit Machine — phone */
.fruit-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.fruit-phone-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.fruit-phone-reels {
  display: flex;
  gap: 10px;
  font-size: 2.4rem;
  line-height: 1;
}

.fruit-phone-reels > span {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.12);
}

.fruit-spin-btn {
  width: min(100%, 240px);
  min-height: 64px;
  border: none;
  border-radius: 18px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3a2208;
  background: linear-gradient(180deg, #ffd27a, #ff9a3c);
  box-shadow: 0 8px 0 #c45e12;
}

.fruit-spin-btn:disabled {
  opacity: 0.55;
  box-shadow: none;
}

.fruit-phone-result {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

/* —— Blankety Blank (host TV shell + phone) —— */
body[data-host-mode='blankety'] .host-top,
body[data-host-mode='blankety'] .host-teams {
  display: none !important;
}

body[data-host-mode='blankety'] .host {
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
  height: 100dvh;
  min-height: 100dvh;
  background: #050512;
  overflow: hidden;
}

body[data-host-mode='blankety'] .host-blankety {
  grid-row: 1;
  height: 100%;
  min-height: 0;
}

body:not(.host-pixel) .host-blankety {
  --bb-line: rgba(255, 180, 90, 0.45);
  --bb-panel: linear-gradient(160deg, rgba(28, 12, 8, 0.88), rgba(8, 4, 12, 0.92));
  --bb-accent: #ff9a3c;
  --bb-gold: #ffd84a;
  --bb-pink: #ff6b9a;
  position: relative;
  z-index: 2;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  isolation: isolate;
  color: #fff6e8;
}

body:not(.host-pixel) .blankety-show-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body:not(.host-pixel) .blankety-show-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  filter: saturate(1.15) contrast(1.08) brightness(0.66) hue-rotate(-8deg);
}

body:not(.host-pixel) .blankety-show-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 4, 8, 0.84) 0%, transparent 16%, transparent 84%, rgba(12, 4, 8, 0.84) 100%),
    linear-gradient(180deg, rgba(10, 4, 8, 0.3) 0%, transparent 36%, rgba(6, 2, 6, 0.65) 100%),
    radial-gradient(ellipse 55% 42% at 50% 40%, rgba(255, 140, 80, 0.22), transparent 72%);
}

body:not(.host-pixel) .blankety-tv-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.24fr) minmax(0, 1fr) minmax(220px, 0.24fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

body:not(.host-pixel) .blankety-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

body:not(.host-pixel) .blankety-brand-logo {
  width: min(100%, 180px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  display: block;
  margin: 0 auto;
}

body:not(.host-pixel) .blankety-panel-box {
  border: 1px solid var(--bb-line);
  border-radius: 16px;
  background: var(--bb-panel);
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

body:not(.host-pixel) .blankety-panel-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 246, 232, 0.72);
  display: flex;
  align-items: center;
  gap: 8px;
}

body:not(.host-pixel) .blankety-panel-title > span { color: var(--bb-accent); }

body:not(.host-pixel) .blankety-howto {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

body:not(.host-pixel) .blankety-howto li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px 10px;
}

body:not(.host-pixel) .blankety-howto li > span {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--bb-accent);
  color: #3a2208;
}

body:not(.host-pixel) .blankety-howto small {
  grid-column: 2;
  color: rgba(255, 246, 232, 0.62);
  font-size: 0.78rem;
}

body:not(.host-pixel) .blankety-join-panel { text-align: center; }

body:not(.host-pixel) .blankety-qr {
  width: min(100%, 160px);
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  margin: 0 auto 8px;
}

body:not(.host-pixel) .blankety-join-url,
body:not(.host-pixel) .blankety-join-code {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 246, 232, 0.78);
}

body:not(.host-pixel) .blankety-join-code strong {
  color: var(--bb-gold);
  letter-spacing: 0.08em;
}

body:not(.host-pixel) .blankety-main-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  text-align: center;
  padding: 4px 8px;
}

body:not(.host-pixel) .blankety-title {
  margin: 0;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  letter-spacing: 0.06em;
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

body:not(.host-pixel) .blankety-title-ribbon {
  margin: 6px 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  color: var(--bb-gold);
  text-transform: uppercase;
}

body:not(.host-pixel) .blankety-live-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: min(100%, 720px);
}

body:not(.host-pixel) .blankety-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.host-pixel) .blankety-live-badge > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bb-pink);
  box-shadow: 0 0 10px var(--bb-pink);
  animation: blankety-pulse 1.2s ease-in-out infinite;
}

@keyframes blankety-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

body:not(.host-pixel) .blankety-live-rule {
  font-size: 0.85rem;
  color: rgba(255, 246, 232, 0.75);
}

body:not(.host-pixel) .blankety-sentence-card {
  width: min(100%, 820px);
  margin: 8px 0;
  padding: 28px 24px;
  border-radius: 24px;
  border: 2px solid rgba(255, 184, 74, 0.5);
  background:
    linear-gradient(180deg, rgba(60, 24, 18, 0.95), rgba(18, 8, 12, 0.98));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body:not(.host-pixel) .blankety-sentence {
  margin: 0;
  font-size: clamp(1.35rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.35;
  color: #fff6e8;
}

body:not(.host-pixel) .blankety-blank {
  display: inline-block;
  min-width: 4ch;
  padding: 0 0.15em;
  color: var(--bb-gold);
  border-bottom: 3px solid var(--bb-gold);
  letter-spacing: 0.06em;
}

body:not(.host-pixel) .host-blankety.is-revealed .blankety-blank {
  color: #fff;
  border-bottom-color: var(--bb-pink);
  animation: blankety-reveal 0.45s ease-out;
}

@keyframes blankety-reveal {
  from { transform: scale(0.85); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

body:not(.host-pixel) .blankety-panel-answer {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bb-gold);
}

body:not(.host-pixel) .blankety-winner-line {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
  color: var(--bb-gold);
}

body:not(.host-pixel) .blankety-board {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 640px);
  display: grid;
  gap: 6px;
  max-height: 28vh;
  overflow: auto;
}

body:not(.host-pixel) .blankety-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  font-weight: 700;
}

body:not(.host-pixel) .blankety-entry.winner {
  border-color: rgba(255, 216, 74, 0.55);
  background: rgba(255, 154, 60, 0.18);
  color: var(--bb-gold);
}

body:not(.host-pixel) .blankety-action-panel {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 246, 232, 0.88);
}

body:not(.host-pixel) .blankety-footer-tag {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 246, 232, 0.6);
}

body:not(.host-pixel) .blankety-connected {
  border-radius: 14px;
  border: 1px solid var(--bb-line);
  background: var(--bb-panel);
  text-align: center;
  padding: 10px 12px;
}

body:not(.host-pixel) .blankety-status-big {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--bb-gold);
}

body:not(.host-pixel) .blankety-status-copy {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 246, 232, 0.68);
}

body:not(.host-pixel) .blankety-side-prize {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bb-gold);
}

body:not(.host-pixel) .blankety-side-meta {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 246, 232, 0.68);
}

@media (max-width: 980px) {
  body:not(.host-pixel) .blankety-tv-shell {
    grid-template-columns: 1fr;
  }
  body:not(.host-pixel) .blankety-sidebar { display: none; }
}

body.host-pixel .blankety-show-bg,
body.host-pixel .blankety-sidebar,
body.host-pixel .blankety-live-strip,
body.host-pixel .blankety-action-panel,
body.host-pixel .blankety-footer-tag,
body.host-pixel .blankety-title-ribbon {
  display: none;
}

body.host-pixel .blankety-tv-shell,
body.host-pixel .blankety-main-stage {
  display: block;
  height: 100%;
}

/* Blankety Blank — phone */
.blankety-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.blankety-phone-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.blankety-phone-sentence {
  margin: 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
}

.blankety-guess-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blankety-phone-result {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

/* —— Timed trial hard-stop wall —— */
.trial-expired-wall {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 55% 40% at 50% 30%, rgba(90, 40, 140, 0.28), transparent 70%),
    rgba(6, 4, 14, 0.94);
  backdrop-filter: blur(14px);
}

.trial-expired-wall.hidden {
  display: none;
}

.trial-expired-card {
  width: min(420px, 100%);
  padding: 36px 32px 28px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #1a1528 0%, #110e1c 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 28px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
  color: #f4f0ea;
}

.trial-expired-kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9a227;
}

.trial-expired-card h1 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4vw, 2.05rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}

.trial-expired-copy {
  margin: 0 0 28px;
  color: rgba(244, 240, 234, 0.72);
  font-size: 1rem;
  line-height: 1.55;
}

.trial-expired-actions {
  display: grid;
  gap: 10px;
}

.trial-expired-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease;
}

.trial-expired-btn:hover {
  filter: brightness(1.06);
}

.trial-expired-btn:active {
  transform: scale(0.985);
}

.trial-expired-btn-primary {
  color: #1a1204 !important;
  background: linear-gradient(180deg, #ffe08a, #f0c14a 55%, #d4a017);
  border: 1px solid rgba(255, 220, 140, 0.55);
  box-shadow: 0 8px 22px rgba(212, 160, 23, 0.28);
}

.trial-expired-btn-secondary {
  color: rgba(244, 240, 234, 0.92) !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.trial-expired-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Kids screen games: never show the join QR lobby over the kids stage. */
body.host-kids-mode .host-lobby,
body[data-host-mode='statues'] .host-lobby,
body[data-host-mode='corners'] .host-lobby,
body[data-host-mode='faces'] .host-lobby,
body[data-host-mode='noises'] .host-lobby,
body[data-host-mode='silly'] .host-lobby,
body[data-host-mode='doors'] .host-lobby,
body[data-host-mode='beat'] .host-lobby,
body[data-host-mode='missing'] .host-lobby,
body[data-host-mode='loud'] .host-lobby,
body[data-host-mode='redblue'] .host-lobby {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* —— Musical Statues (portrait entertainer table) —— */
body[data-host-mode='statues'] .host-top,
body[data-host-mode='statues'] .host-teams,
body[data-host-mode='statues'] .host-lobby,
body[data-host-mode='statues'] #main {
  display: none !important;
}

body[data-host-mode='statues'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='statues'] .host-statues {
  position: absolute;
  inset: 0;
  z-index: 60;
  grid-row: 1;
  height: 100%;
  min-height: 0;
  display: block !important;
}

.host-statues {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #12081f;
}

.statues-show-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 20%, rgba(255, 120, 200, 0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(80, 160, 255, 0.28), transparent 55%),
    linear-gradient(180deg, #2a1450 0%, #12081f 55%, #070312 100%);
}

.statues-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: clamp(16px, 4vh, 36px) clamp(18px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 100%;
  box-sizing: border-box;
  text-align: center;
}

.statues-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.statues-logo {
  width: min(140px, 28vw);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.statues-game-title {
  margin: 0;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffe27a;
}

.statues-ready,
.statues-dance,
.statues-freeze {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 20px);
}

.statues-emoji {
  margin: 0;
  font-size: clamp(5.5rem, 28vw, 10rem);
  line-height: 1;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
  animation: statues-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.statues-emoji-idle {
  font-size: clamp(4.5rem, 22vw, 8rem);
  animation: statues-bob 1.4s ease-in-out infinite;
}

.statues-ready-word,
.statues-dance-word,
.statues-freeze-banner {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.statues-ready-word {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
}

.statues-ready-sub,
.statues-dance-sub,
.statues-pose-hint {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.05rem, 3.6vw, 1.45rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.35;
}

.statues-dance-word {
  font-size: clamp(3.2rem, 14vw, 5.5rem);
  color: #ffe27a;
  text-shadow: 0 0 28px rgba(255, 210, 80, 0.55);
  animation: statues-pulse 0.55s ease-in-out infinite alternate;
}

.statues-notes {
  display: flex;
  gap: clamp(10px, 3vw, 22px);
  font-size: clamp(1.8rem, 7vw, 3rem);
  color: #ff9ad8;
}

.statues-notes span {
  display: inline-block;
  animation: statues-note 0.7s ease-in-out infinite alternate;
}

.statues-notes span:nth-child(2) { animation-delay: 0.1s; color: #7ad7ff; }
.statues-notes span:nth-child(3) { animation-delay: 0.2s; color: #ffe27a; }
.statues-notes span:nth-child(4) { animation-delay: 0.3s; color: #b4ff9a; }
.statues-notes span:nth-child(5) { animation-delay: 0.4s; color: #ffb07a; }

.statues-freeze-banner {
  font-size: clamp(2.4rem, 10vw, 4rem);
  color: #ff6b8a;
  text-shadow: 0 0 24px rgba(255, 80, 120, 0.5);
  animation: statues-flash 0.7s ease-in-out 3;
}

.statues-pose-title {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  max-width: 14ch;
}



.host-statues[data-state='dancing'] .statues-show-bg {
  animation: statues-bg-pulse 1.1s ease-in-out infinite alternate;
}

.host-statues[data-state='freeze'] .statues-show-bg {
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(255, 90, 120, 0.38), transparent 60%),
    linear-gradient(180deg, #3a1028 0%, #140812 60%, #070312 100%);
}

@keyframes statues-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

@keyframes statues-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes statues-note {
  from { transform: translateY(0) rotate(-8deg); opacity: 0.7; }
  to { transform: translateY(-18px) rotate(8deg); opacity: 1; }
}

@keyframes statues-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes statues-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes statues-bg-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.18); }
}

@media (orientation: landscape) and (min-width: 900px) {
  .statues-stage {
    width: min(520px, 42vw);
  }
}

/* Player phone — Musical Statues */
.statues-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 8px 0 4px;
}

.statues-phone-emoji {
  margin: 0;
  font-size: 3.4rem;
  line-height: 1;
}

.statues-phone-prompt {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
}

.statues-phone-hint {
  margin: 0;
  font-size: 0.98rem;
}

.statues-monster-wrap {
  position: relative;
  width: min(68vw, 420px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.statues-monster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  animation: statues-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  background: transparent;
}

.statues-pose-action {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.15rem, 4vw, 1.55rem);
  font-weight: 800;
  color: #ffe27a;
  line-height: 1.25;
}

.statues-monster-wrap .statues-emoji {
  position: absolute;
}

.statues-phone-monster {
  width: min(72vw, 220px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 0;
  margin: 0 auto;
  background: transparent;
}

/* —— Four Corners (kids / portrait) —— */
body[data-host-mode='corners'] .host-top,
body[data-host-mode='corners'] .host-teams,
body[data-host-mode='corners'] .host-lobby,
body[data-host-mode='corners'] #main {
  display: none !important;
}

body[data-host-mode='corners'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='corners'] .host-corners {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-corners {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background: #0a0614;
}

.corners-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.corners-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.corners-logo {
  width: min(120px, 26vw);
  height: auto;
}

.corners-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffe27a;
}

.corners-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 42vh;
}

.corners-cell {
  position: relative;
  border-radius: 22px;
  background: color-mix(in srgb, var(--corner) 78%, #000 22%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  filter: brightness(0.55) saturate(0.85);
}

.corners-cell span {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.corners-cell.is-active {
  filter: brightness(1.15) saturate(1.15);
  transform: scale(1.02);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.55),
    0 0 28px color-mix(in srgb, var(--corner) 65%, transparent);
}

.corners-cell.is-winner {
  filter: brightness(1.2) saturate(1.2);
  animation: corners-win-pulse 0.55s ease-in-out infinite alternate;
}

.corners-banner {
  text-align: center;
  padding: 14px 12px 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--land, #1a1030) 35%, rgba(10, 6, 20, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.corners-banner-kicker {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.corners-banner-main {
  margin: 0;
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--land, #ffe27a);
}

.corners-banner-hint {
  margin: 8px 0 0;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
}

@keyframes corners-win-pulse {
  from { transform: scale(1.02); }
  to { transform: scale(1.06); }
}

.corners-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.corners-phone-swatch {
  width: min(56vw, 160px);
  aspect-ratio: 1;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.corners-phone-prompt {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

.corners-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

/* —— Copy That Face (kids / portrait) —— */
body[data-host-mode='faces'] .host-top,
body[data-host-mode='faces'] .host-teams,
body[data-host-mode='faces'] .host-lobby,
body[data-host-mode='faces'] #main {
  display: none !important;
}

body[data-host-mode='faces'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='faces'] .host-faces {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-faces {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255, 160, 220, 0.28), transparent 60%),
    linear-gradient(180deg, #2a1450 0%, #12081f 55%, #070312 100%);
}

.faces-stage {
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(16px, 4vh, 36px) clamp(18px, 4vw, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: center;
}

.faces-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.faces-logo {
  width: min(120px, 26vw);
  height: auto;
}

.faces-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffe27a;
}

.faces-ready,
.faces-show {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 18px);
}

.faces-ready-emoji {
  margin: 0;
  font-size: clamp(4.5rem, 22vw, 8rem);
  line-height: 1;
  animation: statues-bob 1.4s ease-in-out infinite;
}

.faces-ready-word {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
}

.faces-ready-sub,
.faces-pose-hint {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.faces-freeze-banner {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff9ad8;
  text-shadow: 0 0 22px rgba(255, 120, 200, 0.45);
}

.faces-monster-wrap {
  width: min(72vw, 440px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.faces-monster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  animation: statues-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.faces-emoji {
  margin: 0;
  font-size: clamp(5rem, 26vw, 9rem);
  line-height: 1;
}

.faces-pose-title {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 900;
}

.faces-pose-action {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.1rem, 3.8vw, 1.45rem);
  font-weight: 800;
  color: #ffe27a;
  line-height: 1.25;
}

.faces-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.faces-phone-monster {
  width: min(72vw, 220px);
  aspect-ratio: 1;
  object-fit: contain;
  background: transparent;
}

.faces-phone-emoji {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1;
}

.faces-phone-prompt {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.faces-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

/* —— Guess That Noise (kids / portrait) —— */
body[data-host-mode='noises'] .host-top,
body[data-host-mode='noises'] .host-teams,
body[data-host-mode='noises'] .host-lobby,
body[data-host-mode='noises'] #main {
  display: none !important;
}

body[data-host-mode='noises'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='noises'] .host-noises {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-noises {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 50% at 50% 18%, rgba(120, 220, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #0d2a3a 0%, #07141c 55%, #03080c 100%);
}

.noises-stage {
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(16px, 4vh, 36px) clamp(18px, 4vw, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: center;
}

.noises-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.noises-logo {
  width: min(120px, 26vw);
  height: auto;
}

.noises-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #7fe7ff;
}

.noises-ready,
.noises-playing,
.noises-reveal {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 18px);
}

.noises-ready-emoji,
.noises-mystery-emoji,
.noises-answer-emoji {
  margin: 0;
  font-size: clamp(4.5rem, 22vw, 8rem);
  line-height: 1;
}

.noises-ready-emoji {
  animation: statues-bob 1.4s ease-in-out infinite;
}

.noises-ready-word,
.noises-listen-banner,
.noises-reveal-banner {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.noises-listen-banner {
  color: #7fe7ff;
  text-shadow: 0 0 22px rgba(80, 200, 255, 0.45);
  animation: statues-bob 0.9s ease-in-out infinite;
}

.noises-reveal-banner {
  color: #ffe27a;
}

.noises-ready-sub,
.noises-playing-hint,
.noises-answer-hint {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.noises-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: 64px;
}

.noises-wave span {
  display: block;
  width: 10px;
  border-radius: 999px;
  background: #7fe7ff;
  animation: noises-bar 0.7s ease-in-out infinite;
  height: 24px;
}

.noises-wave span:nth-child(1) { animation-delay: 0s; height: 18px; }
.noises-wave span:nth-child(2) { animation-delay: 0.1s; height: 36px; }
.noises-wave span:nth-child(3) { animation-delay: 0.2s; height: 54px; }
.noises-wave span:nth-child(4) { animation-delay: 0.15s; height: 32px; }
.noises-wave span:nth-child(5) { animation-delay: 0.05s; height: 22px; }

@keyframes noises-bar {
  0%, 100% { transform: scaleY(0.55); opacity: 0.7; }
  50% { transform: scaleY(1.15); opacity: 1; }
}

.noises-answer-emoji {
  animation: statues-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.noises-answer-title {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 900;
}

.noises-answer-action {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.1rem, 3.8vw, 1.45rem);
  font-weight: 800;
  color: #ffe27a;
  line-height: 1.25;
}

.noises-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.noises-phone-emoji {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1;
}

.noises-phone-prompt {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.noises-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

/* —— Silly Wheel (kids / portrait) —— */
body[data-host-mode='silly'] .host-top,
body[data-host-mode='silly'] .host-teams,
body[data-host-mode='silly'] .host-lobby,
body[data-host-mode='silly'] #main {
  display: none !important;
}

body[data-host-mode='silly'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='silly'] .host-silly {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-silly {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 50% at 50% 18%, rgba(255, 180, 80, 0.22), transparent 60%),
    linear-gradient(180deg, #3a1a0d 0%, #1a0c08 55%, #080403 100%);
}

.silly-stage {
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: center;
}

.silly-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.silly-logo {
  width: min(110px, 24vw);
  height: auto;
}

.silly-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffe27a;
}

.silly-wheel-wrap {
  position: relative;
  width: min(78vw, 460px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.silly-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: #ffe27a;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  line-height: 1;
}

.silly-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.4));
}

.silly-banner {
  width: 100%;
  text-align: center;
  padding: 14px 12px 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--land, #ffe27a) 22%, rgba(20, 8, 4, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.silly-banner-kicker {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.silly-banner-main {
  margin: 0;
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--land, #ffe27a);
}

.silly-banner-hint {
  margin: 8px 0 0;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
}

.silly-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.silly-phone-emoji {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1;
}

.silly-phone-prompt {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.silly-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

/* —— Mystery Doors (kids / portrait) —— */
body[data-host-mode='doors'] .host-top,
body[data-host-mode='doors'] .host-teams,
body[data-host-mode='doors'] .host-lobby,
body[data-host-mode='doors'] #main {
  display: none !important;
}

body[data-host-mode='doors'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='doors'] .host-doors {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-doors {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 45% at 50% 12%, rgba(255, 210, 120, 0.2), transparent 58%),
    linear-gradient(180deg, #2a1840 0%, #120a1c 55%, #07040e 100%);
}

.doors-stage {
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: center;
}

.doors-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.doors-logo {
  width: min(110px, 24vw);
  height: auto;
}

.doors-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffe27a;
}

.doors-row {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 14px);
  align-items: stretch;
  min-height: 42vh;
}

.doors-door {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: default;
  position: relative;
  border-radius: 18px 18px 10px 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--door) 88%, #fff 12%), color-mix(in srgb, var(--door) 70%, #000 30%));
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.22),
    0 14px 28px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.25s ease, filter 0.25s ease;
  min-height: 220px;
}

.doors-door.is-focus {
  transform: translateY(-6px) scale(1.03);
  filter: brightness(1.08);
}

.doors-door.is-open {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(180deg, #1a1028, #0c0814);
}

.doors-door-face,
.doors-door-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.doors-door-number {
  font-size: clamp(2rem, 8vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
}

.doors-door-label {
  font-size: clamp(0.95rem, 3vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doors-door-emoji {
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: 1;
  animation: statues-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.doors-banner {
  width: 100%;
  text-align: center;
  padding: 14px 12px 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--land, #ffe27a) 20%, rgba(12, 6, 20, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.doors-banner-kicker {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.doors-banner-main {
  margin: 0;
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--land, #ffe27a);
}

.doors-banner-hint {
  margin: 8px 0 0;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
}

.doors-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.doors-phone-emoji {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1;
}

.doors-phone-prompt {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.doors-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

/* —— Beat the Clock (kids / portrait) —— */
body[data-host-mode='beat'] .host-top,
body[data-host-mode='beat'] .host-teams,
body[data-host-mode='beat'] .host-lobby,
body[data-host-mode='beat'] #main {
  display: none !important;
}

body[data-host-mode='beat'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='beat'] .host-beat {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-beat {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(255, 90, 90, 0.2), transparent 58%),
    linear-gradient(180deg, #3a1018 0%, #14060a 55%, #070204 100%);
}

.beat-stage {
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: center;
}

.beat-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.beat-logo {
  width: min(110px, 24vw);
  height: auto;
}

.beat-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffe27a;
}

.beat-clock-wrap {
  position: relative;
  width: min(68vw, 360px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.beat-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      #ff6b6b calc(var(--beat-pct, 1) * 360deg),
      rgba(255, 255, 255, 0.12) 0
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
}

.beat-ring[data-urgent='1'] {
  animation: beat-pulse 0.55s ease-in-out infinite alternate;
}

@keyframes beat-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

.beat-clock {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(3.4rem, 16vw, 5.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.beat-clock-label {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  font-size: clamp(1rem, 3.4vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.host-beat[data-state='finished'] .beat-clock { color: #7CFC9A; }
.host-beat[data-state='timesup'] .beat-clock { color: #ff8a8a; }

.beat-challenge {
  width: 100%;
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(12, 4, 8, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.beat-challenge-emoji {
  margin: 0 0 6px;
  font-size: clamp(2.8rem, 10vw, 4rem);
  line-height: 1;
}

.beat-challenge-title {
  margin: 0;
  font-size: clamp(1.7rem, 6.5vw, 2.6rem);
  font-weight: 900;
}

.beat-challenge-action {
  margin: 8px 0 0;
  font-size: clamp(1.1rem, 3.8vw, 1.45rem);
  font-weight: 800;
  color: #ffe27a;
}

.beat-challenge-hint {
  margin: 8px 0 0;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.beat-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.beat-phone-clock {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.beat-phone-emoji {
  margin: 0;
  font-size: 2.8rem;
  line-height: 1;
}

.beat-phone-prompt {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.beat-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

/* —— What’s Missing? (kids / portrait) —— */
body[data-host-mode='missing'] .host-top,
body[data-host-mode='missing'] .host-teams,
body[data-host-mode='missing'] .host-lobby,
body[data-host-mode='missing'] #main {
  display: none !important;
}

body[data-host-mode='missing'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='missing'] .host-missing {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-missing {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 45% at 50% 15%, rgba(120, 200, 255, 0.2), transparent 58%),
    linear-gradient(180deg, #10283a 0%, #08141c 55%, #04080c 100%);
}

.missing-stage {
  position: relative;
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: center;
}

.missing-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.missing-logo {
  width: min(110px, 24vw);
  height: auto;
}

.missing-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #7fe7ff;
}

.missing-ready {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.missing-ready-emoji {
  margin: 0;
  font-size: clamp(4.5rem, 22vw, 8rem);
  line-height: 1;
  animation: statues-bob 1.4s ease-in-out infinite;
}

.missing-ready-word {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
}

.missing-ready-sub {
  margin: 0;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.missing-play {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.missing-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 14px);
}

.missing-cell {
  aspect-ratio: 1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}

.missing-cell-emoji {
  font-size: clamp(2.4rem, 10vw, 4rem);
  line-height: 1;
}

.missing-cell.is-gone {
  background: rgba(0, 0, 0, 0.28);
  border-style: dashed;
  opacity: 0.55;
}

.missing-cell.is-gone .missing-cell-emoji {
  opacity: 0;
}

.missing-cell.is-reveal {
  background: color-mix(in srgb, #ffe27a 28%, rgba(0, 0, 0, 0.35));
  border-color: #ffe27a;
  opacity: 1;
  transform: scale(1.04);
  animation: statues-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.missing-cell.is-reveal .missing-cell-emoji {
  opacity: 1;
}

.missing-cell-tag {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe27a;
}

.missing-banner {
  width: 100%;
  padding: 14px 12px 10px;
  border-radius: 18px;
  background: rgba(8, 20, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.missing-banner-kicker {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.missing-banner-main {
  margin: 0;
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  color: #7fe7ff;
}

.missing-banner-hint {
  margin: 8px 0 0;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
}

.missing-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}

.missing-flash.is-on {
  animation: missing-flash 0.6s ease-out both;
}

@keyframes missing-flash {
  0% { opacity: 0; }
  15% { opacity: 0.95; }
  100% { opacity: 0; }
}

.missing-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.missing-phone-emoji {
  margin: 0;
  font-size: 3.2rem;
  line-height: 1;
}

.missing-phone-prompt {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.missing-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

/* —— Quietest / Loudest (kids / portrait) —— */
body[data-host-mode='loud'] .host-top,
body[data-host-mode='loud'] .host-teams,
body[data-host-mode='loud'] .host-lobby,
body[data-host-mode='loud'] #main {
  display: none !important;
}

body[data-host-mode='loud'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='loud'] .host-loud {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-loud {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 45% at 50% 18%, rgba(255, 200, 120, 0.22), transparent 58%),
    linear-gradient(180deg, #2a3a18 0%, #121808 55%, #070904 100%);
}

.host-loud[data-goal='quiet'] {
  background:
    radial-gradient(ellipse 80% 45% at 50% 18%, rgba(160, 210, 255, 0.22), transparent 58%),
    linear-gradient(180deg, #18303a 0%, #0a1418 55%, #04080a 100%);
}

.loud-stage {
  width: min(100%, 720px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: center;
}

.loud-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.loud-logo {
  width: min(110px, 24vw);
  height: auto;
}

.loud-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffe27a;
}

.host-loud[data-goal='quiet'] .loud-game-title {
  color: #9ad8ff;
}

.loud-hero {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.loud-emoji {
  margin: 0;
  font-size: clamp(3.5rem, 16vw, 6rem);
  line-height: 1;
  animation: statues-bob 1.6s ease-in-out infinite;
}

.loud-action {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.2rem, 4.2vw, 1.7rem);
  font-weight: 800;
  color: #ffe27a;
}

.host-loud[data-goal='quiet'] .loud-action {
  color: #9ad8ff;
}

.loud-meter {
  width: min(100%, 420px);
  margin-top: 8px;
}

.loud-meter-track {
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.loud-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7CFC9A, #ffe27a, #ff9f6b);
  transition: width 0.12s linear;
}

.host-loud[data-goal='quiet'] .loud-meter-fill {
  background: linear-gradient(90deg, #9ad8ff, #c9b6ff, #ffb4d9);
}

.loud-bubbles {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 8px;
}

.loud-bubbles span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: transform 0.15s ease, background 0.15s ease;
}

.loud-bubbles[data-level='mid'] span:nth-child(-n+3) {
  background: #ffe27a;
  transform: scale(1.15);
}

.loud-bubbles[data-level='high'] span {
  background: #ff9f6b;
  transform: scale(1.3);
  animation: beat-pulse 0.45s ease-in-out infinite alternate;
}

.loud-level {
  margin: 8px 0 0;
  font-size: clamp(2.8rem, 12vw, 4.4rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.loud-label {
  margin: 0;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 800;
}

.loud-hint {
  margin: 0;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.loud-footer {
  width: 100%;
}

.loud-winner {
  margin: 0 0 8px;
  min-height: 1.4em;
  font-size: clamp(1.1rem, 3.8vw, 1.4rem);
  font-weight: 800;
  color: #ffe27a;
}

.loud-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.loud-board li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  font-weight: 700;
}

.loud-board li.winner {
  background: color-mix(in srgb, #ffe27a 28%, rgba(0, 0, 0, 0.35));
}

.loud-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.loud-phone-emoji {
  margin: 0;
  font-size: 3rem;
  line-height: 1;
}

.loud-phone-prompt {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.loud-phone-hint {
  margin: 0;
  font-size: 0.95rem;
}

.loud-phone-meter {
  width: min(80vw, 260px);
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.loud-phone-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7CFC9A, #ffe27a, #ff9f6b);
}

.loud-phone-level {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* —— Red vs Blue (kids / portrait) —— */
body[data-host-mode='redblue'] .host-top,
body[data-host-mode='redblue'] .host-teams,
body[data-host-mode='redblue'] .host-lobby,
body[data-host-mode='redblue'] #main {
  display: none !important;
}

body[data-host-mode='redblue'] .host {
  display: grid;
  grid-template-rows: 1fr;
  height: 100dvh;
}

body[data-host-mode='redblue'] .host-redblue {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block !important;
}

.host-redblue {
  position: relative;
  z-index: 60;
  display: none;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(30, 80, 200, 0.35), transparent 42%, transparent 58%, rgba(200, 40, 50, 0.35)),
    linear-gradient(180deg, #14081f 0%, #0a0612 100%);
}

.redblue-stage {
  width: min(100%, 920px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: center;
}

.redblue-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.redblue-logo {
  width: min(110px, 24vw);
  height: auto;
}

.redblue-game-title {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  opacity: 0.9;
}

.redblue-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  width: 100%;
}

.redblue-side {
  padding: clamp(16px, 3vh, 28px) 12px;
  border-radius: 22px;
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.redblue-side-blue {
  background: linear-gradient(180deg, #2a6dff, #1238a8);
  box-shadow: 0 12px 40px rgba(30, 80, 220, 0.45);
}

.redblue-side-red {
  background: linear-gradient(180deg, #ff4d5e, #b01222);
  box-shadow: 0 12px 40px rgba(220, 40, 50, 0.45);
}

.redblue-side-label {
  margin: 0 0 8px;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.redblue-side-score {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(4rem, 14vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.redblue-side-count {
  margin: 8px 0 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

.redblue-vs {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: 0.08em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.redblue-challenge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 34rem;
}

.redblue-emoji {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 4.2rem);
  line-height: 1;
}

.redblue-action {
  margin: 0;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
}

.redblue-hint {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  opacity: 0.85;
}

.redblue-banner {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 800;
  color: #ffe27a;
}