/* ── Board display: idle TOP10 + hit flash overlay ── */
.board-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(124, 58, 237, .14) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(34, 211, 238, .1) 0%, transparent 45%),
    linear-gradient(180deg, #161632 0%, #1e1e42 55%, #1a1a38 100%);
  overflow: hidden;
}

.board-header {
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(124, 58, 237, .35);
  background: rgba(36, 34, 72, .65);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.board-header--display {
  padding: .75rem 2rem;
  min-height: 4.25rem;
}
.board-header-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.board-header-brand .board-subtitle {
  padding-left: 0;
}
.board-header-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.board-title.arcade-brand {
  gap: 1.05rem;
  align-items: center;
}
.board-header--display .board-title.arcade-brand {
  gap: 1.15rem;
}
.board-header--display .arcade-brand--hero .arcade-brand-text {
  font-size: 1.5rem;
}
.board-header--display .board-subtitle {
  margin-top: .2rem;
  font-size: .82rem;
  letter-spacing: .04em;
}
.board-header--display .ws-status {
  padding: .45rem;
  gap: 0;
  border-radius: 99px;
  background: rgba(20, 18, 40, .45);
  border: 1px solid rgba(124, 58, 237, .28);
}
.board-header--display .ws-status--icon-only .ws-dot {
  width: 10px;
  height: 10px;
}
.board-header--display .ws-label-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.board-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: 800;
  color: #f8fafc;
}
.board-title-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, .45));
}
.board-subtitle {
  font-size: .78rem;
  color: rgba(186, 196, 214, .92);
  font-family: ui-monospace, monospace;
  margin-top: .15rem;
}
.board-title span { color: var(--accent); }
.board-subtitle strong { color: var(--accent); }

.board-stage {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.15rem 2rem 1.75rem;
}
.board-header--display + .device-picker + .board-stage,
.board-header--display + .board-stage {
  padding-top: 1.25rem;
}

.board-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: opacity .25s ease;
}
.board-content.blurred {
  filter: blur(10px) brightness(.78);
  pointer-events: none;
}
/* Registered / unregistered card ceremony — soft focus, leaderboard still faintly visible */
.board-content.blurred-card {
  filter: blur(12px) brightness(.72) saturate(.88);
  pointer-events: none;
}
/* Live gameplay HUD — deeper blur to focus on score panel */
.board-content.blurred-live {
  filter: blur(18px) brightness(.55) saturate(.75);
  pointer-events: none;
}
/* Fade blur in sync with card overlay exit (avoid jump when scrim disappears) */
.board-content.blur-fade-out {
  filter: blur(0) brightness(1) saturate(1);
  pointer-events: none;
  transition: filter .45s ease;
}

/* Shared card-ceremony scrim — single blur layer (registered + unregistered) */
.board-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(8, 8, 24, .52);
  -webkit-backdrop-filter: blur(12px) saturate(.88);
  backdrop-filter: blur(12px) saturate(.88);
  transition: opacity .35s ease, visibility .35s ease;
}
.board-card-scrim.visible {
  opacity: 1;
  visibility: visible;
}

/* Shared card-ceremony scrim tint variable (legacy hooks) */
.board-enter,
.board-unknown {
  --card-scrim-base: transparent;
}

.board-ready {
  text-align: center;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity .3s;
}
.board-ready.visible { opacity: 1; }
.board-ready strong { color: var(--accent); }

/* ── Ranking page header ── */
.board-ranking-head {
  text-align: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.ranking-title {
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: .2em;
  color: #fde047;
  text-shadow:
    0 0 12px rgba(253, 224, 71, .55),
    0 0 32px rgba(255, 215, 0, .28);
  line-height: 1;
}
.board-content--compact .board-ranking-head {
  margin-bottom: .75rem;
}
.board-content--compact .ranking-title {
  font-size: 2.1rem;
  letter-spacing: .16em;
}

.list-section-label {
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.15rem;
  letter-spacing: .14em;
  color: rgba(103, 232, 249, .85);
  margin: 0 0 .4rem;
  text-align: left;
  padding-left: .25rem;
  text-shadow: 0 0 12px rgba(124, 58, 237, .25);
}
.top10-wrap--featured .list-section-label {
  display: none;
}

.top10-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
  transition: justify-content .45s ease;
}
.top10-wrap--featured {
  justify-content: center;
  align-items: center;
}
.top10-wrap--compact {
  justify-content: flex-start;
}
.top10-wrap--featured .top10-rest {
  flex: 0 0 auto;
  width: 100%;
}

/* ── Podium: arcade score plates (top 3) ── */
.podium {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  width: 100%;
  flex-shrink: 0;
  transition: gap .45s ease, max-width .45s ease, margin .45s ease, padding .45s ease;
}

.podium--featured {
  --plate-w-2: 188px;
  --plate-w-1: 232px;
  --plate-w-3: 188px;
  --plate-lift-1: -14px;
  max-width: 780px;
  gap: 1.5rem;
  margin: auto;
  padding: 1.25rem 0 1.25rem;
}
.podium--compact {
  --plate-w-2: 124px;
  --plate-w-1: 150px;
  --plate-w-3: 124px;
  --plate-lift-1: -6px;
  max-width: 500px;
  gap: .65rem;
  margin: 0 auto .5rem;
  padding: .85rem 0 0;
}

.podium-slot {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
  transition: transform .45s ease;
}
.podium-slot.slot-1 {
  transform: translateY(var(--plate-lift-1, -14px));
}

/* Stagger entrance – plate-wrap rises (2nd → 1st → 3rd) */
.podium--stagger .plate-wrap {
  opacity: 0;
  animation: plate-wrap-rise .62s cubic-bezier(.22, 1.15, .32, 1) forwards;
}
.podium--stagger .slot-2 .plate-wrap { animation-delay: 0ms; }
.podium--stagger .slot-1 .plate-wrap { animation-delay: 130ms; }
.podium--stagger .slot-3 .plate-wrap { animation-delay: 260ms; }

.podium--stagger .plate-name,
.podium--stagger .plate-score-label,
.podium--stagger .plate-score,
.podium--stagger .plate-latest {
  opacity: 0;
  animation: plate-content-in .45s ease forwards;
}
.podium--stagger .slot-2 .plate-name { animation-delay: .12s; }
.podium--stagger .slot-2 .plate-score-label { animation-delay: .18s; }
.podium--stagger .slot-2 .plate-score { animation-delay: .24s; }
.podium--stagger .slot-2 .plate-latest { animation-delay: .3s; }
.podium--stagger .slot-1 .plate-name { animation-delay: .26s; }
.podium--stagger .slot-1 .plate-score-label { animation-delay: .32s; }
.podium--stagger .slot-1 .plate-score { animation-delay: .38s; }
.podium--stagger .slot-1 .plate-latest { animation-delay: .44s; }
.podium--stagger .slot-3 .plate-name { animation-delay: .36s; }
.podium--stagger .slot-3 .plate-score-label { animation-delay: .42s; }
.podium--stagger .slot-3 .plate-score { animation-delay: .48s; }
.podium--stagger .slot-3 .plate-latest { animation-delay: .54s; }

.podium--stagger .plate-led-bar span {
  opacity: 0;
  transform: scaleY(.2);
  animation: plate-led-pop .38s cubic-bezier(.25, .9, .35, 1) forwards;
}
.podium--stagger .slot-2 .plate-led-bar span:nth-child(1) { animation-delay: .08s; }
.podium--stagger .slot-2 .plate-led-bar span:nth-child(2) { animation-delay: .11s; }
.podium--stagger .slot-2 .plate-led-bar span:nth-child(3) { animation-delay: .14s; }
.podium--stagger .slot-2 .plate-led-bar span:nth-child(4) { animation-delay: .17s; }
.podium--stagger .slot-2 .plate-led-bar span:nth-child(5) { animation-delay: .2s; }
.podium--stagger .slot-2 .plate-led-bar span:nth-child(6) { animation-delay: .23s; }
.podium--stagger .slot-2 .plate-led-bar span:nth-child(7) { animation-delay: .26s; }
.podium--stagger .slot-1 .plate-led-bar span:nth-child(1) { animation-delay: .22s; }
.podium--stagger .slot-1 .plate-led-bar span:nth-child(2) { animation-delay: .25s; }
.podium--stagger .slot-1 .plate-led-bar span:nth-child(3) { animation-delay: .28s; }
.podium--stagger .slot-1 .plate-led-bar span:nth-child(4) { animation-delay: .31s; }
.podium--stagger .slot-1 .plate-led-bar span:nth-child(5) { animation-delay: .34s; }
.podium--stagger .slot-1 .plate-led-bar span:nth-child(6) { animation-delay: .37s; }
.podium--stagger .slot-1 .plate-led-bar span:nth-child(7) { animation-delay: .4s; }
.podium--stagger .slot-3 .plate-led-bar span:nth-child(1) { animation-delay: .32s; }
.podium--stagger .slot-3 .plate-led-bar span:nth-child(2) { animation-delay: .35s; }
.podium--stagger .slot-3 .plate-led-bar span:nth-child(3) { animation-delay: .38s; }
.podium--stagger .slot-3 .plate-led-bar span:nth-child(4) { animation-delay: .41s; }
.podium--stagger .slot-3 .plate-led-bar span:nth-child(5) { animation-delay: .44s; }
.podium--stagger .slot-3 .plate-led-bar span:nth-child(6) { animation-delay: .47s; }
.podium--stagger .slot-3 .plate-led-bar span:nth-child(7) { animation-delay: .5s; }

@keyframes plate-wrap-rise {
  0% { opacity: 0; transform: translateY(36px) scale(.88); filter: brightness(1.45); }
  62% { opacity: 1; transform: translateY(-5px) scale(1.03); filter: brightness(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes plate-content-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes plate-led-pop {
  0% { opacity: 0; transform: scaleY(.2); filter: brightness(1.8); }
  70% { opacity: 1; transform: scaleY(1.12); }
  100% { opacity: .92; transform: scaleY(1); filter: brightness(1); }
}

.podium-slot.flash-new .plate-body {
  animation: plate-record-flash 2.2s ease forwards;
}
.podium-slot.flash-new .plate-score {
  animation: plate-score-record .65s cubic-bezier(.2, 1.3, .3, 1) .15s both;
}
@keyframes plate-record-flash {
  0%, 18% {
    box-shadow:
      0 0 0 2px rgba(34, 211, 238, .75),
      0 0 36px rgba(34, 211, 238, .45),
      inset 0 0 40px rgba(34, 211, 238, .12);
  }
  100% { box-shadow: inherit; }
}
@keyframes plate-score-record {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}
.podium-slot.rank-enter-1 .plate-wrap,
.podium-slot.rank-enter-2 .plate-wrap,
.podium-slot.rank-enter-3 .plate-wrap {
  will-change: transform, filter;
}

/* ── Rank FX layers (ambient) ── */
.plate-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 2px;
}

.plate-crown {
  position: absolute;
  top: .4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  color: #fde047;
  filter: drop-shadow(0 0 10px rgba(253, 224, 71, .65));
}
/* #1: LED strip top (same as 2/3), crown in flow above name */
.plate-crown-row {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  margin-top: .52rem;
  margin-bottom: .12rem;
  pointer-events: none;
}
.slot-1:not(.empty) .plate-crown-row .plate-crown {
  position: static;
  transform: none;
  top: auto;
  left: auto;
}
.podium--settled .slot-1:not(.empty) .plate-crown-row .plate-crown {
  animation: crown-settle .75s cubic-bezier(.2, 1.2, .3, 1) forwards;
}
.podium--stagger .slot-1 .plate-crown-row {
  opacity: 0;
  animation: plate-content-in .45s ease forwards;
  animation-delay: .22s;
}
@keyframes crown-settle {
  0% { opacity: 0; transform: translateY(-10px) scale(.6); }
  55% { opacity: 1; transform: translateY(2px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}
.plate-crown-icon { width: 1.55rem; height: 1.55rem; display: block; }
.podium--compact .plate-crown { top: .3rem; }
.podium--compact .plate-crown-icon { width: 1.25rem; height: 1.25rem; }
.podium--featured .plate-crown-icon { width: 1.75rem; height: 1.75rem; }

.plate-medal {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 4;
  opacity: .85;
}
.plate-medal-icon { width: 1.15rem; height: 1.15rem; display: block; }
.plate-medal-silver { color: #bae6fd; filter: drop-shadow(0 0 8px rgba(125, 211, 252, .45)); }
.plate-medal-bronze { color: #fdba74; filter: drop-shadow(0 0 8px rgba(253, 186, 116, .4)); }

.plate-medal-gold { color: #fde047; filter: drop-shadow(0 0 8px rgba(253, 224, 71, .55)); opacity: .92; }

.plate-halo {
  position: absolute;
  top: auto;
  bottom: -15%;
  left: 50%;
  width: 130%;
  height: 75%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, .16) 0%, transparent 68%);
  opacity: .32;
}
.podium--settled .slot-1:not(.empty) .plate-halo {
  animation: halo-burst-once 1.6s ease forwards;
}
@keyframes halo-burst-once {
  0% { opacity: 0; transform: translateX(-50%) scale(.4); }
  40% { opacity: .45; transform: translateX(-50%) scale(1.05); }
  100% { opacity: .32; transform: translateX(-50%) scale(.95); }
}

.plate-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff7cc;
  box-shadow: 0 0 8px rgba(255, 215, 0, .9);
  opacity: .45;
}
.plate-spark-a { top: 18%; left: 12%; }
.plate-spark-b { top: 28%; right: 14%; }
.plate-spark-c { bottom: 22%; left: 22%; }
.podium--settled .slot-1:not(.empty) .plate-spark {
  animation: spark-twinkle-once 1.6s ease forwards;
}
.podium--settled .slot-1:not(.empty) .plate-spark-b { animation-delay: .35s; }
.podium--settled .slot-1:not(.empty) .plate-spark-c { animation-delay: .7s; }
@keyframes spark-twinkle-once {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.2); }
}

.plate-sweep {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(186, 230, 253, .45), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.podium--settled .slot-2:not(.empty) .plate-sweep {
  animation: silver-scan-once 2.2s ease .45s forwards;
}
@keyframes silver-scan-once {
  0% { left: -60%; opacity: 0; }
  12% { opacity: 1; }
  42% { left: 120%; opacity: 1; }
  55%, 100% { left: 120%; opacity: 0; }
}

.plate-ember {
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 42%;
  background: radial-gradient(ellipse at 50% 100%, rgba(251, 146, 60, .32) 0%, transparent 72%);
  opacity: .5;
}
.plate-ember-b {
  left: 35%;
  width: 40%;
  height: 28%;
  opacity: .45;
}
.podium--settled .slot-3:not(.empty) .plate-ember {
  animation: ember-once 1.8s ease .5s forwards;
}
.podium--settled .slot-3:not(.empty) .plate-ember-b {
  animation: ember-once 1.8s ease .85s forwards;
}
@keyframes ember-once {
  0% { opacity: .2; transform: scaleY(.7); }
  45% { opacity: .85; transform: scaleY(1.05); }
  100% { opacity: .5; transform: scaleY(1); }
}

/* LED strip accent (灯带连击) */
.plate-led-bar {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 3px;
  z-index: 3;
  pointer-events: none;
}
.plate-led-bar span {
  display: block;
  width: 4px;
  height: 9px;
  border-radius: 2px;
  opacity: .88;
}
.slot-1:not(.empty) .plate-led-bar span:nth-child(1) { background: #fde047; box-shadow: 0 0 6px rgba(253, 224, 71, .8); }
.slot-1:not(.empty) .plate-led-bar span:nth-child(2) { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, .7); }
.slot-1:not(.empty) .plate-led-bar span:nth-child(3) { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, .65); }
.slot-1:not(.empty) .plate-led-bar span:nth-child(4) { background: #fff7cc; box-shadow: 0 0 8px rgba(255, 255, 220, .75); height: 11px; }
.slot-1:not(.empty) .plate-led-bar span:nth-child(5) { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, .65); }
.slot-1:not(.empty) .plate-led-bar span:nth-child(6) { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, .7); }
.slot-1:not(.empty) .plate-led-bar span:nth-child(7) { background: #fde047; box-shadow: 0 0 6px rgba(253, 224, 71, .8); }
.slot-2:not(.empty) .plate-led-bar span:nth-child(1) { background: #7dd3fc; box-shadow: 0 0 6px rgba(125, 211, 252, .75); }
.slot-2:not(.empty) .plate-led-bar span:nth-child(2) { background: #38bdf8; box-shadow: 0 0 6px rgba(56, 189, 248, .7); }
.slot-2:not(.empty) .plate-led-bar span:nth-child(3) { background: #22d3ee; box-shadow: 0 0 6px rgba(34, 211, 238, .75); }
.slot-2:not(.empty) .plate-led-bar span:nth-child(4) { background: #e0f2fe; box-shadow: 0 0 8px rgba(224, 242, 254, .7); height: 11px; }
.slot-2:not(.empty) .plate-led-bar span:nth-child(5) { background: #22d3ee; box-shadow: 0 0 6px rgba(34, 211, 238, .75); }
.slot-2:not(.empty) .plate-led-bar span:nth-child(6) { background: #38bdf8; box-shadow: 0 0 6px rgba(56, 189, 248, .7); }
.slot-2:not(.empty) .plate-led-bar span:nth-child(7) { background: #7dd3fc; box-shadow: 0 0 6px rgba(125, 211, 252, .75); }
.slot-3:not(.empty) .plate-led-bar span:nth-child(1) { background: #fdba74; box-shadow: 0 0 6px rgba(253, 186, 116, .7); }
.slot-3:not(.empty) .plate-led-bar span:nth-child(2) { background: #fb923c; box-shadow: 0 0 6px rgba(251, 146, 60, .65); }
.slot-3:not(.empty) .plate-led-bar span:nth-child(3) { background: #f97316; box-shadow: 0 0 6px rgba(249, 115, 22, .6); }
.slot-3:not(.empty) .plate-led-bar span:nth-child(4) { background: #ffedd5; box-shadow: 0 0 8px rgba(255, 237, 213, .65); height: 11px; }
.slot-3:not(.empty) .plate-led-bar span:nth-child(5) { background: #f97316; box-shadow: 0 0 6px rgba(249, 115, 22, .6); }
.slot-3:not(.empty) .plate-led-bar span:nth-child(6) { background: #fb923c; box-shadow: 0 0 6px rgba(251, 146, 60, .65); }
.slot-3:not(.empty) .plate-led-bar span:nth-child(7) { background: #fdba74; box-shadow: 0 0 6px rgba(253, 186, 116, .7); }

.plate-rays {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 50%;
  width: 120%;
  height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 215, 0, .12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: .45;
}

/* ── Rank change / 登顶 animations ── */
.podium-slot.rank-enter-1 .plate-wrap {
  animation: champion-takeover 3.8s cubic-bezier(.2, 1.15, .3, 1) forwards;
}
.podium-slot.rank-enter-1 .plate-crown-row .plate-crown {
  animation: crown-drop 3.8s cubic-bezier(.2, 1.3, .3, 1) forwards;
}
.podium-slot.rank-enter-1 .plate-crown {
  animation: none;
}
.podium-slot.rank-enter-1 .plate-halo {
  animation: champion-burst 3.8s ease forwards;
}
.podium-slot.rank-enter-1 .plate-body {
  animation: champion-glow 3.8s ease forwards;
}

.podium-slot.rank-enter-2 .plate-wrap {
  animation: silver-arrive 2.8s cubic-bezier(.25, 1, .35, 1) forwards;
}
.podium-slot.rank-enter-2 .plate-sweep {
  animation: silver-flash-sweep 2.8s ease forwards;
}
.podium-slot.rank-enter-2 .plate-body {
  animation: silver-glow 2.8s ease forwards;
}

.podium-slot.rank-enter-3 .plate-wrap {
  animation: bronze-rise 2.6s cubic-bezier(.3, 1.05, .4, 1) forwards;
}
.podium-slot.rank-enter-3 .plate-ember {
  animation: bronze-ignite 2.6s ease forwards;
}
.podium-slot.rank-enter-3 .plate-body {
  animation: bronze-glow 2.6s ease forwards;
}

@keyframes crown-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
@keyframes halo-breathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes spark-twinkle {
  0%, 100% { opacity: .2; transform: scale(.6); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes silver-scan {
  0% { left: -60%; opacity: 0; }
  15% { opacity: 1; }
  45% { left: 120%; opacity: 1; }
  55%, 100% { left: 120%; opacity: 0; }
}
@keyframes ember-flicker {
  0%, 100% { opacity: .45; transform: scaleY(.9); }
  40% { opacity: .85; transform: scaleY(1.05); }
  70% { opacity: .6; transform: scaleY(.95); }
}

@keyframes champion-takeover {
  0% { opacity: .15; transform: scale(.62) translateY(36px); filter: brightness(2.2); }
  28% { opacity: 1; transform: scale(1.14) translateY(-10px); filter: brightness(1.55); }
  48% { transform: scale(1.06) translateY(-2px); filter: brightness(1.28); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}
@keyframes crown-drop {
  0% { opacity: 0; transform: translateY(-12px) scale(.5) rotate(-12deg); }
  40% { opacity: 1; transform: translateY(2px) scale(1.12) rotate(4deg); }
  60% { transform: translateY(-2px) scale(1) rotate(0deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes champion-burst {
  0% { opacity: 0; transform: translateX(-50%) scale(.3); }
  30% { opacity: .5; transform: translateX(-50%) scale(1.2); }
  100% { opacity: .32; transform: translateX(-50%) scale(.95); }
}
@keyframes champion-glow {
  0%, 25% {
    box-shadow:
      0 0 0 3px rgba(255, 215, 0, .85),
      0 0 48px rgba(255, 215, 0, .55),
      0 0 80px rgba(255, 180, 0, .35),
      inset 0 0 60px rgba(255, 215, 0, .2);
  }
  100% { box-shadow: inherit; }
}

@keyframes silver-arrive {
  0% { opacity: .4; transform: translateX(-28px) scale(.88); filter: brightness(1.6); }
  45% { opacity: 1; transform: translateX(6px) scale(1.03); filter: brightness(1.25); }
  100% { transform: translateX(0) scale(1); filter: brightness(1); }
}
@keyframes silver-flash-sweep {
  0% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  50% { left: 120%; opacity: 1; }
  70%, 100% { left: 120%; opacity: 0; }
}
@keyframes silver-glow {
  0%, 30% {
    box-shadow:
      0 0 0 2px rgba(186, 230, 253, .75),
      0 0 36px rgba(34, 211, 238, .45),
      inset 0 0 48px rgba(125, 211, 252, .18);
  }
  100% { box-shadow: inherit; }
}

@keyframes bronze-rise {
  0% { opacity: .45; transform: translateY(22px) scale(.9); filter: brightness(1.4); }
  50% { opacity: 1; transform: translateY(-4px) scale(1.04); filter: brightness(1.15); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes bronze-ignite {
  0% { opacity: 0; transform: scaleY(.4); }
  35% { opacity: 1; transform: scaleY(1.2); }
  100% { opacity: .55; transform: scaleY(.9); }
}
@keyframes bronze-glow {
  0%, 28% {
    box-shadow:
      0 0 0 2px rgba(253, 186, 116, .7),
      0 0 32px rgba(251, 146, 60, .35),
      inset 0 0 40px rgba(251, 146, 60, .14);
  }
  100% { box-shadow: inherit; }
}

/* ── Podium rank-entry ceremony (scrim + centered banner + flash) ── */
.board-podium-ceremony {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.board-podium-ceremony.visible {
  opacity: 1;
  visibility: visible;
}

.podium-ceremony-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(8, 8, 24, .56);
  -webkit-backdrop-filter: blur(14px) saturate(.85);
  backdrop-filter: blur(14px) saturate(.85);
  opacity: 0;
  transition: opacity .35s ease;
}
.board-podium-ceremony.visible .podium-ceremony-scrim {
  opacity: 1;
}
.board-podium-ceremony.exit .podium-ceremony-scrim {
  opacity: 0;
}

.podium-ceremony-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .18s ease;
}
.podium-ceremony-flash.show {
  opacity: 1;
}
.podium-ceremony-flash.flash-gold {
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 215, 0, .38) 0%, rgba(255, 180, 0, .1) 42%, transparent 68%);
}
.podium-ceremony-flash.flash-silver {
  background: radial-gradient(ellipse 68% 52% at 50% 50%, rgba(186, 230, 253, .34) 0%, rgba(34, 211, 238, .08) 45%, transparent 70%);
}
.podium-ceremony-flash.flash-bronze {
  background: radial-gradient(ellipse 66% 50% at 50% 50%, rgba(253, 186, 116, .3) 0%, rgba(251, 146, 60, .08) 48%, transparent 72%);
}

.podium-ceremony-banner {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: min(92vw, 520px);
  max-width: 100%;
  padding: 1.35rem 2rem 1.15rem;
  text-align: center;
  opacity: 0;
  transform: translateY(18px) scale(.92);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(28, 26, 58, .97) 0%, rgba(20, 18, 44, .98) 100%);
  border: 3px solid rgba(167, 139, 250, .55);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .25),
    0 16px 48px rgba(0, 0, 0, .55),
    inset 0 0 64px rgba(124, 58, 237, .12);
  overflow: hidden;
}
.board-podium-ceremony.visible .podium-ceremony-banner {
  animation: podium-banner-in .55s cubic-bezier(.2, 1.25, .3, 1) forwards;
}
.board-podium-ceremony.exit .podium-ceremony-banner {
  animation: podium-banner-out .42s ease forwards;
}
.podium-ceremony-banner.rank-1 {
  border-color: rgba(255, 215, 0, .75);
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, .35),
    0 0 72px rgba(255, 180, 0, .35),
    0 20px 56px rgba(0, 0, 0, .5),
    inset 0 0 80px rgba(255, 215, 0, .1);
}
.podium-ceremony-banner.rank-2 {
  border-color: rgba(186, 230, 253, .7);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .3),
    0 0 56px rgba(34, 211, 238, .22),
    0 18px 48px rgba(0, 0, 0, .48),
    inset 0 0 64px rgba(125, 211, 252, .08);
}
.podium-ceremony-banner.rank-3 {
  border-color: rgba(253, 186, 116, .65);
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, .28),
    0 0 48px rgba(251, 146, 60, .18),
    0 16px 44px rgba(0, 0, 0, .45),
    inset 0 0 56px rgba(251, 146, 60, .07);
}

.podium-ceremony-burst {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, transparent 55%);
  opacity: 0;
  animation: none;
}
.podium-ceremony-banner.rank-1 .podium-ceremony-burst {
  background: radial-gradient(circle, rgba(255, 215, 0, .28) 0%, transparent 58%);
}
.board-podium-ceremony.visible .podium-ceremony-banner.rank-1 .podium-ceremony-burst {
  animation: ceremony-burst 1.1s ease-out forwards;
}

.podium-ceremony-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .35) 2px, rgba(0, 0, 0, .35) 4px);
}
.podium-ceremony-frame {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(103, 232, 249, .25);
  border-radius: 3px;
  pointer-events: none;
}
.podium-ceremony-rank {
  position: relative;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 2.4rem;
  letter-spacing: .28em;
  line-height: 1;
  margin-bottom: .35rem;
  color: rgba(103, 232, 249, .95);
  text-shadow: 0 0 16px rgba(34, 211, 238, .45);
}
.podium-ceremony-banner.rank-1 .podium-ceremony-rank {
  color: #fde047;
  text-shadow: 0 0 24px rgba(255, 215, 0, .75);
}
.podium-ceremony-banner.rank-2 .podium-ceremony-rank {
  color: #bae6fd;
  text-shadow: 0 0 20px rgba(125, 211, 252, .55);
}
.podium-ceremony-banner.rank-3 .podium-ceremony-rank {
  color: #fdba74;
  text-shadow: 0 0 18px rgba(253, 186, 116, .5);
}
.podium-ceremony-title {
  position: relative;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.65rem;
  letter-spacing: .22em;
  color: rgba(226, 232, 240, .92);
  margin-bottom: .5rem;
}
.podium-ceremony-name {
  position: relative;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: .06em;
  color: #fff;
  text-shadow:
    0 0 20px rgba(167, 139, 250, .55),
    0 2px 0 rgba(0, 0, 0, .35);
  margin-bottom: .45rem;
  word-break: break-all;
}
.podium-ceremony-banner.rank-1 .podium-ceremony-name {
  color: #fffbeb;
  text-shadow:
    0 0 28px rgba(255, 215, 0, .65),
    0 2px 0 rgba(0, 0, 0, .4);
}
.podium-ceremony-sub {
  position: relative;
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, .88);
}

.podium-confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}
.podium-confetti-piece {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  opacity: 0;
  animation: confetti-burst 2.4s cubic-bezier(.15, .85, .25, 1) var(--delay, 0s) forwards;
  transform: translate(0, 0) rotate(0deg);
}

.board-stage.podium-ceremony-shake {
  animation: stage-shake-gold .55s cubic-bezier(.36, .07, .19, .97) both;
}
.podium-slot.ceremony-spotlight .plate-wrap {
  filter: drop-shadow(0 0 28px rgba(255, 215, 0, .55));
}
.podium-slot.ceremony-spotlight.slot-2 .plate-wrap {
  filter: drop-shadow(0 0 24px rgba(186, 230, 253, .5));
}
.podium-slot.ceremony-spotlight.slot-3 .plate-wrap {
  filter: drop-shadow(0 0 22px rgba(253, 186, 116, .45));
}
.podium-slot.ceremony-spotlight .plate-name {
  animation: name-shimmer 1.8s ease-in-out 2;
}
.podium-slot.ceremony-spotlight .plate-pedestal {
  animation: pedestal-pulse 1.2s ease-in-out 3;
}

@keyframes podium-banner-in {
  0% { opacity: 0; transform: translateY(28px) scale(.88); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes podium-banner-out {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(.96); }
}
@keyframes ceremony-burst {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes confetti-burst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.5); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx, 0), var(--cy, -120px)) rotate(var(--rot, 360deg)) scale(1); }
}
@keyframes stage-shake-gold {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-1px); }
}
@keyframes name-shimmer {
  0%, 100% { filter: brightness(1); letter-spacing: .06em; }
  50% { filter: brightness(1.35); letter-spacing: .1em; }
}
@keyframes pedestal-pulse {
  0%, 100% { filter: brightness(1); transform: scaleY(1); }
  50% { filter: brightness(1.4); transform: scaleY(1.04); }
}

/* Stronger rank-enter plate motion */
.podium-slot.rank-enter-1 .plate-name {
  animation: champion-name-pop 3.8s cubic-bezier(.2, 1.1, .3, 1) forwards;
}
.podium-slot.rank-enter-2 .plate-name {
  animation: silver-name-pop 2.8s ease forwards;
}
.podium-slot.rank-enter-3 .plate-name {
  animation: bronze-name-pop 2.6s ease forwards;
}
.podium-slot.rank-enter-1 .plate-pedestal {
  animation: champion-pedestal 3.8s ease forwards;
}
.podium-slot.rank-enter-1::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  width: 120%;
  height: 45%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, .18) 0%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: rank-spotlight 3.8s ease forwards;
}
@keyframes champion-name-pop {
  0% { opacity: .2; transform: scale(.7); }
  40% { opacity: 1; transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes silver-name-pop {
  0% { opacity: .35; transform: translateX(-12px); }
  50% { opacity: 1; transform: translateX(4px); }
  100% { transform: translateX(0); }
}
@keyframes bronze-name-pop {
  0% { opacity: .4; transform: translateY(10px); }
  55% { opacity: 1; transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@keyframes champion-pedestal {
  0%, 20% { box-shadow: 0 0 32px rgba(255, 215, 0, .65); filter: brightness(1.5); }
  100% { box-shadow: inherit; filter: brightness(1); }
}
@keyframes rank-spotlight {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.plate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--plate-w-2);
  transition: max-width .45s ease;
}
.slot-1 .plate-wrap { max-width: var(--plate-w-1); }
.slot-3 .plate-wrap { max-width: var(--plate-w-3); }

.plate-rank-badge {
  position: relative;
  z-index: 3;
  margin-bottom: -.55rem;
  padding: .2rem .85rem;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.15rem;
  letter-spacing: .2em;
  line-height: 1;
  border-radius: 2px;
  background: rgba(36, 34, 72, .95);
  border: 2px solid rgba(167, 139, 250, .55);
  color: rgba(103, 232, 249, .95);
  text-shadow: 0 0 10px rgba(34, 211, 238, .35);
}
.podium--compact .plate-rank-badge {
  font-size: .95rem;
  padding: .15rem .65rem;
  margin-bottom: -.45rem;
}

.plate-body {
  position: relative;
  width: 100%;
  padding: 1.35rem .85rem 1rem;
  text-align: center;
  border-radius: 4px;
  border: 3px solid rgba(124, 58, 237, .55);
  background: linear-gradient(180deg, rgba(52, 48, 100, .97) 0%, rgba(40, 38, 84, .98) 100%);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .2),
    0 8px 32px rgba(0, 0, 0, .35),
    inset 0 0 48px rgba(34, 211, 238, .05);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .45s ease, box-shadow .45s ease, padding .45s ease;
}
.podium--compact .plate-body {
  padding: 1.1rem .6rem .75rem;
}

.plate-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .12;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .2) 2px,
    rgba(0, 0, 0, .2) 4px
  );
}
.plate-frame {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(34, 211, 238, .22);
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
.plate-frame::before,
.plate-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: currentColor;
  border-style: solid;
  opacity: .55;
}
.slot-1:not(.empty) .plate-frame { color: rgba(255, 215, 0, .55); }
.slot-2:not(.empty) .plate-frame { color: rgba(125, 211, 252, .5); }
.slot-3:not(.empty) .plate-frame { color: rgba(253, 186, 116, .5); }
.plate-frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}
.plate-frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.plate-name {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #f8fafc;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  margin-bottom: .5rem;
}
.podium--featured .slot-1 .plate-name { font-size: 1.45rem; }
.podium--featured .slot-2 .plate-name { font-size: 1.2rem; }
.podium--featured .slot-3 .plate-name { font-size: 1.08rem; }
.podium--compact .slot-1 .plate-name { font-size: .92rem; }
.podium--compact .slot-2 .plate-name,
.podium--compact .slot-3 .plate-name { font-size: .82rem; }

.plate-score-label {
  position: relative;
  z-index: 2;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: .85rem;
  letter-spacing: .18em;
  color: rgba(253, 224, 71, .8);
  margin-bottom: .15rem;
  white-space: nowrap;
}
.podium--compact .plate-score-label { font-size: .72rem; }

.plate-score {
  position: relative;
  z-index: 2;
  font-family: ui-monospace, monospace;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 1.65rem;
  line-height: 1.1;
  color: #22d3ee;
  text-shadow:
    0 0 12px rgba(34, 211, 238, .45),
    0 2px 0 rgba(0, 0, 0, .4);
}
.podium--featured .slot-1 .plate-score { font-size: 2.55rem; }
.podium--featured .slot-2 .plate-score { font-size: 2rem; }
.podium--featured .slot-3 .plate-score { font-size: 1.7rem; }
.podium--compact .slot-1 .plate-score { font-size: 1.45rem; }
.podium--compact .slot-2 .plate-score { font-size: 1.2rem; }
.podium--compact .slot-3 .plate-score { font-size: 1.05rem; }

.plate-latest {
  position: relative;
  z-index: 2;
  margin-top: .45rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .72rem;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: .02em;
}
.podium--compact .plate-latest { font-size: .62rem; margin-top: .3rem; }

.plate-pedestal {
  position: relative;
  width: 88%;
  height: 10px;
  margin-top: .35rem;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(124, 58, 237, .5) 0%, rgba(80, 70, 140, .65) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: height .45s ease;
}
.plate-pedestal-cap {
  position: absolute;
  bottom: 100%;
  left: 8%;
  width: 84%;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: inherit;
  filter: brightness(1.15);
  opacity: .85;
}
.slot-1 .plate-pedestal { height: 16px; }
.slot-1:not(.empty) .plate-pedestal {
  height: 16px;
  background: linear-gradient(180deg, rgba(255, 215, 0, .55) 0%, rgba(180, 140, 20, .7) 100%);
  box-shadow: 0 0 14px rgba(255, 215, 0, .35), 0 6px 14px rgba(0, 0, 0, .28);
}
.slot-2:not(.empty) .plate-pedestal {
  background: linear-gradient(180deg, rgba(186, 230, 253, .45) 0%, rgba(100, 140, 180, .65) 100%);
  box-shadow: 0 0 10px rgba(125, 211, 252, .25);
}
.slot-3:not(.empty) .plate-pedestal {
  background: linear-gradient(180deg, rgba(253, 186, 116, .45) 0%, rgba(160, 90, 40, .65) 100%);
  box-shadow: 0 0 10px rgba(251, 146, 60, .22);
}
@keyframes pedestal-gold-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, .25); }
  50% { box-shadow: 0 0 18px rgba(255, 215, 0, .5); }
}
.podium--compact .plate-pedestal { height: 7px; }
.podium--compact .slot-1 .plate-pedestal { height: 11px; }

/* ── Tier colors (static glow, no infinite pulse) ── */
.slot-1:not(.empty) .plate-name {
  margin-top: 0;
}
.podium--compact .slot-1:not(.empty) .plate-name {
  margin-top: 0;
}
.podium--featured .slot-1:not(.empty) .plate-name {
  margin-top: 0;
}
.slot-2:not(.empty) .plate-name,
.slot-3:not(.empty) .plate-name {
  margin-top: .65rem;
}
.podium--compact .slot-2:not(.empty) .plate-name,
.podium--compact .slot-3:not(.empty) .plate-name {
  margin-top: .52rem;
}

.slot-1:not(.empty) .plate-rank-badge {
  border-color: rgba(255, 215, 0, .75);
  color: #ffe566;
  text-shadow: 0 0 10px rgba(255, 215, 0, .45);
}
.slot-1:not(.empty) .plate-body {
  border-color: rgba(255, 215, 0, .75);
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, .35),
    0 0 28px rgba(255, 215, 0, .22),
    0 8px 32px rgba(0, 0, 0, .35),
    inset 0 0 56px rgba(255, 215, 0, .06);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 215, 0, .08) 0%, transparent 52%),
    linear-gradient(180deg, rgba(56, 48, 104, .97) 0%, rgba(44, 40, 88, .98) 100%);
}
.slot-1:not(.empty) .plate-score {
  color: #fde047;
  text-shadow:
    0 0 14px rgba(253, 224, 71, .55),
    0 2px 0 rgba(0, 0, 0, .4);
}

.slot-2:not(.empty) .plate-rank-badge {
  border-color: rgba(103, 232, 249, .65);
  color: #e2e8f0;
}
.slot-2:not(.empty) .plate-body {
  border-color: rgba(103, 232, 249, .6);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .25),
    0 0 20px rgba(34, 211, 238, .15),
    0 8px 28px rgba(0, 0, 0, .3),
    inset 0 0 40px rgba(34, 211, 238, .06);
}
.slot-2:not(.empty) .plate-score {
  color: #7dd3fc;
  text-shadow: 0 0 10px rgba(125, 211, 252, .35), 0 2px 0 rgba(0, 0, 0, .4);
}

.slot-3:not(.empty) .plate-rank-badge {
  border-color: rgba(253, 186, 116, .6);
  color: #fdba74;
}
.slot-3:not(.empty) .plate-body {
  border-color: rgba(253, 186, 116, .55);
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, .2),
    0 0 18px rgba(251, 146, 60, .12),
    0 8px 28px rgba(0, 0, 0, .3),
    inset 0 0 36px rgba(251, 146, 60, .05);
}
.slot-3:not(.empty) .plate-score {
  color: #fdba74;
  text-shadow: 0 0 10px rgba(253, 186, 116, .35), 0 2px 0 rgba(0, 0, 0, .4);
}

/* Empty slot – dashed, static */
.podium-slot.empty .plate-rank-badge {
  border-style: dashed;
  border-color: rgba(167, 139, 250, .4);
  color: rgba(148, 163, 184, .85);
  text-shadow: none;
}
.podium-slot.empty .plate-body {
  border-style: dashed;
  border-color: rgba(167, 139, 250, .35);
  background: linear-gradient(180deg, rgba(44, 42, 84, .65) 0%, rgba(36, 34, 72, .72) 100%);
  box-shadow: inset 0 0 32px rgba(124, 58, 237, .06);
}
.podium-slot.empty .plate-name {
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.1rem;
  letter-spacing: .14em;
  color: rgba(203, 213, 225, .82);
  -webkit-line-clamp: 1;
}
.podium-slot.empty .plate-score {
  font-size: 1.25rem;
  color: rgba(148, 163, 184, .6);
  text-shadow: none;
}
.podium-slot.empty .plate-pedestal {
  background: linear-gradient(180deg, rgba(124, 58, 237, .25) 0%, rgba(80, 70, 140, .35) 100%);
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .podium--stagger .plate-wrap,
  .podium--stagger .plate-name,
  .podium--stagger .plate-score-label,
  .podium--stagger .plate-score,
  .podium--stagger .plate-latest,
  .podium--stagger .plate-led-bar span,
  .podium--settled .slot-1:not(.empty) .plate-crown-row .plate-crown,
  .podium--settled .slot-1:not(.empty) .plate-halo,
  .podium--settled .slot-1:not(.empty) .plate-spark,
  .podium--settled .slot-2:not(.empty) .plate-sweep,
  .podium--settled .slot-3:not(.empty) .plate-ember,
  .podium-slot.flash-new .plate-body,
  .podium-slot.flash-new .plate-score,
  .podium-slot.rank-enter-1 .plate-wrap,
  .podium-slot.rank-enter-2 .plate-wrap,
  .podium-slot.rank-enter-3 .plate-wrap,
  .podium-slot.rank-enter-1 .plate-body,
  .podium-slot.rank-enter-2 .plate-body,
  .podium-slot.rank-enter-3 .plate-body,
  .podium-slot.rank-enter-1 .plate-crown-row .plate-crown,
  .podium-slot.rank-enter-1 .plate-crown,
  .podium-slot.rank-enter-1 .plate-halo,
  .podium-slot.rank-enter-2 .plate-sweep,
  .podium-slot.rank-enter-3 .plate-ember,
  .podium-slot.rank-enter-1 .plate-name,
  .podium-slot.rank-enter-2 .plate-name,
  .podium-slot.rank-enter-3 .plate-name,
  .podium-slot.rank-enter-1 .plate-pedestal,
  .podium-slot.rank-enter-1::before,
  .podium-slot.ceremony-spotlight .plate-name,
  .podium-slot.ceremony-spotlight .plate-pedestal,
  .board-podium-ceremony.visible .podium-ceremony-banner,
  .board-podium-ceremony.visible .podium-ceremony-banner.rank-1 .podium-ceremony-burst,
  .board-podium-ceremony.visible .podium-ceremony-scrim,
  .podium-confetti-piece,
  .board-stage.podium-ceremony-shake,
  .plate-crown,
  .plate-halo,
  .plate-spark,
  .plate-sweep,
  .plate-ember,
  .slot-1:not(.empty) .plate-pedestal {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .plate-crown { transform: translateX(-50%); }
  .plate-halo { transform: translateX(-50%); }
  .podium--stagger .plate-wrap,
  .podium--stagger .plate-name,
  .podium--stagger .plate-score-label,
  .podium--stagger .plate-score,
  .podium--stagger .plate-latest,
  .podium--stagger .plate-led-bar span {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .top10-list--stagger .top10-row,
  .top10-row.rank-rest-up,
  .top10-row.rank-rest-down,
  .top10-row.rank-rest-new,
  .top10-row.rank-rest-self,
  .top10-row.rank-rest-up .top10-rank,
  .top10-row.rank-rest-down .top10-rank,
  .top10-row.rank-rest-new .top10-rank,
  .top10-row.rank-rest-self .top10-rank,
  .top10-row.flash-new {
    animation: none !important;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.top10-rest {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.top10-head {
  display: grid;
  grid-template-columns: 52px 1fr 112px 112px;
  gap: .65rem;
  padding: .65rem .95rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(103, 232, 249, .95);
  font-family: ui-monospace, monospace;
  background: rgba(48, 44, 92, .82);
  border: 2px solid rgba(103, 232, 249, .4);
  border-bottom: 1px solid rgba(167, 139, 250, .45);
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
}
.top10-list {
  flex: 1;
  overflow: hidden;
  padding: .5rem 0 .4rem;
  border: 2px solid rgba(124, 58, 237, .35);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: rgba(36, 34, 72, .62);
}
.top10-row {
  display: grid;
  grid-template-columns: 52px 1fr 112px 112px;
  gap: .65rem;
  align-items: center;
  padding: .72rem .95rem;
  margin: 0 .45rem .3rem;
  min-height: 52px;
  border-radius: 4px;
  border: 1px solid rgba(124, 58, 237, .32);
  background: linear-gradient(90deg, rgba(52, 48, 96, .92) 0%, rgba(44, 40, 84, .82) 100%);
  transition:
    transform .45s cubic-bezier(.2, 1, .3, 1),
    border-color .2s ease,
    box-shadow .2s ease;
  will-change: auto;
}
.top10-row.rank-rest-flip-up,
.top10-row.rank-rest-flip-down {
  will-change: transform;
  z-index: 3;
  transition:
    transform .52s cubic-bezier(.2, 1, .25, 1),
    border-color .2s ease,
    box-shadow .2s ease;
}
.top10-list--stagger .top10-row {
  opacity: 0;
  transform: translateX(-14px);
  animation: rest-row-stagger-in .44s cubic-bezier(.2, 1, .35, 1) forwards;
}
.top10-list--stagger .top10-row:nth-child(1) { animation-delay: 0ms; }
.top10-list--stagger .top10-row:nth-child(2) { animation-delay: 55ms; }
.top10-list--stagger .top10-row:nth-child(3) { animation-delay: 110ms; }
.top10-list--stagger .top10-row:nth-child(4) { animation-delay: 165ms; }
.top10-list--stagger .top10-row:nth-child(5) { animation-delay: 220ms; }
.top10-list--stagger .top10-row:nth-child(6) { animation-delay: 275ms; }
.top10-list--stagger .top10-row:nth-child(7) { animation-delay: 330ms; }
@keyframes rest-row-stagger-in {
  0% { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: translateX(0); }
}
.top10-row.rank-rest-up {
  animation: rest-rank-up .58s cubic-bezier(.2, 1.1, .3, 1) forwards;
}
.top10-row.rank-rest-down {
  animation: rest-rank-down .52s cubic-bezier(.3, 1, .4, 1) forwards;
}
.top10-row.rank-rest-new {
  animation: rest-rank-new .5s cubic-bezier(.2, 1.2, .3, 1) forwards;
}
.top10-row.rank-rest-self {
  animation: rest-rank-self .72s cubic-bezier(.2, 1.1, .3, 1) forwards;
}
@keyframes rest-rank-up {
  0% {
    border-color: rgba(124, 58, 237, .32);
    box-shadow: none;
    filter: brightness(1);
  }
  18% {
    border-color: rgba(34, 211, 238, .85);
    box-shadow:
      0 0 24px rgba(34, 211, 238, .38),
      inset 0 0 28px rgba(34, 211, 238, .1);
    filter: brightness(1.18);
  }
  100% {
    border-color: rgba(124, 58, 237, .32);
    box-shadow: none;
    filter: brightness(1);
  }
}
@keyframes rest-rank-down {
  0% {
    border-color: rgba(124, 58, 237, .32);
    box-shadow: none;
    filter: brightness(1);
  }
  18% {
    border-color: rgba(251, 191, 36, .7);
    box-shadow: 0 0 18px rgba(251, 191, 36, .24);
    filter: brightness(.92);
  }
  100% {
    border-color: rgba(124, 58, 237, .32);
    box-shadow: none;
    filter: brightness(1);
  }
}
@keyframes rest-rank-new {
  0% {
    opacity: .35;
    transform: translateX(18px);
    border-color: rgba(167, 139, 250, .2);
    box-shadow: none;
  }
  55% {
    opacity: 1;
    transform: translateX(-2px);
    border-color: rgba(167, 139, 250, .75);
    box-shadow: 0 0 18px rgba(124, 58, 237, .22);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    border-color: rgba(124, 58, 237, .32);
    box-shadow: none;
  }
}
@keyframes rest-rank-self {
  0% {
    border-color: rgba(124, 58, 237, .32);
    box-shadow: none;
    filter: brightness(1);
  }
  24% {
    border-color: rgba(255, 215, 0, .78);
    box-shadow:
      0 0 22px rgba(255, 215, 0, .32),
      inset 0 0 20px rgba(255, 215, 0, .08);
    filter: brightness(1.14);
  }
  100% {
    border-color: rgba(124, 58, 237, .32);
    box-shadow: none;
    filter: brightness(1);
  }
}
.top10-row.rank-rest-up .top10-rank {
  animation: rest-badge-up .58s cubic-bezier(.2, 1.3, .3, 1) forwards;
}
.top10-row.rank-rest-down .top10-rank {
  animation: rest-badge-down .52s ease forwards;
}
.top10-row.rank-rest-new .top10-rank {
  animation: rest-badge-new .5s cubic-bezier(.2, 1.2, .3, 1) forwards;
}
.top10-row.rank-rest-self .top10-rank {
  animation: rest-badge-self .72s cubic-bezier(.2, 1.1, .3, 1) forwards;
}
@keyframes rest-badge-up {
  0%, 100% { transform: scale(1); filter: none; }
  32% {
    transform: scale(1.14);
    color: #67e8f9;
    border-color: rgba(34, 211, 238, .75);
    box-shadow: 0 0 14px rgba(34, 211, 238, .45);
  }
}
@keyframes rest-badge-down {
  0%, 100% { transform: scale(1); }
  32% { transform: scale(.94); opacity: .82; }
}
@keyframes rest-badge-new {
  0% { transform: scale(.72); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes rest-badge-self {
  0%, 100% { transform: scale(1); color: inherit; }
  30% {
    transform: scale(1.12);
    color: #fde68a;
    border-color: rgba(255, 215, 0, .75);
    box-shadow: 0 0 12px rgba(255, 215, 0, .4);
  }
}
.top10-row:nth-child(even) {
  border-color: rgba(34, 211, 238, .22);
  background: linear-gradient(90deg, rgba(48, 44, 90, .82) 0%, rgba(40, 38, 78, .7) 100%);
}
.top10-row.flash-new {
  animation: row-highlight-arcade 2.5s ease;
}
@keyframes row-highlight-arcade {
  0%, 40% {
    background: rgba(255, 215, 0, .1);
    border-color: rgba(255, 215, 0, .55);
    box-shadow: 0 0 18px rgba(255, 215, 0, .18);
    transform: scale(1.01);
  }
  100% {
    background: linear-gradient(90deg, rgba(52, 48, 96, .88) 0%, rgba(44, 40, 84, .75) 100%);
    border-color: rgba(124, 58, 237, .28);
    box-shadow: none;
    transform: scale(1);
  }
}
.top10-rank {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', ui-monospace, monospace;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1;
}
.top10-rank.r1 { background: rgba(255,215,0,.2); color: var(--gold); border: 1px solid rgba(255,215,0,.35); }
.top10-rank.r2 { background: rgba(192,192,192,.15); color: var(--silver); }
.top10-rank.r3 { background: rgba(205,127,50,.12); color: var(--bronze); }
.top10-rank.rn {
  background: rgba(56, 52, 100, .95);
  color: #bae6fd;
  border: 1px solid rgba(124, 58, 237, .55);
  box-shadow: 0 0 10px rgba(124, 58, 237, .2);
}
.top10-name {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #f8fafc;
  letter-spacing: .01em;
}
.top10-score {
  font-family: ui-monospace, monospace;
  font-weight: 900;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  color: #22d3ee;
  text-align: right;
  text-shadow:
    0 0 10px rgba(34, 211, 238, .45),
    0 1px 0 rgba(0, 0, 0, .35);
}
.top10-latest {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .8125rem;
  line-height: 1.35;
  color: #b8c5d6;
  text-align: right;
  letter-spacing: .01em;
}

.top10-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(203, 213, 225, .92);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  letter-spacing: .02em;
  gap: .65rem;
  padding: 2rem 1rem;
}
.top10-empty-icon {
  width: 2.5rem;
  height: 2.5rem;
  opacity: .7;
  color: rgba(167, 139, 250, .9);
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, .35));
}

/* ── Player enter ceremony ── */
.board-enter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  background: transparent;
}
.board-enter.visible {
  opacity: 1;
  visibility: visible;
}
.board-enter.exit {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

.enter-card {
  position: relative;
  text-align: center;
  padding: 2rem 3rem 2.25rem;
  min-width: 320px;
  max-width: 90vw;
  background: linear-gradient(180deg, rgba(52, 48, 100, .97) 0%, rgba(40, 38, 84, .98) 100%);
  border: 3px solid #a78bfa;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, .35),
    0 0 48px rgba(124, 58, 237, .45),
    0 0 80px rgba(34, 211, 238, .2);
  overflow: hidden;
  transform: scale(.88);
  opacity: 0;
}
.enter-card.enter-pop {
  animation: enter-pop-in .65s cubic-bezier(.2, 1.35, .3, 1) forwards;
}
.board-enter.exit .enter-card {
  animation: enter-pop-out .4s ease forwards;
}
@keyframes enter-pop-in {
  0% { opacity: 0; transform: scale(.75); filter: brightness(1.8); }
  55% { opacity: 1; transform: scale(1.05); filter: brightness(1.25); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes enter-pop-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); filter: brightness(1.3); }
}

.enter-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .18) 2px,
    rgba(0, 0, 0, .18) 4px
  );
}
.enter-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(34, 211, 238, .3);
  pointer-events: none;
}
.enter-burst {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, rgba(255, 215, 0, .25) 0%, transparent 55%);
  opacity: 0;
  animation: enter-burst 1s ease .1s forwards;
  pointer-events: none;
}
@keyframes enter-burst {
  0% { opacity: 0; transform: scale(.6); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

.enter-title-cn {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: .08em;
  line-height: 1.2;
  margin-bottom: .35rem;
  text-shadow: 0 0 20px rgba(34, 211, 238, .35);
}
.enter-label-en {
  position: relative;
  z-index: 2;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.1rem;
  letter-spacing: .24em;
  color: rgba(253, 224, 71, .88);
  text-shadow: 0 0 12px rgba(255, 215, 0, .4);
  margin-bottom: .85rem;
}
.enter-name {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 2.75rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .02em;
  line-height: 1.2;
  text-shadow:
    0 0 20px rgba(34, 211, 238, .5),
    0 0 40px rgba(124, 58, 237, .3);
  margin-bottom: .65rem;
  word-break: break-word;
}
.enter-sub {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #5eead4;
  text-shadow: 0 0 10px rgba(94, 234, 212, .35);
}
.enter-hint {
  position: relative;
  z-index: 2;
  margin-top: .85rem;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: .95rem;
  letter-spacing: .16em;
  color: rgba(196, 181, 253, .92);
  animation: enter-hint-pulse 1.6s ease infinite;
}
@keyframes enter-hint-pulse {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .board-content.blurred,
  .board-content.blurred-card,
  .board-content.blurred-live,
  .board-content.blur-fade-out {
    filter: brightness(.72);
    transition: none;
  }
  .board-card-scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .board-enter,
  .board-unknown {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .enter-card.enter-pop,
  .board-enter.exit .enter-card,
  .enter-burst,
  .enter-hint {
    animation: none !important;
  }
  .enter-card.enter-pop {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Unregistered card alert ── */
.board-unknown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 16;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  background: transparent;
}
.board-unknown.visible {
  opacity: 1;
  visibility: visible;
}
.board-unknown.exit {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

.unknown-card {
  position: relative;
  text-align: center;
  padding: 2rem 2.75rem 2.25rem;
  min-width: 320px;
  max-width: 90vw;
  background: linear-gradient(180deg, rgba(72, 32, 40, .97) 0%, rgba(48, 24, 32, .98) 100%);
  border: 3px solid #f87171;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, .35),
    0 0 48px rgba(239, 68, 68, .45),
    0 0 80px rgba(245, 158, 11, .18);
  overflow: hidden;
  transform: scale(.88);
  opacity: 0;
}
.unknown-card.unknown-pop {
  animation: unknown-pop-in .65s cubic-bezier(.2, 1.35, .3, 1) forwards;
}
.board-unknown.exit .unknown-card {
  animation: unknown-pop-out .4s ease forwards;
}
@keyframes unknown-pop-in {
  0% { opacity: 0; transform: scale(.75); }
  55% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes unknown-pop-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

.unknown-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .18) 2px,
    rgba(0, 0, 0, .18) 4px
  );
}
.unknown-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(251, 191, 36, .35);
  pointer-events: none;
}
.unknown-pulse {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, rgba(239, 68, 68, .28) 0%, transparent 55%);
  opacity: 0;
  animation: unknown-pulse 1.2s ease .1s infinite;
  pointer-events: none;
}
@keyframes unknown-pulse {
  0%, 100% { opacity: .35; transform: scale(.95); }
  50% { opacity: .85; transform: scale(1.05); }
}

.unknown-icon {
  position: relative;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .65rem;
  border-radius: 50%;
  border: 3px solid #fbbf24;
  color: #fef08a;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 2rem;
  line-height: 2.6rem;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(251, 191, 36, .45);
  animation: unknown-icon-shake .8s ease infinite;
}
@keyframes unknown-icon-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.unknown-title-cn {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #fef2f2;
  letter-spacing: .08em;
  line-height: 1.2;
  margin-bottom: .35rem;
  text-shadow: 0 0 20px rgba(239, 68, 68, .45);
}
.unknown-label-en {
  position: relative;
  z-index: 2;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.1rem;
  letter-spacing: .24em;
  color: rgba(251, 191, 36, .92);
  text-shadow: 0 0 12px rgba(245, 158, 11, .4);
  margin-bottom: .85rem;
}
.unknown-sub {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fca5a5;
  text-shadow: 0 0 10px rgba(248, 113, 113, .25);
}
.unknown-hint {
  position: relative;
  z-index: 2;
  margin-top: .85rem;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: .95rem;
  letter-spacing: .12em;
  color: rgba(254, 240, 138, .88);
  animation: unknown-hint-pulse 1.4s ease infinite;
}
@keyframes unknown-hint-pulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .unknown-card.unknown-pop,
  .board-unknown.exit .unknown-card,
  .unknown-pulse,
  .unknown-icon,
  .unknown-hint {
    animation: none !important;
  }
  .unknown-card.unknown-pop {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Live score – arcade HUD (screen center) ── */
.board-live {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.board-live.visible {
  opacity: 1;
  visibility: visible;
  z-index: 17;
  background:
    radial-gradient(ellipse at center, rgba(124, 58, 237, .12) 0%, transparent 58%),
    rgba(8, 8, 24, .65);
}
.board-live.exiting {
  opacity: 0;
  visibility: hidden;
}
.live-card.to-game-end .live-header-bar {
  color: rgba(253, 224, 71, .92);
  text-shadow: 0 0 14px rgba(255, 215, 0, .45);
  letter-spacing: .22em;
  transition: color .28s ease;
}
.live-card.to-game-end .live-level {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transition: opacity .28s ease, max-height .28s ease, margin .28s ease;
}
.live-card.to-game-end .live-score-label {
  color: rgba(253, 224, 71, .85);
  letter-spacing: .2em;
  transition: color .28s ease;
}
.live-card.to-game-end .live-hit-ticker {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  transition: opacity .2s ease, max-height .2s ease;
}

.live-card {
  position: relative;
  text-align: center;
  padding: 1.5rem 2.5rem 2rem;
  min-width: 340px;
  background:
    linear-gradient(180deg, rgba(48, 44, 92, .96) 0%, rgba(40, 38, 80, .98) 100%);
  border: 3px solid #22d3ee;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, .6),
    0 0 40px rgba(34, 211, 238, .35),
    0 0 80px rgba(124, 58, 237, .25),
    inset 0 0 60px rgba(34, 211, 238, .06);
  overflow: hidden;
  transform-origin: center center;
}
.live-card.enter {
  animation: arcade-enter .55s cubic-bezier(.2, 1.4, .3, 1) forwards;
}
.live-card.hit-pulse {
  animation: arcade-hit-shake .45s ease;
}
.live-card.penalty-pulse {
  animation: arcade-penalty-shake .45s ease;
}
.live-card.combo-active.t-warm {
  border-color: #fb923c;
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, .7),
    0 0 50px rgba(251, 146, 60, .45),
    0 0 90px rgba(251, 146, 60, .2),
    inset 0 0 60px rgba(251, 146, 60, .08);
}
.live-card.combo-active.t-hot {
  border-color: #f87171;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, .7),
    0 0 55px rgba(248, 113, 113, .5),
    0 0 100px rgba(248, 113, 113, .25),
    inset 0 0 60px rgba(248, 113, 113, .1);
  animation: arcade-border-pulse-hot 1.2s ease infinite;
}
.live-card.combo-active.t-fire {
  border-color: #ffd700;
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, .8),
    0 0 60px rgba(255, 215, 0, .55),
    0 0 120px rgba(255, 140, 0, .3),
    inset 0 0 80px rgba(255, 215, 0, .12);
  animation: arcade-border-pulse-fire .8s ease infinite;
}
.live-card.combo-active.t-fire.hit-pulse {
  animation: arcade-hit-shake .45s ease, arcade-border-pulse-fire .8s ease infinite;
}

.live-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .18) 2px,
    rgba(0, 0, 0, .18) 4px
  );
  opacity: .45;
  z-index: 1;
}
.live-frame {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(34, 211, 238, .25);
  pointer-events: none;
  z-index: 1;
}
.live-frame::before,
.live-frame::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #22d3ee;
  border-style: solid;
}
.live-frame::before {
  top: -1px; left: -1px;
  border-width: 3px 0 0 3px;
}
.live-frame::after {
  bottom: -1px; right: -1px;
  border-width: 0 3px 3px 0;
}

.live-header-bar {
  position: relative;
  z-index: 2;
  font-family: ui-monospace, monospace;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .35em;
  color: rgba(34, 211, 238, .75);
  margin-bottom: .35rem;
  text-shadow: 0 0 12px rgba(34, 211, 238, .5);
}
.live-name {
  position: relative;
  z-index: 2;
  font-family: ui-monospace, monospace;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow:
    0 0 20px rgba(124, 58, 237, .8),
    0 2px 0 rgba(0, 0, 0, .5);
  margin-bottom: .2rem;
}
.live-level {
  position: relative;
  z-index: 2;
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: .2em;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(167, 139, 250, .4);
}

.live-score-panel {
  position: relative;
  z-index: 2;
  background: rgba(36, 34, 72, .55);
  border: 2px solid rgba(103, 232, 249, .45);
  padding: .75rem 1.5rem 1rem;
  margin: 0 .25rem;
  box-shadow: inset 0 0 30px rgba(34, 211, 238, .12);
}
.live-score-label {
  font-family: ui-monospace, monospace;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .4em;
  color: rgba(255, 215, 0, .85);
  margin-bottom: .35rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, .5);
}

.live-score-wrap {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.live-hit-flash {
  position: absolute;
  inset: -12px -24px;
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, .55) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.live-hit-flash.active {
  animation: arcade-score-flash .45s ease forwards;
}
.live-hit-flash.active.penalty {
  background: radial-gradient(ellipse at center, rgba(248, 113, 113, .5) 0%, transparent 70%);
}
.live-score {
  position: relative;
  z-index: 1;
  font-family: ui-monospace, monospace;
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: #22d3ee;
  letter-spacing: .02em;
  text-shadow:
    0 0 10px #22d3ee,
    0 0 30px rgba(34, 211, 238, .8),
    0 0 60px rgba(34, 211, 238, .4),
    0 4px 0 rgba(0, 0, 0, .6);
}
.live-score.pop {
  animation: arcade-score-pop .45s cubic-bezier(.2, 1.6, .3, 1);
}
.live-score.gain-flash {
  color: #bbf7d0;
  text-shadow:
    0 0 12px #4ade80,
    0 0 36px rgba(74, 222, 128, .85),
    0 0 72px rgba(34, 211, 238, .45),
    0 4px 0 rgba(0, 0, 0, .6);
}
.live-score.gain-mega {
  color: #fef08a;
  text-shadow:
    0 0 14px #fde047,
    0 0 42px rgba(253, 224, 71, .9),
    0 0 80px rgba(251, 146, 60, .45),
    0 4px 0 rgba(0, 0, 0, .6);
}
.live-score.loss-flash {
  color: #fecaca;
  text-shadow:
    0 0 12px #f87171,
    0 0 36px rgba(248, 113, 113, .85),
    0 0 72px rgba(239, 68, 68, .45),
    0 4px 0 rgba(0, 0, 0, .6);
}

.live-score-panel.gain-pulse {
  animation: panel-gain-pulse .45s ease;
}
.live-score-panel.gain-pulse-mega {
  animation: panel-gain-pulse-mega .55s ease;
}
@keyframes panel-gain-pulse {
  0%, 100% { border-color: rgba(34, 211, 238, .35); box-shadow: inset 0 0 30px rgba(34, 211, 238, .08); }
  35% { border-color: rgba(74, 222, 128, .85); box-shadow: inset 0 0 40px rgba(74, 222, 128, .2), 0 0 24px rgba(74, 222, 128, .25); }
}
@keyframes panel-gain-pulse-mega {
  0%, 100% { border-color: rgba(34, 211, 238, .35); }
  35% { border-color: rgba(253, 224, 71, .9); box-shadow: inset 0 0 50px rgba(253, 224, 71, .18), 0 0 32px rgba(253, 224, 71, .35); }
}
.live-score-panel.loss-pulse {
  animation: panel-loss-pulse .45s ease;
}
@keyframes panel-loss-pulse {
  0%, 100% { border-color: rgba(34, 211, 238, .35); box-shadow: inset 0 0 30px rgba(34, 211, 238, .08); }
  35% { border-color: rgba(248, 113, 113, .85); box-shadow: inset 0 0 40px rgba(248, 113, 113, .2), 0 0 24px rgba(248, 113, 113, .25); }
}

/* Hit ticker – fixed lane between score panel and combo */
.live-hit-ticker {
  position: relative;
  z-index: 2;
  height: 1.35rem;
  margin-top: .55rem;
  font-family: ui-monospace, monospace;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
  color: transparent;
  user-select: none;
}
.live-hit-ticker.show {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, .7);
  animation: hit-ticker-flash 1.4s ease forwards;
}
.live-hit-ticker.show.mega {
  color: #fde047;
  text-shadow: 0 0 12px rgba(253, 224, 71, .85);
  animation: hit-ticker-flash-mega 1.4s ease forwards;
}
.live-hit-ticker.show.penalty {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, .75), 0 0 24px rgba(239, 68, 68, .35);
  animation: penalty-ticker-flash 1.4s ease forwards;
}
@keyframes hit-ticker-flash {
  0% { opacity: 0; transform: scale(.85); }
  12% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.95); }
}
@keyframes hit-ticker-flash-mega {
  0% { opacity: 0; transform: scale(.8); }
  12% { opacity: 1; transform: scale(1.15); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.95); }
}
@keyframes penalty-ticker-flash {
  0% { opacity: 0; transform: scale(.85) translateY(-4px); }
  12% { opacity: 1; transform: scale(1.06) translateY(0); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.95) translateY(2px); }
}

.live-combo {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  font-family: ui-monospace, monospace;
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: .12em;
  min-height: 1.3em;
  opacity: 0;
  transition: opacity .15s;
}
.live-combo.show { opacity: 1; }
.live-combo.bump { animation: arcade-combo-slam .5s cubic-bezier(.2, 1.5, .3, 1); }
.live-combo.t-warm {
  color: #fb923c;
  text-shadow: 0 0 20px rgba(251, 146, 60, .7), 0 0 40px rgba(251, 146, 60, .3);
}
.live-combo.t-hot {
  color: #f87171;
  text-shadow: 0 0 24px rgba(248, 113, 113, .8), 0 0 48px rgba(248, 113, 113, .4);
  animation: arcade-combo-flicker .6s ease infinite;
}
.live-combo.t-fire {
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255, 215, 0, .9), 0 0 60px rgba(255, 140, 0, .5);
  animation: arcade-combo-fire 1s ease infinite;
}
.live-combo.bump.t-fire { animation: arcade-combo-slam .5s cubic-bezier(.2, 1.5, .3, 1), arcade-combo-fire 1s ease infinite .5s; }

@keyframes arcade-enter {
  0% { opacity: 0; transform: scale(.4) translateY(40px); filter: brightness(2); }
  50% { opacity: 1; transform: scale(1.08) translateY(-4px); filter: brightness(1.4); }
  75% { transform: scale(.96) translateY(2px); filter: brightness(1); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}
@keyframes arcade-hit-shake {
  0% { transform: translate(0, 0) scale(1); filter: brightness(1); }
  10% { transform: translate(-4px, 2px) scale(1.03); filter: brightness(1.6); border-color: #fff; }
  25% { transform: translate(5px, -3px) scale(1.05); filter: brightness(1.3); }
  40% { transform: translate(-3px, 1px) scale(1.02); }
  60% { transform: translate(2px, -1px) scale(1.01); filter: brightness(1.1); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}
@keyframes arcade-penalty-shake {
  0% { transform: translate(0, 0) scale(1); filter: brightness(1); border-color: rgba(34, 211, 238, .35); }
  10% { transform: translate(3px, -2px) scale(.98); filter: brightness(.85); border-color: #f87171; }
  25% { transform: translate(-4px, 2px) scale(.99); filter: brightness(.75); }
  40% { transform: translate(2px, -1px) scale(1); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}
@keyframes arcade-score-pop {
  0% { transform: scale(1); }
  25% { transform: scale(1.22); }
  50% { transform: scale(.94); }
  75% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes arcade-score-flash {
  0% { opacity: 0; transform: scale(.8); }
  20% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes arcade-combo-slam {
  0% { transform: scale(2.2); opacity: .5; }
  40% { transform: scale(.9); opacity: 1; }
  65% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes arcade-combo-flicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: .85; filter: brightness(1.3); }
}
@keyframes arcade-combo-fire {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.35); }
}
@keyframes arcade-border-pulse-hot {
  0%, 100% { box-shadow: 0 0 0 1px rgba(248, 113, 113, .7), 0 0 55px rgba(248, 113, 113, .5), 0 0 100px rgba(248, 113, 113, .25), inset 0 0 60px rgba(248, 113, 113, .1); }
  50% { box-shadow: 0 0 0 2px rgba(248, 113, 113, 1), 0 0 70px rgba(248, 113, 113, .7), 0 0 130px rgba(248, 113, 113, .35), inset 0 0 80px rgba(248, 113, 113, .15); }
}
@keyframes arcade-border-pulse-fire {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 215, 0, .8), 0 0 60px rgba(255, 215, 0, .55), 0 0 120px rgba(255, 140, 0, .3), inset 0 0 80px rgba(255, 215, 0, .12); }
  50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 80px rgba(255, 215, 0, .8), 0 0 160px rgba(255, 140, 0, .45), inset 0 0 100px rgba(255, 215, 0, .2); }
}

/* ── Game end overlay ── */
.board-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  background: rgba(8, 8, 24, .65);
  -webkit-backdrop-filter: blur(18px) saturate(.75);
  backdrop-filter: blur(18px) saturate(.75);
  transition: opacity .15s ease;
}
.board-overlay.visible { opacity: 1; }
.board-overlay.game-end { animation: overlay-end 5.75s ease forwards; }
.board-overlay.game-end.from-live {
  animation: overlay-end 5.75s ease forwards;
}
@keyframes overlay-end {
  0% { opacity: 0; }
  5.2% { opacity: 1; }
  92.2% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes overlay-end-handoff {
  0% { opacity: 0; }
  6.6% { opacity: 1; }
  92.2% { opacity: 1; }
  100% { opacity: 0; }
}

.overlay-card {
  position: relative;
  text-align: center;
  padding: 2rem 2.5rem 2.25rem;
  min-width: 320px;
  max-width: 90vw;
  background: linear-gradient(180deg, rgba(52, 48, 100, .97) 0%, rgba(40, 38, 84, .98) 100%);
  border: 3px solid #22d3ee;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, .55),
    0 0 48px rgba(34, 211, 238, .35),
    0 0 80px rgba(124, 58, 237, .2);
  overflow: hidden;
  animation: overlay-card-in .45s cubic-bezier(.2, 1.3, .3, 1) forwards;
}
.board-overlay.from-live .overlay-card {
  animation: overlay-card-in .45s cubic-bezier(.2, 1.3, .3, 1) forwards;
  opacity: 0;
}
@keyframes overlay-card-in {
  0% { opacity: 0; transform: scale(.88); filter: brightness(1.4); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes overlay-morph-in {
  0% { opacity: 0; transform: scale(.82); filter: brightness(1.08); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.overlay-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .12;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .18) 2px,
    rgba(0, 0, 0, .18) 4px
  );
}
.overlay-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(34, 211, 238, .28);
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
.overlay-label {
  position: relative;
  z-index: 2;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.35rem;
  letter-spacing: .22em;
  color: rgba(253, 224, 71, .92);
  text-shadow: 0 0 14px rgba(255, 215, 0, .45);
  margin-bottom: .5rem;
}
.overlay-name {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 1rem;
  letter-spacing: .02em;
}
.overlay-score-panel {
  position: relative;
  z-index: 2;
  background: rgba(36, 34, 72, .55);
  border: 2px solid rgba(103, 232, 249, .45);
  padding: .85rem 1.5rem 1rem;
  margin: 0 .25rem;
  box-shadow: inset 0 0 30px rgba(34, 211, 238, .1);
}
.overlay-score-label {
  font-family: 'VT323', ui-monospace, monospace;
  font-size: .9rem;
  letter-spacing: .2em;
  color: rgba(253, 224, 71, .85);
  margin-bottom: .35rem;
  text-shadow: 0 0 10px rgba(255, 215, 0, .4);
}
.overlay-score {
  font-family: ui-monospace, monospace;
  font-size: 3.75rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #22d3ee;
  text-shadow:
    0 0 12px rgba(34, 211, 238, .55),
    0 0 32px rgba(34, 211, 238, .35),
    0 3px 0 rgba(0, 0, 0, .45);
}
.overlay-score.pop { animation: score-pop .35s ease; }
@keyframes score-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.overlay-delta {
  position: absolute;
  right: -20%;
  top: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--green);
  animation: delta-float 1.5s ease forwards;
  opacity: 0;
}
@keyframes delta-float {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-24px); }
}
.overlay-combo {
  position: relative;
  z-index: 2;
  margin-top: .85rem;
  font-family: ui-monospace, monospace;
  font-size: 2rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity .2s;
}
.overlay-combo.show { opacity: 1; animation: combo-bump .4s ease; }
.overlay-combo.t-warm { color: #fb923c; }
.overlay-combo.t-hot { color: #f87171; text-shadow: 0 0 20px rgba(248,113,113,.4); }
.overlay-combo.t-fire { color: var(--gold); text-shadow: 0 0 28px rgba(255,215,0,.45); }
@keyframes combo-bump {
  0% { transform: scale(.8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes combo-glow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}
.overlay-hint {
  position: relative;
  z-index: 2;
  margin-top: .85rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fde047;
  min-height: 1.2em;
  text-shadow: 0 0 12px rgba(253, 224, 71, .35);
}
.overlay-rank {
  position: relative;
  z-index: 2;
  margin-top: .45rem;
  font-family: ui-monospace, monospace;
  font-size: .875rem;
  color: #94a3b8;
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  .board-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .board-overlay.game-end,
  .board-overlay.game-end.from-live {
    animation: none;
    opacity: 1;
  }
  .board-live.exiting {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overlay-card,
  .board-overlay.from-live .overlay-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .live-card.to-game-end,
  .live-card.to-game-end .live-header-bar,
  .live-card.to-game-end .live-level,
  .live-card.to-game-end .live-score-label,
  .live-card.to-game-end .live-hit-ticker {
    transition: none;
  }
}

/* ── Boot / player-sync preparing overlay (arcade CRT) ── */
.board-preparing {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(8, 8, 24, .62);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}
.board-preparing.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.board-preparing.exit {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

.preparing-card {
  position: relative;
  width: min(480px, 94vw);
  padding: 2rem 2.25rem 1.85rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(52, 48, 100, .97) 0%, rgba(40, 38, 84, .98) 100%);
  border: 3px solid #a78bfa;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, .35),
    0 0 48px rgba(124, 58, 237, .45),
    0 0 80px rgba(34, 211, 238, .2);
  overflow: hidden;
  transform: scale(.92);
  opacity: 0;
}
.preparing-card.preparing-pop {
  animation: preparing-pop-in .55s cubic-bezier(.2, 1.35, .3, 1) forwards;
}
.board-preparing.exit .preparing-card {
  animation: preparing-pop-out .42s ease forwards;
}
@keyframes preparing-pop-in {
  0% { opacity: 0; transform: scale(.82); filter: brightness(1.6); }
  60% { opacity: 1; transform: scale(1.03); filter: brightness(1.2); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes preparing-pop-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); filter: brightness(1.25); }
}

.preparing-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .14;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .18) 2px,
    rgba(0, 0, 0, .18) 4px
  );
}
.preparing-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(34, 211, 238, .28);
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
.preparing-frame::before,
.preparing-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #22d3ee;
  border-style: solid;
}
.preparing-frame::before {
  top: -1px; left: -1px;
  border-width: 3px 0 0 3px;
}
.preparing-frame::after {
  bottom: -1px; right: -1px;
  border-width: 0 3px 3px 0;
}

.preparing-label-en {
  position: relative;
  z-index: 2;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.05rem;
  letter-spacing: .28em;
  color: rgba(253, 224, 71, .9);
  text-shadow: 0 0 12px rgba(255, 215, 0, .4);
  margin-bottom: .35rem;
}
.preparing-title-cn {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #f8fafc;
  text-shadow: 0 0 18px rgba(34, 211, 238, .35);
  margin-bottom: .5rem;
}
.preparing-sub {
  position: relative;
  z-index: 2;
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #5eead4;
  line-height: 1.45;
  min-height: 1.25em;
  text-shadow: 0 0 10px rgba(94, 234, 212, .25);
}

.preparing-track {
  position: relative;
  z-index: 2;
  height: 6px;
  margin: 1.15rem .25rem .25rem;
  background: rgba(15, 15, 35, .85);
  border: 1px solid rgba(124, 58, 237, .45);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .45);
}
.preparing-track-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed 0%, #22d3ee 55%, #fde047 100%);
  box-shadow: 0 0 14px rgba(34, 211, 238, .55);
  transition: width .55s cubic-bezier(.25, .9, .35, 1);
}

.preparing-pipeline {
  position: relative;
  z-index: 2;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 1.15rem 0 0;
  padding: 0;
}
.preparing-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-width: 4.5rem;
}
.preparing-step-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 4px;
  border: 2px solid rgba(148, 163, 184, .35);
  background: rgba(15, 15, 35, .65);
  color: rgba(148, 163, 184, .75);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .35);
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.preparing-step-node svg {
  width: 1.15rem;
  height: 1.15rem;
}
.preparing-step-label {
  font-family: ui-monospace, monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(148, 163, 184, .8);
  text-transform: uppercase;
  transition: color .25s ease;
}
.preparing-step.active .preparing-step-node {
  border-color: rgba(34, 211, 238, .85);
  color: #67e8f9;
  box-shadow:
    0 0 16px rgba(34, 211, 238, .35),
    inset 0 0 12px rgba(34, 211, 238, .15);
  animation: preparing-node-pulse 1.4s ease infinite;
}
.preparing-step.active .preparing-step-label {
  color: #67e8f9;
}
.preparing-step.done .preparing-step-node {
  border-color: rgba(253, 224, 71, .75);
  color: #fde047;
  background: rgba(52, 48, 100, .9);
  box-shadow: 0 0 12px rgba(255, 215, 0, .25);
}
.preparing-step.done .preparing-step-label {
  color: rgba(253, 224, 71, .92);
}

.preparing-connector {
  flex: 0 0 1.35rem;
  height: 2px;
  margin-top: 1.15rem;
  background: rgba(148, 163, 184, .25);
  position: relative;
  transition: background .3s ease, box-shadow .3s ease;
}
.preparing-connector::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(148, 163, 184, .35);
}
.preparing-connector.active,
.preparing-connector.done {
  background: linear-gradient(90deg, rgba(253, 224, 71, .7), rgba(34, 211, 238, .7));
  box-shadow: 0 0 8px rgba(34, 211, 238, .35);
}
.preparing-connector.active::after,
.preparing-connector.done::after {
  border-left-color: rgba(34, 211, 238, .85);
}

.preparing-loader {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: 1rem;
}
.preparing-loader.hidden { display: none; }
.preparing-loader span {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: rgba(34, 211, 238, .85);
  box-shadow: 0 0 8px rgba(34, 211, 238, .6);
  animation: preparing-dot 1.1s ease infinite;
}
.preparing-loader span:nth-child(2) { animation-delay: .15s; }
.preparing-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes preparing-node-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
@keyframes preparing-dot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Ready banner — centered overlay (matches preparing / enter ceremony) */
.board-ready-banner {
  position: absolute;
  inset: 0;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(8, 8, 24, .62);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}
.board-ready-banner.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.board-ready-banner.exit {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

.ready-banner-card {
  position: relative;
  text-align: center;
  padding: 2rem 2.75rem 1.85rem;
  min-width: min(380px, 90vw);
  background: linear-gradient(180deg, rgba(52, 48, 100, .97) 0%, rgba(40, 38, 84, .98) 100%);
  border: 3px solid #22d3ee;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, .35),
    0 0 48px rgba(34, 211, 238, .4),
    0 0 80px rgba(124, 58, 237, .25);
  overflow: hidden;
  transform: scale(.92);
  opacity: 0;
}
.ready-banner-card.ready-pop {
  animation: ready-pop-in .55s cubic-bezier(.2, 1.35, .3, 1) forwards;
}
.board-ready-banner.exit .ready-banner-card {
  animation: ready-pop-out .42s ease forwards;
}
@keyframes ready-pop-in {
  0% { opacity: 0; transform: scale(.82); filter: brightness(1.6); }
  60% { opacity: 1; transform: scale(1.03); filter: brightness(1.2); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes ready-pop-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); filter: brightness(1.25); }
}

.ready-banner-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .14;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, .18) 2px,
    rgba(0, 0, 0, .18) 4px
  );
}
.ready-banner-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(34, 211, 238, .28);
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
.ready-banner-frame::before,
.ready-banner-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #22d3ee;
  border-style: solid;
}
.ready-banner-frame::before {
  top: -1px; left: -1px;
  border-width: 3px 0 0 3px;
}
.ready-banner-frame::after {
  bottom: -1px; right: -1px;
  border-width: 0 3px 3px 0;
}
.ready-banner-label {
  position: relative;
  z-index: 2;
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 1.05rem;
  letter-spacing: .28em;
  color: rgba(253, 224, 71, .92);
  text-shadow: 0 0 12px rgba(255, 215, 0, .45);
  margin-bottom: .45rem;
}
.ready-banner-text {
  position: relative;
  z-index: 2;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #f8fafc;
  text-shadow: 0 0 18px rgba(34, 211, 238, .35);
  animation: ready-banner-pulse 1.5s ease infinite;
}
.ready-banner-hint {
  position: relative;
  z-index: 2;
  margin-top: .65rem;
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: #5eead4;
  text-shadow: 0 0 10px rgba(94, 234, 212, .25);
}
@keyframes ready-banner-pulse {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preparing-card.preparing-pop,
  .board-preparing.exit .preparing-card,
  .ready-banner-card.ready-pop,
  .board-ready-banner.exit .ready-banner-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .preparing-step.active .preparing-step-node,
  .preparing-loader span,
  .ready-banner-text {
    animation: none;
  }
  .preparing-track-fill { transition: none; }
}

.device-picker {
  margin: 1rem 2rem;
  padding: 1rem;
  background: rgba(124,58,237,.08);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: var(--radius);
  text-align: center;
}
.device-picker-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .5rem; }
.device-pick-btn {
  padding: .45rem 1rem; border-radius: 99px; font-size: .82rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}

@media (max-width: 600px) {
  .podium--featured {
    --plate-w-1: 188px;
    --plate-w-2: 154px;
    --plate-w-3: 138px;
    --plate-lift-1: -10px;
    gap: .65rem;
    max-width: 100%;
    padding-top: 1rem;
  }
  .podium--compact {
    --plate-w-1: 124px;
    --plate-w-2: 106px;
    --plate-w-3: 96px;
    --plate-lift-1: -4px;
    gap: .4rem;
    padding-top: .65rem;
  }
  .board-ranking-head { margin-bottom: .65rem; }
  .podium--featured .slot-1 .plate-name { font-size: 1.15rem; }
  .podium--featured .slot-1 .plate-score { font-size: 2rem; }
  .plate-latest { display: none; }
  .ranking-title { font-size: 2.25rem; }
  .enter-title-cn { font-size: 1.5rem; }
  .enter-name { font-size: 2rem; }
  .enter-card { min-width: 280px; padding: 1.5rem 1.75rem 1.75rem; }
  .overlay-score { font-size: 2.75rem; }
  .overlay-card { min-width: 280px; padding: 1.5rem 1.75rem 1.75rem; }
  .top10-head, .top10-row { grid-template-columns: 44px 1fr 76px; }
  .top10-head span:last-child, .top10-row .top10-latest { display: none; }
  .top10-name { font-size: 1rem; }
  .top10-score { font-size: 1.05rem; }
  .live-card { min-width: 280px; padding: 1.25rem 1.5rem 1.5rem; }
  .live-score { font-size: 4rem; }
  .live-hit-ticker { font-size: .78rem; letter-spacing: .12em; }
}