/* Viewer screens: phone/PC live view, TV broadcast, finale. */

.viewer-status {
  min-height: 70dvh; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 32px var(--gutter); text-align: center;
}
.viewer-status .loading-indicator { width: 88px; height: 88px; margin-bottom: 12px; }
.viewer-status-icon { width: 56px; height: 56px; color: var(--md-sys-color-error); }
.viewer-status .btn-row { justify-content: center; margin-top: 12px; }

/* ---- Watch (phone, tablet, PC) ------------------------------------------------------ */
.viewer.watch { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.viewer-bar { gap: 8px; }
.viewer-bar .top-app-bar-title { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.viewer-bar .top-app-bar-title small { font-size: 0.75rem; font-weight: 700; color: var(--md-sys-color-primary); letter-spacing: 0.04em; }
.viewer-bar .top-app-bar-title strong { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) { .viewer-bar .live-indicator { font-size: 0; gap: 0; } }
.watch-main { width: min(100%, 1180px); margin: 0 auto; padding: 8px var(--gutter) 32px; display: grid; gap: 16px; align-content: start; }
.watch-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px;
  padding: 20px 24px;
  border-radius: var(--shape-xxl);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.watch-hero-copy { display: grid; gap: 4px; min-width: 0; }
.watch-hero .eyebrow { color: var(--md-sys-color-primary); }
.watch-ring { width: 104px; }
.watch-ring .ring-number { font-size: 1.5rem; }
.watch-ring .ring-track { stroke: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 14%, transparent); }
@media (max-width: 479px) { .watch-hero { padding: 18px 20px; } .watch-ring { width: 84px; } .watch-ring .ring-number { font-size: 1.2rem; } }

.watch-layout { display: grid; gap: 16px; align-items: start; }
.watch-primary { display: grid; gap: 16px; min-width: 0; }
.watch-side { display: none; }
@media (min-width: 1024px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .watch-side { display: grid; gap: 16px; position: sticky; top: calc(var(--app-bar-height) + 12px); }
  .tab.is-mobile-only { display: none; }
}
.watch-ranking .standing-list { gap: 2px; }
.watch-ranking .standing-row { padding: 6px 8px; }
.watch-ranking .standing-row .avatar, .watch-ranking .standing-row .ranking-place { width: 32px; height: 32px; font-size: 0.875rem; }
.watch-ranking .standing-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
.watch-side .results-activity .activity-row { grid-template-columns: 48px auto minmax(0, 1fr); }

.favorite-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container); }
.favorite-card > div { display: grid; min-width: 0; }
.favorite-card small { font-size: 0.75rem; font-weight: 700; color: var(--md-sys-color-on-surface-variant); }
.favorite-card strong { font-size: 1.25rem; }
.favorite-card p { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }
.favorite-card.has-player { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.favorite-card.has-player small, .favorite-card.has-player p { color: inherit; opacity: 0.85; }
.favorite-card.has-player .shape { --fill: var(--md-sys-color-tertiary); --on: var(--md-sys-color-on-tertiary); }

.watch-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.watch-group { display: grid; gap: 10px; padding: 14px; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container); animation: pop-in var(--dur-slow) var(--spring) both; }
.watch-group.is-playing { background: var(--md-sys-color-surface-container-high); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); }
.watch-group.has-favorite { box-shadow: inset 0 0 0 3px var(--md-sys-color-tertiary); }
.watch-group > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.watch-group > header > div { display: grid; }
.watch-player-list { display: grid; gap: 4px; }
.watch-player, .standing-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; border-radius: var(--shape-m);
  background: var(--md-sys-color-surface-bright); text-align: left;
  transition: border-radius var(--dur) var(--spring), background-color var(--dur-fast) var(--effect);
}
.watch-player-lead { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-surface-container-high); font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.watch-player-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-player-score { display: grid; justify-items: end; line-height: 1.1; }
.watch-player-score b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.watch-player-score small { font-size: 0.6875rem; color: var(--md-sys-color-on-surface-variant); }
.watch-player.is-favorite, .standing-row.is-favorite { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-radius: var(--shape-xl); }
.watch-player.is-favorite .watch-player-lead { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.watch-player.is-favorite .icon { width: 18px; height: 18px; }
.watch-more { text-align: center; grid-column: 1 / -1; }
.standing-list { display: grid; gap: 4px; }
.standing-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
.standing-row .pips { margin-top: 3px; }
.standing-row.is-danger { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-sys-color-error) 55%, transparent); }
.avatar.is-favorite { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.avatar.is-favorite .icon { width: 20px; height: 20px; }
.standing-row.is-out { opacity: 0.7; }
.standing-row .ranking-place .icon { width: 18px; height: 18px; }
.viewer-footer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); }
.viewer-footer .icon { width: 18px; height: 18px; }

/* ---- TV broadcast (always the "tv" scheme) ------------------------------------------------ */
/* Everything scales with the screen: 1em ≈ 1.05vw (20px on a 1920px TV). */
.viewer.tv {
  --tv-pad: clamp(14px, 1.8vw, 36px);
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(8px, 1vw, 16px);
  padding: var(--tv-pad);
  background:
    radial-gradient(60vw 60vh at 110% -10%, color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent), transparent 70%),
    var(--md-sys-color-surface);
  font-size: clamp(13px, 1.05vw, 24px);
}
.tv-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.2em; }
.tv-brand { display: flex; align-items: center; gap: 0.8em; min-width: 0; }
.tv-brand .brand-mark { width: 2.8em; height: 2.8em; border-radius: var(--shape-l); }
.tv-brand > div { display: grid; min-width: 0; }
.tv-brand small { font-size: 0.8em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-sys-color-primary); }
.tv-brand strong { font-size: 1.8em; font-weight: 850; font-stretch: 116%; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-status { display: flex; align-items: center; gap: 0.8em; padding: 0.4em 1em; border-radius: var(--shape-full); background: var(--md-sys-color-surface-container-high); }
.tv-status strong { font-size: 1.3em; font-weight: 850; font-stretch: 115%; }
.tv-status .live-indicator { font-size: 0.95em; }
.tv-meta { display: flex; align-items: center; gap: 1em; }
.tv-meta time { font-size: 1.7em; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-meta b { color: var(--md-sys-color-primary); letter-spacing: 0.12em; font-size: 1.15em; }

.tv-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1em;
  padding: 0.4em 1em; border-radius: var(--shape-xl);
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  animation: pop-in var(--dur-slow) var(--spring) both;
}
.tv-note > div { display: grid; }
.tv-note small { font-size: 0.8em; font-weight: 700; opacity: 0.85; }
.tv-note strong { font-size: 1.35em; font-weight: 800; line-height: 1.15; }
.tv-note .shape { --size: 2.2em; --fill: var(--md-sys-color-tertiary); --on: var(--md-sys-color-on-tertiary); }
.tv-note.tone-important { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.tv-note.tone-important .shape { --fill: var(--md-sys-color-error); --on: var(--md-sys-color-on-error); }

/* Slim status strip instead of a big summary block. */
.tv-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.4em 1.6em;
  padding: 0.7em 1.4em; border-radius: var(--shape-xl);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.tv-strip-title { font-size: 1.7em; font-weight: 880; font-stretch: 118%; line-height: 1.1; white-space: nowrap; }
.tv-strip-facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3em 1.6em; font-size: 1.05em; }
.tv-strip-facts b { font-size: 1.25em; font-weight: 850; font-variant-numeric: tabular-nums; margin-right: 0.2em; }
.tv-progress { grid-column: 1 / -1; }
.tv-progress .progress-track { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 14%, transparent); }

.tv-main { flex: 1; display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: clamp(10px, 1.1vw, 20px); min-height: 0; }
.tv-boards { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.6em; min-height: 0; }
.tv-board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: clamp(8px, 0.9vw, 16px); min-height: 0; }
.tv-board-grid.count-1 { grid-template-columns: 1fr; }
.tv-board-grid.count-3 > :last-child { grid-column: 1 / -1; }

/* A board is a size container: its rows share the height, text follows the row height. */
.tv-board {
  container-type: size;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.5em; min-height: 0; overflow: hidden;
  padding: 0.8em; border-radius: var(--shape-xl);
  background: var(--md-sys-color-surface-container);
  animation: pop-in var(--dur-slow) var(--spring) both;
}
.tv-board.is-playing { background: var(--md-sys-color-surface-container-high); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent); }
.tv-board > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7em; }
.tv-board-badge { --size: 2.1em; font-size: 0.85em; }
.tv-board > header strong { font-size: 1.3em; font-weight: 850; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-board-tag { padding: 0.25em 0.8em; border-radius: var(--shape-full); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 700; font-size: 0.85em; white-space: nowrap; }
.tv-board ol {
  --row: calc((100cqh - 3em) / var(--rows));
  display: grid; grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 0.35em; min-height: 0;
}
.tv-board li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.6em;
  min-height: 0; padding: 0 0.7em; border-radius: var(--shape-m);
  background: var(--md-sys-color-surface-container-highest);
  font-size: clamp(12px, min(var(--row) * 0.44, 6.4cqw), 42px);
}
.tv-lead { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); font-weight: 800; font-size: 0.8em; }
.tv-board li strong { font-size: 1.15em; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-board .pips { flex-wrap: nowrap; }
.tv-board .pips i { width: 0.55em; height: 0.55em; }
.tv-score { display: inline-flex; align-items: center; gap: 0.2em; min-width: 2.6em; justify-content: flex-end; font-size: 0.95em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }
.tv-score .icon { width: 1em; height: 1em; }
.tv-board li.is-danger { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.tv-board li.is-danger .tv-score { color: inherit; }
.tv-board.is-split ol { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 0.5em; }
.tv-board.is-split li { font-size: clamp(12px, min(var(--row) * 0.44, 4.4cqw), 36px); }
@container (max-width: 380px) { .tv-board .pips { display: none; } }
@container (max-width: 760px) { .tv-board.is-split .pips { display: none; } }

.tv-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; }
.tv-empty strong { font-size: 2.2em; font-weight: 850; }
.tv-empty small { font-size: 1.1em; color: var(--md-sys-color-on-surface-variant); }
.tv-pages { display: flex; align-items: center; justify-content: center; gap: 1em; }
.tv-pages span { display: flex; gap: 6px; }
.tv-pages i { width: 10px; height: 10px; border-radius: var(--shape-full); background: var(--md-sys-color-outline-variant); transition: width var(--dur) var(--spring); }
.tv-pages i.is-active { width: 36px; background: var(--md-sys-color-primary); }
.tv-pages small { font-size: 0.85em; color: var(--md-sys-color-on-surface-variant); }

.tv-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 0.6em; min-height: 0; padding: 0.9em; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container-low); overflow: hidden; }
.tv-side > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.tv-side > header small { grid-column: 1 / -1; font-size: 0.75em; font-weight: 700; color: var(--md-sys-color-primary); text-transform: uppercase; letter-spacing: 0.06em; }
.tv-side > header strong { font-size: 1.35em; font-weight: 850; }
.tv-side > header span { font-size: 0.85em; color: var(--md-sys-color-on-surface-variant); }
.tv-ranking ol { container-type: size; display: grid; grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 0.25em; min-height: 0; }
.tv-ranking li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6em;
  min-height: 0; padding: 0 0.7em; border-radius: var(--shape-m);
  background: var(--md-sys-color-surface-container);
  font-size: clamp(11px, calc(100cqh / var(--rows) * 0.38), 22px);
}
.tv-rank { font-weight: 850; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }
.tv-ranking li strong { font-size: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-ranking li b { font-size: 0.8em; padding: 0.15em 0.6em; border-radius: var(--shape-full); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.tv-ranking li b.is-danger { display: grid; place-items: center; padding: 0.2em; background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.tv-ranking li b.is-danger .icon { width: 1.1em; height: 1.1em; }
.tv-ranking .pips i { width: 0.6em; height: 0.6em; }
.tv-ranking li.is-top { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.tv-ranking li.is-out { opacity: 0.55; }
.tv-more { text-align: center; font-size: 0.8em; color: var(--md-sys-color-on-surface-variant); }
.tv-path { display: flex; gap: 8px; flex-wrap: wrap; }
.tv-path span { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--md-sys-color-surface-container-high); font-weight: 800; }
.tv-path span.is-done { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.tv-path span.is-current { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: var(--shape-m); }
.tv-bracket { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.tv-bracket-list { display: grid; align-content: start; gap: 8px; min-height: 0; overflow: hidden; }
.tv-bracket-list .bracket-match { font-size: 1.05em; }

.tv-footer { display: flex; align-items: center; gap: 0.8em; font-size: 0.85em; color: var(--md-sys-color-on-surface-variant); }
.tv-footer span { flex: 1; }
.tv-footer .icon { width: 1.2em; height: 1.2em; }
.tv-qr {
  position: fixed; right: var(--tv-pad); bottom: calc(var(--tv-pad) + 2.6em); z-index: 5;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.8em;
  padding: 0.5em 0.9em 0.5em 0.5em; border-radius: var(--shape-xl);
  background: var(--md-sys-color-surface-container-highest); box-shadow: var(--shadow-3);
}
.tv-qr img { width: 4.6em; height: 4.6em; border-radius: var(--shape-m); background: #fff; padding: 3px; }
.tv-qr span { display: grid; min-width: 0; }
.tv-qr small { font-size: 0.75em; color: var(--md-sys-color-on-surface-variant); }
.tv-qr strong { font-size: 0.95em; }
.tv-qr.is-docked { position: static; box-shadow: none; background: var(--md-sys-color-surface-container-high); }

@media (max-aspect-ratio: 4/3), (max-width: 1100px) {
  .viewer.tv { height: auto; min-height: 100dvh; overflow: visible; }
  .tv-main { grid-template-columns: 1fr; }
  .tv-board-grid { grid-auto-rows: minmax(18em, auto); }
  .tv-board-grid.count-3 > :last-child { grid-column: auto; }
  .tv-ranking ol { container-type: normal; grid-template-rows: none; }
  .tv-ranking li { font-size: 1em; padding: 0.5em 0.7em; }
}

/* ---- Finale ------------------------------------------------------------------------------------ */
.finale-wait-stage { display: grid; place-content: center; justify-items: center; gap: 16px; padding: 32px var(--gutter); text-align: center; min-height: 60dvh; }
.finale-wait-stage h1 em { font-style: normal; color: var(--md-sys-color-primary); }
.finale-wait-shape { position: relative; display: grid; place-items: center; width: clamp(120px, 18vw, 240px); aspect-ratio: 1; animation: spin 14s linear infinite; }
.finale-wait-shape > svg:not(.icon) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.finale-wait-shape .icon { position: relative; width: 36%; height: 36%; color: var(--md-sys-color-on-primary); animation: spin 14s linear infinite reverse; }
.finale-wait-facts { display: flex; gap: 12px; }
.finale-wait-facts span { padding: 8px 16px; border-radius: var(--shape-full); background: var(--md-sys-color-surface-container-high); }
.viewer.tv.finale-wait .finale-wait-stage { flex: 1; }

.reveal-sequence {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-content: center; justify-items: center; gap: 24px;
  background: radial-gradient(60vmax 60vmax at 50% 45%, color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent), transparent 70%), var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  animation: reveal-out 3.4s var(--effect) both;
}
.reveal-sequence.is-tv { animation-duration: 8.4s; }
.reveal-sequence .morphing { fill: var(--md-sys-color-primary); }
.reveal-shape { position: relative; display: grid; place-items: center; width: clamp(160px, 26vw, 360px); aspect-ratio: 1; animation: spin 6s linear infinite, grow 1.2s var(--spring-slow) both; }
.reveal-shape > svg:not(.icon) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reveal-shape .icon { position: relative; width: 42%; height: 42%; color: var(--md-sys-color-on-primary); animation: spin 6s linear infinite reverse; }
.reveal-title { font-size: clamp(2rem, 7vw, 6rem); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; animation: pop-in 0.8s var(--spring) 0.4s both; }
.reveal-count { position: relative; height: 0; }
.reveal-count b { position: absolute; left: 50%; top: -1.2em; translate: -50% 0; font-size: clamp(4rem, 14vw, 12rem); font-weight: 900; font-stretch: 130%; opacity: 0; }
.reveal-sequence.is-tv .reveal-shape, .reveal-sequence.is-tv .reveal-title { animation-delay: 0s, 4.6s; }
.reveal-sequence.is-tv .reveal-title { animation: pop-in 0.9s var(--spring) 4.8s both; }
.reveal-sequence.is-tv .reveal-shape { animation: spin 6s linear infinite, grow 1.4s var(--spring-slow) 4.4s both; }
.reveal-sequence.is-tv .step-3 { animation: count 1.3s var(--spring) 0.6s both; }
.reveal-sequence.is-tv .step-2 { animation: count 1.3s var(--spring) 1.9s both; }
.reveal-sequence.is-tv .step-1 { animation: count 1.3s var(--spring) 3.2s both; }
@keyframes count { 0% { opacity: 0; transform: scale(0.4); } 30%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes grow { from { transform: scale(0); } }
@keyframes reveal-out { 0%, 86% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

.confetti { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -20px; left: var(--x);
  width: 10px; height: 16px; border-radius: 3px;
  background: var(--md-sys-color-primary);
  animation: confetti var(--speed) linear var(--delay) infinite;
  opacity: 0.85;
}
.confetti i[style*="--hue:1"] { background: var(--md-sys-color-tertiary); border-radius: 50%; width: 12px; height: 12px; }
.confetti i[style*="--hue:2"] { background: var(--md-sys-color-secondary); }
.confetti i[style*="--hue:3"] { background: var(--md-sys-color-primary-container); width: 8px; height: 8px; }
@keyframes confetti { to { transform: translateY(110vh) rotate(720deg); } }

.finale-switch { justify-self: center; position: relative; z-index: 2; }
.finale-podium, .finale-ranking { position: relative; z-index: 2; display: grid; gap: 20px; }
.finale-champion { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px; border-radius: var(--shape-xxl); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); animation: pop-in var(--dur-slow) var(--spring) both; }
.finale-champion .eyebrow { color: inherit; opacity: 0.85; }
.display-champion-tv { font-size: 5em; line-height: 0.95; font-weight: 900; font-stretch: 128%; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.finale-awards { display: grid; gap: 12px; }
.finale-ranking > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.finale-ranking-viewport { overflow: hidden; }
.watch .finale-ranking-viewport { overflow: visible; }
.finale-ranking-list { display: grid; gap: 6px; }
.finale-ranking-list.is-scrolling { animation: leaderboard var(--duration) var(--effect) 1.5s both; }
@keyframes leaderboard { 0%, 12% { transform: translateY(0); } 50%, 62% { transform: translateY(var(--distance)); } 100% { transform: translateY(0); } }
.finale-rank { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container); animation: pop-in var(--dur) var(--spring) calc(var(--row) * 40ms) both; }
.finale-rank > div { display: grid; min-width: 0; }
.finale-rank strong { font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finale-rank small { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.finale-rank > b { display: grid; justify-items: end; font-size: 1.375rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.finale-rank > b small { font-size: 0.6875rem; }
.finale-rank.is-top-1 { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.finale-rank.is-top-1 .ranking-place { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 50%; }
.finale-rank.is-dq { opacity: 0.55; }

.finale-main { flex: 1; min-height: 0; overflow: hidden; position: relative; z-index: 2; }
.finale-podium.is-tv { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; height: 100%; }
.finale-podium.is-tv .finale-champion { grid-row: span 2; align-content: center; padding: 2em; }
.finale-podium.is-tv .champion-shape { --size: 9em; }
.finale-podium.is-tv .podium { align-self: end; }
.finale-podium.is-tv .podium-step strong { font-size: 1.5em; }
.finale-podium.is-tv .award-grid { grid-template-columns: 1fr; }
.finale-ranking.is-tv { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.finale-ranking.is-tv .finale-ranking-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finale-ranking.is-tv .finale-rank strong { font-size: 1.4em; }
@media (max-width: 1100px) { .finale-podium.is-tv { grid-template-columns: 1fr; } .display-champion-tv { font-size: 3em; } }