/* Beni's Balls Out Bingo — aligned with 4JAKS (4jaks.net) palette */

:root {
  --bg: #0c0a09;
  --text: #f8fafc;
  --muted: rgba(248, 250, 252, 0.65);
  --pink: #ec4899;
  --fuchsia: #d946ef;
  --purple: #a855f7;
  --indigo: #667eea;
  --violet: #764ba2;
  --nav: rgba(10, 5, 15, 0.95);
  --glass: rgba(15, 23, 42, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --shadow-hot: 0 0 60px rgba(236, 72, 153, 0.45);
  --radius: 1rem;
  --font: "League Spartan", system-ui, sans-serif;
  /* Venue / projector numbers — ultra-legible poster weight (warehouse-bingo screen energy) */
  --font-show-num: "Bebas Neue", Impact, "Arial Narrow", system-ui, sans-serif;
  /* Interval break countdown digits only (Zen Dots single-regular; avoid synthetic bold). */
  --font-break-count: "Zen Dots", var(--font-show-num);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--pink);
  text-decoration-thickness: 0.08em;
}

a:hover {
  color: #f472b6;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.hero-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.12) 0%, transparent 52%),
    radial-gradient(circle at 85% 18%, rgba(167, 139, 250, 0.12) 0%, transparent 48%),
    radial-gradient(circle at 45% 45%, rgba(217, 70, 239, 0.08) 0%, transparent 55%);
}

/* Caller: comfortable reading width */
.caller-page {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding:
    max(env(safe-area-inset-top, 0px), 1rem)
    max(env(safe-area-inset-right, 0px), 1rem)
    calc(5.75rem + max(env(safe-area-inset-bottom, 0px), 0.65rem))
    max(env(safe-area-inset-left, 0px), 1rem);
}

/* ---- Caller admin shell (mobile-first) ---- */

.caller-shell {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.caller-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.caller-header__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

.caller-sign-out {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.72);
  text-decoration: none;
}

.caller-sign-out:hover,
.caller-sign-out:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.caller-page--locked {
  min-height: 100vh;
}

.caller-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 2rem);
  padding: 1.5rem 1rem 2rem;
}

.caller-gate__panel {
  width: min(100%, 26rem);
  padding: clamp(1.35rem, 4vw, 1.85rem);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: intro-gate-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.caller-gate__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.caller-gate__title {
  margin: 0.08rem 0 0.65rem;
  font-family: 'Bebas Neue', var(--font);
  font-size: clamp(2rem, 7vw, 2.65rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--text);
}

.caller-gate__hint {
  margin: 0 0 1rem;
  color: rgba(248, 250, 252, 0.78);
  line-height: 1.45;
}

.caller-gate__error {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.32);
  color: #fecaca;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.4;
}

.caller-gate__form {
  display: grid;
  gap: 0.55rem;
}

.caller-gate__label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.caller-gate__input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.28);
  color: #f8fafc;
  font: inherit;
}

.caller-gate__input:focus {
  outline: none;
  border-color: rgba(99, 91, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.14);
}

.caller-gate__submit {
  margin-top: 0.35rem;
}

.caller-gate__foot {
  margin: 0.85rem 0 0;
  line-height: 1.45;
}

.caller-header__brand {
  min-width: 0;
}

.caller-header__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.caller-header__title {
  margin: 0.08rem 0 0;
  font-family: 'Bebas Neue', var(--font);
  font-size: clamp(2rem, 7vw, 2.65rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--text);
}

.caller-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.caller-hero__main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.caller-hero__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.caller-hero__value {
  font-family: 'Bebas Neue', var(--font);
  font-size: clamp(3.35rem, 17vw, 5.25rem);
  line-height: 0.88;
  letter-spacing: 0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.caller-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.45rem;
  flex-shrink: 0;
}

.caller-hero__remaining {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.caller-sync-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.caller-sync-pill--pending {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.12);
  color: rgba(226, 232, 240, 0.9);
}

.caller-sync-pill--live {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.18);
  color: rgba(187, 247, 208, 0.98);
}

.caller-sync-pill--synced {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(59, 130, 246, 0.14);
  color: rgba(191, 219, 254, 0.95);
}

.caller-sync-pill--warn {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.14);
  color: rgba(253, 230, 138, 0.98);
}

.caller-sync-pill--error {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(239, 68, 68, 0.14);
  color: rgba(254, 202, 202, 0.98);
}

.caller-shell .caller-action-status,
.caller-shell .caller-sync-help {
  margin: 0;
}

section.caller-panel,
details.caller-panel {
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

section.caller-panel {
  padding: 1rem 1.05rem;
}

details.caller-panel > .caller-panel__body {
  padding: 0 1.05rem 1rem;
}

.caller-panel__head {
  margin-bottom: 0.75rem;
}

.caller-panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--text);
}

.caller-panel__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

.caller-panel__summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.05rem;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.caller-panel__summary-text {
  min-width: 0;
}

.caller-panel__summary::before {
  content: '+';
  display: inline-block;
  width: 1rem;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}

.caller-setup-badge {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.14);
  color: rgba(187, 247, 208, 0.98);
}

.caller-setup-badge[hidden] {
  display: none !important;
}

details.caller-panel[open] > .caller-panel__summary::before {
  content: '\2013';
}

.caller-panel__summary::-webkit-details-marker {
  display: none;
}

.caller-panel--setup > .caller-panel__body {
  padding-top: 0;
}

.caller-panel--setup .caller-secret-row {
  margin-top: 0;
}

.caller-panel--announce .caller-play-grid,
.caller-panel--room .caller-live-overlays {
  margin-top: 0;
}

.caller-panel--room .caller-break-hint {
  margin: 0.55rem 0 0;
}

.caller-panel--manual .caller-force > label {
  display: none;
}

.caller-panel--manual .caller-force-controls {
  margin-top: 0;
}

.caller-panel--order .caller-order {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.caller-panel--settings .caller-prefs {
  margin-top: 0;
}

.caller-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  max-width: 720px;
  margin: 0 auto;
  padding:
    0.65rem
    max(env(safe-area-inset-right, 0px), 1rem)
    max(env(safe-area-inset-bottom, 0px), 0.65rem)
    max(env(safe-area-inset-left, 0px), 1rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 6, 12, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35);
}

.caller-dock__back,
.caller-dock__next {
  min-height: 3.35rem;
  touch-action: manipulation;
}

.caller-dock__next {
  font-size: 1.08rem;
  letter-spacing: 0.02em;
}

.caller-dock__next--solo {
  grid-column: 1 / -1;
}

.caller-recovery-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.caller-recovery-action__btn {
  width: 100%;
  min-height: 3.1rem;
}

.caller-recovery-action__hint {
  margin: 0.45rem 0 0;
  line-height: 1.45;
}

.caller-recovery-action--danger .caller-recovery-action__hint {
  color: rgba(254, 202, 202, 0.88);
}

.caller-undo-block {
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.caller-undo-btn {
  width: 100%;
  min-height: 3rem;
}

.caller-undo-hint {
  margin: 0.5rem 0 0;
  line-height: 1.45;
  color: rgba(253, 230, 138, 0.92);
}

.caller-undo-hint strong {
  color: rgba(253, 230, 138, 1);
  font-weight: 800;
}

/* Audience screen: full-bleed for TV / projector */
.screen-page {
  position: relative;
  z-index: 1;
  margin: 0;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  padding:
    max(env(safe-area-inset-top, 0px), clamp(0.5rem, 1.2vmin, 1rem))
    max(env(safe-area-inset-right, 0px), clamp(0.75rem, 2.2vmin, 2rem))
    max(env(safe-area-inset-bottom, 0px), clamp(0.5rem, 1.2vmin, 1rem))
    max(env(safe-area-inset-left, 0px), clamp(0.75rem, 2.2vmin, 2rem));
  display: flex;
  flex-direction: column;
}

.screen-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Full-viewport ambient bingo clip — fixed so .screen-page padding does not inset the footage. */
.screen-page .screen-bg-video-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Ambient only — keep brand + board legible; raised by no rule, dimmed everywhere. */
  opacity: 0.32;
}

.screen-bg-video-layer .screen-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* While the cage runs, hide bingo.mp4 so balls.mp4 reads as the only backdrop. */
body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-prep-warp, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  .screen-bg-video-layer {
  opacity: 0;
  visibility: hidden;
}

/* Tint only — previously ~0.6–0.96 alpha layered over the encode read as opaque sludge hiding bingo.mp4. */
.screen-page .screen-bg-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      168deg,
      rgba(236, 72, 153, 0.06) 0%,
      transparent 42%,
      rgba(167, 139, 250, 0.06) 100%
    ),
    radial-gradient(
      ellipse 125% 108% at 50% 44%,
      rgba(15, 23, 42, 0.08) 0%,
      rgba(15, 23, 42, 0.28) 52%,
      rgba(8, 5, 20, 0.52) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2, 2, 10, 0.14) 0%,
      rgba(3, 3, 14, 0.22) 50%,
      rgba(2, 2, 12, 0.3) 100%
    );
}

/* balls.mp4 — below .screen-body (z-index 4–7) so the digit paints on top; above bingo (0) + shell aurora (::before z1). */
.cage-spectacle-video-layer {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cage-spectacle-video-layer .cage-spectacle-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cage-spectacle-video-layer .cage-spectacle-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-prep)
  .cage-spectacle-video-layer,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-prep-warp)
  .cage-spectacle-video-layer,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  .cage-spectacle-video-layer,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
  .cage-spectacle-video-layer,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-dock)
  .cage-spectacle-video-layer {
  opacity: 0.72;
  visibility: visible;
}

body.screen-page {
  background:
    radial-gradient(ellipse 120% 70% at 50% -20%, rgba(236, 72, 153, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 85%, rgba(168, 85, 247, 0.09) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 92% 75%, rgba(217, 70, 239, 0.08) 0%, transparent 48%),
    #060506;
}

/* Hero grain (z-index 3) sits above bingo ambience; cage clip (6) sits above grain — see .cage-spectacle-video-layer. */
.screen-page .screen-shell > .hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.screen-page .hero-pattern {
  /* Sits above `.screen-bg-video-layer` — keep below 1 so the clip stays visible underneath. */
  opacity: 0.58;
  background-image:
    radial-gradient(circle at 18% 78%, rgba(236, 72, 153, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 88% 16%, rgba(167, 139, 250, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 48% 42%, rgba(217, 70, 239, 0.06) 0%, transparent 50%);
}

.screen-page .grain {
  opacity: 0.04;
}

.venue-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2.5vmin, 1.75rem);
  padding: clamp(0.2rem, 0.8vmin, 0.5rem) 0 clamp(0.45rem, 1.2vmin, 0.85rem);
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.venue-show-title:not(.venue-show-title--lockup) {
  filter: drop-shadow(0 0 28px rgba(236, 72, 153, 0.35));
}

.venue-strap {
  opacity: 0.92;
}

.venue-strap .ethos-inline {
  color: rgba(248, 250, 252, 0.42);
  font-weight: 600;
}

.venue-live .pulse-dot {
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.9);
}

.venue-top .site-title {
  font-size: clamp(1.2rem, 4vmin, 3rem);
}

.venue-top .strap {
  font-size: clamp(0.78rem, 1.85vmin, 1.1rem);
  line-height: 1.35;
  margin-top: 0.12rem;
}

/* Venue / projector: caps for high-impact read at distance */
.screen-page .venue-show-title,
.screen-page .venue-strap,
.screen-page .venue-kicker,
.screen-page .venue-board-label,
.screen-page .mega-ball__placeholder,
.screen-page .mega-ball__nick,
.screen-page .live-badge.venue-live {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.screen-page .venue-show-title {
  letter-spacing: 0.04em;
}

/* Two-line lockup: keeps the neon orb roomy; layered drop-shadow reads as marquee 3D. */
.screen-page .venue-show-title--lockup.site-title {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  filter: none;
  -webkit-text-fill-color: unset;
  color: unset;
  background-clip: unset;
  -webkit-background-clip: unset;
}

.screen-page .venue-show-title--lockup {
  filter: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.02em, 0.65vmin, 0.38rem);
  line-height: 0.92;
}

.screen-page .venue-show-title--lockup .venue-show-title__line {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: 900;
  letter-spacing: inherit;
  line-height: 0.88;
  white-space: nowrap;
  background:
    linear-gradient(
      95deg,
      #fffaf5 0%,
      hsl(330 92% 78%) 18%,
      var(--pink) 38%,
      var(--fuchsia) 58%,
      var(--purple) 82%
    );
  background-size: 116% 120%;
  background-position: 50% -8%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.26))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.07))
    drop-shadow(0 0.04em 0 rgba(173, 40, 190, 0.5))
    drop-shadow(0 0.075em 0 rgba(124, 22, 150, 0.44))
    drop-shadow(0 0.11em 0 rgba(78, 12, 102, 0.48))
    drop-shadow(0 0.15em 0 rgba(42, 6, 58, 0.55))
    drop-shadow(0 0.2em 0.05em rgba(0, 0, 0, 0.72));
}

@media (prefers-reduced-motion: no-preference) {
  .screen-page .venue-show-title--lockup .venue-show-title__line:last-child {
    animation: venue-title-second-nudge 5.5s ease-in-out infinite;
  }

  @keyframes venue-title-second-nudge {
    0%,
    100% {
      filter:
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.26))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.07))
        drop-shadow(0 0.04em 0 rgba(173, 40, 190, 0.5))
        drop-shadow(0 0.075em 0 rgba(124, 22, 150, 0.44))
        drop-shadow(0 0.11em 0 rgba(78, 12, 102, 0.48))
        drop-shadow(0 0.15em 0 rgba(42, 6, 58, 0.55))
        drop-shadow(0 0.2em 0.05em rgba(0, 0, 0, 0.72));
    }
    50% {
      filter:
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.32))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.09))
        drop-shadow(0 0.045em 0 rgba(214, 64, 220, 0.54))
        drop-shadow(0 0.085em 0 rgba(140, 32, 170, 0.48))
        drop-shadow(0 0.12em 0 rgba(88, 18, 120, 0.5))
        drop-shadow(0 0.16em 0 rgba(48, 8, 70, 0.58))
        drop-shadow(0 0.21em 0.06em rgba(0, 0, 0, 0.76));
    }
  }
}

.venue-brand-block .venue-show-title .venue-show-title__line:last-child:not(:first-child) {
  font-size: 1.04em;
  letter-spacing: 0.1em;
}

#overlay-announce .overlay-title,
#overlay-announce .overlay-sub {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Venue header — title + strap only; swaps to metal special lines for 11 / 69 */
.venue-brand-slot {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: min(72vw, 52rem);
  perspective: 920px;
}

.venue-brand-stack {
  display: grid;
  grid-template-areas: lockup;
  align-items: center;
}

.venue-brand-panel {
  grid-area: lockup;
  display: block;
  min-width: 0;
}

.venue-brand-copy {
  min-width: 0;
}

.venue-brand-slot:not(.is-moment-active):not(.is-brand-animating) .venue-brand-default {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.venue-brand-slot:not(.is-moment-active):not(.is-brand-animating) .venue-brand-moment {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: perspective(800px) translateZ(-48px) scale(0.94);
}

.venue-brand-slot.is-moment-active:not(.is-brand-animating) .venue-brand-default {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: perspective(800px) translateZ(-48px) scale(0.94);
}

.venue-brand-slot.is-moment-active:not(.is-brand-animating) .venue-brand-moment {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.venue-brand-slot.is-brand-animating.brand-swap-to-moment .venue-brand-moment {
  z-index: 3;
}

.venue-brand-slot.is-brand-animating.brand-swap-to-moment .venue-brand-default {
  z-index: 2;
}

.venue-brand-slot.is-brand-animating.brand-swap-to-default .venue-brand-default {
  z-index: 3;
}

.venue-brand-slot.is-brand-animating.brand-swap-to-default .venue-brand-moment {
  z-index: 2;
}

.venue-brand-panel--swap-out {
  animation: venue-brand-swap-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.venue-brand-panel--swap-in {
  animation: venue-brand-swap-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes venue-brand-swap-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: perspective(800px) translateZ(0) scale(1);
  }
  to {
    opacity: 0;
    filter: blur(4px);
    transform: perspective(800px) translateZ(-70px) scale(0.9);
  }
}

@keyframes venue-brand-swap-in {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: perspective(880px) translateZ(-120px) scale(0.55) rotateX(14deg);
  }
  55% {
    opacity: 1;
    filter: blur(0);
    transform: perspective(880px) translateZ(22px) scale(1.04) rotateX(-3deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: perspective(880px) translateZ(0) scale(1) rotateX(0);
  }
}

.venue-brand-moment .metal-lockup-title,
.venue-brand-moment .metal-lockup-strap {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.venue-brand-moment .metal-lockup-title {
  letter-spacing: 0.03em;
}

.metal-lockup-title {
  margin: 0;
  font-size: clamp(1.2rem, 4vmin, 3rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  background: linear-gradient(
    168deg,
    #ffffff 0%,
    #a4a4b0 14%,
    #f2f2f8 38%,
    #4e4e58 58%,
    #dcdce6 80%,
    #696977 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 0 #121218)
    drop-shadow(0 10px 28px rgba(0, 0, 0, 0.78));
}

.metal-lockup-title--vader {
  background: linear-gradient(
    168deg,
    #fff5f5 0%,
    #c45a6a 18%,
    #ffe8e8 40%,
    #5c1018 62%,
    #e8a8b0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 2px 0 #280008)
    drop-shadow(0 0 24px rgba(255, 60, 80, 0.42))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.88));
}

.metal-lockup-strap {
  margin: 0.12rem 0 0;
  font-size: clamp(0.78rem, 1.85vmin, 1.1rem);
  font-weight: 700;
  line-height: 1.35;
  background: linear-gradient(180deg, #e8e8f0 0%, #6e6e7c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  max-width: 36em;
}

.metal-lockup-strap--vader {
  background: linear-gradient(180deg, #ffd6dc 0%, #8b3844 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 2px 10px rgba(255, 0, 40, 0.38))
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
}

@media (prefers-reduced-motion: reduce) {
  .venue-brand-panel--swap-in,
  .venue-brand-panel--swap-out {
    animation: none !important;
  }

  .venue-brand-slot:not(.is-moment-active):not(.is-brand-animating) .venue-brand-moment,
  .venue-brand-slot.is-moment-active:not(.is-brand-animating) .venue-brand-default {
    transform: none;
  }
}

.overlay-inner--metal {
  position: relative;
}

.metal-3d-title {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(3rem, min(12vw, 14vh), 9rem);
  background: linear-gradient(
    168deg,
    #ffffff 0%,
    #a4a4b0 14%,
    #f2f2f8 38%,
    #4e4e58 58%,
    #dcdce6 80%,
    #696977 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 3px 0 #121218)
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.85));
}

.metal-3d-title--slam {
  animation: metal-slam-in-large 0.92s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.metal-3d-title--vader {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    168deg,
    #fff5f5 0%,
    #c45a6a 18%,
    #ffe8e8 40%,
    #5c1018 62%,
    #e8a8b0 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 3px 0 #280008)
    drop-shadow(0 0 28px rgba(255, 60, 80, 0.45))
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.9));
}

.metal-3d-sub {
  margin: 1rem 0 0;
  font-size: clamp(1rem, min(3.2vw, 3.8vh), 2rem);
  font-weight: 800;
  background: linear-gradient(180deg, #e8e8f0 0%, #6e6e7c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.metal-3d-sub--vader {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #ffd6dc 0%, #8b3844 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(255, 0, 0, 0.35)) drop-shadow(0 3px 16px rgba(0, 0, 0, 0.85));
}

@keyframes metal-slam-in-large {
  0% {
    opacity: 0;
    transform: perspective(900px) translateZ(-200px) scale(0.22) rotateX(22deg);
  }
  50% {
    opacity: 1;
    transform: perspective(900px) translateZ(50px) scale(1.08) rotateX(-6deg);
  }
  100% {
    opacity: 1;
    transform: perspective(900px) translateZ(0) scale(1) rotateX(0);
  }
}

.overlay-burst--subtle {
  opacity: 0.14;
  filter: blur(52px);
}

/* Widescreen body: hero column + board (venue TV split view) */
.screen-body {
  position: relative;
  z-index: 4;
  flex: 1;
  min-height: 0;
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.75rem, 1.8vmin, 1.35rem);
  align-items: stretch;
}

@media (min-width: 960px) and (min-height: 520px) {
  .screen-body {
    /* Above cage clip (z-index 2) so mega ball + grid paint on top of balls.mp4. */
    z-index: 7;
    grid-template-columns: minmax(300px, 38vw) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(0.75rem, 1.5vw, 1.35rem);
    align-items: stretch;
  }
}

.venue-brand-block {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.85vmin, 0.55rem);
  padding: 0 clamp(0.25rem, 1vmin, 0.75rem);
}

/**
 * Image-based brand lockup. The logo replaces the wordmark but keeps the same
 * vertical slot in the hero, so neighbouring layout (last-ball + history) is
 * unaffected. Sized via container queries on the brand block.
 */
.venue-brand-block--logo {
  align-items: center;
  justify-content: center;
}

.venue-brand-logo {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0;
}

.venue-brand-logo__img {
  display: block;
  width: clamp(11rem, 32cqi, 34rem);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  /** Subtle idle motion — soft glow breath + gentle bob. The logo itself stays
   * upright; nothing aggressive, never wider than the brand slot. */
  filter:
    drop-shadow(0 0 18px rgba(236, 72, 153, 0.35))
    drop-shadow(0 0 38px rgba(168, 85, 247, 0.22));
  animation:
    venue-brand-logo-breathe 6.2s ease-in-out infinite,
    venue-brand-logo-bob 7.4s ease-in-out infinite;
  transform-origin: 50% 55%;
  will-change: transform, filter;
}

@keyframes venue-brand-logo-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 18px rgba(236, 72, 153, 0.32))
      drop-shadow(0 0 38px rgba(168, 85, 247, 0.20));
  }
  50% {
    filter:
      drop-shadow(0 0 26px rgba(236, 72, 153, 0.55))
      drop-shadow(0 0 60px rgba(217, 70, 239, 0.42))
      drop-shadow(0 0 90px rgba(168, 85, 247, 0.3));
  }
}

@keyframes venue-brand-logo-bob {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-0.4%) scale(1.018);
  }
}

@media (prefers-reduced-motion: reduce) {
  .venue-brand-logo__img {
    animation: none;
    filter: drop-shadow(0 0 22px rgba(236, 72, 153, 0.35));
  }
}

/** Hide the radial wash behind the brand when the logo is used — the logo
 * brings its own glow via drop-shadow filters; the dish underneath fights it. */
.venue-brand-block--logo::before {
  display: none !important;
}

.screen-page .venue-brand-block {
  position: relative;
  z-index: 0;
  container-type: inline-size;
  container-name: venue-brand;
  gap: clamp(0.28rem, 1vmin, 0.52rem);
  padding: clamp(0.28rem, 1.2vmin, 0.72rem) clamp(0.35rem, 3vw, 1.1rem)
    clamp(0.32rem, 1.35vmin, 0.72rem);
}

.screen-page .venue-brand-block::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(118%, 92vw);
  height: clamp(8rem, 24vmin, 13.5rem);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 72% 65% at 50% 48%,
    rgba(236, 72, 153, 0.28) 0%,
    rgba(217, 70, 239, 0.16) 38%,
    rgba(168, 85, 247, 0.08) 58%,
    transparent 74%
  );
}

@media (min-width: 960px) and (min-height: 520px) {
  .screen-page .venue-brand-block::before {
    width: min(118%, 72cqi);
    height: min(180%, 16rem);
  }
}

.venue-brand-block .venue-show-title {
  font-size: clamp(1.06rem, 4.85vmin, 2.62rem);
  letter-spacing: 0.02em;
  line-height: 0.88;
}

.venue-brand-block .venue-show-title:not(.venue-show-title--lockup) {
  line-height: 1.06;
}

.venue-brand-block .venue-show-title--lockup .venue-show-title__line:first-child {
  font-size: 1em;
}

.venue-brand-block .venue-strap {
  margin: 0;
  line-height: 1.08;
}

.venue-brand-block .venue-strap--one-line {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
  letter-spacing: 0.07em;
  font-size: clamp(0.54rem, min(4.05cqi, 1.78vmin), 1.42rem);
  font-weight: 700;
  color: rgba(248, 250, 252, 0.9);
}

.venue-strap-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-height: clamp(0.54rem, min(4.05cqi, 1.78vmin), 1.42rem);
}

.venue-strap-loader[hidden] {
  display: none !important;
}

.venue-strap-loader__track {
  position: relative;
  width: min(11rem, 46vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
  overflow: hidden;
}

.venue-strap-loader__track:not(.is-determinate)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(236, 72, 153, 0.15) 35%,
    rgba(34, 211, 238, 0.55) 50%,
    rgba(236, 72, 153, 0.15) 65%,
    transparent 100%
  );
  animation: venue-strap-loader-shimmer 1.15s ease-in-out infinite;
}

.venue-strap-loader__track.is-determinate .venue-strap-loader__bar {
  animation: none;
  transition: width 0.35s ease;
}

.venue-strap-loader__bar {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.92), rgba(34, 211, 238, 0.92));
  animation: venue-strap-loader-slide 1.05s ease-in-out infinite;
}

@keyframes venue-strap-loader-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes venue-strap-loader-slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

.venue-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.45vmin, 0.9rem);
  padding: clamp(0.35rem, 1vmin, 0.85rem) 0;
  margin-top: 0;
  min-height: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  border-radius: 0;
}

@media (min-width: 960px) and (min-height: 520px) {
  .venue-hero {
    container-type: inline-size;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    justify-content: flex-start;
    gap: clamp(0.28rem, 0.95vmin, 0.55rem);
    padding-top: clamp(0.38rem, 1.5vmin, 0.95rem);
    padding-right: clamp(0.55rem, 3.5vmin, 1.75rem);
    padding-bottom: clamp(0.28rem, 0.85vmin, 0.52rem);
    padding-left: clamp(0.35rem, 1.2vmin, 0.75rem);
  }

  .venue-brand-block {
    flex-shrink: 0;
  }

  .venue-brand-block .venue-show-title:not(.venue-show-title--lockup) {
    line-height: 1.03;
    filter: drop-shadow(0 0 36px rgba(236, 72, 153, 0.48))
      drop-shadow(0 14px 38px rgba(0, 0, 0, 0.5));
  }

  .venue-brand-block .venue-show-title--lockup {
    filter: none;
    line-height: 0.86;
  }

  .venue-brand-block .venue-show-title {
    font-size: clamp(1.42rem, min(11.5cqi, 7.4vmin), 4.42rem);
    line-height: 0.88;
  }

  .venue-brand-block .venue-show-title:not(.venue-show-title--lockup) {
    line-height: 1.03;
  }

  .venue-brand-block .venue-strap:not(.venue-strap--one-line) {
    font-size: clamp(0.88rem, min(4.85cqi, 2.75vmin), 1.62rem);
    font-weight: 700;
    letter-spacing: 0.09em;
    color: rgba(248, 250, 252, 0.9);
  }

  .venue-brand-block .venue-strap--one-line {
    font-size: clamp(0.58rem, min(4.05cqi, 1.92vmin), 1.52rem);
    letter-spacing: 0.068em;
    color: rgba(248, 250, 252, 0.9);
  }

  .screen-page .venue-brand-block .venue-show-title {
    letter-spacing: 0.058em;
  }

  .screen-page .venue-brand-block .venue-show-title--lockup {
    letter-spacing: 0.045em;
  }

  .venue-hero #last-ball.mega-ball {
    flex: 1 1 auto;
    min-height: 0;
    align-self: center;
    width: min(100%, 96cqi);
    max-height: min(82vh, min(106cqi, 92dvh));
  }

  /*
   * Idle / READY orb uses the same round spec as live draws — avoids flex-grow
   * stretching a tall ellipse (circle rules elsewhere only match :has(visible digit)).
   */
  .screen-page .venue-hero #last-ball.mega-ball--venue:not(:has(.mega-ball__number:not([hidden]))) {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: min(100%, 96cqi, min(82dvh, 92dvh));
    aspect-ratio: 1;
    height: auto;
    max-height: none;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #1e293b 0%, #0f172a 52%, #020617 100%);
    border: 4px solid transparent;
    background-clip: padding-box;
    box-shadow:
      0 0 52px rgba(236, 72, 153, 0.5),
      0 0 120px rgba(168, 85, 247, 0.34),
      inset 0 0 55px rgba(0, 0, 0, 0.82);
  }

  .screen-page .venue-hero #last-ball.mega-ball--venue:not(:has(.mega-ball__number:not([hidden])))::before {
    inset: -10px;
    opacity: 0.62;
    filter: blur(4px);
    border-radius: inherit;
  }

  .screen-page .venue-hero #last-ball.mega-ball--venue:has(.mega-ball__number:not([hidden])) {
    flex: 0 1 auto;
  }

  .screen-page .venue-brand-block {
    padding-top: clamp(0.42rem, 1.75vmin, 1.05rem);
    padding-bottom: clamp(0.28rem, 1.35vmin, 0.72rem);
    padding-left: clamp(0.38rem, 2.4vmin, 1.05rem);
    padding-right: clamp(0.65rem, 4.8vmin, 2.35rem);
  }

  .venue-hero .history-block {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: clamp(0.25rem, 0.8vmin, 0.5rem);
  }
}

.history-block {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 2vmin, 1.35rem);
}

.screen-page .history-block .panel-title {
  margin: 0;
  text-align: center;
  font-size: clamp(0.82rem, 2vmin, 1.05rem);
  letter-spacing: 0.2em;
  color: rgba(248, 250, 252, 0.72);
}

.screen-page .history-block .venue-kicker {
  margin: 0;
}

.screen-board {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.venue-board.grid-wrap--tv {
  flex: 1;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  backdrop-filter: none;
}

.venue-board.grid-wrap--tv .panel-title {
  flex-shrink: 0;
}

.number-grid-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.number-grid-scroll .number-grid {
  flex: 1;
  align-content: stretch;
}

.screen-page .venue-board.grid-wrap--tv {
  flex: 1;
  min-height: 0;
}

.screen-page .number-grid {
  height: 100%;
  min-height: 0;
  gap: clamp(0.06rem, 0.22vmin, 0.18rem);
}

.glass-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.glass-panel {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-head {
  margin-top: 0.5rem;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--pink), var(--fuchsia), var(--purple));
  color: #fff;
  box-shadow: var(--shadow-hot);
  font-size: 0.72rem;
}

.brand-mark.venue-badge {
  width: clamp(2.65rem, 5vmin, 3.85rem);
  height: clamp(2.65rem, 5vmin, 3.85rem);
  border-radius: 50%;
  font-size: clamp(0.58rem, 1.1vmin, 0.78rem);
  box-shadow:
    0 0 48px rgba(236, 72, 153, 0.45),
    0 0 80px rgba(168, 85, 247, 0.2);
}

.brand-dot {
  margin: 0 0.03em;
}

.site-title {
  margin: 0;
  font-size: clamp(1.35rem, 3.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--pink), var(--fuchsia), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.strap {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-weight: 500;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  background: rgba(236, 72, 153, 0.16);
  border: 1px solid rgba(236, 72, 153, 0.35);
}

.live-badge.venue-live {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.28em;
  font-size: clamp(0.68rem, 1.7vmin, 0.95rem);
  color: rgba(248, 250, 252, 0.92);
  text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);
}

.live-badge--error {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(127, 29, 29, 0.35);
}

.pulse-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65);
  animation: ping 1.4s ease-out infinite;
}

@keyframes ping {
  75%,
  100% {
    box-shadow: 0 0 0 0.65rem transparent;
  }
}

.mega-ball {
  position: relative;
  justify-self: center;
  width: min(88vw, min(52vmin, 520px));
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  /* Deep neutral sphere (not purple-tinted); white digit reads cleanly */
  background: radial-gradient(circle at 35% 28%, #1e293b 0%, #0f172a 52%, #020617 100%);
  border: 4px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px rgba(236, 72, 153, 0.35),
    0 0 80px rgba(167, 139, 250, 0.25),
    inset 0 0 40px rgba(0, 0, 0, 0.65);
}

.mega-ball::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--pink), var(--fuchsia), var(--purple));
  z-index: -1;
  opacity: 0.85;
  filter: blur(0.5px);
}

.mega-ball__placeholder {
  font-family: var(--font-show-num);
  font-weight: 400;
  font-size: clamp(2rem, 6.5vmin, 3.75rem);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--muted);
}

.screen-page .mega-ball__placeholder {
  letter-spacing: 0.06em;
}

.mega-ball__number {
  font-family: var(--font-show-num);
  font-weight: 400;
  font-size: clamp(8rem, min(39vw, 43vh), 26rem);
  line-height: 0.93;
  letter-spacing: 0.02em;
  color: #fff;
  /* Symmetric stacks read more centred under heavy display faces */
  text-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.04),
    0 8px 0 rgba(0, 0, 0, 0.48),
    0 0 36px rgba(0, 0, 0, 0.45);
}

.screen-page .mega-ball--venue .mega-ball__number[data-decade] {
  color: hsla(var(--row-h, 320), 100%, 97%, 1);
  text-shadow:
    0 -1px 0 hsla(var(--row-h, 320), 100%, 92%, 0.12),
    0 7px 0 rgba(0, 0, 0, 0.52),
    0 7px 0 hsla(var(--row-h, 320), 100%, 16%, 0.28),
    0 0 48px hsla(var(--row-h, 320), 100%, 50%, 0.38),
    0 0 88px hsla(var(--row-h, 320), 88%, 42%, 0.22);
}

.mega-ball__nick {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  font-weight: 800;
  font-size: clamp(1rem, 3.5vmin, 1.85rem);
  color: #fdf2f8;
}

.mega-ball.is-special-11::before {
  animation: spin-border 4s linear infinite;
}

.mega-ball.is-special-69::before {
  animation: spin-border 2.8s linear infinite reverse;
}

.mega-ball.is-special-11 .mega-ball__number {
  animation: wobble 0.55s ease-in-out infinite;
}

.mega-ball.is-special-69 .mega-ball__number {
  animation: neon-pulse 0.9s ease-in-out infinite;
}

@keyframes spin-border {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate(-3deg) scale(1);
  }
  50% {
    transform: rotate(3deg) scale(1.04);
  }
}

@keyframes neon-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(217, 70, 239, 0.95));
  }
}

@keyframes mega-pop {
  0% {
    transform: scale(0.88);
  }
  55% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.mega-ball--pop {
  animation: mega-pop 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bingo cage / bowl — suspense spin while drawing */
.mega-ball--cage-spin {
  animation: mega-cage-bowl 0.4s ease-in-out infinite;
}

.mega-ball--cage-spin::before {
  animation: spin-border 0.48s linear infinite;
  opacity: 0.95;
}

.screen-page .mega-ball--cage-spin .mega-ball__number[data-decade] {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: hsla(var(--row-h, 320), 100%, 97%, 1) !important;
  color: hsla(var(--row-h, 320), 100%, 97%, 1);
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.5),
    0 12px 36px hsla(var(--row-h, 320), 65%, 20%, 0.5),
    0 0 44px hsla(var(--row-h, 320), 88%, 50%, 0.3);
  animation: mega-cage-digit-flicker 0.16s steps(2, end) infinite;
}

.mega-ball--cage-spin .mega-ball__number {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #fff;
  color: #fff;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.45),
    0 10px 36px rgba(0, 0, 0, 0.55);
  animation: mega-cage-digit-flicker 0.16s steps(2, end) infinite;
}

@keyframes mega-cage-bowl {
  0%,
  100% {
    transform: rotate(-2.5deg) scale(1);
  }
  20% {
    transform: rotate(2deg) scale(1.028);
  }
  45% {
    transform: rotate(-1.5deg) scale(1.015);
  }
  70% {
    transform: rotate(2.8deg) scale(1.032);
  }
}

@keyframes mega-cage-digit-flicker {
  0%,
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
  50% {
    opacity: 0.91;
    transform: scale(1.03, 1.065);
  }
}

/* Venue cage spin — translate jitter only (no blur/filter on giant type). */
@keyframes mega-cage-digit-glitch {
  0%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 0.82;
    transform: translate3d(-3px, 1px, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(4px, -2px, 0);
  }
  75% {
    opacity: 0.88;
    transform: translate3d(-2px, -3px, 0);
  }
}

@keyframes mega-cage-prep-spinner-rotate {
  from {
    transform: translate3d(-50%, -50%, 0) scale(var(--msp-dial, 0.46)) rotate(0deg);
  }
  to {
    transform: translate3d(-50%, -50%, 0) scale(var(--msp-dial, 0.46)) rotate(360deg);
  }
}

.mega-ball__cage-prep-spinner {
  display: none;
  box-sizing: border-box;
  pointer-events: none;
}

#last-ball.mega-ball--venue.mega-ball--cage-spin .mega-ball__cage-prep-spinner,
#last-ball.mega-ball--venue.mega-ball--cage-lock .mega-ball__cage-prep-spinner,
#last-ball.mega-ball--venue.mega-ball--cage-dock .mega-ball__cage-prep-spinner {
  display: none !important;
}

@media (min-width: 960px) and (min-height: 520px) {
  #last-ball.mega-ball--venue.mega-ball--cage-prep .mega-ball__cage-prep-spinner {
    --msp-dial: 0.46;
    display: block;
    position: absolute;
    left: 50%;
    top: 34%;
    z-index: 6;
    width: clamp(74px, 18cqi, 132px);
    height: clamp(74px, 18cqi, 132px);
    margin: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.13);
    border-top-color: rgba(236, 72, 153, 0.84);
    opacity: 0.96;
    transition:
      transform 0.64s cubic-bezier(0.32, 0.92, 0.24, 1),
      opacity 0.52s cubic-bezier(0.32, 0.94, 0.25, 1),
      top 0.64s cubic-bezier(0.32, 0.92, 0.24, 1),
      width 0.64s cubic-bezier(0.32, 0.92, 0.24, 1),
      height 0.64s cubic-bezier(0.32, 0.92, 0.24, 1);
    animation: mega-cage-prep-spinner-rotate 0.92s linear infinite;
  }

  #last-ball.mega-ball--venue.mega-ball--cage-prep.mega-ball--cage-prep-warp .mega-ball__cage-prep-spinner {
    --msp-dial: 1;
    top: 50%;
    width: min(92%, max(148px, 52cqi), min(86vmin, 92vw));
    height: min(92%, max(148px, 52cqi), min(86vmin, 92vw));
    opacity: 0;
    animation: none;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  #last-ball.mega-ball--venue.mega-ball--cage-prep .mega-ball__placeholder,
  #last-ball.mega-ball--venue.mega-ball--cage-prep .mega-ball__number,
  #last-ball.mega-ball--venue.mega-ball--cage-prep .mega-ball__nick {
    visibility: hidden;
    opacity: 0;
  }
}

@media (max-width: 959px), (max-height: 519px) {
  #last-ball.mega-ball--venue.mega-ball--cage-prep .mega-ball__cage-prep-spinner {
    display: block;
    position: absolute;
    left: 50%;
    top: 45%;
    z-index: 6;
    width: clamp(72px, 22vmin, 120px);
    height: clamp(72px, 22vmin, 120px);
    margin: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.13);
    border-top-color: rgba(236, 72, 153, 0.84);
    transform: translate3d(-50%, -50%, 0);
    animation: mega-cage-prep-spinner-rotate 0.92s linear infinite;
  }

  #last-ball.mega-ball--venue.mega-ball--cage-prep.mega-ball--cage-prep-warp .mega-ball__cage-prep-spinner {
    top: 50%;
    height: clamp(260px, 58vmin, 520px);
    width: clamp(260px, 58vmin, 520px);
    opacity: 0;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #last-ball.mega-ball--venue.mega-ball--cage-prep .mega-ball__cage-prep-spinner,
  #last-ball.mega-ball--venue.mega-ball--cage-prep.mega-ball--cage-prep-warp .mega-ball__cage-prep-spinner {
    animation: none !important;
    transition-duration: 0.12s !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
  }
}

/*
 * During spin: freeze aurora/grain motion (they're under balls.mp4 now anyway — cage clip is z-index 16).
 * Lock / dock keep the full tinted orb choreography.
 */
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin) .screen-shell::before {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: saturate(1.06) brightness(1.02);
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)::after {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 0.55;
  filter: saturate(1.06) brightness(1.03);
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin) .screen-shell > .hero-pattern {
  opacity: 0.02;
}

#last-ball.mega-ball--venue.mega-ball--cage-spin {
  animation: none;
}

#last-ball.mega-ball--venue.mega-ball--cage-spin::before {
  animation: none;
}

#last-ball.mega-ball--venue.mega-ball--cage-spin .mega-ball__number,
#last-ball.mega-ball--venue.mega-ball--cage-spin .mega-ball__number[data-decade] {
  animation: none;
}

/* Grid tick avoids filter animation churn during spin — static glow only */
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin) .cell.is-cage-tick {
  animation: none !important;
  filter: none;
  box-shadow:
    0 0 0 2px hsla(var(--row-h, 320), 90%, 78%, 0.78),
    0 0 22px hsla(var(--row-h, 320), 85%, 52%, 0.38);
}

.mega-ball--venue {
  border: none;
  background-clip: border-box;
  box-shadow:
    0 0 42px rgba(236, 72, 153, 0.42),
    0 0 100px rgba(168, 85, 247, 0.28),
    inset 0 0 52px rgba(0, 0, 0, 0.8);
}

.mega-ball--venue::before {
  inset: -10px;
  opacity: 0.62;
  filter: blur(4px);
}

/* Light “projection” slab when a ball is live — mobile / stacked layout only; split TV uses dark orb below */
.screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden])) {
  width: min(100%, min(96vw, 1280px));
  max-width: 100%;
  aspect-ratio: unset;
  min-height: min(52vh, 620px);
  height: auto;
  padding: clamp(0.25rem, 1.2vmin, 0.75rem) clamp(0.5rem, 2vmin, 1.25rem);
  border-radius: clamp(0.55rem, 1.6vmin, 1.1rem);
  background:
    linear-gradient(
      168deg,
      #dfe9f2 0%,
      #c5d4e3 38%,
      #9eb4cc 100%
    );
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.14),
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 0 80px rgba(236, 72, 153, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -12px 28px rgba(15, 23, 42, 0.08);
}

.screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden]))::before {
  inset: -5px;
  opacity: 0.35;
  filter: blur(8px);
  border-radius: inherit;
}

.screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden])) .mega-ball__number {
  font-size: clamp(10rem, min(53vmin, 67vh), 42rem);
  line-height: 0.9;
  color: #fff;
  text-shadow:
    0 4px 0 rgba(15, 23, 42, 0.22),
    0 14px 48px rgba(0, 0, 0, 0.28),
    0 0 1px rgba(15, 23, 42, 0.35);
}

.screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden])) .mega-ball__number[data-decade] {
  color: #fff;
  text-shadow:
    0 4px 0 rgba(15, 23, 42, 0.24),
    0 3px 0 hsla(var(--row-h, 320), 85%, 22%, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.22),
    0 0 72px hsla(var(--row-h, 320), 90%, 48%, 0.38),
    0 0 120px hsla(var(--row-h, 320), 75%, 52%, 0.16);
}

/* Venue mega hull: decade tint matches board tile chroma (see .screen-page .cell.is-called). Split-TV breakpoint overrides sphere bevel below. */
.screen-page #last-ball.mega-ball--venue[data-decade]:has(.mega-ball__number:not([hidden])) {
  background:
    linear-gradient(
      168deg,
      hsla(var(--row-h), 100%, 78%, 1) 0%,
      hsla(var(--row-h), 96%, 56%, 1) 52%,
      hsla(var(--row-h), 88%, 38%, 1) 100%
    );
  border-color: hsla(var(--row-h), 100%, 92%, 0.88);
  /* Match the saturation/brightness boost from .cell.is-called so the orb
   * reads as the same chroma as the called tile next to it. */
  filter: saturate(1.28) brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.36),
    0 0 85px hsla(var(--row-h), 100%, 54%, 0.3),
    inset 0 2px 0 hsla(0, 0%, 100%, 0.62),
    inset 0 -14px 28px hsla(var(--row-h), 76%, 14%, 0.12);
}

/* Warm decades (yellow/orange/red/pink) — mirror the called tile's dark-text
 * treatment so the number reads sharply against the bright hull. */
.screen-page #last-ball.mega-ball--venue[data-decade="1"]:has(.mega-ball__number:not([hidden])) .mega-ball__number,
.screen-page #last-ball.mega-ball--venue[data-decade="2"]:has(.mega-ball__number:not([hidden])) .mega-ball__number,
.screen-page #last-ball.mega-ball--venue[data-decade="3"]:has(.mega-ball__number:not([hidden])) .mega-ball__number,
.screen-page #last-ball.mega-ball--venue[data-decade="7"]:has(.mega-ball__number:not([hidden])) .mega-ball__number {
  color: hsl(222 95% 5%);
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(255, 255, 255, 0.28),
    0 14px 20px rgba(0, 0, 0, 0.32);
}

.screen-page #last-ball.mega-ball--venue[data-decade]:has(.mega-ball__number:not([hidden]))::before {
  background: linear-gradient(
    135deg,
    hsla(var(--row-h), 100%, 74%, 0.92) 0%,
    hsla(var(--row-h), 92%, 52%, 0.92) 48%,
    hsla(var(--row-h), 86%, 36%, 0.92) 100%
  );
  opacity: 0.42;
}

/* Split-view & large TV: neon orb fills hero column — scale type with column width (cqi) */
@media (min-width: 960px) and (min-height: 520px) {
  .screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden])) {
    width: min(100%, 96cqi);
    aspect-ratio: 1;
    min-height: unset;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #1e293b 0%, #0f172a 52%, #020617 100%);
    border: 4px solid transparent;
    background-clip: padding-box;
    box-shadow:
      0 0 52px rgba(236, 72, 153, 0.5),
      0 0 120px rgba(168, 85, 247, 0.34),
      inset 0 0 55px rgba(0, 0, 0, 0.82);
  }

  .screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden]))::before {
    inset: -10px;
    opacity: 0.62;
    filter: blur(4px);
    border-radius: inherit;
  }

  .screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden])) .mega-ball__number {
    font-size: clamp(8rem, min(63cqi, 45vh), 27rem);
    line-height: 0.92;
    color: #fff;
    text-shadow:
      0 -2px 0 rgba(255, 255, 255, 0.05),
      0 9px 0 rgba(0, 0, 0, 0.5),
      0 0 44px rgba(0, 0, 0, 0.48);
  }

  .screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden])) .mega-ball__number[data-decade] {
    color: hsla(var(--row-h, 320), 100%, 97%, 1);
    text-shadow:
      0 -1px 0 hsla(var(--row-h, 320), 100%, 92%, 0.12),
      0 8px 0 rgba(0, 0, 0, 0.52),
      0 7px 0 hsla(var(--row-h, 320), 100%, 16%, 0.28),
      0 0 52px hsla(var(--row-h, 320), 100%, 50%, 0.45),
      0 0 100px hsla(var(--row-h, 320), 88%, 42%, 0.26);
  }

  /* Sphere body: same saturation/lightness anchors as .cell.is-called (145deg gradients), sculpted with radials so it still reads 3D. */
  .screen-page #last-ball.mega-ball--venue[data-decade]:has(.mega-ball__number:not([hidden])) {
    background:
      radial-gradient(126% 90% at 80% 9%, hsla(var(--row-h, 320), 100%, 88%, 0.38) 0%, transparent 41%),
      radial-gradient(70% 54% at 18% 15%, hsla(var(--row-h, 320), 96%, 80%, 0.22) 0%, transparent 40%),
      radial-gradient(108% 86% at 50% 110%, hsla(var(--row-h, 320), 92%, 8%, 0.55) 0%, transparent 52%),
      radial-gradient(
        circle at 36% 30%,
        hsla(var(--row-h, 320), 100%, 70%, 1) 0%,
        hsla(var(--row-h, 320), 88%, 45%, 1) 52%,
        hsla(var(--row-h, 320), 84%, 28%, 1) 100%
      );
    background-clip: padding-box;
    box-shadow:
      0 0 0 2px hsla(var(--row-h, 320), 100%, 88%, 0.58),
      0 -10px 26px hsla(var(--row-h, 320), 90%, 52%, 0.18) inset,
      0 28px 46px hsla(var(--row-h, 320), 100%, 2%, 0.52) inset,
      inset 0 14px 22px hsla(var(--row-h, 320), 82%, 24%, 0.22),
      0 0 58px hsla(var(--row-h, 320), 100%, 50%, 0.42),
      0 0 118px hsla(var(--row-h, 320), 92%, 40%, 0.26);
  }

  .screen-page #last-ball.mega-ball--venue[data-decade]:has(.mega-ball__number:not([hidden]))::before {
    background: linear-gradient(
      136deg,
      hsla(var(--row-h, 320), 100%, 78%, 1) 0%,
      hsla(var(--row-h, 320), 94%, 58%, 1) 44%,
      hsla(var(--row-h, 320), 88%, 42%, 1) 100%
    );
    opacity: 0.74;
    filter: blur(3px);
  }
}

.mega-ball--venue.mega-ball--hide-centre-digit .mega-ball__number {
  opacity: 0;
}

/*
 * Cage draw = full-screen spectacle; when spin stops, chrome + board glide back with a reveal burst.
 */
.screen-page .venue-brand-block,
.screen-page .history-block,
.screen-page .screen-board {
  transition:
    opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  .venue-brand-block,
body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  .history-block,
body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock)) .screen-board {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(0.5rem + 0.35vmin)) scale(0.978);
}

/* Entire projector shell above body::after arena scrim (z-index 12). */
body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  .screen-shell {
  z-index: 14;
}

/*
 * Slow aurora between scrim and giant orb — keeps the grid from ever reading through
 * thin gradients and sells the “full venue” moment.
 * z-index: below grains + UI; above bingo.mp4 — fluid aurora sits under balls clip until it shows through.
 */
body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  .screen-shell::before {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: 1;
  pointer-events: none;
  filter: saturate(1.14) brightness(1.035);
  will-change: transform;
  background:
    radial-gradient(ellipse 88% 78% at 22% 78%, rgba(236, 72, 153, 0.38) 0%, transparent 54%),
    radial-gradient(ellipse 82% 72% at 78% 20%, rgba(56, 189, 248, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse 95% 90% at 50% 108%, rgba(167, 139, 250, 0.22) 0%, transparent 56%),
    radial-gradient(ellipse 110% 95% at 48% 38%, rgba(48, 22, 78, 0.72) 0%, transparent 62%),
    linear-gradient(168deg, #040108 0%, #0c0418 38%, #03030a 100%);
  animation: cage-arena-fluid-swirl 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Dock-out is GPU-heavy — freeze the aurora so it is not competing with vortex / scrim. */
body.screen-page.is-cage-docking .screen-shell::before {
  animation: none !important;
  filter: saturate(1.06) brightness(1.02) !important;
  transform: none !important;
  will-change: auto;
  opacity: 0.93;
}

@keyframes cage-arena-fluid-swirl {
  0%,
  100% {
    transform: scale(1) translate(0, 0) rotate(0deg);
  }
  28% {
    transform: scale(1.05) translate(1.2%, -1.8%) rotate(1.2deg);
  }
  55% {
    transform: scale(1.03) translate(-1.4%, 1.1%) rotate(-0.8deg);
  }
  78% {
    transform: scale(1.06) translate(0.6%, 1.4%) rotate(0.6deg);
  }
}

/* Arena scrim: ramps up during spin only, fades as layout returns */
body.screen-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(
      ellipse 95% 88% at 50% 52%,
      rgba(217, 70, 239, 0.12) 0%,
      rgba(76, 29, 120, 0.25) 32%,
      rgba(6, 4, 14, 0.97) 58%,
      #020104 100%
    );
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))::after {
  opacity: 1;
  visibility: visible;
  filter: saturate(1.14) brightness(1.04);
  will-change: transform, opacity;
}

/* Prep (before spin): freeze animations; balls.mp4 fades in above all of this at z-index 16. */
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-prep):not(
    :has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  )::after {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: saturate(1.05) brightness(1.03) !important;
  opacity: 0.6 !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-prep-warp):not(
    :has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  )::after {
  opacity: 0.5 !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-prep):not(
    :has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  )
  .screen-shell::before {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: saturate(1.04) brightness(1.015) !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-prep):not(
    :has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  )
  .screen-shell
  > .hero-pattern {
  opacity: 0.03 !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)::after {
  animation: cage-spin-scrim-shift 4.5s ease-in-out infinite;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)::after {
  animation: cage-arena-scrim-calm 9s ease-in-out infinite alternate;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-dock)::after {
  animation: cage-arena-scrim-dock 0.78s cubic-bezier(0.22, 1, 0.32, 1) forwards;
}

@keyframes cage-spin-scrim-shift {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 0.97;
    transform: scale(1.018);
  }
  72% {
    opacity: 0.985;
    transform: scale(1.01);
  }
}

@keyframes cage-arena-scrim-calm {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.012);
    opacity: 0.94;
  }
}

@keyframes cage-arena-scrim-dock {
  0% {
    opacity: 0.94;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.08);
  }
}

/*
 * Cage spectacle: keep balls.mp4 unobscured — hide arena scrim, shell aurora, and hero grain
 * (they stack into a purple wash over the encode).
 */
body.screen-page:has(
    #last-ball.mega-ball--venue:is(
      .mega-ball--cage-prep,
      .mega-ball--cage-prep-warp,
      .mega-ball--cage-spin,
      .mega-ball--cage-lock,
      .mega-ball--cage-dock
    )
  )::after {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

body.screen-page:has(
    #last-ball.mega-ball--venue:is(
      .mega-ball--cage-prep,
      .mega-ball--cage-prep-warp,
      .mega-ball--cage-spin,
      .mega-ball--cage-lock,
      .mega-ball--cage-dock
    )
  )
  .screen-shell::before {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

body.screen-page:has(
    #last-ball.mega-ball--venue:is(
      .mega-ball--cage-prep,
      .mega-ball--cage-prep-warp,
      .mega-ball--cage-spin,
      .mega-ball--cage-lock,
      .mega-ball--cage-dock
    )
  )
  .screen-shell
  > .hero-pattern {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Burst sweep while the giant orb corkscrews away */
body.screen-page.is-cage-docking::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: 33;
  pointer-events: none;
  background:
    conic-gradient(
      from -18deg at 48% 44%,
      transparent 0deg,
      rgba(253, 224, 71, 0.14) 46deg,
      transparent 118deg,
      rgba(236, 72, 153, 0.12) 186deg,
      transparent 268deg,
      rgba(147, 197, 253, 0.1) 312deg,
      transparent 360deg
    ),
    radial-gradient(circle at 50% 50%, rgba(255, 250, 255, 0.08) 0%, transparent 42%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: cage-dock-spectacle-spin 0.78s cubic-bezier(0.2, 0.92, 0.22, 1) forwards;
}

@keyframes cage-dock-spectacle-spin {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(1.05);
  }
  18% {
    opacity: 0.88;
    transform: rotate(220deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(-520deg) scale(1.9);
  }
}

body.screen-page.is-cage-docking:not(:has(#last-ball.mega-ball--cage-spin))::after {
  animation: cage-dock-scrim-fadeout 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes cage-dock-scrim-fadeout {
  0% {
    opacity: 0.94;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }
}

/* Shockwave pulse the moment the real ball docks (added via JS briefly) */
body.screen-page.is-cage-reveal-pulse::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  background: radial-gradient(
    ellipse 74% 64% at 50% 50%,
    rgba(253, 224, 71, 0.35) 0%,
    rgba(236, 72, 153, 0.28) 18%,
    rgba(236, 72, 153, 0) 54%
  );
  mix-blend-mode: screen;
  animation: cage-reveal-shockwave 1.05s cubic-bezier(0.16, 1, 0.32, 1) forwards;
}

@keyframes cage-reveal-shockwave {
  0% {
    opacity: 0;
    transform: scale(0.72);
    filter: brightness(1.9) saturate(1.45);
  }
  42% {
    opacity: 0.94;
    transform: scale(1.08);
    filter: brightness(1.55) saturate(1.38);
  }
  100% {
    opacity: 0;
    transform: scale(2.85);
    filter: brightness(1) saturate(1);
  }
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  #last-ball.mega-ball--venue {
  position: fixed;
  inset: 0;
  z-index: 35;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(72vmin, min(82vw, 82dvh));
  height: min(72vmin, min(82vw, 82dvh));
  max-width: min(calc(100vw - 2.5rem), 92vw);
  max-height: min(88dvh, calc(100vw - 2rem));
  margin: auto;
  align-self: center;
  flex: none !important;
  padding: clamp(0.85rem, 3.2vmin, 2rem);
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 28%, #293548 0%, #161e2f 42%, #030510 100%);
  background-clip: padding-box;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow:
    0 0 96px rgba(236, 72, 153, 0.55),
    0 0 180px rgba(168, 85, 247, 0.38),
    0 0 120px rgba(250, 204, 21, 0.08),
    inset 0 0 72px rgba(0, 0, 0, 0.84);
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  #last-ball.mega-ball--venue[data-decade] {
  background:
    radial-gradient(132% 92% at 78% 8%, hsla(var(--row-h, 320), 100%, 92%, 0.52) 0%, transparent 42%),
    radial-gradient(68% 54% at 22% 12%, hsla(var(--row-h, 320), 98%, 82%, 0.26) 0%, transparent 40%),
    radial-gradient(110% 84% at 52% 108%, hsla(var(--row-h, 320), 94%, 6%, 0.58) 0%, transparent 52%),
    radial-gradient(
      circle at 36% 30%,
      hsla(var(--row-h, 320), 100%, 70%, 1) 0%,
      hsla(var(--row-h, 320), 88%, 45%, 1) 50%,
      hsla(var(--row-h, 320), 84%, 26%, 1) 100%
    );
  box-shadow:
    0 0 0 2px hsla(var(--row-h, 320), 100%, 88%, 0.62),
    0 -12px 32px hsla(var(--row-h, 320), 90%, 54%, 0.2) inset,
    0 32px 52px hsla(var(--row-h, 320), 100%, 2%, 0.54) inset,
    inset 0 16px 28px hsla(var(--row-h, 320), 82%, 24%, 0.24),
    0 0 120px hsla(var(--row-h, 320), 100%, 52%, 0.52),
    0 0 200px hsla(var(--row-h, 320), 92%, 42%, 0.32),
    0 0 140px rgba(250, 204, 21, 0.09);
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  #last-ball.mega-ball--venue[data-decade]::before {
  background: linear-gradient(
    136deg,
    hsla(var(--row-h, 320), 100%, 76%, 1) 0%,
    hsla(var(--row-h, 320), 94%, 56%, 1) 44%,
    hsla(var(--row-h, 320), 88%, 40%, 1) 100%
  );
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  #last-ball.mega-ball--venue::before {
  inset: -18px;
  opacity: 0.85;
  filter: blur(6px);
  border-radius: inherit;
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  #last-ball.mega-ball--venue .mega-ball__number {
  font-size: clamp(12rem, min(82vmin, 64vw), 96rem);
  line-height: 0.92;
}

body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  #last-ball.mega-ball--venue .mega-ball__number[data-decade] {
  color: hsla(var(--row-h, 320), 100%, 97%, 1);
  text-shadow:
    0 -1px 0 hsla(var(--row-h, 320), 100%, 92%, 0.14),
    0 12px 0 rgba(0, 0, 0, 0.52),
    0 9px 0 hsla(var(--row-h, 320), 100%, 16%, 0.32),
    0 0 64px hsla(var(--row-h, 320), 100%, 54%, 0.55),
    0 0 130px hsla(var(--row-h, 320), 82%, 48%, 0.3);
}

/* Cage spin only: full-bleed stage — drop the inset circular hull so balls.mp4 isn’t vignetted */
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  flex: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin[data-decade] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin::before,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin::after {
  content: none !important;
  display: none !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin
  .mega-ball__placeholder,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin
  .mega-ball__nick {
  display: none !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin
  .mega-ball__number,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
  #last-ball.mega-ball--venue.mega-ball--cage-spin
  .mega-ball__number[data-decade] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.88),
    0 0 28px rgba(0, 0, 0, 0.75),
    -1px 0 0 rgba(255, 255, 255, 0.06),
    2px 0 0 rgba(0, 0, 0, 0.52) !important;
  animation: mega-cage-digit-glitch 0.16s steps(2, jump-end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
    #last-ball.mega-ball--venue.mega-ball--cage-spin
    .mega-ball__number,
  body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-spin)
    #last-ball.mega-ball--venue.mega-ball--cage-spin
    .mega-ball__number[data-decade] {
    animation: none !important;
    transform: none !important;
  }
}

@media (min-width: 1400px) and (min-height: 800px) {
  body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
    #last-ball.mega-ball--venue .mega-ball__number {
    font-size: clamp(16rem, min(88vmin, 68vw), 108rem);
  }
}

/* Cage lock: same full-bleed read as spin (no violet disc over the cage clip before dock). */
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
  #last-ball.mega-ball--venue.mega-ball--cage-lock {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  flex: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
  #last-ball.mega-ball--venue.mega-ball--cage-lock[data-decade] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
  #last-ball.mega-ball--venue.mega-ball--cage-lock::before,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
  #last-ball.mega-ball--venue.mega-ball--cage-lock::after {
  content: none !important;
  display: none !important;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
  #last-ball.mega-ball--venue.mega-ball--cage-lock
  .mega-ball__number,
body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
  #last-ball.mega-ball--venue.mega-ball--cage-lock
  .mega-ball__number[data-decade] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.88),
    0 0 28px rgba(0, 0, 0, 0.75),
    -1px 0 0 rgba(255, 255, 255, 0.06),
    2px 0 0 rgba(0, 0, 0, 0.52) !important;
  animation: mega-cage-lock-digit-zoom-out 1.12s cubic-bezier(0.1, 0.78, 0.22, 1) forwards;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
    #last-ball.mega-ball--venue.mega-ball--cage-lock
    .mega-ball__number,
  body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-lock)
    #last-ball.mega-ball--venue.mega-ball--cage-lock
    .mega-ball__number[data-decade] {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-dock)
  #last-ball.mega-ball--venue {
  animation: cage-dock-vortex 0.78s cubic-bezier(0.2, 0.88, 0.2, 1) forwards;
  will-change: transform, opacity;
}

body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-dock)
  #last-ball.mega-ball--venue::before {
  filter: blur(2px);
  opacity: 0.52;
}

@keyframes mega-cage-lock-digit-zoom-out {
  0% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
  /*
   * Hold full opacity while shrinking toward the viewport centre — reads like moving
   * through the cage tunnel (balls.mp4) before dissolving near the depth limit.
   */
  74% {
    transform: scale(0.115) translateZ(0);
    opacity: 1;
  }
  92% {
    transform: scale(0.055) translateZ(0);
    opacity: 0.85;
  }
  100% {
    transform: scale(0.028) translateZ(0);
    opacity: 0;
  }
}

@keyframes cage-dock-vortex {
  0% {
    transform: rotate(0deg) scale(1) translateZ(0);
    opacity: 1;
  }
  12% {
    transform: rotate(-16deg) scale(1.055) translateZ(0);
  }
  30% {
    transform: rotate(95deg) scale(0.94) translateZ(0);
  }
  58% {
    transform: rotate(380deg) scale(0.42) translateZ(0);
    opacity: 0.96;
  }
  100% {
    transform: rotate(720deg) scale(0.04) translateZ(0);
    opacity: 0;
  }
}

/* Landing punch on the orb when the cage releases (paired with reveal burst above) */
#last-ball.mega-ball--venue.mega-ball--cage-landed {
  animation: mega-ball-land-pulse 0.92s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mega-ball-land-pulse {
  0% {
    filter:
      brightness(1.72)
      saturate(1.45)
      contrast(1.06)
      drop-shadow(0 0 48px rgba(236, 72, 153, 0.65))
      drop-shadow(0 0 90px rgba(250, 204, 21, 0.22));
    box-shadow:
      0 0 88px rgba(236, 72, 153, 0.68),
      0 0 160px rgba(168, 85, 247, 0.42),
      0 0 100px rgba(253, 224, 71, 0.12),
      inset 0 0 72px rgba(0, 0, 0, 0.78);
  }
  45% {
    filter:
      brightness(1.12)
      saturate(1.18)
      drop-shadow(0 0 34px rgba(236, 72, 153, 0.35));
    box-shadow:
      0 0 56px rgba(236, 72, 153, 0.48),
      0 0 110px rgba(168, 85, 247, 0.3),
      inset 0 0 58px rgba(0, 0, 0, 0.8);
  }
  100% {
    filter: none;
    box-shadow:
      0 0 42px rgba(236, 72, 153, 0.42),
      0 0 100px rgba(168, 85, 247, 0.28),
      inset 0 0 52px rgba(0, 0, 0, 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.screen-page::after {
    animation: none !important;
    transition-duration: 0.15s !important;
  }

  body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))::after {
    animation: none;
  }

  body.screen-page.is-cage-reveal-pulse::before {
    animation: none !important;
    opacity: 0 !important;
  }

  .screen-page .venue-brand-block,
  .screen-page .history-block,
  .screen-page .screen-board {
    transition-duration: 0.12s !important;
  }

  body.screen-page.is-cage-docking::before {
    display: none !important;
  }

  body.screen-page.is-cage-docking:not(:has(#last-ball.mega-ball--cage-spin))::after {
    animation: none !important;
  }

  body.screen-page:has(#last-ball.mega-ball--venue.mega-ball--cage-dock) #last-ball.mega-ball--venue {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  #last-ball.mega-ball--venue.mega-ball--cage-landed {
    animation: none !important;
  }

  body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
    .screen-shell::before {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .screen-bg-video-layer {
    display: none !important;
  }

  .fullscreen-overlay--free-shot.is-visible::before {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

}

.screen-page .venue-kicker,
.screen-page .venue-board-label {
  margin: 0 0 clamp(0.45rem, 1.2vmin, 0.65rem);
  padding: 0;
  border: none;
  font-size: clamp(0.68rem, 1.65vmin, 0.95rem);
  letter-spacing: 0.32em;
  font-weight: 700;
  color: rgba(248, 250, 252, 0.45);
  text-transform: uppercase;
}

.panel-title {
  margin: 0 0 0.75rem;
  font-size: clamp(0.78rem, 1.9vmin, 1.1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

.history-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.4rem, 1.2vmin, 0.75rem);
}

@media (min-width: 960px) and (min-height: 520px) {
  .history-strip {
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  .screen-page .history-strip {
    overflow-x: visible;
    overflow: visible;
    padding-bottom: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(1rem, 3.5vmin, 2rem);
  }
}

.screen-page .history-strip {
  gap: clamp(1rem, 3.5vmin, 2rem);
  flex-wrap: nowrap;
  justify-content: center;
  overflow: visible;
}

.history-ball {
  display: inline-flex;
}

.history-ball__n {
  display: grid;
  place-items: center;
  min-width: clamp(2.6rem, 5.5vmin, 4rem);
  height: clamp(2.6rem, 5.5vmin, 4rem);
  padding: 0 clamp(0.4rem, 1.2vmin, 0.65rem);
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(0.95rem, 2.4vmin, 1.65rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.screen-page .history-ball__n {
  font-family: var(--font-show-num);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  min-width: clamp(4.4rem, 12vmin, 7.25rem);
  width: clamp(4.4rem, 12vmin, 7.25rem);
  height: clamp(4.4rem, 12vmin, 7.25rem);
  padding: 0;
  font-size: clamp(1.95rem, 5.2vmin, 3.35rem);
  color: #fff;
  border: 3px solid hsla(var(--row-h, 320), 90%, 68%, 1);
  background:
    linear-gradient(155deg,
      hsla(var(--row-h, 320), 88%, 52%, 1),
      hsla(var(--row-h, 320), 78%, 30%, 1));
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 hsla(var(--row-h, 320), 95%, 72%, 0.32),
    inset 0 -4px 0 rgba(0, 0, 0, 0.4);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.65),
    0 0 20px rgba(0, 0, 0, 0.35);
  filter: saturate(1.06);
}

.screen-page .history-ball--latest .history-ball__n {
  transform: scale(1.04);
  border-color: hsla(var(--row-h, 320), 95%, 78%, 1);
  filter: saturate(1.12) brightness(1.06);
  box-shadow:
    0 0 0 2px hsla(var(--row-h, 320), 75%, 38%, 0.85),
    0 8px 28px hsla(var(--row-h, 320), 85%, 42%, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.48),
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 0 rgba(0, 0, 0, 0.38);
}

@keyframes history-ball-dock {
  from {
    transform: scale(1.42) translateY(-52%);
    opacity: 0.55;
    filter: saturate(1.2) brightness(1.15);
  }
  to {
    transform: scale(1.04);
    opacity: 1;
    filter: saturate(1.12) brightness(1.06);
  }
}

.screen-page .history-ball--dock .history-ball__n {
  animation: history-ball-dock 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .screen-page .history-ball--dock .history-ball__n {
    animation: none;
  }
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: clamp(0.22rem, 0.65vmin, 0.5rem);
  width: 100%;
  height: 100%;
}

.cell {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(0.7rem, min(2.2vw, 3.2vh), 2rem);
  font-weight: 800;
  border-radius: clamp(0.2rem, 0.5vmin, 0.45rem);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.22s ease,
    border-color 0.18s ease,
    filter 0.22s ease;
}

/* Per-decade row hue — drives colour when a ball is called, mega-ball hull, history, and cage-tick flashes. */
.cell[data-decade="0"],
.screen-page .history-ball__n[data-decade="0"],
.screen-page #last-ball.mega-ball--venue[data-decade="0"],
.screen-page .mega-ball__number[data-decade="0"] { --row-h: 330; }
.cell[data-decade="1"],
.screen-page .history-ball__n[data-decade="1"],
.screen-page #last-ball.mega-ball--venue[data-decade="1"],
.screen-page .mega-ball__number[data-decade="1"] { --row-h:  38; }
.cell[data-decade="2"],
.screen-page .history-ball__n[data-decade="2"],
.screen-page #last-ball.mega-ball--venue[data-decade="2"],
.screen-page .mega-ball__number[data-decade="2"] { --row-h: 192; }
.cell[data-decade="3"],
.screen-page .history-ball__n[data-decade="3"],
.screen-page #last-ball.mega-ball--venue[data-decade="3"],
.screen-page .mega-ball__number[data-decade="3"] { --row-h:  88; }
.cell[data-decade="4"],
.screen-page .history-ball__n[data-decade="4"],
.screen-page #last-ball.mega-ball--venue[data-decade="4"],
.screen-page .mega-ball__number[data-decade="4"] { --row-h: 268; }
.cell[data-decade="5"],
.screen-page .history-ball__n[data-decade="5"],
.screen-page #last-ball.mega-ball--venue[data-decade="5"],
.screen-page .mega-ball__number[data-decade="5"] { --row-h:  20; }
.cell[data-decade="6"],
.screen-page .history-ball__n[data-decade="6"],
.screen-page #last-ball.mega-ball--venue[data-decade="6"],
.screen-page .mega-ball__number[data-decade="6"] { --row-h: 358; }
.cell[data-decade="7"],
.screen-page .history-ball__n[data-decade="7"],
.screen-page #last-ball.mega-ball--venue[data-decade="7"],
.screen-page .mega-ball__number[data-decade="7"] { --row-h: 152; }
.cell[data-decade="8"],
.screen-page .history-ball__n[data-decade="8"],
.screen-page #last-ball.mega-ball--venue[data-decade="8"],
.screen-page .mega-ball__number[data-decade="8"] { --row-h: 220; }

.screen-page .cell {
  font-family: var(--font-show-num);
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 0;
  font-size: clamp(1.25rem, min(4.05vw, 6.65vh), 3.85rem);
  letter-spacing: 0.01em;
  line-height: 0.91;
  border-radius: clamp(0.08rem, 0.26vmin, 0.22rem);
  background: linear-gradient(
    162deg,
    rgba(51, 65, 85, 0.32) 0%,
    rgba(15, 23, 42, 0.72) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45);
  text-shadow: none;
  opacity: 1;
  filter: none;
}

.screen-page .cell.is-called {
  color: #fff;
  filter: saturate(1.28) brightness(1.08);
  background:
    linear-gradient(
      145deg,
      hsla(var(--row-h, 320), 100%, 70%, 1),
      hsla(var(--row-h, 320), 88%, 45%, 1)
    );
  border: 2px solid hsla(var(--row-h, 320), 100%, 95%, 1);
  box-shadow:
    0 0 0 2px hsla(var(--row-h, 320), 100%, 24%, 0.55),
    0 6px 22px hsla(var(--row-h, 320), 98%, 48%, 0.45),
    0 14px 40px hsla(var(--row-h, 320), 90%, 40%, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -4px 0 rgba(0, 0, 0, 0.38);
  text-shadow:
    0 0 2px rgba(15, 23, 42, 0.9),
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 14px 12px rgba(0, 0, 0, 0.25),
    0 0 12px rgba(255, 255, 255, 0.32);
  transform: scale(1.05);
  z-index: 1;
}

.screen-page .cell.is-called[data-decade="1"],
.screen-page .cell.is-called[data-decade="2"],
.screen-page .cell.is-called[data-decade="3"],
.screen-page .cell.is-called[data-decade="7"] {
  color: hsl(222 95% 5%);
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(255, 255, 255, 0.28),
    0 14px 20px rgba(0, 0, 0, 0.32);
}

/* Cage spin: pulse the board tile for the number currently on the mega ball */
.screen-page .cell.is-cage-tick {
  animation: cage-grid-tick-flash 0.2s ease-out;
  z-index: 5;
}

@keyframes cage-grid-tick-flash {
  0% {
    filter: brightness(1.48) saturate(1.28);
  }
  30% {
    filter: brightness(1.42) saturate(1.24);
    box-shadow:
      0 0 0 2px hsla(var(--row-h, 320), 100%, 84%, 1),
      0 0 36px hsla(var(--row-h, 320), 92%, 54%, 0.9),
      inset 0 2px 0 rgba(255, 255, 255, 0.55),
      inset 0 -4px 0 rgba(0, 0, 0, 0.32);
  }
  100% {
    filter: brightness(1.06) saturate(1.08);
  }
}

.cell.is-last {
  outline: none;
  transform: scale(1.06);
  z-index: 1;
  box-shadow:
    0 0 20px hsla(var(--row-h, 320), 95%, 55%, 0.55),
    inset 0 0 12px rgba(0, 0, 0, 0.28);
}

.screen-page .cell.is-last {
  outline: none;
  outline-offset: 0;
  transform: scale(1.12);
  z-index: 2;
  filter: saturate(1.42) brightness(1.12);
  border-color: hsla(var(--row-h, 320), 100%, 96%, 1);
  box-shadow:
    0 0 0 2px hsla(var(--row-h, 320), 100%, 92%, 0.95),
    0 0 28px hsla(var(--row-h, 320), 100%, 62%, 0.75),
    0 10px 36px hsla(var(--row-h, 320), 95%, 44%, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    inset 0 -4px 0 rgba(0, 0, 0, 0.38);
}

/* Large TV / projector: room for bigger board type and history */
@media (min-width: 1400px) and (min-height: 800px) {
  .screen-body {
    grid-template-columns: minmax(320px, 37vw) minmax(0, 1fr);
    gap: clamp(0.85rem, 1.7vw, 1.55rem);
  }

  .screen-page .cell {
    font-size: clamp(1.45rem, min(5.1vmin, 8.2vh), 5rem);
    line-height: 0.89;
  }

  .screen-page .mega-ball--venue:has(.mega-ball__number:not([hidden])) .mega-ball__number {
    font-size: clamp(8rem, min(58cqi, 42vh), 28rem);
  }

  .screen-page .history-ball__n {
    min-width: clamp(5rem, 13.5vmin, 9rem);
    width: clamp(5rem, 13.5vmin, 9rem);
    height: clamp(5rem, 13.5vmin, 9rem);
    font-size: clamp(2.15rem, 5.5vmin, 3.95rem);
  }

  .screen-page .history-block .venue-kicker {
    font-size: clamp(0.9rem, 2.15vmin, 1.18rem);
  }

  .venue-brand-block .venue-show-title {
    font-size: clamp(1.72rem, min(13.2cqi, 8.8vmin), 5.2rem);
  }

  .venue-brand-block .venue-strap:not(.venue-strap--one-line) {
    font-size: clamp(1.05rem, min(5.85cqi, 3.4vmin), 1.95rem);
  }

  .venue-brand-block .venue-strap--one-line {
    font-size: clamp(0.68rem, min(5.05cqi, 2.62vmin), 1.82rem);
  }
}

.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(circle at 50% 40%, rgba(236, 72, 153, 0.22), rgba(10, 5, 15, 0.92));
  backdrop-filter: blur(8px);
}

.fullscreen-overlay[hidden] {
  display: none !important;
}

.fullscreen-overlay.is-visible {
  animation: overlay-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes overlay-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Caller-driven winner moment — full-bleed video + looping bed (see display.js). */
.fullscreen-overlay--winner:not(.is-visible):not(.gumlet-warm-host) {
  display: none !important;
  pointer-events: none !important;
}

.fullscreen-overlay--winner.is-visible,
.fullscreen-overlay--winner.gumlet-warm-host {
  z-index: 230;
  padding: 0;
  display: block;
  background: #020204;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fullscreen-overlay--winner.is-visible {
  animation: overlay-winner-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes overlay-winner-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fullscreen-overlay--winner .winner-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Caller-driven “starting soon” — full-bleed muted loop; DJ supplies music. */
.fullscreen-overlay--soon:not(.is-visible):not(.gumlet-warm-host) {
  display: none !important;
  pointer-events: none !important;
}

.fullscreen-overlay--soon.is-visible,
.fullscreen-overlay--soon.gumlet-warm-host {
  z-index: 229;
  padding: 0;
  display: block;
  background: #020204;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fullscreen-overlay--soon.is-visible {
  animation: overlay-winner-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fullscreen-overlay--soon .soon-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Caller interval break — full-bleed video; timer stacked dead centre, no bar (display.js). */
.fullscreen-overlay--break {
  z-index: 228;
  padding: 0;
  display: block;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fullscreen-overlay--break.is-visible {
  animation: overlay-winner-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.break-screen-inner {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  height: 100%;
}

.break-screen-video-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fullscreen-overlay--break.break-screen--finale .break-screen-timer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease;
}

.break-screen-timer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 2vmin, 0.95rem);
  padding: max(env(safe-area-inset-top, 0px), 0.75rem)
    max(env(safe-area-inset-right, 0px), 0.85rem)
    max(env(safe-area-inset-bottom, 0px), 0.75rem)
    max(env(safe-area-inset-left, 0px), 0.85rem);
  text-align: center;
  pointer-events: none;
}

.break-screen-timer__label {
  font-family: "League Spartan", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(0.88rem, 2.65vmin, 1.38rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #f8f4ff;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.92),
    0 0 0.45em rgba(0, 0, 0, 0.85),
    0 0 1.1em rgba(20, 10, 40, 0.9);
}

.break-screen-timer__digits {
  font-family: var(--font-break-count);
  font-weight: 400;
  font-synthesis-weight: none;
  /**
   * Width budget per character × visible char count drives the cap so the row
   * never overflows. Default sizing assumes 4 chars (`M:SS`). Wider modes
   * (`MM:SS`, `MMM:SS`) tighten via the length modifiers below.
   * 4 chars  ≈ 3.5em wide → cap font at 22vw so 4 × 1em fits ~88vw.
   */
  font-size: clamp(6rem, min(22vw, 44vh), 28rem);
  line-height: 0.82;
  letter-spacing: 0.06em;
  color: #fff;
  /* Tabular figures + per-char fixed slots — countdown never re-flows when 1 → 4 → 6 swaps in. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  -webkit-text-stroke: clamp(2px, 0.035em, 5px) rgba(0, 0, 0, 0.55);
  text-shadow:
    0 0.04em 0 rgba(0, 0, 0, 0.45),
    0 0.08em 0.12em rgba(0, 0, 0, 0.9),
    0 0.12em 0.42em rgba(0, 0, 0, 0.75),
    0 0 0.18em rgba(255, 255, 255, 0.45),
    0 0 1.65em rgba(160, 90, 255, 0.55);
}

/** 5 chars (MM:SS) — 10+ minutes. Each char ~1em + 0.5em sep ≈ 4.5em wide. */
.break-screen-timer__digits.break-screen-timer__digits--len-5 {
  font-size: clamp(5rem, min(18vw, 40vh), 22rem);
}

/** 6+ chars (MMM:SS — defensive, e.g. very long breaks). */
.break-screen-timer__digits.break-screen-timer__digits--len-6 {
  font-size: clamp(4rem, min(14vw, 36vh), 18rem);
}

/* Each char rendered into a fixed-width slot so digit changes never shift the row. */
.break-screen-timer__digit {
  display: inline-block;
  width: 1em;
  text-align: center;
}

.break-screen-timer__digit--sep {
  width: 0.5em;
}

.break-screen-timer__sub {
  font-family: "Bebas Neue", Impact, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.55rem, 5.2vmin, 2.75rem);
  max-width: min(22em, 94vw);
  line-height: 1.12;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fefcff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.88),
    0 0 0.45em rgba(0, 0, 0, 0.75);
}

.break-screen-timer__sub--flash {
  animation: break-banter-flash 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes break-banter-flash {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fullscreen-overlay--break.break-screen--tense .break-screen-timer__digits {
  font-size: clamp(10rem, min(54vw, 49vh), 36rem);
  color: #fffef0;
  -webkit-text-stroke: clamp(2px, 0.04em, 6px) rgba(0, 0, 0, 0.52);
  text-shadow:
    0 0.04em 0 rgba(0, 0, 0, 0.5),
    0 0 0.08em rgba(255, 240, 120, 0.65),
    0 0.1em 0.45em rgba(255, 100, 40, 0.45),
    0 0.12em 0.55em rgba(255, 60, 120, 0.35);
  animation: break-timer-stomp 0.78s ease-in-out infinite;
}

.fullscreen-overlay--break.break-screen--tense .break-screen-timer__sub {
  font-size: clamp(1.72rem, 6vmin, 3.05rem);
  letter-spacing: 0.14em;
  color: #fffce8;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.6),
    0 6px 24px rgba(0, 0, 0, 0.9),
    0 0 0.55em rgba(255, 160, 50, 0.55);
}

@keyframes break-timer-stomp {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.03);
    filter: brightness(1.1);
  }
}

.break-screen-finale {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 720px);
  text-align: center;
  pointer-events: none;
}

.break-screen-finale__line {
  margin: 0 0 0.35em;
  font-family: "League Spartan", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 4vw, 1.85rem);
  color: rgba(250, 245, 255, 0.94);
  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.92),
    0 0 1em rgba(0, 0, 0, 0.65);
}

.break-screen-finale__big {
  margin: 0;
  font-family: "Bebas Neue", "League Spartan", Impact, sans-serif;
  font-size: clamp(3.4rem, 13vmin, 6.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fffef6;
  text-shadow:
    0 0 0.12em rgba(255, 220, 120, 0.75),
    0 6px 38px rgba(255, 80, 160, 0.45);
  animation: break-finale-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both,
    break-finale-glow 1.2s ease-in-out infinite 0.2s;
}

@keyframes break-finale-pop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes break-finale-glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}

.break-screen-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .break-screen-timer__sub--flash {
    animation: none;
  }

  .fullscreen-overlay--break.break-screen--tense .break-screen-timer__digits {
    animation: none;
  }

  .break-screen-finale__big {
    animation: none;
  }
}

/* Free-shot offer — shell only; kinetic layer is .cinematic-slam (display.js). */
.fullscreen-overlay--free-shot {
  z-index: 227;
  padding: 0;
  display: block;
  background: #020204;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.fullscreen-overlay--free-shot.is-visible {
  animation: overlay-winner-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fullscreen-overlay--free-shot .free-shot-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fullscreen-overlay--free-shot .spectacle-gumlet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
}

.overlay-inner {
  position: relative;
  text-align: center;
  max-width: min(96vw, 1400px);
  padding: 0 clamp(0.5rem, 2vmin, 1rem);
}

.overlay-title {
  margin: 0;
  font-size: clamp(3.5rem, min(14vw, 18vh), 11rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: linear-gradient(90deg, #fff, var(--pink), var(--fuchsia));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 12px 48px rgba(236, 72, 153, 0.55));
  animation: title-jolt 0.8s ease-in-out infinite;
}

.overlay-title.metal-3d-title {
  animation: none;
  font-size: clamp(3rem, min(12vw, 14vh), 9rem);
  filter:
    drop-shadow(0 3px 0 #121218)
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.85));
}

.overlay-title.metal-3d-title.metal-3d-title--slam {
  animation: metal-slam-in-large 0.92s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.overlay-title.metal-3d-title.metal-3d-title--vader.metal-3d-title--slam {
  animation: metal-slam-in-large 0.92s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.overlay-title--special {
  font-size: clamp(3rem, min(12vw, 14vh), 9rem);
}

.overlay-sub {
  margin: 1rem 0 0;
  font-size: clamp(1.15rem, min(3.5vw, 4vh), 2.25rem);
  font-weight: 700;
  color: #fce7f3;
}

.overlay-sub.metal-3d-sub {
  color: rgba(0, 0, 0, 0);
  font-size: clamp(1rem, min(3.2vw, 3.8vh), 2rem);
  font-weight: 800;
}

@keyframes title-jolt {
  0%,
  100% {
    transform: rotate(-1deg) translateY(0);
  }
  50% {
    transform: rotate(1deg) translateY(-4px);
  }
}

.overlay-burst {
  position: absolute;
  inset: -20%;
  background: conic-gradient(
    from 0deg,
    rgba(236, 72, 153, 0.35),
    rgba(167, 139, 250, 0.35),
    rgba(236, 72, 153, 0.35)
  );
  opacity: 0.28;
  filter: blur(40px);
  animation: burst-spin 8s linear infinite;
  z-index: -1;
}

@keyframes burst-spin {
  to {
    transform: rotate(360deg);
  }
}

.fullscreen-overlay--special .overlay-title,
.fullscreen-overlay--special .overlay-sub {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fullscreen-overlay--special.overlay-special-11 {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  background:
    linear-gradient(180deg, #0a0805 0%, #0a0805 11%, transparent 11%),
    linear-gradient(0deg, #0a0805 0%, #0a0805 11%, transparent 11%),
    radial-gradient(ellipse 110% 58% at 50% 46%, rgba(234, 179, 8, 0.28) 0%, #2a1f08 38%, #080602 78%, #000 100%);
  backdrop-filter: blur(2px);
}

.fullscreen-overlay--special.overlay-special-69 {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  position: relative;
  background: #030006;
  backdrop-filter: none;
}

/* Edge-to-edge bucket for `69.mp4` (no kinetic slam / glitch overlays on top). */
.fullscreen-overlay--special.overlay-special-69 > .vader-69-youtube-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transform-origin: center center;
}

.fullscreen-overlay--special.overlay-special-69 > .vader-69-youtube-wrap:not([hidden]) {
  animation: none;
}

.fullscreen-overlay--special.overlay-special-nick {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  background:
    radial-gradient(ellipse 95% 70% at 50% -8%, hsl(294 42% 12%) 0%, transparent 55%),
    radial-gradient(ellipse 88% 60% at 80% 90%, hsl(274 46% 7%) 0%, transparent 50%),
    #030108;
}

/* 69: full-screen cabaret — video readable through glitchy scrim + TV artefacts */
.fullscreen-overlay--special.overlay-special-69.overlay-vader-mode {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  position: relative;
  background: transparent;
  backdrop-filter: none;
}

.fullscreen-overlay--special.overlay-special-69.overlay-vader-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.28) 10%, transparent 10%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.28) 10%, transparent 10%),
    radial-gradient(
      ellipse 100% 72% at 50% 52%,
      rgba(90, 10, 28, 0.08) 0%,
      rgba(40, 6, 14, 0.14) 45%,
      rgba(6, 0, 2, 0.12) 78%,
      rgba(0, 0, 0, 0.22) 100%
    );
  animation: vader-scrim-flicker 0.28s steps(3, end) infinite;
}

@keyframes vader-scrim-flicker {
  0%,
  92%,
  100% {
    opacity: 1;
    filter: brightness(1) contrast(1);
  }
  94% {
    opacity: 0.88;
    filter: brightness(1.35) contrast(1.12);
  }
  96% {
    opacity: 0.96;
    filter: brightness(0.82) contrast(1.2);
  }
}

/* TV glitch: scanlines, tearing bars, chroma crawl */
.fullscreen-overlay--special.overlay-special-69.overlay-vader-mode::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.22;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0 1px,
      rgba(0, 0, 0, 0.22) 1px 2px,
      rgba(0, 0, 0, 0) 2px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 60, 0) 0 31%,
      rgba(255, 0, 90, 0.07) 31% 32%,
      rgba(0, 220, 255, 0) 32% 67%,
      rgba(0, 220, 255, 0.06) 67% 68%,
      rgba(255, 0, 60, 0) 68% 100%
    );
  background-size:
    100% 100%,
    280% 100%;
  animation:
    vader-tv-scan-drift 3.2s linear infinite,
    vader-tv-tear 2.45s steps(1, end) infinite,
    vader-tv-chroma 0.45s steps(2, end) infinite;
}

@keyframes vader-tv-scan-drift {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      0 12px,
      120% 0;
  }
}

@keyframes vader-tv-tear {
  0%,
  86%,
  100% {
    transform: translate(0, 0) skewX(0deg);
    clip-path: inset(0 0 0 0);
  }
  87% {
    transform: translate(-2.2%, 0.45vh) skewX(-1.8deg);
    clip-path: inset(32% 0 54% 0);
  }
  88% {
    transform: translate(1.8%, -0.6vh) skewX(1.4deg);
    clip-path: inset(58% 0 28% 0);
  }
  89% {
    transform: translate(-1.1%, 0.2vh) skewX(-0.6deg);
    clip-path: inset(8% 0 78% 0);
  }
  90% {
    transform: translate(0.6%, 0) skewX(0.4deg);
    clip-path: inset(70% 0 12% 0);
  }
  91% {
    transform: translate(0, 0) skewX(0deg);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes vader-tv-chroma {
  0%,
  100% {
    opacity: 0.58;
    filter: hue-rotate(0deg) saturate(1);
  }
  50% {
    opacity: 0.72;
    filter: hue-rotate(-8deg) saturate(1.35);
  }
}

.sixnine-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform-style: preserve-3d;
}

.sixnine-orbit {
  position: absolute;
  inset: 0;
  perspective: 1800px;
  transform-style: preserve-3d;
  z-index: 0;
  pointer-events: none;
}

.sixnine-fly {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  margin: 0;
  padding: 0;
  font-weight: 900;
  font-size: clamp(1.15rem, 2.8vmin, 2.6rem);
  line-height: 1;
  color: #ff2a2a;
  -webkit-text-fill-color: #ff3535;
  text-shadow:
    0 0 10px #ff0000,
    0 0 26px rgba(255, 50, 70, 1),
    0 0 42px rgba(255, 0, 40, 0.45),
    0 3px 0 #3d0000;
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, 0);
  animation: sixnine-fly-3d var(--dur, 2.4s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity, filter;
}

@keyframes sixnine-fly-3d {
  0% {
    opacity: 0.12;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -130px) rotateX(58deg) rotateZ(0deg) scale(0.42);
    filter: brightness(0.65);
  }
  22% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, var(--z, 80px)) rotateX(-18deg) rotateZ(calc(var(--spin, 360deg) * 0.3)) scale(1.22);
    filter: brightness(2.3);
  }
  48% {
    opacity: 0.88;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 50px) rotateX(28deg) rotateY(48deg) rotateZ(calc(var(--spin, 360deg) * 0.55)) scale(0.88);
    filter: brightness(1.45);
  }
  72% {
    opacity: 1;
    filter: brightness(2.1);
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -55px) rotateX(42deg) rotateZ(var(--spin, 360deg)) scale(1.08);
  }
  100% {
    opacity: 0.18;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -110px) rotateX(52deg) rotateZ(calc(var(--spin, 360deg) * 1.08)) scale(0.5);
    filter: brightness(0.75);
  }
}

.sixnine-sweep {
  z-index: 1;
  opacity: 0.4;
  inset: -40% -60%;
}

.sixnine-center {
  position: relative;
  z-index: 8;
  text-align: center;
  padding: clamp(1rem, 4vmin, 2.5rem);
  max-width: min(98vw, 1200px);
  transform-style: preserve-3d;
}

.sixnine-digits {
  font-size: clamp(5.5rem, min(32vw, 42vh), 20rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.07em;
  margin: 0;
  color: #ff1f1f;
  -webkit-text-fill-color: #ff2828;
  text-shadow:
    0 0 16px #ff0000,
    0 0 48px rgba(255, 0, 60, 0.95),
    0 0 100px rgba(255, 40, 80, 0.55),
    0 10px 0 #320000,
    0 18px 36px rgba(0, 0, 0, 0.95);
  transform: perspective(520px) rotateX(14deg) scale3d(1, 1, 1);
  animation:
    sixnine-hero-pop 0.92s cubic-bezier(0.22, 1, 0.36, 1) both,
    sixnine-glow-pulse 1.35s ease-in-out 0.92s infinite;
}

@keyframes sixnine-hero-pop {
  0% {
    opacity: 0;
    transform: perspective(520px) translateZ(-120px) rotateX(35deg) scale(0.35);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: perspective(520px) translateZ(28px) rotateX(8deg) scale(1.06);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: perspective(520px) rotateX(14deg) scale(1);
  }
}

@keyframes sixnine-glow-pulse {
  0%,
  100% {
    filter: brightness(1);
    text-shadow:
      0 0 16px #ff0000,
      0 0 48px rgba(255, 0, 60, 0.95),
      0 0 90px rgba(255, 40, 80, 0.45),
      0 10px 0 #320000;
  }
  50% {
    filter: brightness(1.25);
    text-shadow:
      0 0 28px #ff4040,
      0 0 72px rgba(255, 80, 100, 1),
      0 0 120px rgba(255, 30, 50, 0.55),
      0 10px 0 #320000;
  }
}

.sixnine-tag {
  margin: 0.5rem 0 0;
  font-size: clamp(2.4rem, min(11vw, 10vh), 6.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ff3333;
  -webkit-text-fill-color: #ff3b3b;
  text-shadow:
    0 0 20px #ff0000,
    0 0 56px rgba(255, 0, 0, 0.7),
    0 0 90px rgba(255, 60, 80, 0.35),
    0 5px 0 #200;
  animation: sixnine-tag-slam 0.88s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes sixnine-tag-slam {
  0% {
    opacity: 0;
    transform: perspective(400px) translateZ(-60px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) translateZ(0) scale(1);
  }
}

.sixnine-cabaret {
  margin: 1.1rem 0 0;
  font-size: clamp(0.95rem, 2.6vmin, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff0f3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 18px rgba(255, 120, 140, 0.5),
    0 2px 14px #000;
  max-width: 38em;
  margin-left: auto;
  margin-right: auto;
  animation: sixnine-cabaret-pulse 2.4s ease-in-out infinite;
}

@keyframes sixnine-cabaret-pulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  33% {
    filter: brightness(1.2);
  }
  38% {
    filter: brightness(1.55);
  }
  50% {
    opacity: 0.92;
    filter: brightness(1.1);
  }
}

/* 11: full-screen legs chaos — flying chips, strobes, rotating chants */
.legs-eleven-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform-style: preserve-3d;
}

.legs-orbit {
  position: absolute;
  inset: 0;
  perspective: 1800px;
  transform-style: preserve-3d;
  z-index: 0;
  pointer-events: none;
}

.legs-fly {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  margin: 0;
  padding: 0;
  font-weight: 900;
  font-size: clamp(1rem, 2.6vmin, 2.35rem);
  line-height: 1;
  color: #fde047;
  -webkit-text-fill-color: #fef08a;
  text-shadow:
    0 0 12px #facc15,
    0 0 28px rgba(250, 204, 21, 0.95),
    0 0 44px rgba(234, 179, 8, 0.45),
    0 3px 0 #422006;
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, 0);
  animation: legs-fly-3d var(--dur, 2.2s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity, filter;
}

@keyframes legs-fly-3d {
  0% {
    opacity: 0.1;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -120px) rotateX(52deg) rotateZ(0deg) scale(0.4);
    filter: brightness(0.7);
  }
  24% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, var(--z, 75px)) rotateX(-16deg) rotateZ(calc(var(--spin, 360deg) * 0.28)) scale(1.18);
    filter: brightness(2.2);
  }
  50% {
    opacity: 0.9;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 45px) rotateX(26deg) rotateY(40deg) rotateZ(calc(var(--spin, 360deg) * 0.5)) scale(0.9);
    filter: brightness(1.5);
  }
  74% {
    opacity: 1;
    filter: brightness(2);
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -48px) rotateX(38deg) rotateZ(var(--spin, 360deg)) scale(1.05);
  }
  100% {
    opacity: 0.16;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -105px) rotateX(48deg) rotateZ(calc(var(--spin, 360deg) * 1.05)) scale(0.48);
    filter: brightness(0.8);
  }
}

.legs-sweep {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(250, 204, 21, 0.12) 42%,
    rgba(254, 240, 138, 0.28) 50%,
    rgba(234, 179, 8, 0.14) 58%,
    transparent 100%
  );
  animation: legs-sweep-move 2.4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

@keyframes legs-sweep-move {
  0% {
    transform: translateX(-20%) skewX(-5deg);
  }
  100% {
    transform: translateX(22%) skewX(-5deg);
  }
}

.legs-beat-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(255, 250, 220, 0.2) 0%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: legs-beat-pop 0.45s steps(2, end) infinite;
}

@keyframes legs-beat-pop {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.legs-center {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: clamp(1rem, 4vmin, 2.5rem);
  max-width: min(98vw, 1200px);
}

.legs-hero-line.metal-3d-title {
  animation:
    metal-slam-in-large 0.92s cubic-bezier(0.22, 1, 0.36, 1) both,
    legs-hero-strobe 1.1s steps(2, end) infinite 0.95s;
}

.legs-hero-sub.metal-3d-sub {
  animation: legs-sub-flicker 2.8s ease-in-out infinite;
}

@keyframes legs-hero-strobe {
  0%,
  100% {
    filter:
      drop-shadow(0 3px 0 #121218)
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.85));
  }
  50% {
    filter:
      drop-shadow(0 3px 0 #121218)
      drop-shadow(0 0 28px rgba(253, 224, 71, 0.75))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.88));
  }
}

@keyframes legs-sub-flicker {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  40% {
    opacity: 1;
    filter: brightness(1.35);
  }
  43% {
    opacity: 0.86;
    filter: brightness(2);
  }
  48% {
    opacity: 1;
    filter: brightness(1);
  }
}

.legs-chant-stack {
  position: relative;
  margin-top: clamp(1.25rem, 3.5vmin, 2.25rem);
  min-height: clamp(2.5rem, 7vmin, 3.75rem);
}

.legs-chant {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  font-size: clamp(1.15rem, 3.2vmin, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fffbeb;
  text-shadow:
    0 0 20px rgba(250, 204, 21, 0.85),
    0 0 48px rgba(234, 179, 8, 0.55),
    0 2px 14px #000;
}

.legs-chant--0 {
  animation: legs-chant-slot 13.5s linear infinite;
}

.legs-chant--1 {
  animation: legs-chant-slot 13.5s linear infinite -1.5s;
}

.legs-chant--2 {
  animation: legs-chant-slot 13.5s linear infinite -3s;
}

.legs-chant--3 {
  animation: legs-chant-slot 13.5s linear infinite -4.5s;
}

.legs-chant--4 {
  animation: legs-chant-slot 13.5s linear infinite -6s;
}

.legs-chant--5 {
  animation: legs-chant-slot 13.5s linear infinite -7.5s;
}

.legs-chant--6 {
  animation: legs-chant-slot 13.5s linear infinite -9s;
}

.legs-chant--7 {
  animation: legs-chant-slot 13.5s linear infinite -10.5s;
}

.legs-chant--8 {
  animation: legs-chant-slot 13.5s linear infinite -12s;
}

@keyframes legs-chant-slot {
  0% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(3px);
  }
  3% {
    opacity: 1;
    transform: scale(1.04);
    filter: blur(0);
  }
  10% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.25);
  }
  14% {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
  }
}

/* Bingo full house — winner blast (aligned with 11 / 69 energy) */
/**
 * LINE — full-bleed `line.mp4`     + looping `line.wav`
 * TWO LINES — full-bleed `line2.mp4` + looping `line2.wav`
 * BINGO — full-bleed `bingowin.mp4` + looping `bingo.wav`
 * 69    — full-bleed `69.mp4`       + looping `69.wav`     (lives on #overlay-special)
 * Legacy cinematic slam cards behind SHOW_LEGACY_LINE_AND_TWO_LINES_SLAMS in display.js
 */
/**
 * Legacy PSA rules add skew animations which create a containing block for
 * `position: fixed` descendants — collapse the spectacle wrap to 0×0. Cancel
 * explicitly so the full-bleed video can paint.
 */
#overlay-announce.overlay-announce-line-spectacle,
#overlay-announce.overlay-announce-line-spectacle.overlay-announce--line,
#overlay-announce.overlay-announce-two-lines-spectacle,
#overlay-announce.overlay-announce-two-lines-spectacle.overlay-announce--two-lines,
#overlay-announce.overlay-announce-bingo-spectacle,
#overlay-announce.overlay-announce-bingo-spectacle.overlay-announce--bingo,
#overlay-announce.overlay-announce-69-spectacle,
#overlay-announce.overlay-announce-69-spectacle.overlay-announce--69,
#overlay-announce.overlay-announce-88-spectacle,
#overlay-announce.overlay-announce-88-spectacle.overlay-announce--88,
#overlay-announce.overlay-announce-11-spectacle,
#overlay-announce.overlay-announce-11-spectacle.overlay-announce--11,
#overlay-announce.overlay-announce-33-spectacle,
#overlay-announce.overlay-announce-33-spectacle.overlay-announce--33,
#overlay-announce.overlay-announce-win-skit-spectacle,
#overlay-announce.overlay-announce-win-skit-spectacle.overlay-announce--win-skit,
#overlay-announce.overlay-announce-false-bingo-spectacle.overlay-announce--false-bingo,
#overlay-announce.overlay-announce-false-line-spectacle.overlay-announce--false-line {
  padding: 0;
  display: block;
  place-items: stretch;
  place-content: stretch;
  background: #040208;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none !important;
  transform: none !important;
  overflow: hidden;
}

.line-spectacle-shed {
  position: fixed;
  left: -2999px;
  top: 0;
  width: 960px;
  height: 540px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Intro-gate Gumlet warm: off-screen but paintable (not `hidden`). */
.gumlet-warm-host {
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: visible !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

#overlay-announce.overlay-announce-line-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-two-lines-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-bingo-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-69-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-88-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-11-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-33-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-win-skit-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-false-bingo-spectacle .line-spectacle-wrap,
#overlay-announce.overlay-announce-false-line-spectacle .line-spectacle-wrap,
.line-spectacle-shed .line-spectacle-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

#overlay-announce.overlay-announce-line-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-two-lines-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-bingo-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-69-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-88-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-11-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-33-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-win-skit-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-false-bingo-spectacle .line-spectacle-video,
#overlay-announce.overlay-announce-false-line-spectacle .line-spectacle-video,
.line-spectacle-shed .line-spectacle-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/** Legacy fallback when SHOW_LEGACY_LINE_AND_TWO_LINES_SLAMS = false but no spectacle reel mounted. */
#overlay-announce.overlay-announce--two-lines.overlay-announce-two-lines-audio-only {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  background: #040208;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#overlay-announce.overlay-announce--bingo {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  background:
    linear-gradient(180deg, #060308 0%, #060308 11%, transparent 11%),
    linear-gradient(0deg, #060308 0%, #060308 11%, transparent 11%),
    radial-gradient(ellipse 118% 60% at 50% 44%, rgba(236, 72, 153, 0.38) 0%, #1f0a18 38%, #070205 74%, #000 100%);
  backdrop-filter: blur(2px);
  animation: bingo-overlay-party-breathe 2.8s ease-in-out infinite;
}

@keyframes bingo-overlay-party-breathe {
  0%,
  100% {
    filter: brightness(1) saturate(1.06);
  }
  50% {
    filter: brightness(1.14) saturate(1.28);
  }
}

/* False bingo — 30s public-service “wrong shout” splash (fail.wav) */
#overlay-announce.overlay-announce--false-bingo {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  background: #0a0504;
  backdrop-filter: none;
  overflow: hidden;
  animation: false-bingo-overlay-skew 2.4s ease-in-out infinite;
}

@keyframes false-bingo-overlay-skew {
  0%,
  100% {
    filter: hue-rotate(0deg) brightness(1);
    transform: scale(1);
  }
  25% {
    filter: hue-rotate(-8deg) brightness(1.08);
  }
  50% {
    filter: hue-rotate(6deg) brightness(1.12);
    transform: scale(1.01);
  }
  75% {
    filter: hue-rotate(-4deg) brightness(1.06);
  }
}

.false-bingo-psa {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  place-items: center;
  padding: clamp(1rem, 4vmin, 2.5rem);
  text-align: center;
  font-family: var(--font);
  overflow: hidden;
}

.false-bingo-psa__grid {
  position: absolute;
  inset: -4%;
  background-image:
    linear-gradient(rgba(251, 191, 36, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 191, 36, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: false-bingo-grid-drift 14s linear infinite;
  pointer-events: none;
  opacity: 0.9;
}

@keyframes false-bingo-grid-drift {
  to {
    transform: translate(28px, 28px);
  }
}

.false-bingo-psa__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(254, 243, 199, 0.14) 45%,
    rgba(251, 113, 133, 0.18) 50%,
    rgba(254, 243, 199, 0.12) 55%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: false-bingo-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes false-bingo-sweep {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.false-bingo-psa__siren {
  position: absolute;
  top: min(8%, 3.5rem);
  left: 50%;
  width: clamp(120px, 22vmin, 220px);
  height: clamp(120px, 22vmin, 220px);
  margin-left: calc(-1 * clamp(60px, 11vmin, 110px));
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fef3c7 0%, #f59e0b 38%, #b45309 58%, #431407 100%);
  box-shadow:
    0 0 0 4px rgba(254, 215, 170, 0.5),
    0 0 80px rgba(249, 115, 22, 0.65),
    0 0 140px rgba(239, 68, 68, 0.35),
    inset 0 12px 28px rgba(255, 255, 255, 0.35);
  animation: false-bingo-siren-spin 1.1s linear infinite, false-bingo-siren-pulse 0.55s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes false-bingo-siren-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes false-bingo-siren-pulse {
  from {
    filter: brightness(1) saturate(1.1);
  }
  to {
    filter: brightness(1.35) saturate(1.45);
  }
}

.false-bingo-psa__kicker {
  position: relative;
  z-index: 2;
  margin: 0 0 0.35rem;
  font-size: clamp(0.72rem, 2vmin, 1rem);
  font-weight: 900;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: #fef9c3;
  text-shadow:
    0 0 18px rgba(251, 191, 36, 0.85),
    0 2px 0 #78350f;
  animation: false-bingo-kicker-blink 0.45s step-end infinite;
}

@keyframes false-bingo-kicker-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
}

.false-bingo-psa__blast {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(3.2rem, min(15vw, 14vh), 8.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fffbeb;
  text-shadow:
    0 4px 0 #7f1d1d,
    0 12px 40px rgba(220, 38, 38, 0.55),
    0 0 60px rgba(251, 191, 36, 0.45);
  animation: false-bingo-blast-wobble 0.42s ease-in-out infinite;
}

@keyframes false-bingo-blast-wobble {
  0%,
  100% {
    transform: rotate(-1.2deg) scale(1);
  }
  50% {
    transform: rotate(1.4deg) scale(1.02);
  }
}

.false-bingo-psa__mega {
  position: relative;
  z-index: 2;
  margin: clamp(0.2rem, 1vmin, 0.6rem) 0 0.75rem;
  font-size: clamp(1.55rem, min(7vw, 6vh), 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #fecaca, #fde68a, #fff, #fecaca);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: false-bingo-mega-shine 2.6s linear infinite;
}

@keyframes false-bingo-mega-shine {
  to {
    background-position: 220% center;
  }
}

.false-bingo-psa__sub {
  position: relative;
  z-index: 2;
  max-width: min(52rem, 92vw);
  margin: 0 auto 1.25rem;
  font-size: clamp(1rem, 2.8vmin, 1.45rem);
  font-weight: 700;
  line-height: 1.43;
  color: rgba(254, 243, 199, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
  animation: false-bingo-sub-nudge 3.4s ease-in-out infinite;
}

@keyframes false-bingo-sub-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

.false-bingo-psa__ticker-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(96vw, 1100px);
  margin: 0 auto 1.25rem;
  padding: 0.65rem 0;
  border-top: 3px dashed rgba(251, 191, 36, 0.55);
  border-bottom: 3px dashed rgba(251, 191, 36, 0.55);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.false-bingo-psa__ticker {
  overflow: hidden;
}

.false-bingo-psa__ticker-track {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  font-size: clamp(0.88rem, 2.4vmin, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fde68a;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
  animation: false-bingo-ticker 38s linear infinite;
}

@keyframes false-bingo-ticker {
  to {
    transform: translateX(-50%);
  }
}

.false-bingo-psa__ticker-chunk {
  flex-shrink: 0;
}

.false-bingo-psa__pill {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0.55rem 1.35rem;
  font-size: clamp(0.95rem, 2.8vmin, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0c0a09;
  background: linear-gradient(180deg, #fef9c3, #facc15);
  border-radius: 999px;
  border: 3px solid #b45309;
  box-shadow:
    0 4px 0 #78350f,
    0 14px 40px rgba(251, 191, 36, 0.35);
  animation: false-bingo-pill-bounce 0.65s ease-in-out infinite alternate;
}

@keyframes false-bingo-pill-bounce {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-6px) scale(1.03);
  }
}

.false-bingo-psa__floaties {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.false-bingo-psa__floaty {
  position: absolute;
  left: var(--fb-f-x, 10%);
  top: 22%;
  font-size: clamp(1.6rem, 4.5vmin, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(254, 202, 202, 0.22);
  text-shadow: 0 0 24px rgba(248, 113, 113, 0.35);
  animation: false-bingo-floaty 6s ease-in-out infinite;
  animation-delay: var(--fb-f-delay, 0s);
}

.false-bingo-psa__floaty:nth-child(even) {
  top: 58%;
  color: rgba(253, 230, 138, 0.2);
}

@keyframes false-bingo-floaty {
  0%,
  100% {
    transform: translate(0, 0) rotate(-6deg) scale(1);
    opacity: 0.35;
  }
  33% {
    transform: translate(12px, -18px) rotate(4deg) scale(1.08);
    opacity: 0.85;
  }
  66% {
    transform: translate(-10px, 10px) rotate(-3deg) scale(0.96);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  #overlay-announce.overlay-announce--false-bingo,
  .false-bingo-psa__grid,
  .false-bingo-psa__sweep,
  .false-bingo-psa__siren,
  .false-bingo-psa__kicker,
  .false-bingo-psa__blast,
  .false-bingo-psa__mega,
  .false-bingo-psa__sub,
  .false-bingo-psa__ticker-track,
  .false-bingo-psa__pill,
  .false-bingo-psa__floaty {
    animation: none !important;
  }

  .false-bingo-psa__siren {
    transform: none;
  }
}

/* False line — wrong shout while the line prize is still available (line-fail.wav) */
#overlay-announce.overlay-announce--false-line {
  padding: 0;
  place-items: stretch;
  place-content: stretch;
  background: #030d12;
  backdrop-filter: none;
  overflow: hidden;
  animation: false-line-overlay-skew 2.8s ease-in-out infinite;
}

@keyframes false-line-overlay-skew {
  0%,
  100% {
    filter: hue-rotate(0deg) brightness(1);
    transform: scale(1);
  }
  33% {
    filter: hue-rotate(10deg) brightness(1.06);
  }
  66% {
    filter: hue-rotate(-6deg) brightness(1.1);
    transform: scale(1.008);
  }
}

.false-line-psa {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  place-items: center;
  padding: clamp(1rem, 4vmin, 2.5rem);
  text-align: center;
  font-family: var(--font);
  overflow: hidden;
}

.false-line-psa__grid {
  position: absolute;
  inset: -4%;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: false-bingo-grid-drift 14s linear infinite;
  pointer-events: none;
  opacity: 0.88;
}

.false-line-psa__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(207, 250, 254, 0.14) 45%,
    rgba(14, 165, 233, 0.2) 50%,
    rgba(207, 250, 254, 0.1) 55%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: false-bingo-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.false-line-psa__siren {
  position: absolute;
  top: min(8%, 3.5rem);
  left: 50%;
  width: clamp(120px, 22vmin, 220px);
  height: clamp(120px, 22vmin, 220px);
  margin-left: calc(-1 * clamp(60px, 11vmin, 110px));
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ecfeff 0%, #22d3ee 38%, #0e7490 58%, #083344 100%);
  box-shadow:
    0 0 0 4px rgba(165, 243, 252, 0.45),
    0 0 80px rgba(14, 165, 233, 0.55),
    0 0 120px rgba(59, 130, 246, 0.35),
    inset 0 12px 28px rgba(255, 255, 255, 0.35);
  animation: false-bingo-siren-spin 1.1s linear infinite, false-bingo-siren-pulse 0.55s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.false-line-psa__kicker {
  position: relative;
  z-index: 2;
  margin: 0 0 0.35rem;
  font-size: clamp(0.72rem, 2vmin, 1rem);
  font-weight: 900;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: #cffafe;
  text-shadow:
    0 0 18px rgba(34, 211, 238, 0.75),
    0 2px 0 #164e63;
  animation: false-bingo-kicker-blink 0.45s step-end infinite;
}

.false-line-psa__blast {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(3.2rem, min(15vw, 14vh), 8.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #f0fdfa;
  text-shadow:
    0 4px 0 #134e4a,
    0 12px 40px rgba(14, 116, 144, 0.55),
    0 0 60px rgba(45, 212, 191, 0.4);
  animation: false-bingo-blast-wobble 0.42s ease-in-out infinite;
}

.false-line-psa__mega {
  position: relative;
  z-index: 2;
  margin: clamp(0.2rem, 1vmin, 0.6rem) 0 0.75rem;
  font-size: clamp(1.55rem, min(7vw, 6vh), 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #99f6e4, #38bdf8, #f0f9ff, #99f6e4);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: false-bingo-mega-shine 2.6s linear infinite;
}

.false-line-psa__sub {
  position: relative;
  z-index: 2;
  max-width: min(52rem, 92vw);
  margin: 0 auto 1.25rem;
  font-size: clamp(1rem, 2.8vmin, 1.45rem);
  font-weight: 700;
  line-height: 1.43;
  color: rgba(236, 254, 255, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
  animation: false-bingo-sub-nudge 3.4s ease-in-out infinite;
}

.false-line-psa__ticker-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(96vw, 1100px);
  margin: 0 auto 1.25rem;
  padding: 0.65rem 0;
  border-top: 3px dashed rgba(34, 211, 238, 0.5);
  border-bottom: 3px dashed rgba(34, 211, 238, 0.5);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.false-line-psa__ticker {
  overflow: hidden;
}

.false-line-psa__ticker-track {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  font-size: clamp(0.88rem, 2.4vmin, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a5f3fc;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
  animation: false-bingo-ticker 38s linear infinite;
}

.false-line-psa__pill {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0.55rem 1.35rem;
  font-size: clamp(0.95rem, 2.8vmin, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #042f2e;
  background: linear-gradient(180deg, #ccfbf1, #5eead4);
  border-radius: 999px;
  border: 3px solid #0f766e;
  box-shadow:
    0 4px 0 #134e4a,
    0 14px 40px rgba(45, 212, 191, 0.35);
  animation: false-bingo-pill-bounce 0.65s ease-in-out infinite alternate;
}

.false-line-psa__floaties {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.false-line-psa__floaty {
  position: absolute;
  left: var(--fl-f-x, 10%);
  top: 22%;
  font-size: clamp(1.6rem, 4.5vmin, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(165, 243, 252, 0.22);
  text-shadow: 0 0 24px rgba(6, 182, 212, 0.35);
  animation: false-line-floaty 6s ease-in-out infinite;
  animation-delay: var(--fl-f-delay, 0s);
}

.false-line-psa__floaty:nth-child(even) {
  top: 58%;
  color: rgba(125, 211, 252, 0.2);
}

@keyframes false-line-floaty {
  0%,
  100% {
    transform: translate(0, 0) rotate(-6deg) scale(1);
    opacity: 0.35;
  }
  33% {
    transform: translate(12px, -18px) rotate(4deg) scale(1.08);
    opacity: 0.85;
  }
  66% {
    transform: translate(-10px, 10px) rotate(-3deg) scale(0.96);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  #overlay-announce.overlay-announce--false-line,
  .false-line-psa__grid,
  .false-line-psa__sweep,
  .false-line-psa__siren,
  .false-line-psa__kicker,
  .false-line-psa__blast,
  .false-line-psa__mega,
  .false-line-psa__sub,
  .false-line-psa__ticker-track,
  .false-line-psa__pill,
  .false-line-psa__floaty {
    animation: none !important;
  }

  .false-line-psa__siren {
    transform: none;
  }
}

body.screen-page.is-bingo-winner .screen-shell {
  animation: bingo-winner-screen-pulse 1.9s ease-in-out infinite;
  transition: filter 0.45s ease;
}

@keyframes bingo-winner-screen-pulse {
  0%,
  100% {
    filter: brightness(1.06) saturate(1.12) contrast(1.02);
    transform: scale(1);
  }
  45% {
    filter: brightness(1.14) saturate(1.28) contrast(1.04);
    transform: scale(1.006);
  }
}

.winner-blast-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform-style: preserve-3d;
}

.winner-starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 78%, rgba(254, 240, 138, 0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 18%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 64%, rgba(253, 224, 71, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 33%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 15% 55%, rgba(251, 207, 232, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 12%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 88%, rgba(255, 250, 220, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 81%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 33% 19%, rgba(248, 250, 252, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 48%, rgba(236, 72, 153, 0.35) 0 1.5px, transparent 3px),
    radial-gradient(circle at 4% 92%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px);
  background-size: 110% 110%;
  background-position: 0 0;
  animation: winner-star-drift 22s linear infinite;
}

@keyframes winner-star-drift {
  0% {
    transform: translate3d(0, 0, 0);
    background-position: 0 0;
  }
  50% {
    transform: translate3d(-1.5%, 1%, 0);
    background-position: 4% 3%;
  }
  100% {
    transform: translate3d(0, 0, 0);
    background-position: 0 0;
  }
}

.winner-orbit {
  position: absolute;
  inset: 0;
  perspective: 1900px;
  transform-style: preserve-3d;
  z-index: 1;
  pointer-events: none;
}

.winner-orbit--spark {
  z-index: 2;
}

.winner-fly {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  margin: 0;
  padding: 0;
  font-weight: 900;
  font-size: clamp(0.95rem, 2.55vmin, 2.3rem);
  line-height: 1;
  color: #fef9c3;
  -webkit-text-fill-color: #fffbeb;
  text-shadow:
    0 0 14px rgba(250, 204, 21, 0.95),
    0 0 32px rgba(244, 114, 182, 0.7),
    0 0 46px rgba(236, 72, 153, 0.45),
    0 3px 0 #3f2405;
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, 0);
  animation: winner-fly-3d var(--dur, 2.15s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity, filter;
}

.winner-fly--spark {
  font-size: clamp(0.85rem, 2.1vmin, 1.85rem);
  color: #fce7f3;
  -webkit-text-fill-color: #fdf2f8;
  text-shadow:
    0 0 12px rgba(236, 72, 153, 0.95),
    0 0 26px rgba(244, 114, 182, 0.85),
    0 2px 0 #4a0418;
  animation-duration: calc(var(--dur, 1.8s) * 0.88);
}

@keyframes winner-fly-3d {
  0% {
    opacity: 0.12;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -128px) rotateX(50deg) rotateZ(0deg) scale(0.42);
    filter: brightness(0.75);
  }
  24% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, var(--z, 78px)) rotateX(-18deg) rotateZ(calc(var(--spin, 360deg) * 0.3)) scale(1.16);
    filter: brightness(2.15);
  }
  50% {
    opacity: 0.92;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, 48px) rotateX(28deg) rotateY(42deg) rotateZ(calc(var(--spin, 360deg) * 0.52)) scale(0.92);
    filter: brightness(1.55);
  }
  74% {
    opacity: 1;
    filter: brightness(2.05);
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -52px) rotateX(40deg) rotateZ(var(--spin, 360deg)) scale(1.06);
  }
  100% {
    opacity: 0.18;
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, -110px) rotateX(46deg) rotateZ(calc(var(--spin, 360deg) * 1.06)) scale(0.5);
    filter: brightness(0.82);
  }
}

.winner-sweep {
  position: absolute;
  inset: -45% -65%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(236, 72, 153, 0.12) 38%,
    rgba(253, 224, 71, 0.32) 50%,
    rgba(244, 114, 182, 0.16) 62%,
    transparent 100%
  );
  animation: winner-sweep-move 2.05s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.winner-sweep--alt {
  animation: winner-sweep-move-alt 2.65s ease-in-out infinite alternate;
  animation-delay: -0.7s;
  opacity: 0.45;
  background: linear-gradient(
    72deg,
    transparent 0%,
    rgba(167, 139, 250, 0.12) 42%,
    rgba(250, 204, 21, 0.22) 50%,
    rgba(236, 72, 153, 0.1) 58%,
    transparent 100%
  );
}

@keyframes winner-sweep-move {
  0% {
    transform: translateX(-24%) skewX(-6deg);
  }
  100% {
    transform: translateX(26%) skewX(-6deg);
  }
}

@keyframes winner-sweep-move-alt {
  0% {
    transform: translateX(18%) skewX(5deg);
  }
  100% {
    transform: translateX(-22%) skewX(5deg);
  }
}

.winner-beat-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 250, 230, 0.22) 0%, transparent 58%),
    radial-gradient(circle at 30% 70%, rgba(244, 114, 182, 0.12) 0%, transparent 45%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: winner-beat-pop 0.36s steps(2, end) infinite;
}

@keyframes winner-beat-pop {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.winner-rim-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  box-shadow: inset 0 0 0 0 rgba(250, 204, 21, 0);
  animation: winner-rim-glow 1.65s ease-in-out infinite;
}

@keyframes winner-rim-glow {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 2px rgba(236, 72, 153, 0.28),
      inset 0 0 70px rgba(250, 204, 21, 0.07);
  }
  50% {
    box-shadow:
      inset 0 0 0 5px rgba(253, 224, 71, 0.42),
      inset 0 0 110px rgba(236, 72, 153, 0.18);
  }
}

.winner-center {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: clamp(1rem, 4.2vmin, 2.75rem);
  max-width: min(98vw, 1200px);
}

.winner-kicker {
  margin: 0 0 clamp(0.45rem, 1.6vmin, 0.9rem);
  font-size: clamp(0.95rem, 2.6vmin, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fbcfe8;
  text-shadow:
    0 0 24px rgba(236, 72, 153, 0.85),
    0 2px 12px #000;
  animation: winner-kicker-pulse 1.4s ease-in-out infinite;
}

@keyframes winner-kicker-pulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.35);
  }
}

.winner-hero {
  margin: 0;
  font-size: clamp(3.25rem, min(15vw, 19vh), 11.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
}

.winner-hero__glow {
  display: inline-block;
  background: linear-gradient(105deg, #ffffff 0%, #fef08a 32%, #f472b6 52%, #fdf4ff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 46px rgba(236, 72, 153, 0.85))
    drop-shadow(0 0 22px rgba(250, 204, 21, 0.55))
    drop-shadow(0 5px 0 rgba(59, 7, 100, 0.5));
  animation:
    winner-hero-pop 1s cubic-bezier(0.22, 1, 0.36, 1) both,
    winner-hero-shine 2.6s ease-in-out infinite 0.2s,
    winner-hero-strobe 0.48s steps(2, end) infinite 1s;
}

@keyframes winner-hero-pop {
  0% {
    transform: perspective(500px) translateZ(-80px) scale(0.72);
    filter: brightness(0.7) blur(4px);
  }
  70% {
    transform: perspective(500px) translateZ(12px) scale(1.02);
    filter: brightness(1.25) blur(0);
  }
  100% {
    transform: perspective(500px) translateZ(0) scale(1);
    filter: brightness(1) blur(0);
  }
}

@keyframes winner-hero-shine {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes winner-hero-strobe {
  0%,
  100% {
    filter:
      drop-shadow(0 0 46px rgba(236, 72, 153, 0.85))
      drop-shadow(0 0 22px rgba(250, 204, 21, 0.55))
      drop-shadow(0 5px 0 rgba(59, 7, 100, 0.5));
  }
  50% {
    filter:
      drop-shadow(0 0 76px rgba(253, 224, 71, 0.65))
      drop-shadow(0 0 52px rgba(236, 72, 153, 0.75))
      drop-shadow(0 5px 0 rgba(59, 7, 100, 0.55));
  }
}

.winner-sub {
  margin: clamp(0.85rem, 2.2vmin, 1.6rem) 0 0;
  font-size: clamp(1.05rem, min(3.4vw, 3.9vh), 2.05rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff7ed;
  text-shadow:
    0 0 18px rgba(250, 204, 21, 0.35),
    0 2px 14px #000;
}

.winner-ribbon {
  margin: clamp(1rem, 2.8vmin, 1.75rem) auto 0;
  max-width: min(90vw, 36rem);
  font-size: clamp(0.82rem, 2vmin, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253, 224, 71, 0.92);
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(236, 72, 153, 0.45);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 4, 16, 0.65), rgba(61, 10, 40, 0.45), rgba(24, 4, 16, 0.65));
  box-shadow:
    0 0 28px rgba(236, 72, 153, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: winner-ribbon-glint 2.2s ease-in-out infinite;
}

@keyframes winner-ribbon-glint {
  0%,
  100% {
    border-color: rgba(236, 72, 153, 0.45);
    box-shadow:
      0 0 28px rgba(236, 72, 153, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    border-color: rgba(253, 224, 71, 0.55);
    box-shadow:
      0 0 40px rgba(250, 204, 21, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

.winner-chant-stack {
  position: relative;
  margin-top: clamp(1.15rem, 3.2vmin, 2.1rem);
  min-height: clamp(2.35rem, 6.5vmin, 3.6rem);
}

.winner-chant {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  font-size: clamp(1.05rem, 2.95vmin, 1.95rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fffef0;
  text-shadow:
    0 0 22px rgba(244, 114, 182, 0.9),
    0 0 44px rgba(250, 204, 21, 0.45),
    0 2px 14px #000;
}

.winner-chant--0 {
  animation: winner-chant-slot 15s linear infinite;
}

.winner-chant--1 {
  animation: winner-chant-slot 15s linear infinite -1.5s;
}

.winner-chant--2 {
  animation: winner-chant-slot 15s linear infinite -3s;
}

.winner-chant--3 {
  animation: winner-chant-slot 15s linear infinite -4.5s;
}

.winner-chant--4 {
  animation: winner-chant-slot 15s linear infinite -6s;
}

.winner-chant--5 {
  animation: winner-chant-slot 15s linear infinite -7.5s;
}

.winner-chant--6 {
  animation: winner-chant-slot 15s linear infinite -9s;
}

.winner-chant--7 {
  animation: winner-chant-slot 15s linear infinite -10.5s;
}

.winner-chant--8 {
  animation: winner-chant-slot 15s linear infinite -12s;
}

.winner-chant--9 {
  animation: winner-chant-slot 15s linear infinite -13.5s;
}

@keyframes winner-chant-slot {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px);
  }
  2.5% {
    opacity: 1;
    transform: scale(1.03);
    filter: blur(0);
  }
  11% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.35);
  }
  14% {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
  }
}

/* 69: extra punch — beat flash + word chips + rotating chants */
.sixnine-beat-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle at 50% 42%, rgba(255, 80, 100, 0.35) 0%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: sixnine-beat-pop 0.38s steps(2, end) infinite;
}

@keyframes sixnine-beat-pop {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.sixnine-orbit--words {
  z-index: 1;
}

.sixnine-fly--chip {
  font-size: clamp(0.95rem, 2.2vmin, 1.85rem);
  animation-duration: calc(var(--dur, 2.4s) * 0.85);
  color: #ffa5b4;
  -webkit-text-fill-color: #ffccd4;
  text-shadow:
    0 0 10px #ff0040,
    0 0 24px rgba(255, 60, 90, 0.9),
    0 2px 0 #3d0008;
}

.sixnine-digits {
  animation:
    sixnine-hero-pop 0.92s cubic-bezier(0.22, 1, 0.36, 1) both,
    sixnine-glow-pulse 1.35s ease-in-out 0.92s infinite,
    sixnine-digit-flash 0.42s steps(2, end) infinite 1.1s;
}

@keyframes sixnine-digit-flash {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.35);
  }
}

.sixnine-tag {
  animation:
    sixnine-tag-slam 0.88s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both,
    sixnine-tag-glitch 2.6s ease-in-out infinite 1s;
}

@keyframes sixnine-tag-glitch {
  0%,
  88%,
  100% {
    transform: perspective(400px) translateZ(0) scale(1);
    filter: brightness(1);
  }
  90% {
    transform: perspective(400px) translateZ(0) scale(1.03) skewX(-3deg);
    filter: brightness(1.4);
  }
  92% {
    transform: perspective(400px) translateZ(0) scale(0.98) skewX(4deg);
    filter: brightness(1.8);
  }
}

.sixnine-chant-stack {
  position: relative;
  margin-top: clamp(1rem, 3vmin, 1.75rem);
  min-height: clamp(2.2rem, 5.5vmin, 3.25rem);
}

.sixnine-chant {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  font-size: clamp(1rem, 2.8vmin, 1.65rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffe4e8;
  text-shadow:
    0 0 18px rgba(255, 60, 80, 0.85),
    0 2px 12px #000;
}

.sixnine-chant--0 {
  animation: sixnine-chant-slot 15s linear infinite;
}

.sixnine-chant--1 {
  animation: sixnine-chant-slot 15s linear infinite -1.5s;
}

.sixnine-chant--2 {
  animation: sixnine-chant-slot 15s linear infinite -3s;
}

.sixnine-chant--3 {
  animation: sixnine-chant-slot 15s linear infinite -4.5s;
}

.sixnine-chant--4 {
  animation: sixnine-chant-slot 15s linear infinite -6s;
}

.sixnine-chant--5 {
  animation: sixnine-chant-slot 15s linear infinite -7.5s;
}

.sixnine-chant--6 {
  animation: sixnine-chant-slot 15s linear infinite -9s;
}

.sixnine-chant--7 {
  animation: sixnine-chant-slot 15s linear infinite -10.5s;
}

.sixnine-chant--8 {
  animation: sixnine-chant-slot 15s linear infinite -12s;
}

.sixnine-chant--9 {
  animation: sixnine-chant-slot 15s linear infinite -13.5s;
}

@keyframes sixnine-chant-slot {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(2px);
  }
  2.5% {
    opacity: 1;
    transform: scale(1.03);
    filter: blur(0);
  }
  11% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.3);
  }
  14% {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sixnine-fly,
  .sixnine-fly--chip {
    animation: none;
    opacity: 0.65;
  }

  .sixnine-digits,
  .sixnine-tag {
    animation: none;
  }

  .sixnine-cabaret {
    animation: none;
  }

  .sixnine-beat-flash {
    animation: none !important;
    opacity: 0;
  }

  .sixnine-chant,
  .legs-chant {
    animation: none !important;
    opacity: 0.85;
    position: relative;
  }

  .legs-fly {
    animation: none;
    opacity: 0.65;
  }

  .legs-beat-flash {
    animation: none !important;
    opacity: 0;
  }

  .legs-hero-line.metal-3d-title {
    animation: none;
  }

  .legs-hero-sub.metal-3d-sub {
    animation: none;
  }

  .legs-sweep {
    animation: none !important;
    opacity: 0.35;
  }

  .winner-fly,
  .winner-fly--spark {
    animation: none;
    opacity: 0.65;
  }

  .winner-starfield {
    animation: none;
  }

  .winner-sweep,
  .winner-sweep--alt {
    animation: none !important;
    opacity: 0.35;
  }

  .winner-beat-flash {
    animation: none !important;
    opacity: 0;
  }

  .winner-rim-pulse {
    animation: none !important;
    box-shadow: inset 0 0 0 2px rgba(236, 72, 153, 0.22);
  }

  .winner-kicker,
  .winner-ribbon {
    animation: none;
  }

  .winner-hero__glow {
    animation: none;
  }

  .winner-chant {
    animation: none !important;
    opacity: 0.88;
    position: relative;
  }

  body.screen-page.is-bingo-winner .screen-shell {
    animation: none !important;
    transform: none;
    filter: none;
  }
}

body.screen-page.is-vader-69 .screen-shell {
  filter: brightness(0.26) saturate(0.68) contrast(1.22);
  transition: filter 0.65s ease;
}

body.screen-page.is-vader-69 .hero-pattern {
  opacity: 0.28;
}

body.screen-page.is-vader-69 .grain {
  opacity: 0.08;
}

body.screen-page.is-vader-69 .venue-show-title:not(.venue-show-title--lockup) {
  background: linear-gradient(90deg, #ff4d4d, #ff9a8b, #c9183b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 40, 40, 0.75));
}

body.screen-page.is-vader-69 .venue-show-title--lockup .venue-show-title__line {
  animation: none !important;
  background: linear-gradient(92deg, #fff2f2 0%, #ff4d4d 35%, #ff9a8b 62%, #c9183b 100%);
  background-size: 116% 120%;
  background-position: 50% -8%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.28))
    drop-shadow(0 0.045em 0 rgba(180, 30, 30, 0.52))
    drop-shadow(0 0.09em 0 rgba(120, 18, 24, 0.46))
    drop-shadow(0 0.14em 0 rgba(62, 8, 16, 0.52))
    drop-shadow(0 0.2em 0.05em rgba(0, 0, 0, 0.72));
}

body.screen-page.is-vader-69 .venue-strap {
  color: rgba(255, 210, 210, 0.55);
}

/* YouTube layer for 69 — mounted inside overlay; lives in shed when idle (keeps iframe alive) */
.vader-yt-shed {
  position: fixed;
  left: -2999px;
  top: 0;
  width: 854px;
  height: 480px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.vader-yt-shed .vader-69-youtube-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fullscreen-overlay--special.overlay-special-69.overlay-vader-mode > .vader-69-youtube-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transform-origin: center center;
  transition: opacity 0.45s ease;
}

.fullscreen-overlay--special.overlay-special-69.overlay-vader-mode > .vader-69-youtube-wrap:not([hidden]) {
  animation:
    vader-youtube-breathe 5.5s ease-in-out infinite alternate,
    vader-yt-drift-shake 4.6s ease-in-out infinite,
    vader-yt-tear-clip 2.85s steps(1, end) infinite;
}

@keyframes vader-yt-drift-shake {
  0%,
  100% {
    transform: translate(0, 0) scale(1.03) rotate(0deg);
  }
  18% {
    transform: translate(0.45%, -0.35%) scale(1.035) rotate(-0.35deg);
  }
  40% {
    transform: translate(-0.55%, 0.4%) scale(1.02) rotate(0.42deg);
  }
  63% {
    transform: translate(0.25%, 0.15%) scale(1.032) rotate(-0.2deg);
  }
  82% {
    transform: translate(-0.2%, -0.25%) scale(1.028) rotate(0.15deg);
  }
}

@keyframes vader-yt-tear-clip {
  0%,
  90%,
  100% {
    clip-path: inset(0 0 0 0);
  }
  91% {
    clip-path: inset(22% 0 62% 0);
  }
  92% {
    clip-path: inset(64% 0 18% 0);
  }
  93% {
    clip-path: inset(6% 0 82% 0);
  }
  94% {
    clip-path: inset(48% 0 38% 0);
  }
  95% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes vader-youtube-breathe {
  from {
    opacity: 0.92;
    filter: brightness(0.98) saturate(1.08) contrast(1.02);
  }
  to {
    opacity: 1;
    filter: brightness(1.06) saturate(1.18) contrast(1.04);
  }
}

.vader-69-youtube-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vader-69-youtube-wrap iframe,
.vader-69-youtube-wrap video.special-69-video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 56.25vw;
  min-width: 177.77vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
  object-fit: cover;
}

.fullscreen-overlay--special.overlay-special-69 .cinematic-slam {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .fullscreen-overlay--special.overlay-special-69.overlay-vader-mode > .vader-69-youtube-wrap:not([hidden]) {
    animation: none;
    opacity: 0.78;
    transform: none;
    clip-path: none;
  }

  .fullscreen-overlay--special.overlay-special-69.overlay-vader-mode::before,
  .fullscreen-overlay--special.overlay-special-69.overlay-vader-mode::after {
    animation: none !important;
    opacity: 0.45;
  }
}

.vader-lights {
  position: fixed;
  inset: 0;
  z-index: 36;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.92;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 30, 30, 0.6) 0%, transparent 32%),
    radial-gradient(circle at 88% 82%, rgba(220, 0, 80, 0.5) 0%, transparent 30%),
    radial-gradient(circle at 48% 48%, rgba(255, 50, 100, 0.18) 0%, transparent 50%);
  animation: vader-strobe 0.22s steps(2, end) infinite;
}

@keyframes vader-strobe {
  0% {
    opacity: 0.12;
    filter: brightness(0.45) hue-rotate(0deg);
  }
  50% {
    opacity: 1;
    filter: brightness(2.4) hue-rotate(-15deg);
  }
  100% {
    opacity: 0.32;
    filter: brightness(1.05) hue-rotate(0deg);
  }
}

.overlay-inner--vader {
  position: relative;
}

.vader-sweep {
  position: absolute;
  inset: -35% -55%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255, 0, 0, 0.14) 44%,
    rgba(255, 160, 160, 0.22) 50%,
    rgba(255, 0, 0, 0.12) 56%,
    transparent 100%
  );
  animation: vader-sweep 2s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes vader-sweep {
  0% {
    transform: translateX(-18%) skewX(-6deg);
  }
  100% {
    transform: translateX(18%) skewX(-6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vader-lights {
    animation: none !important;
    opacity: 0.42;
  }

  .vader-sweep {
    animation: none !important;
    opacity: 0.35;
  }
}

.audio-unlock {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vmin, 3rem);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(236, 72, 153, 0.18) 0%, transparent 60%),
    rgba(6, 5, 6, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.3s ease;
}

.audio-unlock.is-dismissed {
  opacity: 0;
  pointer-events: none;
}

.audio-unlock:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -6px;
}

.audio-unlock__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.audio-unlock__title {
  font-size: clamp(2rem, 6vmin, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--pink), var(--fuchsia), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(236, 72, 153, 0.35));
}

.audio-unlock__hint {
  font-size: clamp(0.85rem, 1.6vmin, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* First-run sound gate — tap once to unlock audio (audience screen) */
.intro-gate {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(env(safe-area-inset-top, 0px), clamp(0.75rem, 2vmin, 1.25rem))
    max(env(safe-area-inset-right, 0px), clamp(0.75rem, 2.5vmin, 1.25rem))
    max(env(safe-area-inset-bottom, 0px), clamp(0.75rem, 2vmin, 1.25rem))
    max(env(safe-area-inset-left, 0px), clamp(0.75rem, 2.5vmin, 1.25rem));
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 65% at 50% 18%, rgba(236, 72, 153, 0.24) 0%, transparent 52%),
    radial-gradient(ellipse 55% 45% at 12% 88%, rgba(168, 85, 247, 0.12) 0%, transparent 48%),
    radial-gradient(ellipse 50% 42% at 92% 78%, rgba(217, 70, 239, 0.1) 0%, transparent 46%),
    rgba(6, 5, 6, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity 0.3s ease;
}

.intro-gate[hidden] {
  display: none;
}

.intro-gate.is-dismissed {
  opacity: 0;
  pointer-events: none;
}

.intro-gate__splash {
  width: min(100%, 28rem);
  text-align: center;
  padding: clamp(1.35rem, 3.5vmin, 2rem) clamp(1.25rem, 3vmin, 1.85rem);
  border-radius: clamp(16px, 2.8vmin, 22px);
  background: linear-gradient(165deg, rgba(24, 22, 28, 0.94) 0%, rgba(10, 9, 12, 0.98) 100%);
  border: 1px solid rgba(236, 72, 153, 0.24);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 28px 56px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(236, 72, 153, 0.1);
  animation: intro-gate-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes intro-gate-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.intro-gate__eyebrow {
  margin: 0 0 0.35rem;
  font-size: clamp(0.72rem, 1.6vmin, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.55);
}

.intro-gate__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.45rem, 5vmin, 2.15rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--pink), var(--fuchsia), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(236, 72, 153, 0.25));
}

.intro-gate__splash-hint {
  margin: 0 0 1rem;
  font-size: clamp(0.85rem, 2vmin, 0.98rem);
  font-weight: 600;
  line-height: 1.45;
  color: rgba(248, 250, 252, 0.82);
}

.intro-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.intro-gate__fullscreen-note {
  margin: 0.85rem 0 0;
  font-size: clamp(0.72rem, 1.55vmin, 0.82rem);
  font-weight: 600;
  line-height: 1.4;
  color: rgba(248, 250, 252, 0.52);
}

@media (min-width: 720px) {
  .intro-gate__splash {
    width: min(100%, 34rem);
  }
}

/**
 * How-to overlay: three-part animated show (one line → two lines → bingo)
 * on a single full-size card. Cycles automatically while the panel is open.
 */
.how-to-play-panel {
  position: fixed;
  inset: 0;
  z-index: 225;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.how-to-play-panel[hidden] {
  display: none !important;
}

.how-to-play-panel.is-visible {
  opacity: 1;
  visibility: visible;
}

.how-to-play-panel__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(4, 3, 8, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.how-to-play-panel__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 48% at 50% 18%, rgba(236, 72, 153, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 42% 36% at 12% 82%, rgba(168, 85, 247, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 38% 34% at 88% 78%, rgba(217, 70, 239, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.how-to-play-panel.is-visible .how-to-play-panel__aurora {
  opacity: 1;
}

.how-to-play-panel__scroll {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  overflow: hidden;
  padding:
    max(env(safe-area-inset-top, 0px), clamp(0.35rem, 1vmin, 0.65rem))
    max(env(safe-area-inset-right, 0px), clamp(0.5rem, 1.2vmin, 0.85rem))
    max(env(safe-area-inset-bottom, 0px), clamp(0.35rem, 1vmin, 0.65rem))
    max(env(safe-area-inset-left, 0px), clamp(0.5rem, 1.2vmin, 0.85rem));
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.55vmin, 0.4rem);
  border-radius: 0;
  background: linear-gradient(165deg, rgba(16, 14, 20, 0.98) 0%, rgba(8, 7, 10, 0.99) 100%);
  border: none;
  box-shadow: none;
  transform: scale(0.985);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.how-to-play-panel.is-visible .how-to-play-panel__scroll {
  transform: scale(1);
}

.how-to-play-panel__head {
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 0;
}

.how-to-play-panel__eyebrow {
  margin: 0 0 0.2rem;
  font-size: clamp(0.68rem, 1.4vmin, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.48);
}

.how-to-play-panel__title {
  margin: 0;
  font-size: clamp(0.92rem, 2vmin, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--pink), var(--fuchsia), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(236, 72, 153, 0.25));
  line-height: 1.15;
}

.how-to-play-panel__lede {
  margin: 0 auto;
  font-size: clamp(0.95rem, 2.4vmin, 1.45rem);
  font-weight: 700;
  line-height: 1.28;
  color: rgba(248, 250, 252, 0.92);
  max-width: min(60rem, 100%);
}

.how-to-play-panel__stage {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.howto-show {
  --howto-cycle: 21s;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: clamp(0.15rem, 0.45vmin, 0.35rem);
  text-align: center;
}

.howto-show__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.12rem, 0.45vmin, 0.32rem);
  pointer-events: none;
}

.howto-show__labels,
.howto-show__hints {
  position: relative;
  width: 100%;
}

.howto-show__labels {
  min-height: clamp(2.4rem, 7vmin, 4.5rem);
}

.howto-show__hints {
  min-height: clamp(1.1rem, 3vmin, 2rem);
}

.howto-show__label,
.howto-show__hint {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(1.1rem);
  pointer-events: none;
}

.howto-show__label-pill {
  display: inline-block;
  padding: clamp(0.28rem, 0.9vmin, 0.55rem) clamp(0.85rem, 2.4vmin, 1.65rem);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.howto-show__label-pill--bingo {
  border-color: rgba(236, 72, 153, 0.35);
  background: linear-gradient(165deg, rgba(236, 72, 153, 0.18), rgba(168, 85, 247, 0.14));
}

.how-to-play-panel:not([hidden]) .howto-show__label--line {
  animation: howto-label-line var(--howto-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.how-to-play-panel:not([hidden]) .howto-show__label--two {
  animation: howto-label-two var(--howto-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.how-to-play-panel:not([hidden]) .howto-show__label--bingo {
  animation: howto-label-bingo var(--howto-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.howto-show__label {
  font-size: clamp(1.65rem, 5.8vmin, 4.2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.06;
  color: rgba(252, 231, 243, 0.98);
  text-shadow: 0 0 32px rgba(236, 72, 153, 0.42);
}

.howto-show__label--bingo .howto-show__label-pill {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.95), rgba(168, 85, 247, 0.92));
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
  filter: drop-shadow(0 0 28px rgba(236, 72, 153, 0.45));
}

.howto-show__hint {
  font-size: clamp(0.88rem, 2.2vmin, 1.55rem);
  font-weight: 700;
  line-height: 1.32;
  color: rgba(248, 250, 252, 0.88);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.how-to-play-panel:not([hidden]) .howto-show__hint--line {
  animation: howto-hint-line var(--howto-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.how-to-play-panel:not([hidden]) .howto-show__hint--two {
  animation: howto-hint-two var(--howto-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.how-to-play-panel:not([hidden]) .howto-show__hint--bingo {
  animation: howto-hint-bingo var(--howto-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes howto-label-line {
  0%, 3% { opacity: 0; transform: translateY(1.1rem); }
  6%, 30% { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(-0.75rem); }
}

@keyframes howto-label-two {
  0%, 33% { opacity: 0; transform: translateY(1.1rem); }
  37%, 62% { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-0.75rem); }
}

@keyframes howto-label-bingo {
  0%, 66% { opacity: 0; transform: translateY(1.1rem) scale(0.94); }
  70%, 92% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(-0.75rem) scale(1.02); }
}

@keyframes howto-hint-line {
  0%, 4% { opacity: 0; transform: translateY(0.85rem); }
  8%, 28% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-0.5rem); }
}

@keyframes howto-hint-two {
  0%, 35% { opacity: 0; transform: translateY(0.85rem); }
  39%, 60% { opacity: 1; transform: translateY(0); }
  65%, 100% { opacity: 0; transform: translateY(-0.5rem); }
}

@keyframes howto-hint-bingo {
  0%, 68% { opacity: 0; transform: translateY(0.85rem); }
  72%, 90% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(-0.5rem); }
}

.howto-show__card-wrap {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.2rem, 0.65vmin, 0.45rem);
  position: relative;
}

.howto-show__card-glow {
  position: absolute;
  inset: 12% 2%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.22) 0%, transparent 68%);
  filter: blur(28px);
  opacity: 0.75;
  pointer-events: none;
}

.how-to-play-panel:not([hidden]) .howto-show__card-wrap {
  animation: howto-card-wrap-pulse var(--howto-cycle) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes howto-card-wrap-pulse {
  0%, 32%, 65%, 100% { transform: scale(1); }
  33% { transform: scale(1.025); }
  66% { transform: scale(1.03); }
}

.howto-show__card {
  --howto-pad: clamp(0.3rem, 1.35cqmin, 0.95rem);
  --howto-gap: clamp(0.22rem, 1.2cqmin, 0.95rem);
  container-type: size;
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 5 / 3;
  align-self: center;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--howto-gap);
  position: relative;
  z-index: 1;
  padding: var(--howto-pad);
  border-radius: clamp(0.75rem, 1.8cqmin, 1.35rem);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(12, 10, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.howto-show__card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  border-radius: clamp(0.45rem, 1.1vmin, 0.85rem);
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.22), rgba(168, 85, 247, 0.18));
  border: 1px solid rgba(236, 72, 153, 0.28);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.how-to-play-panel:not([hidden]) .howto-show__card::before {
  animation: howto-row-band var(--howto-cycle) ease-in-out infinite;
}

.howto-show__card::after {
  content: '';
  position: absolute;
  inset: clamp(0.35rem, 1vmin, 0.65rem);
  border-radius: clamp(0.55rem, 1.3vmin, 1rem);
  border: 2px solid rgba(168, 85, 247, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 40px rgba(168, 85, 247, 0.28);
  opacity: 0;
  pointer-events: none;
}

.how-to-play-panel:not([hidden]) .howto-show__card::after {
  animation: howto-bingo-frame var(--howto-cycle) ease-in-out infinite;
}

@keyframes howto-row-band {
  0%, 7% {
    opacity: 0;
    top: var(--howto-pad);
    height: calc((100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3);
    transform: scaleX(0.88);
  }
  9%, 28% {
    opacity: 1;
    top: calc(var(--howto-pad) + (100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3 + var(--howto-gap));
    height: calc((100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3);
    transform: scaleX(1);
  }
  31%, 36% {
    opacity: 0;
    top: calc(var(--howto-pad) + (100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3 + var(--howto-gap));
    height: calc((100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3);
    transform: scaleX(0.92);
  }
  38%, 42% {
    opacity: 0;
    top: var(--howto-pad);
    height: calc((100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3 * 2 + var(--howto-gap));
    transform: scaleY(0.88);
  }
  44%, 58% {
    opacity: 1;
    top: var(--howto-pad);
    height: calc((100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3 * 2 + var(--howto-gap));
    transform: scaleY(1);
  }
  61%, 66% {
    opacity: 0;
    top: var(--howto-pad);
    height: calc((100% - 2 * var(--howto-pad) - 2 * var(--howto-gap)) / 3 * 2 + var(--howto-gap));
    transform: scaleY(0.92);
  }
  68%, 100% { opacity: 0; }
}

@keyframes howto-bingo-frame {
  0%, 82% { opacity: 0; transform: scale(0.94); }
  86%, 94% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(1.02); }
}

.howto-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: clamp(0.28rem, 1cqmin, 0.85rem);
  font-family: var(--font-show-num);
  font-size: clamp(2.75rem, 32cqmin, 26rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: scale(0.94);
  filter: brightness(0.82);
  position: relative;
  z-index: 1;
}

.how-to-play-panel:not([hidden]) .howto-show .howto-cell {
  animation-duration: var(--howto-cycle);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="2"]:nth-child(6) { animation-name: howto-mark-r2-1; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="2"]:nth-child(7) { animation-name: howto-mark-r2-2; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="2"]:nth-child(8) { animation-name: howto-mark-r2-3; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="2"]:nth-child(9) { animation-name: howto-mark-r2-4; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="2"]:nth-child(10) { animation-name: howto-mark-r2-5; }

.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="1"]:nth-child(1) { animation-name: howto-mark-r1-1; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="1"]:nth-child(2) { animation-name: howto-mark-r1-2; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="1"]:nth-child(3) { animation-name: howto-mark-r1-3; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="1"]:nth-child(4) { animation-name: howto-mark-r1-4; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="1"]:nth-child(5) { animation-name: howto-mark-r1-5; }

.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="3"]:nth-child(11) { animation-name: howto-mark-r3-1; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="3"]:nth-child(12) { animation-name: howto-mark-r3-2; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="3"]:nth-child(13) { animation-name: howto-mark-r3-3; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="3"]:nth-child(14) { animation-name: howto-mark-r3-4; }
.how-to-play-panel:not([hidden]) .howto-show .howto-cell[data-row="3"]:nth-child(15) { animation-name: howto-mark-r3-5; }

@keyframes howto-mark-lit {
  0%, 100% {
    color: #fff;
    background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9));
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
      0 10px 28px rgba(236, 72, 153, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes howto-mark-r2-1 {
  0%, 9.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  10%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r2-2 {
  0%, 11.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  12%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r2-3 {
  0%, 13.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  14%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r2-4 {
  0%, 15.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  16%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r2-5 {
  0%, 17.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  18%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r1-1 {
  0%, 39.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  40%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r1-2 {
  0%, 41.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  42%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r1-3 {
  0%, 43.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  44%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r1-4 {
  0%, 45.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  46%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r1-5 {
  0%, 47.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  48%, 100% { color: #fff; background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(236, 72, 153, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r3-1 {
  0%, 72.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  73%, 100% { color: #fff; background: linear-gradient(165deg, rgba(168, 85, 247, 0.96), rgba(99, 102, 241, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(168, 85, 247, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r3-2 {
  0%, 74.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  75%, 100% { color: #fff; background: linear-gradient(165deg, rgba(168, 85, 247, 0.96), rgba(99, 102, 241, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(168, 85, 247, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r3-3 {
  0%, 76.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  77%, 100% { color: #fff; background: linear-gradient(165deg, rgba(168, 85, 247, 0.96), rgba(99, 102, 241, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(168, 85, 247, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r3-4 {
  0%, 78.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  79%, 100% { color: #fff; background: linear-gradient(165deg, rgba(168, 85, 247, 0.96), rgba(99, 102, 241, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(168, 85, 247, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

@keyframes howto-mark-r3-5 {
  0%, 80.5% { color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: scale(0.94); filter: brightness(0.82); }
  81%, 100% { color: #fff; background: linear-gradient(165deg, rgba(168, 85, 247, 0.96), rgba(99, 102, 241, 0.9)); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 28px rgba(168, 85, 247, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); transform: scale(1); filter: brightness(1); }
}

.howto-show__progress {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1.2vmin, 0.75rem);
  margin-top: clamp(0.15rem, 0.6vmin, 0.45rem);
}

.howto-show__dot {
  width: clamp(0.55rem, 1.35vmin, 0.85rem);
  height: clamp(0.55rem, 1.35vmin, 0.85rem);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0.85);
  opacity: 0.45;
  box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
  transition: box-shadow 0.25s ease;
}

.how-to-play-panel:not([hidden]) .howto-show__dot--1 {
  animation: howto-dot-1 var(--howto-cycle) ease infinite;
}

.how-to-play-panel:not([hidden]) .howto-show__dot--2 {
  animation: howto-dot-2 var(--howto-cycle) ease infinite;
}

.how-to-play-panel:not([hidden]) .howto-show__dot--3 {
  animation: howto-dot-3 var(--howto-cycle) ease infinite;
}

@keyframes howto-dot-1 {
  0%, 5% { transform: scale(0.85); opacity: 0.45; background: rgba(255, 255, 255, 0.22); }
  6%, 32% { transform: scale(1.15); opacity: 1; background: var(--pink); box-shadow: 0 0 14px rgba(236, 72, 153, 0.55); }
  34%, 100% { transform: scale(0.85); opacity: 0.45; background: rgba(255, 255, 255, 0.22); box-shadow: none; }
}

@keyframes howto-dot-2 {
  0%, 35% { transform: scale(0.85); opacity: 0.45; background: rgba(255, 255, 255, 0.22); }
  37%, 63% { transform: scale(1.15); opacity: 1; background: var(--fuchsia); box-shadow: 0 0 14px rgba(192, 38, 211, 0.55); }
  65%, 100% { transform: scale(0.85); opacity: 0.45; background: rgba(255, 255, 255, 0.22); box-shadow: none; }
}

@keyframes howto-dot-3 {
  0%, 67% { transform: scale(0.85); opacity: 0.45; background: rgba(255, 255, 255, 0.22); }
  69%, 93% { transform: scale(1.15); opacity: 1; background: var(--purple); box-shadow: 0 0 14px rgba(168, 85, 247, 0.55); }
  95%, 100% { transform: scale(0.85); opacity: 0.45; background: rgba(255, 255, 255, 0.22); box-shadow: none; }
}

.how-to-play-panel__foot {
  margin: 0;
  flex-shrink: 0;
  text-align: center;
  font-size: clamp(0.82rem, 2vmin, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: rgba(248, 250, 252, 0.9);
  max-width: min(52rem, 100%);
  align-self: center;
  padding: 0 clamp(0.5rem, 2vmin, 1.5rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.how-to-play-panel__foot strong {
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(252, 231, 243, 0.98);
}

@media (min-width: 1200px) and (min-height: 700px) {
  .how-to-play-panel__head {
    padding-top: clamp(0.15rem, 0.45vmin, 0.35rem);
  }

  .howto-show__labels {
    min-height: clamp(2.8rem, 8vmin, 5rem);
  }

  .howto-show__label {
    font-size: clamp(2rem, 6.2vmin, 4.8rem);
  }

  .howto-show__hint {
    font-size: clamp(1rem, 2.45vmin, 1.75rem);
  }

  .how-to-play-panel__foot {
    font-size: clamp(0.95rem, 2.2vmin, 1.4rem);
  }
}

.fullscreen-overlay--how-to-play-document {
  z-index: 232;
  padding: 0;
  display: block;
  background: #020204;
}

.fullscreen-overlay--how-to-play-document.is-visible {
  animation: overlay-winner-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fullscreen-overlay--how-to-play-document .how-to-play-document-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #020204;
}

.caller-document-block {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caller-document-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.caller-document-status__dot {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.caller-document-status__text {
  line-height: 1.2;
}

.caller-document-status.is-ok {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.1);
  color: rgba(220, 252, 231, 0.98);
}

.caller-document-status.is-ok .caller-document-status__dot {
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.65);
}

.caller-document-status.is-fallback {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.08);
  color: rgba(254, 243, 199, 0.96);
}

.caller-document-status.is-fallback .caller-document-status__dot {
  background: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.caller-document-status.is-unknown {
  color: rgba(248, 250, 252, 0.72);
}

.caller-document-folder {
  margin-top: 0;
}

.caller-document-block .hint a {
  color: #f472b6;
  font-weight: 700;
  text-underline-offset: 0.15em;
}

.caller-document-block .hint a:hover,
.caller-document-block .hint a:focus-visible {
  color: #fbcfe8;
}

.caller-document-folder__label {
  display: block;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.88);
  margin-bottom: 0.35rem;
}

.caller-document-folder__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: stretch;
}

.caller-document-folder__input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 7, 12, 0.72);
  color: rgba(248, 250, 252, 0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

.caller-document-folder__input::placeholder {
  color: rgba(248, 250, 252, 0.42);
}

.caller-document-folder__input:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .intro-gate__splash,
  .how-to-play-panel,
  .how-to-play-panel__scroll,
  .how-to-play-panel__aurora {
    animation: none !important;
    transition: none !important;
  }

  .how-to-play-panel.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .how-to-play-panel.is-visible .how-to-play-panel__scroll {
    transform: none;
  }

  .how-to-play-panel:not([hidden]) .howto-show .howto-show__label,
  .how-to-play-panel:not([hidden]) .howto-show .howto-show__hint,
  .how-to-play-panel:not([hidden]) .howto-show .howto-show__card-wrap,
  .how-to-play-panel:not([hidden]) .howto-show .howto-show__card::before,
  .how-to-play-panel:not([hidden]) .howto-show .howto-show__card::after,
  .how-to-play-panel:not([hidden]) .howto-show .howto-cell,
  .how-to-play-panel:not([hidden]) .howto-show .howto-show__dot {
    animation: none !important;
  }

  .howto-show__label--line,
  .howto-show__hint--line {
    opacity: 1;
    transform: none;
  }

  .howto-show__label--two,
  .howto-show__label--bingo,
  .howto-show__hint--two,
  .howto-show__hint--bingo {
    display: none;
  }

  .howto-cell[data-row="2"] {
    color: #fff;
    background: linear-gradient(165deg, rgba(236, 72, 153, 0.96), rgba(168, 85, 247, 0.9));
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1);
    filter: none;
  }

  .howto-show__dot--1 {
    transform: scale(1.1);
    opacity: 1;
    background: var(--pink);
  }

  .howto-show__dot--2,
  .howto-show__dot--3 {
    opacity: 0.45;
  }
}

.intro-gate__cta {
  display: block;
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 0.8rem 1rem;
  font-size: clamp(0.92rem, 2vmin, 1.05rem);
  letter-spacing: 0.04em;
}

.intro-gate__cta--secondary {
  font-weight: 700;
}

.intro-gate__cta:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.intro-gate__cta[disabled] {
  cursor: progress;
  opacity: 0.85;
}

.intro-gate__progress {
  margin-top: 1rem;
  display: none;
  flex-direction: column;
  gap: 0.45rem;
  text-align: center;
  font-size: clamp(0.78rem, 1.6vmin, 0.9rem);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
}

.intro-gate__progress.is-active {
  display: flex;
}

.intro-gate__progress-bar {
  position: relative;
  height: 6px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.intro-gate__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink, #ec4899), #fbbf24);
  transition: width 0.18s ease-out;
}

.intro-gate__progress-label {
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.intro-gate__skip {
  margin-top: 0.85rem;
}

.caller-live-overlays {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caller-live-overlays__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: 0.55rem;
}

.caller-live-overlays__tool {
  flex: 1 1 200px;
  min-width: 0;
}

.caller-live-overlays__name {
  display: block;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.88);
  margin-bottom: 0.35rem;
}

.caller-how-to-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.caller-live-overlays .caller-how-to-buttons {
  margin-top: 0;
}

.emoji-rain::before,
.emoji-rain::after {
  content: "🎉 ✨ 🥂 🎊 🔊";
  display: block;
  font-size: clamp(1.2rem, 4vw, 2rem);
  letter-spacing: 0.4em;
  animation: drift 2.8s linear infinite;
}

.emoji-rain::after {
  margin-top: 0.5rem;
  animation-duration: 3.4s;
  opacity: 0.65;
}

@keyframes drift {
  from {
    transform: translateX(-6%);
  }
  to {
    transform: translateX(6%);
  }
}

.caller-head {
  flex-wrap: wrap;
}

.caller-secret-row label {
  display: block;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.caller-key-banner {
  margin: 0.6rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.32);
  color: #fecaca;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.4;
}

.caller-key-banner[hidden] {
  display: none !important;
}

.caller-force {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caller-force > label {
  display: block;
  font-weight: 800;
  margin-bottom: 0.45rem;
}

.caller-force-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.caller-force-controls input[type="number"] {
  width: 6.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

.caller-force .hint {
  margin-top: 0.5rem;
}

.caller-force-warn {
  margin: 0.4rem 0 0;
  color: #fecaca;
  font-weight: 700;
}

.caller-force-invalid {
  border-color: rgba(248, 113, 113, 0.7) !important;
  background: rgba(127, 29, 29, 0.22) !important;
}

.caller-secret-row input {
  width: 100%;
  max-width: 420px;
  padding: 0.75rem 0.9rem;
  border-radius: 0.65rem;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
}

.hint {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.caller-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
  font-weight: 800;
}

.caller-sync-help {
  margin: 0.65rem 0 0;
  padding: 0.75rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 600;
}

.caller-action-status {
  margin: 0.55rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(236, 72, 153, 0.35);
  background: rgba(236, 72, 153, 0.1);
  color: rgba(252, 231, 243, 0.95);
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

.caller-action-status--error {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

.caller-controls.is-action-busy .caller-play-grid__btn:not(:disabled) {
  opacity: 0.72;
}

.caller-prefs {
  margin-top: 0.85rem;
}

.caller-pref-mute {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.caller-pref-mute input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.caller-pref-hint {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.caller-video-overrides {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caller-video-overrides__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.caller-video-overrides__hint {
  margin: 0 0 0.75rem;
}

.caller-video-overrides__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.caller-video-override-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.caller-video-override-row__label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.caller-video-override-row__file {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

.caller-video-override-row__input-wrap {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.caller-video-override-row__input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font-size: 0.78rem;
}

.caller-video-override-row__input:focus {
  outline: 2px solid rgba(255, 210, 80, 0.45);
  outline-offset: 1px;
}

.caller-video-override-row__save {
  flex-shrink: 0;
  padding-inline: 0.65rem;
  font-size: 0.78rem;
}

.caller-video-overrides__status {
  margin: 0.65rem 0 0;
}

.caller-video-overrides__status.is-error {
  color: #ff8a8a;
}

@media (max-width: 640px) {
  .caller-video-override-row {
    grid-template-columns: 1fr;
  }
}

.spectacle-gumlet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.spectacle-gumlet.is-ready {
  opacity: 1;
}

.line-spectacle-wrap:has(.spectacle-gumlet:not(.is-ready)),
.fullscreen-overlay--free-shot:has(.spectacle-gumlet:not(.is-ready)) {
  background: #040208;
}

video.is-embed-replaced {
  visibility: hidden;
  opacity: 0;
}

.fullscreen-overlay--free-shot .free-shot-screen-video.is-embed-replaced {
  visibility: hidden;
  opacity: 0;
}

/* ---- Framed spectacle mode (caller Settings → Framed spectacle videos) ---- */

@keyframes screen-framed-aurora {
  0% {
    opacity: 0.72;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1.06) rotate(2deg);
  }
}

@keyframes screen-framed-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.42),
      0 0 22px rgba(236, 72, 153, 0.5),
      0 0 44px rgba(168, 85, 247, 0.28),
      inset 0 0 18px rgba(236, 72, 153, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(236, 72, 153, 0.55),
      0 0 30px rgba(34, 211, 238, 0.45),
      0 0 56px rgba(217, 70, 239, 0.32),
      inset 0 0 24px rgba(34, 211, 238, 0.1);
  }
}

body.screen-page--framed #overlay-announce.overlay-announce-line-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-two-lines-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-bingo-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-69-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-88-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-11-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-33-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-win-skit-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-false-bingo-spectacle.is-visible,
body.screen-page--framed #overlay-announce.overlay-announce-false-line-spectacle.is-visible,
body.screen-page--framed .fullscreen-overlay--free-shot.is-visible,
body.screen-page--framed .fullscreen-overlay--soon.is-visible,
body.screen-page--framed .fullscreen-overlay--winner.is-visible,
body.screen-page--framed .fullscreen-overlay--break.is-visible {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vmin, 1.5rem);
  background: #06040c;
  overflow: hidden;
}

body.screen-page--framed #overlay-announce.overlay-announce-line-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-two-lines-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-bingo-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-69-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-88-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-11-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-33-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-win-skit-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-false-bingo-spectacle.is-visible::before,
body.screen-page--framed #overlay-announce.overlay-announce-false-line-spectacle.is-visible::before,
body.screen-page--framed .fullscreen-overlay--free-shot.is-visible::before,
body.screen-page--framed .fullscreen-overlay--soon.is-visible::before,
body.screen-page--framed .fullscreen-overlay--winner.is-visible::before,
body.screen-page--framed .fullscreen-overlay--break.is-visible::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 42% at 18% 22%, rgba(236, 72, 153, 0.34) 0%, transparent 58%),
    radial-gradient(ellipse 48% 38% at 82% 28%, rgba(34, 211, 238, 0.26) 0%, transparent 55%),
    radial-gradient(ellipse 62% 48% at 50% 88%, rgba(168, 85, 247, 0.22) 0%, transparent 60%),
    repeating-linear-gradient(
      90deg,
      rgba(236, 72, 153, 0.04) 0,
      rgba(236, 72, 153, 0.04) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(34, 211, 238, 0.035) 0,
      rgba(34, 211, 238, 0.035) 1px,
      transparent 1px,
      transparent 48px
    );
  animation: screen-framed-aurora 9s ease-in-out infinite alternate;
}

body.screen-page--framed #overlay-announce .line-spectacle-wrap,
body.screen-page--framed .screen-framed-video-stage {
  position: relative;
  z-index: 2;
  inset: auto;
  width: min(92vw, calc(78vh * 16 / 9));
  max-height: 78vh;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid rgba(236, 72, 153, 0.82);
  animation: screen-framed-pulse 3.2s ease-in-out infinite;
  background: #040208;
}

body.screen-page--framed .fullscreen-overlay--free-shot.is-visible,
body.screen-page--framed .fullscreen-overlay--soon.is-visible,
body.screen-page--framed .fullscreen-overlay--winner.is-visible {
  flex-direction: column;
}

body.screen-page--framed .fullscreen-overlay--free-shot .free-shot-screen-video,
body.screen-page--framed .fullscreen-overlay--soon .soon-screen-video,
body.screen-page--framed .fullscreen-overlay--winner .winner-screen-video {
  position: relative;
  inset: auto;
  width: min(92vw, calc(78vh * 16 / 9));
  max-height: 78vh;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(236, 72, 153, 0.82);
  animation: screen-framed-pulse 3.2s ease-in-out infinite;
  z-index: 2;
}

body.screen-page--framed .fullscreen-overlay--break .break-screen-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.screen-page--framed .fullscreen-overlay--break .break-screen-video-stage {
  position: relative;
  width: min(92vw, calc(78vh * 16 / 9));
  max-height: 78vh;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid rgba(236, 72, 153, 0.82);
  animation: screen-framed-pulse 3.2s ease-in-out infinite;
  background: #040208;
}

body.screen-page--framed .fullscreen-overlay--break .break-screen-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.screen-page--framed #overlay-announce .line-spectacle-video,
body.screen-page--framed #overlay-announce .spectacle-gumlet,
body.screen-page--framed .fullscreen-overlay--free-shot .spectacle-gumlet,
body.screen-page--framed .fullscreen-overlay--soon .spectacle-gumlet,
body.screen-page--framed .fullscreen-overlay--winner .spectacle-gumlet,
body.screen-page--framed .fullscreen-overlay--break .spectacle-gumlet {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: none;
  object-fit: cover;
  border-radius: 6px;
}

body.screen-page--framed .line-spectacle-wrap:has(.spectacle-gumlet:not(.is-ready)),
body.screen-page--framed .fullscreen-overlay--free-shot:has(.spectacle-gumlet:not(.is-ready)),
body.screen-page--framed .break-screen-video-stage:has(.spectacle-gumlet:not(.is-ready)) {
  background: #040208;
}

.caller-pref-framed {
  margin-top: 0.85rem;
}

/* Caller confirmation modal (reset / go back) */
.caller-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.caller-modal[hidden] {
  display: none !important;
}

.caller-modal__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(5, 3, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.caller-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 1rem;
  background: rgba(18, 12, 24, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(236, 72, 153, 0.12);
}

.caller-modal__title {
  margin: 0 0 0.65rem;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--text);
}

.caller-modal__body {
  margin: 0 0 1.15rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.caller-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

.caller-modal__actions .btn {
  margin: 0;
}

.caller-break-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1rem 0 0.25rem;
}

.caller-break-field label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.caller-break-field input[type="number"] {
  width: 100%;
  max-width: 12rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: #f4f4f8;
  font-size: 1.05rem;
}

.caller-break-field .hint {
  margin: 0;
}

.caller-break-hint {
  margin: 0.45rem 0 0;
}

.caller-live-overlays__tool--break {
  flex: 1 1 100%;
}

.caller-order {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.caller-order-heading {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.caller-order-scroll {
  max-height: min(40vh, 320px);
  overflow: auto;
  margin-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.caller-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-content: flex-start;
}

.caller-order-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 800;
}

.caller-order-item.is-last {
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(236, 72, 153, 0.12);
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.18);
}

.caller-order-pos {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.caller-order-ball {
  font-size: 1.08rem;
}

.caller-order-empty {
  margin: 0.15rem 0 0;
}

.muted {
  color: var(--muted);
  font-weight: 600;
}

.muted--error {
  color: #fca5a5 !important;
  font-weight: 700;
}

.caller-buttons {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.caller-buttons-row2 {
  margin-top: 0.75rem;
}

.caller-stop-hint {
  margin-top: 0.55rem;
}

/* ---- Caller refactor: status bar, secret pill, settings, danger zone ---- */

.caller-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}

.caller-topbar .caller-status {
  flex: 1 1 12rem;
  margin-top: 0;
}

.caller-screen-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  min-height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.caller-screen-link:hover,
.caller-screen-link:focus-visible {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.6);
  outline: none;
}

.caller-page .caller-controls {
  margin-top: 0;
}

.caller-controls {
  display: flex;
  flex-direction: column;
}

.caller-controls > * + * {
  margin-top: 1rem;
}

.caller-status {
  margin-top: 0;
}

.caller-secret-row {
  margin-top: 0.85rem;
}

/* Section cards — subtle inset to group related controls */
.caller-card {
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.caller-card__title {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Neutralise the legacy top-border / top-margin used when these blocks were
 * stacked directly inside the panel — inside a card the divider is redundant. */
.caller-card .caller-force,
.caller-card .caller-order,
.caller-card .caller-live-overlays {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.caller-card .caller-force > label,
.caller-card .caller-order-heading,
.caller-card .caller-live-overlays > .caller-order-heading,
.caller-card .caller-live-overlays > .hint {
  display: none;
}

.caller-card--play .caller-buttons + .caller-buttons {
  margin-top: 0.7rem;
}

/* 6-button play grid: equal cells, consistent weight, wraps to 3-col then
 * 2-col on narrower widths so it never looks ragged. */
.caller-play-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}

@media (max-width: 960px) {
  .caller-play-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 540px) {
  .caller-play-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.caller-play-grid__btn {
  width: 100%;
  min-height: 3rem;
  padding: 0.95rem 0.6rem;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
}

/* Call-a-specific-number: Next ball on its own row; secondary controls below. */
.caller-card .caller-force-controls {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}

.caller-force-controls__next {
  width: 100%;
}

.caller-force-controls__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
}

.caller-force-controls__row #caller-force-n {
  flex: 1 1 5.5rem;
  min-width: 0;
  min-height: 3rem;
}

.caller-force-controls__undo,
.caller-force-controls__go {
  flex: 1 1 7rem;
  min-height: 3rem;
}

.caller-force-specials {
  font-weight: 700;
  color: rgba(251, 191, 36, 0.88);
  letter-spacing: 0.02em;
}

.caller-force-specials__list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
  margin-left: 0.15rem;
}

.caller-force-specials__sep {
  opacity: 0.55;
  user-select: none;
}

.caller-force-pick {
  appearance: none;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
  color: rgba(251, 191, 36, 0.95);
  font: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.caller-force-pick:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.55);
}

.caller-force-pick:active {
  transform: scale(0.96);
}

.caller-force-pick:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.75);
  outline-offset: 2px;
}

.caller-force-pick.is-called,
.caller-force-pick:disabled {
  opacity: 0.38;
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.08);
  color: rgba(148, 163, 184, 0.72);
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}

.caller-force-pick.is-called:hover,
.caller-force-pick:disabled:hover {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.28);
}

/* Room-screen toggles: 3-column grid on wide, single-column on narrow. */
.caller-room-toggles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

@media (min-width: 900px) {
  .caller-room-toggles {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .caller-room-toggles {
    grid-template-columns: 1fr;
  }
}

.caller-room-toggle {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.2s ease;
}

.caller-room-toggle:hover:not([disabled]),
.caller-room-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.caller-room-toggle[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.caller-room-toggle__label {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.caller-room-toggle__state {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.caller-room-toggle.is-on {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.18);
}

.caller-room-toggle.is-on .caller-room-toggle__state {
  background: rgba(34, 197, 94, 0.85);
  color: #042f10;
}

/* Collapsed state: hide the label / input / hint / banner, show the pill */
.caller-secret-row--collapsed .caller-secret-row__label,
.caller-secret-row--collapsed input,
.caller-secret-row--collapsed .caller-secret-row__hint,
.caller-secret-row--collapsed .caller-key-banner {
  display: none;
}

.caller-secret-row__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.caller-secret-row__pill:hover,
.caller-secret-row__pill:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
  outline: none;
}

.caller-secret-row__pill[hidden] {
  display: none !important;
}

.caller-secret-row__pill-status {
  color: rgba(134, 239, 172, 0.95);
}

.caller-secret-row__pill-action {
  color: var(--muted);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 0.6rem;
}

.caller-settings__summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  list-style: none;
}

.caller-settings__summary::-webkit-details-marker {
  display: none;
}

.caller-panel--settings > .caller-settings__summary {
  padding: 1rem 1.05rem;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}

.caller-settings .caller-prefs {
  margin-top: 0.75rem;
}

.caller-danger-zone {
  opacity: 0.78;
  transition: opacity 0.15s ease;
}

.caller-danger-zone:hover,
.caller-danger-zone:focus-within {
  opacity: 1;
}

.caller-danger-zone__title {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.caller-buttons-danger {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.caller-buttons-danger .btn {
  flex: 1 1 10rem;
  min-height: 3rem;
}

/* ---- Caller mobile ---- */
@media (max-width: 640px) {
  .caller-page {
    padding-bottom: calc(6rem + max(env(safe-area-inset-bottom, 0px), 0.75rem));
  }

  .caller-hero {
    padding: 1rem;
  }

  .caller-hero__aside {
    justify-content: flex-start;
    padding-top: 0.15rem;
  }

  .caller-secret-row input {
    max-width: none;
    width: 100%;
    min-height: 3rem;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .caller-play-grid {
    gap: 0.5rem;
  }

  .caller-play-grid__btn {
    min-height: 3.25rem;
    padding: 0.85rem 0.45rem;
    font-size: 0.92rem;
    white-space: normal;
    line-height: 1.15;
  }

  .caller-force-controls__row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .caller-force-controls__row #caller-force-n,
  .caller-force-controls__go {
    width: 100%;
    min-height: 3rem;
    font-size: 16px;
  }

  .caller-force-specials {
    display: block;
    line-height: 1.45;
  }

  .caller-force-specials__list {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-top: 0.35rem;
    gap: 0.35rem;
  }

  .caller-force-pick {
    min-height: 2.5rem;
    min-width: 2.75rem;
    padding: 0.45rem 0.65rem;
    font-size: 1rem;
  }

  .caller-room-toggles {
    grid-template-columns: 1fr;
  }

  .caller-room-toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
  }

  .caller-room-toggle__state {
    flex-shrink: 0;
  }

  .caller-order-scroll {
    max-height: 12rem;
  }

  .caller-video-override-row__input-wrap {
    flex-direction: column;
  }

  .caller-video-override-row__save {
    width: 100%;
    min-height: 2.75rem;
  }

  .caller-video-override-row__input {
    min-height: 2.75rem;
    font-size: 16px;
  }

  .caller-buttons-danger {
    flex-direction: column;
  }

  .caller-buttons-danger .btn {
    width: 100%;
  }

  .caller-dock {
    max-width: none;
  }

  .caller-dock__next {
    min-height: 3.5rem;
  }

  .caller-recovery-action__btn,
  .caller-undo-btn {
    min-height: 3.25rem;
  }

  .caller-modal {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding:
      max(env(safe-area-inset-top, 0px), 0.75rem)
      max(env(safe-area-inset-right, 0px), 0.75rem)
      max(env(safe-area-inset-bottom, 0px), 0.75rem)
      max(env(safe-area-inset-left, 0px), 0.75rem);
  }

  .caller-modal__panel {
    width: 100%;
    max-width: none;
    max-height: min(88dvh, 640px);
    overflow-y: auto;
    border-radius: 1rem 1rem 0.65rem 0.65rem;
  }

  .caller-modal__actions {
    flex-direction: column-reverse;
  }

  .caller-modal__actions .btn {
    width: 100%;
    min-height: 3rem;
  }

  .caller-break-field input[type='number'] {
    font-size: 16px;
    min-height: 3rem;
  }

  .caller-secret-row__hint {
    font-size: 0.82rem;
  }

  .caller-page .btn {
    touch-action: manipulation;
  }
}

@media (max-width: 380px) {
  .caller-play-grid {
    grid-template-columns: 1fr;
  }

  .caller-play-grid__btn {
    min-height: 3rem;
  }
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 800;
  padding: 0.85rem 1.15rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

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

.btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--fuchsia));
  box-shadow: 0 14px 40px rgba(236, 72, 153, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-outline {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-fat {
  padding-inline: 1.5rem;
  font-size: 1.08rem;
}

.btn-line {
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--purple));
  box-shadow: 0 12px 34px rgba(102, 126, 234, 0.35);
}

.btn-line-secondary {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--pink));
}

.btn-bingo {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #4ade80);
  box-shadow: 0 12px 34px rgba(34, 197, 94, 0.35);
}

.btn-win-skit {
  color: #1a0f00;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 12px 34px rgba(245, 158, 11, 0.4);
}

.btn-false-bingo {
  color: #fee2e2;
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  box-shadow: 0 12px 34px rgba(185, 28, 28, 0.3);
}

.btn-ghost {
  color: var(--muted);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

.btn-danger-ghost {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(248, 113, 113, 0.35);
}

/* ============================================================
 * Cinematic slam — kinetic typography for moments (11, 69, line, bingo).
 * Letters crash in one-by-one, each kicking a shockwave ring;
 * sub-line and ribbon rise after.
 * ============================================================ */
.cinematic-slam {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  --slam-accent: 330 95% 60%;
  --slam-accent-2: 285 95% 65%;
}

.cinematic-slam--nick-call .cinematic-slam__core {
  position: relative;
  z-index: 2;
  gap: clamp(0.45rem, 1.6vmin, 1rem);
}

/* Stacked hero: never more than two manual lines (no mid-phrase wrap). */
.cinematic-slam__hero.cinematic-slam__hero--stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.05em, 0.9vmin, 0.26em);
  max-width: min(98vw, 48rem);
}

.cinematic-slam__hero-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  white-space: nowrap;
  gap: 0;
  font-size: clamp(2.05rem, min(8.6vw, 9.4vh), 7.1rem);
  line-height: 0.95;
  letter-spacing: -0.038em;
}

/* Luxe club lighting — slow beat, no harsh seizure strobing */
.cinematic-slam--nick-call::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(
      from 200deg at 50% 48%,
      transparent 0deg,
      hsla(var(--slam-accent), 0.16) 48deg,
      transparent 96deg,
      hsla(var(--slam-accent-2), 0.14) 152deg,
      transparent 210deg,
      hsla(var(--slam-accent), 0.12) 282deg,
      transparent 360deg
    ),
    radial-gradient(circle at 50% 0%, hsla(var(--slam-accent-2), 0.12) 0%, transparent 42%);
  mix-blend-mode: plus-lighter;
  opacity: 0.52;
  animation: nick-luxe-strobe-orbit 4.75s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.cinematic-slam--nick-call::after {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 0%,
    hsla(var(--slam-accent), 0.11) 36%,
    transparent 48%,
    hsla(var(--slam-accent-2), 0.12) 56%,
    transparent 66%,
    hsla(var(--slam-accent), 0.08) 80%,
    transparent 100%
  );
  background-size: 240% 240%;
  mix-blend-mode: soft-light;
  opacity: 0.48;
  animation: nick-luxe-sheen 9s ease-in-out infinite alternate;
}

@keyframes nick-luxe-strobe-orbit {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.35;
    filter: saturate(1.06) brightness(0.98);
  }
  26% {
    opacity: 0.58;
    filter: saturate(1.35) brightness(1.07);
  }
  52% {
    transform: rotate(108deg) scale(1.07);
    opacity: 0.4;
    filter: saturate(1.15) brightness(1.02);
  }
  78% {
    opacity: 0.62;
    filter: saturate(1.4) brightness(1.09);
  }
  100% {
    transform: rotate(278deg) scale(1.01);
    opacity: 0.36;
    filter: saturate(1.1) brightness(1);
  }
}

@keyframes nick-luxe-sheen {
  0% {
    background-position: 6% 18%;
  }
  100% {
    background-position: 94% 82%;
  }
}

.cinematic-slam--nick-call .cinematic-slam__bg {
  animation:
    slam-bg-pulse 3.1s ease-in-out infinite,
    nick-bg-chamber 13.5s ease-in-out infinite alternate,
    nick-call-bg-tone 18s ease-in-out infinite alternate;
  filter: saturate(1.2) contrast(1.04);
  background:
    radial-gradient(ellipse 118% 95% at 24% 20%, hsla(var(--slam-accent), 0.52) 0%, transparent 58%),
    radial-gradient(ellipse 105% 88% at 82% 76%, hsla(var(--slam-accent-2), 0.46) 0%, transparent 55%),
    radial-gradient(ellipse 92% 72% at 50% 108%, hsl(262 48% 9%) 0%, hsl(258 44% 5%) 44%, #020108 100%);
}

/* Extra fluid sheets — only where ::before exists on __bg */
.cinematic-slam--nick-call .cinematic-slam__bg::before {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.62;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 92% 78% at 24% 32%, hsla(var(--slam-accent), 0.42) 0%, transparent 54%),
    radial-gradient(ellipse 85% 72% at 76% 68%, hsla(var(--slam-accent-2), 0.36) 0%, transparent 52%),
    radial-gradient(ellipse 110% 92% at 52% 108%, rgba(251, 191, 36, 0.08) 0%, transparent 42%);
  animation: nick-call-bg-fluid 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes nick-call-bg-tone {
  0%,
  100% {
    filter: saturate(1.15) contrast(1.03) hue-rotate(-6deg);
  }
  50% {
    filter: saturate(1.35) contrast(1.05) hue-rotate(10deg);
  }
}

@keyframes nick-call-bg-fluid {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.55;
  }
  28% {
    transform: translate(2.2%, -2.8%) scale(1.07) rotate(5deg);
    opacity: 0.72;
  }
  55% {
    transform: translate(-2.6%, 1.6%) scale(1.05) rotate(-4deg);
    opacity: 0.62;
  }
  82% {
    transform: translate(1.2%, 2.4%) scale(1.06) rotate(3deg);
    opacity: 0.68;
  }
}

@keyframes nick-bg-chamber {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0.93;
  }
  40% {
    transform: scale(1.06) translate(1.3%, -1.1%);
    opacity: 1;
  }
  74% {
    transform: scale(1.02) translate(-1.1%, 0.7%);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.045) translate(0.5%, 0.35%);
    opacity: 1;
  }
}

.cinematic-slam--nick-call .cinematic-slam__vignette {
  background: radial-gradient(ellipse at 50% 44%, transparent 24%, rgba(0, 0, 0, 0.9) 100%);
}

.cinematic-slam--nick-call .cinematic-slam__digits {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

.cinematic-slam--nick-call .cinematic-slam__digit,
.cinematic-slam--nick-call .cinematic-slam__digit--right {
  text-shadow:
    0 7px 0 rgba(10, 5, 18, 0.94),
    0 2px 0 hsla(var(--slam-accent), 0.55),
    0 0 36px hsla(var(--slam-accent), 1),
    0 0 96px hsla(var(--slam-accent-2), 0.75),
    0 28px 56px rgba(0, 0, 0, 0.88);
}

@keyframes nick-hype-slot {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    filter: blur(5px);
  }
  4% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  /* Longer hold — each line stays readable before the next rotates in */
  26% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    filter: brightness(1.06);
  }
  31% {
    opacity: 0;
    transform: translateY(-10px) scale(1.03);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1);
    filter: blur(4px);
  }
}

.cinematic-slam__sub-line--nick-call {
  animation-name: nick-hype-slot;
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-slam--nick-call .cinematic-slam__bg::before {
    animation: none !important;
    opacity: 0.35;
  }

  .cinematic-slam--nick-call .cinematic-slam__bg {
    animation:
      slam-bg-pulse 3.1s ease-in-out infinite,
      nick-bg-chamber 13.5s ease-in-out infinite alternate !important;
    filter: saturate(1.12) contrast(1.03) !important;
  }

  .cinematic-slam--nick-call::before {
    animation: nick-luxe-strobe-orbit 9s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
    opacity: 0.42 !important;
  }

  .cinematic-slam--nick-call::after {
    animation: nick-luxe-sheen 16s linear infinite alternate !important;
  }
}

.cinematic-slam__bg {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 50%, hsla(var(--slam-accent), 0.35) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, hsla(var(--slam-accent-2), 0.18) 0%, transparent 70%),
    #050308;
  filter: blur(0);
  animation: slam-bg-pulse 1.6s ease-in-out infinite;
  z-index: -2;
}

.cinematic-slam__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
  z-index: -1;
}

@keyframes slam-bg-pulse {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.015); }
}

.cinematic-slam__core {
  position: relative;
  text-align: center;
  max-width: min(96vw, 1600px);
  padding: 0 clamp(0.5rem, 2vmin, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.6vmin, 1.1rem);
}

.cinematic-slam__digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 1.2vmin, 1rem);
  line-height: 0.85;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.cinematic-slam__digit {
  display: inline-block;
  font-size: clamp(8rem, min(28vw, 42vh), 26rem);
  background: linear-gradient(180deg, #fff 0%, hsl(var(--slam-accent)) 55%, hsl(var(--slam-accent-2)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 8px 0 #0a0510)
    drop-shadow(0 22px 38px hsla(var(--slam-accent), 0.55))
    drop-shadow(0 0 80px hsla(var(--slam-accent-2), 0.4));
  opacity: 0;
  transform: translate(0, -50vh) scale(2.4) rotate(-12deg);
  animation:
    slam-digit-crash 0.62s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    slam-digit-jitter 2.4s ease-in-out var(--slam-delay, 0s) infinite;
}

.cinematic-slam__digit--right {
  transform: translate(0, -50vh) scale(2.4) rotate(12deg);
}

@keyframes slam-digit-crash {
  0%   { opacity: 0; transform: translate(0, -55vh) scale(2.6) rotate(-14deg); filter: blur(8px); }
  60%  { opacity: 1; transform: translate(0, 6vh) scale(1.05) rotate(2deg);    filter: blur(0); }
  78%  { transform: translate(0, -1vh) scale(0.97) rotate(-1deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); filter: blur(0); }
}

.cinematic-slam__digit--right {
  animation-name: slam-digit-crash-right, slam-digit-jitter;
}

@keyframes slam-digit-crash-right {
  0%   { opacity: 0; transform: translate(0, -55vh) scale(2.6) rotate(14deg); filter: blur(8px); }
  60%  { opacity: 1; transform: translate(0, 6vh) scale(1.05) rotate(-2deg);  filter: blur(0); }
  78%  { transform: translate(0, -1vh) scale(0.97) rotate(1deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); filter: blur(0); }
}

@keyframes slam-digit-jitter {
  0%, 100% { translate: 0 0; }
  25%      { translate: -2px 1px; }
  50%      { translate: 2px -1px; }
  75%      { translate: -1px 2px; }
}

.cinematic-slam__kicker {
  margin: 0;
  font-size: clamp(0.85rem, min(2vw, 2.2vh), 1.4rem);
  letter-spacing: 0.42em;
  font-weight: 800;
  color: hsla(var(--slam-accent), 0.8);
  text-transform: uppercase;
  opacity: 0;
  animation: slam-kicker-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes slam-kicker-in {
  from { opacity: 0; transform: translateY(-12px); letter-spacing: 0.08em; }
  to   { opacity: 0.85; transform: translateY(0); letter-spacing: 0.42em; }
}

.cinematic-slam__hero {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(3rem, min(12vw, 16vh), 12rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  text-transform: uppercase;
}

.cinematic-slam__char {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, #fff 0%, hsl(var(--slam-accent)) 60%, hsl(var(--slam-accent-2)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 5px 0 #0a0510)
    drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  opacity: 0;
  transform: translateY(-40vh) scale(2.5) rotate(-6deg);
  animation: slam-char-crash 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both;
  padding: 0 0.02em;
}

.cinematic-slam__char:nth-child(odd) {
  transform: translateY(-40vh) scale(2.5) rotate(6deg);
  animation-name: slam-char-crash-alt;
}

.cinematic-slam__space {
  display: inline-block;
  width: 0.4em;
}

@keyframes slam-char-crash {
  0%   { opacity: 0; transform: translateY(-45vh) scale(2.8) rotate(-8deg); filter: blur(6px) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55)); }
  55%  { opacity: 1; transform: translateY(8%)    scale(1.04) rotate(1deg); filter: blur(0)    drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55)); }
  72%  { transform: translateY(-4%) scale(0.96) rotate(-0.5deg); }
  100% { opacity: 1; transform: translateY(0)   scale(1) rotate(0); filter: blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55)); }
}

@keyframes slam-char-crash-alt {
  0%   { opacity: 0; transform: translateY(-45vh) scale(2.8) rotate(8deg); filter: blur(6px); }
  55%  { opacity: 1; transform: translateY(8%)    scale(1.04) rotate(-1deg); filter: blur(0); }
  72%  { transform: translateY(-4%) scale(0.96) rotate(0.5deg); }
  100% { opacity: 1; transform: translateY(0)   scale(1) rotate(0); filter: blur(0); }
}

.cinematic-slam__ring {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  border: 0.18em solid hsl(var(--slam-accent));
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
  animation: slam-ring-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both;
  mix-blend-mode: screen;
  filter: blur(0.5px);
}

@keyframes slam-ring-pop {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.2); border-width: 0.22em; }
  35%  { opacity: 0.95; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.4); border-width: 0.02em; }
}

.cinematic-slam__sub {
  margin: 0;
  font-size: clamp(1rem, min(3.2vw, 3.8vh), 2.2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fce7f3;
  opacity: 0;
  animation: slam-sub-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both;
  text-shadow: 0 4px 18px hsla(var(--slam-accent), 0.55);
}

@keyframes slam-sub-rise {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* Rotating hype lines (e.g. Legs 11) */
.cinematic-slam__sub-stack {
  position: relative;
  width: 100%;
  max-width: min(94vw, 42rem);
  min-height: clamp(3rem, 9vmin, 4.5rem);
  margin: 0;
}

.cinematic-slam__sub-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  font-size: clamp(1.05rem, min(3.4vw, 4vh), 2.35rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #fffbeb;
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 24px rgba(250, 204, 21, 0.75),
    0 0 42px rgba(234, 179, 8, 0.45),
    0 3px 16px rgba(0, 0, 0, 0.75);
  animation: legs-hype-slot linear infinite;
  will-change: opacity, transform;
}

@keyframes legs-hype-slot {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    filter: blur(5px);
  }
  /* Narrow window so only one of N staggered lines reads at once (max N ≈ 14). */
  3% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  7% {
    opacity: 1;
    transform: translateY(0) scale(1.03);
    filter: brightness(1.14);
  }
  10% {
    opacity: 0;
    transform: translateY(-10px) scale(1.05);
    filter: blur(3px);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1);
    filter: blur(4px);
  }
}

.cinematic-slam__sub-line-word {
  display: inline-block;
  white-space: nowrap;
}

.cinematic-slam__sub-line--chars .cinematic-slam__sub-line-char {
  display: inline-block;
  animation: line-sub-letter-wave 1.25s ease-in-out infinite;
  animation-delay: var(--ch-stagger, 0s);
  text-shadow: inherit;
}

.cinematic-slam__sub-line--chars .cinematic-slam__sub-line-space {
  display: inline-block;
  white-space: nowrap;
}

@keyframes line-sub-letter-wave {
  0%,
  35%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  12% {
    transform: translateY(-9px) scale(1.1);
    filter: brightness(1.2);
  }
}

.cinematic-slam__ribbon {
  margin: 0;
  font-size: clamp(0.78rem, min(1.8vw, 2vh), 1.2rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
  padding: 0.45rem 1.1rem;
  border: 1px solid hsla(var(--slam-accent), 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  animation: slam-ribbon-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both;
}

@keyframes slam-ribbon-in {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Variants ------------------------------------------------------ */

.cinematic-slam--legs {
  --slam-accent: 330 95% 60%;
  --slam-accent-2: 285 95% 65%;
}

.cinematic-slam--legs .cinematic-slam__bg {
  animation:
    slam-bg-pulse 1.05s ease-in-out infinite,
    legs-11-bg-drift 9s ease-in-out infinite;
}

@keyframes legs-11-bg-drift {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: scale(1.04) translate(0.8%, -0.6%);
    opacity: 0.92;
  }
  70% {
    transform: scale(1.02) translate(-0.6%, 0.4%);
    opacity: 1;
  }
}

.cinematic-slam--legs .cinematic-slam__core {
  gap: clamp(0.65rem, 2vmin, 1.2rem);
}

.cinematic-slam--legs .cinematic-slam__digit {
  animation:
    slam-digit-crash 0.62s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    legs-11-digit-pop 0.82s cubic-bezier(0.34, 1.45, 0.64, 1) calc(var(--slam-delay, 0s) + 0.62s) infinite;
}

.cinematic-slam--legs .cinematic-slam__digit--right {
  animation:
    slam-digit-crash-right 0.62s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    legs-11-digit-pop-r 0.82s cubic-bezier(0.34, 1.45, 0.64, 1) calc(var(--slam-delay, 0s) + 0.62s) infinite;
}

@keyframes legs-11-digit-pop {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(-1.5deg);
  }
  22% {
    transform: translate(0, -8px) scale(1.11) rotate(2.5deg);
  }
  45% {
    transform: translate(0, 5px) scale(1.04) rotate(-2deg);
  }
  68% {
    transform: translate(0, -4px) scale(1.08) rotate(1.2deg);
  }
}

@keyframes legs-11-digit-pop-r {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(1.5deg);
  }
  22% {
    transform: translate(0, -8px) scale(1.11) rotate(-2.5deg);
  }
  45% {
    transform: translate(0, 5px) scale(1.04) rotate(2deg);
  }
  68% {
    transform: translate(0, -4px) scale(1.08) rotate(-1.2deg);
  }
}

.cinematic-slam--legs .cinematic-slam__char {
  animation:
    slam-char-crash 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    legs-11-hero-bump 1.65s ease-in-out calc(var(--slam-delay, 0s) + 0.48s) infinite;
}

.cinematic-slam--legs .cinematic-slam__char:nth-child(odd) {
  animation:
    slam-char-crash-alt 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    legs-11-hero-bump-alt 1.65s ease-in-out calc(var(--slam-delay, 0s) + 0.48s) infinite;
}

@keyframes legs-11-hero-bump {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
  35% {
    transform: translateY(-5px) scale(1.035);
    filter: brightness(1.14) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 22px 32px hsla(var(--slam-accent), 0.62));
  }
  58% {
    transform: translateY(3px) scale(1.02);
    filter: brightness(1.06) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
}

@keyframes legs-11-hero-bump-alt {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
  35% {
    transform: translateY(-5px) scale(1.035);
    filter: brightness(1.14) blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 22px 32px hsla(var(--slam-accent), 0.62));
  }
  58% {
    transform: translateY(3px) scale(1.02);
    filter: brightness(1.06) blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
}

.cinematic-slam--vader {
  --slam-accent: 0 95% 55%;
  --slam-accent-2: 12 95% 60%;
}

.cinematic-slam--vader .cinematic-slam__bg {
  background:
    radial-gradient(circle at 50% 50%, hsla(0, 95%, 50%, 0.14) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, hsla(12, 95%, 55%, 0.06) 0%, transparent 70%),
    transparent;
  animation:
    slam-bg-pulse 1.08s ease-in-out infinite,
    vader-slam-bg-drift 7.5s ease-in-out infinite;
}

.cinematic-slam--vader .cinematic-slam__vignette {
  background: radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(0, 0, 0, 0.42) 88%, rgba(0, 0, 0, 0.62) 100%);
}

@keyframes vader-slam-bg-drift {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.18;
  }
  45% {
    transform: scale(1.07) translate(0.8%, -0.45%);
    opacity: 0.28;
  }
  70% {
    transform: scale(1.03) translate(-0.5%, 0.3%);
    opacity: 0.22;
  }
}

.cinematic-slam--vader .cinematic-slam__core {
  gap: clamp(0.6rem, 2vmin, 1.15rem);
}

.cinematic-slam--vader .cinematic-slam__digit {
  animation:
    slam-digit-crash 0.62s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    vader-69-digit-pop 0.85s cubic-bezier(0.34, 1.5, 0.64, 1) calc(var(--slam-delay, 0s) + 0.62s) infinite;
}

.cinematic-slam--vader .cinematic-slam__digit--right {
  animation:
    slam-digit-crash-right 0.62s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    vader-69-digit-pop-r 0.85s cubic-bezier(0.34, 1.5, 0.64, 1) calc(var(--slam-delay, 0s) + 0.62s) infinite;
}

@keyframes vader-69-digit-pop {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(-2deg);
  }
  20% {
    transform: translate(0, -9px) scale(1.12) rotate(3deg);
  }
  42% {
    transform: translate(0, 6px) scale(1.04) rotate(-2.5deg);
  }
  65% {
    transform: translate(0, -5px) scale(1.09) rotate(1.8deg);
  }
}

@keyframes vader-69-digit-pop-r {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(2deg);
  }
  20% {
    transform: translate(0, -9px) scale(1.12) rotate(-3deg);
  }
  42% {
    transform: translate(0, 6px) scale(1.04) rotate(2.5deg);
  }
  65% {
    transform: translate(0, -5px) scale(1.09) rotate(-1.8deg);
  }
}

.cinematic-slam--vader .cinematic-slam__char {
  animation:
    slam-char-crash 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    vader-hero-bump 1.55s ease-in-out calc(var(--slam-delay, 0s) + 0.48s) infinite;
}

.cinematic-slam--vader .cinematic-slam__char:nth-child(odd) {
  animation:
    slam-char-crash-alt 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    vader-hero-bump-alt 1.55s ease-in-out calc(var(--slam-delay, 0s) + 0.48s) infinite;
}

@keyframes vader-hero-bump {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 5px 0 #140005) drop-shadow(0 18px 32px hsla(0, 95%, 45%, 0.6));
  }
  35% {
    transform: translateY(-6px) scale(1.06);
    filter: brightness(1.18) drop-shadow(0 5px 0 #140005) drop-shadow(0 24px 40px hsla(0, 100%, 52%, 0.72));
  }
  58% {
    transform: translateY(4px) scale(1.03);
    filter: brightness(1.08) drop-shadow(0 5px 0 #140005) drop-shadow(0 18px 32px hsla(0, 95%, 45%, 0.6));
  }
}

@keyframes vader-hero-bump-alt {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) blur(0) drop-shadow(0 5px 0 #140005) drop-shadow(0 18px 32px hsla(0, 95%, 45%, 0.6));
  }
  35% {
    transform: translateY(-6px) scale(1.06);
    filter: brightness(1.18) blur(0) drop-shadow(0 5px 0 #140005) drop-shadow(0 24px 40px hsla(0, 100%, 52%, 0.72));
  }
  58% {
    transform: translateY(4px) scale(1.03);
    filter: brightness(1.08) blur(0) drop-shadow(0 5px 0 #140005) drop-shadow(0 18px 32px hsla(0, 95%, 45%, 0.6));
  }
}

.cinematic-slam--vader .cinematic-slam__sub-line {
  color: #fecaca;
  text-shadow:
    0 0 26px rgba(255, 40, 60, 0.95),
    0 0 52px rgba(220, 0, 40, 0.55),
    0 3px 18px rgba(0, 0, 0, 0.85);
  animation-name: vader-hype-slot;
}

.cinematic-slam--vader .cinematic-slam__sub-line--chars .cinematic-slam__sub-line-char {
  animation: vader-sub-letter-wave 2.45s ease-in-out infinite;
  animation-delay: var(--ch-stagger, 0s);
}

@keyframes vader-sub-letter-wave {
  0%,
  38%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  16% {
    transform: translateY(-6px) scale(1.07);
    filter: brightness(1.16);
  }
}

@keyframes vader-hype-slot {
  0%,
  100% {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
    filter: blur(6px);
  }
  /* Tight slot: 14 lines ⇒ ~7.14% spacing; keep lit band under that to avoid crossover. */
  2% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    filter: blur(3px);
  }
  4% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  6.5% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    filter: brightness(1.12);
  }
  8% {
    opacity: 0;
    transform: translateY(-8px) scale(1.04);
    filter: blur(3px);
  }
}

.cinematic-slam--win {
  --slam-accent: 48 100% 60%;
  --slam-accent-2: 330 95% 60%;
}

.cinematic-slam--free-shot {
  --slam-accent: 330 95% 62%;
  --slam-accent-2: 192 92% 58%;
}

.cinematic-slam--free-shot .cinematic-slam__vignette {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0.72) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 50%, transparent 22%, rgba(0, 0, 0, 0.94) 100%);
}

.cinematic-slam--free-shot .cinematic-slam__party-spokes {
  opacity: 0.32;
  animation: win-party-spokes-spin 7s linear infinite;
}

.cinematic-slam--free-shot .cinematic-slam__party-flash {
  background:
    radial-gradient(ellipse 70% 48% at 50% 40%, rgba(255, 255, 255, 0.42) 0%, transparent 58%),
    radial-gradient(circle at 15% 75%, rgba(236, 72, 153, 0.55) 0%, transparent 38%),
    radial-gradient(circle at 88% 28%, rgba(56, 189, 248, 0.45) 0%, transparent 36%),
    radial-gradient(circle at 50% 92%, rgba(250, 204, 21, 0.28) 0%, transparent 32%);
  mix-blend-mode: screen;
  animation: free-shot-strobe 0.42s steps(1, end) infinite;
}

@keyframes free-shot-strobe {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0.08;
  }
  35% {
    opacity: 0.92;
  }
  42% {
    opacity: 0;
  }
  58% {
    opacity: 0.88;
  }
  65% {
    opacity: 0;
  }
  78% {
    opacity: 0.65;
  }
  85% {
    opacity: 0.05;
  }
  100% {
    opacity: 0;
  }
}

/* Full house — confetti, spokes, strobing room energy */
.cinematic-slam__party-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cinematic-slam__party-spokes {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 180vmax;
  height: 180vmax;
  transform: translate(-50%, -50%);
  opacity: 0.22;
  background: conic-gradient(
    from 0deg,
    rgba(250, 204, 21, 0.55),
    rgba(236, 72, 153, 0.45),
    rgba(167, 139, 250, 0.5),
    rgba(52, 211, 153, 0.45),
    rgba(250, 204, 21, 0.55)
  );
  animation: win-party-spokes-spin 10s linear infinite;
}

@keyframes win-party-spokes-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.cinematic-slam__party-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, rgba(255, 251, 235, 0.18) 0%, transparent 62%),
    radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(250, 204, 21, 0.14) 0%, transparent 40%);
  mix-blend-mode: screen;
  animation: win-party-flash-pop 1.75s ease-in-out infinite;
}

@keyframes win-party-flash-pop {
  0%,
  100% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  45% {
    opacity: 0.35;
  }
  70% {
    opacity: 0.85;
  }
}

.cinematic-slam__confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cinematic-slam__confetti-bit {
  position: absolute;
  top: -12vh;
  width: var(--cb-w, 8px);
  height: var(--cb-hh, 7px);
  border-radius: 1px 2px 2px 1px;
  opacity: 0;
  will-change: transform, opacity;
  background: linear-gradient(
    135deg,
    hsl(var(--cb-h, 200), 92%, 58%) 0%,
    hsl(calc(var(--cb-h, 200) + 48), 88%, 48%) 100%
  );
  box-shadow: 0 0 5px hsla(var(--cb-h, 200), 95%, 60%, 0.45);
  animation: win-confetti-burst var(--cb-dur, 3.2s) linear infinite;
  animation-delay: var(--cb-delay, 0s);
}

@keyframes win-confetti-burst {
  0% {
    transform: translate3d(0, var(--cb-y0, -15vh), 0) rotate(0deg) skew(var(--cb-skew, 0deg));
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--cb-x, 0px), 118vh, 0) rotate(var(--cb-rot, 720deg))
      skew(var(--cb-skew, 0deg));
    opacity: 0.9;
  }
}

.cinematic-slam--win .cinematic-slam__bg {
  animation: win-bg-disco 0.95s ease-in-out infinite;
  background:
    radial-gradient(circle at 22% 28%, rgba(250, 204, 21, 0.35) 0%, transparent 42%),
    radial-gradient(circle at 78% 22%, rgba(236, 72, 153, 0.38) 0%, transparent 46%),
    radial-gradient(circle at 50% 88%, rgba(167, 139, 250, 0.22) 0%, transparent 52%),
    radial-gradient(circle at 50% 50%, hsla(var(--slam-accent), 0.32) 0%, transparent 58%),
    #08020a;
}

.cinematic-slam--free-shot .cinematic-slam__bg {
  animation: win-bg-disco 1.05s ease-in-out infinite;
  background:
    radial-gradient(circle at 26% 30%, rgba(236, 72, 153, 0.22) 0%, transparent 40%),
    radial-gradient(circle at 74% 24%, rgba(56, 189, 248, 0.14) 0%, transparent 44%),
    radial-gradient(circle at 50% 88%, rgba(167, 139, 250, 0.1) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, hsla(var(--slam-accent), 0.14) 0%, transparent 55%),
    #020105;
}

@keyframes win-bg-disco {
  0%,
  100% {
    filter: brightness(1) saturate(1.05);
    transform: scale(1);
  }
  35% {
    filter: brightness(1.2) saturate(1.35);
    transform: scale(1.02);
  }
  60% {
    filter: brightness(1.08) saturate(1.22);
    transform: scale(1.01);
  }
}

.cinematic-slam--win .cinematic-slam__hero,
.cinematic-slam--free-shot .cinematic-slam__hero {
  flex-wrap: nowrap;
  font-size: clamp(4.75rem, min(21vw, 25vh), 18rem);
  letter-spacing: -0.04em;
}

.cinematic-slam--win .cinematic-slam__char,
.cinematic-slam--free-shot .cinematic-slam__char {
  animation:
    slam-char-crash 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    win-hero-rave 0.68s cubic-bezier(0.34, 0.12, 0.22, 1) calc(var(--slam-delay, 0s) + 0.5s + var(--win-chase, 0s))
      infinite;
}

.cinematic-slam--win .cinematic-slam__char:nth-child(odd),
.cinematic-slam--free-shot .cinematic-slam__char:nth-child(odd) {
  animation:
    slam-char-crash-alt 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    win-hero-rave-alt 0.68s cubic-bezier(0.34, 0.12, 0.22, 1) calc(var(--slam-delay, 0s) + 0.5s + var(--win-chase, 0s))
      infinite;
}

@keyframes win-hero-rave {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(-1deg);
    filter: drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
  35% {
    transform: translateY(-8px) scale(1.06) rotate(2deg);
    filter: drop-shadow(0 5px 0 #0a0510) drop-shadow(0 22px 36px hsla(330, 95%, 58%, 0.65));
  }
  65% {
    transform: translateY(3px) scale(0.98) rotate(-2deg);
    filter: brightness(1.12) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 14px 24px hsla(45, 100%, 55%, 0.55));
  }
}

@keyframes win-hero-rave-alt {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(1deg);
    filter: blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
  35% {
    transform: translateY(-8px) scale(1.06) rotate(-2deg);
    filter: blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 22px 36px hsla(330, 95%, 58%, 0.65));
  }
  65% {
    transform: translateY(3px) scale(0.98) rotate(2deg);
    filter: blur(0) brightness(1.12) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 14px 24px hsla(45, 100%, 55%, 0.55));
  }
}

.cinematic-slam--win .cinematic-slam__kicker,
.cinematic-slam--free-shot .cinematic-slam__kicker {
  animation:
    slam-kicker-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both,
    win-kicker-stomp 2.2s cubic-bezier(0.45, 0, 0.2, 1) 0.55s infinite;
}

@keyframes win-kicker-stomp {
  0%,
  100% {
    transform: translateY(0) scale(1);
    letter-spacing: 0.42em;
    filter: brightness(1);
  }
  40% {
    transform: translateY(-2px) scale(1.04);
    letter-spacing: 0.52em;
    filter: brightness(1.25);
  }
}

.cinematic-slam--win .cinematic-slam__ribbon,
.cinematic-slam--free-shot .cinematic-slam__ribbon {
  animation:
    slam-ribbon-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    win-ribbon-pulse 1.25s ease-in-out 0.65s infinite;
  border-color: hsla(45, 100%, 58%, 0.75);
  color: #fffef5;
  text-shadow: 0 0 18px rgba(250, 204, 21, 0.65);
}

@keyframes win-ribbon-pulse {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 0 hsla(330, 95%, 55%, 0.35),
      inset 0 0 0 1px hsla(45, 100%, 58%, 0.3);
  }
  50% {
    filter: brightness(1.15) saturate(1.2);
    box-shadow:
      0 0 32px 6px hsla(236, 72, 153, 0.5),
      inset 0 0 0 1px hsla(45, 100%, 68%, 0.45);
  }
}

.cinematic-slam--win .cinematic-slam__sub-stack {
  max-width: min(98vw, 52rem);
  min-height: clamp(4.25rem, 12vmin, 7rem);
}

.cinematic-slam--free-shot .cinematic-slam__sub-stack {
  max-width: min(92vw, 28rem);
  min-height: clamp(2.85rem, 8.5vmin, 4rem);
}

.cinematic-slam--win .cinematic-slam__sub-line {
  color: #fffef0;
  text-shadow:
    0 0 30px rgba(250, 204, 21, 0.9),
    0 0 52px rgba(236, 72, 153, 0.55),
    0 0 70px rgba(167, 139, 250, 0.35),
    0 3px 16px rgba(0, 0, 0, 0.75);
}

.cinematic-slam--free-shot .cinematic-slam__sub-line {
  font-size: clamp(0.92rem, min(2.65vw, 3.1vh), 1.55rem);
  letter-spacing: 0.07em;
  line-height: 1.3;
  font-weight: 800;
  color: rgba(255, 251, 235, 0.96);
  text-shadow:
    0 0 18px rgba(236, 72, 153, 0.55),
    0 0 28px rgba(56, 189, 248, 0.3),
    0 2px 14px rgba(0, 0, 0, 0.88);
}

.cinematic-slam--win .cinematic-slam__core,
.cinematic-slam--free-shot .cinematic-slam__core {
  z-index: 2;
}

.cinematic-slam--line {
  --slam-accent: 192 95% 55%;
  --slam-accent-2: 285 95% 65%;
}

.cinematic-slam--two-lines {
  --slam-accent: 268 95% 65%;
  --slam-accent-2: 330 95% 60%;
}

.cinematic-slam--line .cinematic-slam__hero {
  flex-wrap: nowrap;
  font-size: clamp(5rem, min(24vw, 28vh), 19rem);
  letter-spacing: -0.035em;
}

/* Longer string: largest type that still fits the viewport width (no overflow) */
.cinematic-slam--two-lines .cinematic-slam__hero {
  flex-wrap: nowrap;
  width: 100%;
  max-width: min(96vw, 100%);
  margin-inline: auto;
  padding-inline: clamp(0.2rem, 1.75vw, 0.85rem);
  box-sizing: border-box;
  justify-content: center;
  letter-spacing: -0.055em;
  font-size: min(
    clamp(2.65rem, min(20vw, 24vh), 17rem),
    calc((100vw - clamp(1rem, 4vw, 2rem)) / 5.65)
  );
}

.cinematic-slam--two-lines .cinematic-slam__space {
  width: 0.28em;
}

.cinematic-slam--two-lines .cinematic-slam__char {
  padding: 0 0.006em;
}

.cinematic-slam--line .cinematic-slam__sub-stack,
.cinematic-slam--two-lines .cinematic-slam__sub-stack {
  max-width: min(98vw, 52rem);
  min-height: clamp(4.25rem, 12vmin, 7rem);
}

.cinematic-slam--line .cinematic-slam__sub-line,
.cinematic-slam--two-lines .cinematic-slam__sub-line {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

.cinematic-slam--line .cinematic-slam__bg,
.cinematic-slam--two-lines .cinematic-slam__bg {
  animation:
    slam-bg-pulse 1.05s ease-in-out infinite,
    line-slam-bg-drift 6.8s ease-in-out infinite;
}

@keyframes line-slam-bg-drift {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.96;
  }
  50% {
    transform: scale(1.045) translate(0.4%, -0.3%);
    opacity: 1;
  }
}

.cinematic-slam--line .cinematic-slam__char {
  animation:
    slam-char-crash 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    line-hero-chase 2.75s cubic-bezier(0.34, 0.05, 0.22, 1) calc(var(--slam-delay, 0s) + 0.52s + var(--line-chase, 0s)) infinite;
}

.cinematic-slam--line .cinematic-slam__char:nth-child(odd) {
  animation:
    slam-char-crash-alt 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    line-hero-chase-alt 2.75s cubic-bezier(0.34, 0.05, 0.22, 1) calc(var(--slam-delay, 0s) + 0.52s + var(--line-chase, 0s)) infinite;
}

.cinematic-slam--two-lines .cinematic-slam__char {
  animation:
    slam-char-crash 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    line-hero-chase 2.75s cubic-bezier(0.34, 0.05, 0.22, 1) calc(var(--slam-delay, 0s) + 0.52s + var(--line-chase, 0s)) infinite;
}

.cinematic-slam--two-lines .cinematic-slam__char:nth-child(odd) {
  animation:
    slam-char-crash-alt 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--slam-delay, 0s) both,
    line-hero-chase-alt 2.75s cubic-bezier(0.34, 0.05, 0.22, 1) calc(var(--slam-delay, 0s) + 0.52s + var(--line-chase, 0s)) infinite;
}

@keyframes line-hero-chase {
  0%,
  18%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
  9% {
    transform: translateY(-13px) scale(1.12) rotate(-2.5deg);
    filter: brightness(1.28) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 28px 44px hsla(var(--slam-accent), 0.78));
  }
}

@keyframes line-hero-chase-alt {
  0%,
  18%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 18px 28px hsla(var(--slam-accent), 0.55));
  }
  9% {
    transform: translateY(-13px) scale(1.12) rotate(2.5deg);
    filter: brightness(1.28) blur(0) drop-shadow(0 5px 0 #0a0510) drop-shadow(0 28px 44px hsla(var(--slam-accent), 0.78));
  }
}

/* Crystalline fall + bottom drift (line / two-line overlays) */
.cinematic-slam__powder-fall {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Moving "hoover hole" follows the straw sweep; feathers snow out near the intake */
.cinematic-slam__powder-fall--hoover {
  -webkit-mask-image: linear-gradient(black, black),
    radial-gradient(
      ellipse min(68vw, 500px) min(26vh, 200px) at 50% calc(100% + 4px),
      #fff 0%,
      #fff 36%,
      rgba(255, 255, 255, 0.45) 52%,
      rgba(255, 255, 255, 0) 70%
    );
  -webkit-mask-size: 100% 100%, 130% 118%;
  -webkit-mask-position: 0 0, 50% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(black, black),
    radial-gradient(
      ellipse min(68vw, 500px) min(26vh, 200px) at 50% calc(100% + 4px),
      #fff 0%,
      #fff 36%,
      rgba(255, 255, 255, 0.45) 52%,
      rgba(255, 255, 255, 0) 70%
    );
  mask-size: 100% 100%, 130% 118%;
  mask-position: 0 0, 50% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: subtract;
  animation: hoover-mask-pan 3.8s ease-in-out infinite alternate;
}

@keyframes hoover-mask-pan {
  from {
    -webkit-mask-position: 0 0, 36% 100%;
    mask-position: 0 0, 36% 100%;
  }
  to {
    -webkit-mask-position: 0 0, 64% 100%;
    mask-position: 0 0, 64% 100%;
  }
}

.cinematic-slam__powder-grain {
  position: absolute;
  top: -10vh;
  border-radius: 0.5px;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(210, 245, 255, 0.88) 42%,
    rgba(255, 255, 255, 0.75) 100%
  );
  box-shadow:
    0 0 7px rgba(255, 255, 255, 0.55),
    0 0 2px rgba(170, 230, 255, 0.85);
  opacity: 0;
  will-change: transform, opacity;
  animation: cinematic-powder-fall var(--pf-dur, 3.2s) linear infinite;
  animation-delay: var(--pf-delay, 0s);
}

.cinematic-slam__powder-grain--hoover {
  animation-name: cinematic-powder-fall-hoover;
}

@keyframes cinematic-powder-fall-hoover {
 0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  68% {
    opacity: 0.95;
    transform: translate3d(var(--pf-drift), 72vh, 0) rotate(calc(var(--pf-rot) * 0.72)) scale(1.08, 0.88);
  }
  82% {
    opacity: 0.82;
    transform: translate3d(calc(var(--pf-drift) * 0.92), 88vh, 0) rotate(calc(var(--pf-rot) * 0.9)) scale(0.72, 0.5);
  }
  94% {
    opacity: 0.35;
    transform: translate3d(calc(var(--pf-drift) * 0.75), 96vh, 0) rotate(var(--pf-rot)) scale(0.35, 0.22);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--pf-drift) * 0.62), 102vh, 0) rotate(calc(var(--pf-rot) * 1.03)) scale(0.12, 0.08);
  }
}

@keyframes cinematic-powder-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  72% {
    opacity: 0.95;
    transform: translate3d(var(--pf-drift), 78vh, 0) rotate(calc(var(--pf-rot) * 0.75)) scale(1.1, 0.85);
  }
  88% {
    opacity: 0.75;
    transform: translate3d(calc(var(--pf-drift) * 1.05), 92vh, 0) rotate(var(--pf-rot)) scale(0.85, 0.55);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--pf-drift), 108vh, 0) rotate(calc(var(--pf-rot) * 1.05)) scale(0.5, 0.35);
  }
}

.cinematic-slam__powder-pile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(24vh, 220px);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(248, 252, 255, 0.14) 72%,
    rgba(255, 255, 255, 0.2) 100%
  );
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  animation: cinematic-powder-pile-shift 3.4s ease-in-out infinite;
}

.cinematic-slam__powder-pile::before {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -15%;
  height: 65%;
  background:
    radial-gradient(ellipse 95% 55% at 48% 100%, rgba(255, 255, 255, 0.38) 0%, transparent 62%),
    radial-gradient(ellipse 70% 40% at 62% 100%, rgba(200, 240, 255, 0.22) 0%, transparent 55%);
  opacity: 0.85;
  animation: cinematic-powder-pile-glint 2.1s ease-in-out infinite;
}

.cinematic-slam__powder-pile::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    95deg,
    transparent 0,
    transparent 11px,
    rgba(255, 255, 255, 0.05) 11px,
    rgba(255, 255, 255, 0.05) 12px
  );
  mix-blend-mode: soft-light;
  opacity: 0.5;
  animation: cinematic-powder-pile-scan 1.6s linear infinite;
}

@keyframes cinematic-powder-pile-shift {
  0%,
  100% {
    opacity: 0.92;
    transform: translateY(0) scaleY(1);
  }
  50% {
    opacity: 1;
    transform: translateY(2px) scaleY(1.03);
  }
}

@keyframes cinematic-powder-pile-glint {
  0%,
  100% {
    opacity: 0.65;
    filter: brightness(1);
  }
  40% {
    opacity: 0.95;
    filter: brightness(1.25);
  }
}

@keyframes cinematic-powder-pile-scan {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(24px);
  }
}

/* Striped party-straw hoover (cartoon plastic) — same sweep / suction as before */
.line-euro-hoover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(36vh, 300px);
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.line-euro-hoover__sweep {
  position: absolute;
  left: 50%;
  bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
  height: clamp(52px, 14vmin, 82px);
  width: min(72vw, 380px);
  margin-left: calc(-1 * min(36vw, 190px));
  animation: line-euro-sweep-sides 3.8s ease-in-out infinite alternate;
}

@keyframes line-euro-sweep-sides {
  from {
    transform: translateX(clamp(-110px, -18vw, -42px));
  }
  to {
    transform: translateX(clamp(42px, 18vw, 110px));
  }
}

.line-euro-hoover__note {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(102px, 27vw, 162px);
  height: clamp(34px, 9vmin, 48px);
  transform: translateX(-50%) translateY(0) rotate(-8deg);
  transform-origin: 50% 80%;
  animation: line-euro-wobble 2.4s ease-in-out infinite;
  filter:
    drop-shadow(0 4px 0 rgba(80, 20, 60, 0.35))
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 24px hsla(320, 85%, 55%, 0.25));
  /* One continuous stadium — no separate end-cap div */
  border-radius: 9999px;
  overflow: hidden;
}

@keyframes line-euro-wobble {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-7deg);
  }
  50% {
    transform: translateX(-50%) translateY(-6px) rotate(-10deg);
  }
}

.line-euro-hoover__tube {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  /* Candy stripe: one diagonal sweep (no tiled repeat = no seam) */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) min(12%, 14px), transparent min(22%, 28px)),
    radial-gradient(ellipse 38% 130% at 100% 50%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 28% 125% at 8% 50%, rgba(10, 10, 18, 0.88) 0%, rgba(30, 28, 40, 0.4) 42%, transparent 58%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.05) 38%,
      transparent 56%,
      rgba(0, 0, 0, 0.26) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18) 0%,
      transparent 18%,
      transparent 82%,
      rgba(0, 0, 0, 0.24) 100%
    ),
    /* One continuous diagonal (no repeat tile = no hard vertical seam) */
    linear-gradient(
      118deg,
      #be185d 0%,
      #fbcfe8 11%,
      #fff7ed 20%,
      #93c5fd 28%,
      #38bdf8 36%,
      #7dd3fc 42%,
      #fef08a 50%,
      #fde047 54%,
      #fef3c7 58%,
      #fcd9e4 64%,
      #f9a8d4 72%,
      #fb7185 82%,
      #db2777 92%,
      #9d174d 100%
    );
  background-repeat: no-repeat;
  background-size: auto, auto, auto, auto, auto, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  box-shadow:
    inset 8px 0 12px rgba(0, 0, 0, 0.34),
    inset 0 4px 8px rgba(255, 255, 255, 0.28),
    inset 0 -7px 14px rgba(0, 0, 0, 0.3),
    inset -6px 0 12px rgba(0, 0, 0, 0.22);
}

/* Specular streak — ties the surface together */
.line-euro-hoover__tube::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 24%;
  width: 11%;
  max-width: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.1) 58%, transparent 100%);
  opacity: 0.42;
  pointer-events: none;
}

/* Top veil + contact shadow — softens banding under glancing light */
.line-euro-hoover__tube::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 38%),
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0.18) 100%);
}

/* Extra DOM nodes kept for JS structure — cap was causing a visible seam */
.line-euro-hoover__rim--r {
  display: none;
}

.line-euro-hoover__rim--l {
  display: none;
}

/* Extra glint band */
.line-euro-hoover__shimmer {
  position: absolute;
  z-index: 2;
  left: 48%;
  top: 14%;
  width: clamp(10px, 2.2vmin, 14px);
  height: 68%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.14) 55%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
  animation: line-euro-shimmer 2.4s ease-in-out infinite;
}

@keyframes line-euro-shimmer {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.92;
  }
}

.line-euro-hoover__suction {
  position: absolute;
  z-index: 4;
  left: -4px;
  top: 50%;
  width: clamp(48px, 14vw, 72px);
  height: clamp(40px, 11vw, 64px);
  transform: translate(-40%, -50%) rotate(12deg);
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 35% at 75% 50%, rgba(255, 255, 255, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 35% 30% at 85% 38%, rgba(255, 255, 255, 0.35) 0%, transparent 62%),
    radial-gradient(ellipse 40% 38% at 70% 62%, rgba(230, 250, 255, 0.3) 0%, transparent 58%);
  opacity: 0.85;
  animation: line-euro-suction-pulse 0.55s ease-in-out infinite alternate;
}

.line-euro-hoover__spark-dot {
  position: absolute;
  left: 72%;
  top: 48%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 2px rgba(200, 245, 255, 0.9);
  opacity: 0;
  animation: line-euro-spark-zap 0.52s linear infinite;
  animation-delay: var(--sd, 0s);
}

@keyframes line-euro-spark-zap {
  0% {
    transform: translate(calc(18px + var(--sx, 0px)), calc(10px + var(--sy, 0px))) scale(0.25);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-4px + var(--sx, 0px)), calc(-8px + var(--sy, 0px))) scale(0.9);
    opacity: 0;
  }
}

.line-euro-hoover__suction::before,
.line-euro-hoover__suction::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.95;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
  animation: line-euro-spark-in 0.46s linear infinite;
}

.line-euro-hoover__suction::before {
  left: 68%;
  top: 28%;
  width: 4px;
  height: 4px;
  animation-delay: 0s;
}

.line-euro-hoover__suction::after {
  left: 78%;
  top: 55%;
  width: 3px;
  height: 3px;
  animation-delay: 0.14s;
}

@keyframes line-euro-suction-pulse {
  from {
    opacity: 0.65;
    transform: translate(-40%, -50%) rotate(10deg) scale(0.96);
  }
  to {
    opacity: 0.95;
    transform: translate(-40%, -50%) rotate(14deg) scale(1.03);
  }
}

@keyframes line-euro-spark-in {
  0% {
    transform: translate(18px, 6px) scale(0.3);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translate(-6px, -2px) scale(0.85);
    opacity: 0;
  }
}

.cinematic-slam--line .cinematic-slam__core,
.cinematic-slam--two-lines .cinematic-slam__core {
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .cinematic-slam__powder-fall,
  .cinematic-slam__powder-pile,
  .cinematic-slam__party-layer,
  .line-euro-hoover {
    display: none !important;
  }
}

/* ============================================================================
   Idle screen ambience — neon grid, vignette, called-count, cell pulse, history
   shimmer and grid impact ripple. All paint below the UI layer; nothing fights
   the cage / overlay z-index stack.
   ========================================================================== */

/** Slow neon grid lines that drift across the backdrop. Sits below the cage
 * stack (z-index 2) and above the body fill. */
.screen-ambient-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      to right,
      rgba(236, 72, 153, 0.08) 0,
      rgba(236, 72, 153, 0.08) 1px,
      transparent 1px,
      transparent 80px
    ),
    linear-gradient(
      to bottom,
      rgba(168, 85, 247, 0.07) 0,
      rgba(168, 85, 247, 0.07) 1px,
      transparent 1px,
      transparent 80px
    );
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 65%, transparent 100%);
  opacity: 0.7;
  animation: screen-ambient-grid-drift 38s linear infinite;
}

/** Hide the ambient grid during the cage choreography so balls.mp4 stays clean. */
body.screen-page:has(#last-ball.mega-ball--venue:is(.mega-ball--cage-prep, .mega-ball--cage-prep-warp, .mega-ball--cage-spin, .mega-ball--cage-lock, .mega-ball--cage-dock))
  .screen-ambient-grid {
  opacity: 0;
  transition: opacity 0.5s ease;
}

@keyframes screen-ambient-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 80px 0, 0 80px; }
}

/** Cinematic vignette — darkens the corners so the centre reads brighter. */
.screen-vignette {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 85% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.45) 100%);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .screen-ambient-grid { animation: none; }
}

/** Just-called cell pulse — quick flash + ring, decays. Sits on top of the
 * default `.is-called` tint without disturbing the cell layout. */
.cell.cell--just-called {
  animation: cell-just-called-pulse 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1;
  position: relative;
  z-index: 2;
}

.cell.cell--just-called::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 22px rgba(236, 72, 153, 0.65),
    0 0 44px rgba(168, 85, 247, 0.45);
  opacity: 0;
  animation: cell-just-called-ring 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes cell-just-called-pulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  18% {
    transform: scale(1.12);
    filter: brightness(1.6) saturate(1.4);
  }
  60% {
    transform: scale(1.02);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes cell-just-called-ring {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell.cell--just-called,
  .cell.cell--just-called::after {
    animation: none;
  }
}

/** Grid impact ripple — staggers a radial flash across cells. Lasts ~1.3s. */
.number-grid.number-grid--impact .cell {
  animation: grid-impact-shimmer 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1;
  animation-delay: calc(
    (var(--row, 0) * 0.045s) + (var(--col, 0) * 0.025s)
  );
}

@keyframes grid-impact-shimmer {
  0% {
    filter: brightness(1);
    transform: translateZ(0);
  }
  35% {
    filter: brightness(1.35) saturate(1.2);
    transform: translateY(-1.5%);
  }
  100% {
    filter: brightness(1);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .number-grid.number-grid--impact .cell {
    animation: none;
  }
}

/** History strip shimmer — slow gloss that drifts across the row, like a wet
 * neon sign. Pure pseudo-element; doesn't change layout. */
.history-strip {
  position: relative;
  overflow: hidden;
}

.history-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 62%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transform: translateX(-100%);
  animation: history-shimmer-drift 7.5s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes history-shimmer-drift {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  10% { opacity: 1; }
  50% {
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-strip::after { animation: none; opacity: 0; }
}

/** Live N/90 counter — compact, unobtrusive, sits under the history strip. */
.called-count {
  margin: clamp(0.45rem, 1.4vmin, 0.8rem) auto 0;
  padding: clamp(0.2rem, 0.7vmin, 0.4rem) clamp(0.6rem, 1.6vmin, 1rem);
  display: inline-flex;
  align-items: center;
  gap: clamp(0.4rem, 1vmin, 0.6rem);
  border-radius: 999px;
  background: rgba(8, 6, 14, 0.55);
  border: 1px solid rgba(236, 72, 153, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 8px 22px rgba(0, 0, 0, 0.35);
  color: rgba(252, 231, 243, 0.92);
  font-family: "League Spartan", system-ui, sans-serif;
  font-size: clamp(0.65rem, 1.4vmin, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  width: max-content;
  max-width: 100%;
}

.called-count__label {
  opacity: 0.6;
  font-weight: 600;
}

.called-count__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 900;
}

.called-count__sep {
  opacity: 0.55;
  padding-inline: 0.06em;
}

.called-count__total {
  opacity: 0.55;
}

@container venue-brand (max-width: 220px) {
  .called-count {
    font-size: 0.65rem;
    padding: 0.18rem 0.6rem;
  }
}

/* ============================================================================
   Venue show — readable from the back of the room: compact brand in-play,
   glass board stage, brighter uncalled tiles, full-width history ticker.
   ========================================================================== */

/** Once the first ball is out, tuck the logo so the orb + grid own the screen. */
body.screen-page .venue-brand-block--logo {
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.45s ease,
    margin 0.45s ease;
}

body.screen-page .venue-brand-block .venue-strap--one-line {
  transition:
    opacity 0.4s ease,
    max-height 0.4s ease,
    margin 0.4s ease;
}

body.screen-page.is-game-in-play .venue-brand-block--logo {
  opacity: 0.78;
  transform: scale(0.82);
  transform-origin: center top;
  pointer-events: none;
}

body.screen-page.is-game-in-play .venue-brand-block .venue-strap--one-line {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

body.screen-page.is-game-in-play .venue-brand-block::before {
  opacity: 0.35;
}

body.screen-page.is-game-in-play .screen-bg-video-layer {
  opacity: 0.18;
}

/** Glass stage — gives the grid a clear "this is the game" frame. */
.screen-page .venue-board--stage {
  flex: 1;
  min-height: 0;
  padding: clamp(0.45rem, 1.1vmin, 0.85rem);
  padding-bottom: clamp(0.35rem, 0.85vmin, 0.65rem);
  border-radius: clamp(0.55rem, 1.4vmin, 1rem) clamp(0.55rem, 1.4vmin, 1rem) 0 0;
  background:
    linear-gradient(
      165deg,
      rgba(15, 23, 42, 0.52) 0%,
      rgba(8, 6, 18, 0.68) 100%
    );
  border: 1px solid rgba(236, 72, 153, 0.28);
  border-bottom: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 48px rgba(236, 72, 153, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/** Uncalled numbers — brighter for venue distance legibility. */
.screen-page .cell {
  color: rgba(248, 250, 252, 0.68);
  border-color: rgba(255, 255, 255, 0.11);
}

/** Full-width history ticker under the main stage. */
.screen-history-bar {
  position: relative;
  z-index: 8;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.8vmin, 1.25rem);
  padding:
    clamp(0.45rem, 1.1vmin, 0.75rem)
    clamp(0.75rem, 2vmin, 1.5rem);
  border-top: 1px solid rgba(236, 72, 153, 0.22);
  background:
    linear-gradient(
      180deg,
      rgba(8, 6, 14, 0.78) 0%,
      rgba(10, 7, 20, 0.92) 100%
    );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35);
}

.screen-history-bar .called-count {
  margin: 0;
}

.screen-history-bar .venue-kicker {
  flex-shrink: 0;
  font-size: clamp(0.72rem, 1.6vmin, 0.95rem);
  letter-spacing: 0.22em;
  color: rgba(248, 250, 252, 0.82);
}

.screen-history-bar .history-strip {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

@media (min-width: 960px) and (min-height: 520px) {
  .screen-history-bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(1rem, 2.2vw, 2rem);
    padding-inline: clamp(1rem, 2vw, 2rem);
  }

  .screen-history-bar .venue-kicker {
    min-width: clamp(5.5rem, 9vw, 8.5rem);
    text-align: left;
  }

  .screen-history-bar .called-count {
    margin-left: auto;
  }

  body.screen-page.is-game-in-play .venue-hero #last-ball.mega-ball {
    max-height: min(88vh, min(112cqi, 94dvh));
  }
}

@media (max-width: 959px), (max-height: 519px) {
  .screen-history-bar .history-strip {
    width: 100%;
    order: 3;
  }

  .screen-history-bar .called-count {
    order: 2;
  }
}