/* Organiser screens: landing, setup, control, boards, results, finished. */

/* ---- Landing --------------------------------------------------------------------------- */
.landing { width: min(100%, var(--content-max)); margin: 0 auto; padding: 8px var(--gutter) 40px; display: grid; gap: 32px; }
.landing-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 24px;
  padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 56px);
  border-radius: var(--shape-xxl);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.landing-hero-copy { display: grid; gap: 20px; position: relative; z-index: 1; }
.landing-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; }
.landing-kicker .icon { width: 20px; height: 20px; }
.display-hero em { font-style: normal; color: var(--md-sys-color-primary); }
.landing-hero .body-large { max-width: 52ch; font-size: 1.125rem; }
.landing-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.landing-facts li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--shape-full); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); font-size: 0.875rem; font-weight: 600; }
.landing-facts .icon { width: 18px; height: 18px; }
.landing-art { position: relative; height: 100%; min-height: 220px; }
.landing-shape-main { --size: min(260px, 26vw); --fill: var(--md-sys-color-primary); --on: var(--md-sys-color-on-primary); position: absolute; right: 8%; top: 50%; translate: 0 -50%; animation: float 9s var(--effect) infinite alternate; }
.landing-shape-main .icon { width: 42%; height: 42%; }
.landing-shape-main > svg { animation: spin 40s linear infinite; }
.landing-shape-a { --size: 120px; --fill: var(--md-sys-color-tertiary-container); position: absolute; left: 4%; bottom: 4%; animation: float 7s var(--effect) infinite alternate-reverse; }
@keyframes float { to { transform: translateY(-14px) rotate(8deg); } }
@media (max-width: 839px) {
  .landing-hero { grid-template-columns: 1fr; }
  .landing-art { position: absolute; inset: auto -40px -60px auto; width: 220px; height: 220px; min-height: 0; opacity: 0.35; }
  .landing-shape-main { --size: 200px; right: 0; }
  .landing-shape-a, .landing-shape-b { display: none; }
}

.landing-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.landing-side { display: grid; gap: 16px; align-content: start; }
.landing-links { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 839px) {
  .landing-grid { grid-template-columns: 1fr; }
  .landing-side { display: contents; }
  .landing-resume { order: -1; }
}
.landing-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.landing-card-head > div { display: grid; gap: 4px; }
.landing-form { display: grid; gap: 20px; padding-top: 4px; }
.format-options { display: grid; gap: 8px; }
.format-options legend { margin-bottom: 8px; }
.format-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--shape-l);
  background: var(--md-sys-color-surface-container);
  cursor: pointer;
  transition: border-radius var(--dur) var(--spring), background-color var(--dur-fast) var(--effect), color var(--dur-fast) var(--effect);
}
.format-option input { position: absolute; opacity: 0; pointer-events: none; }
.format-option-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--shape-m); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary); transition: border-radius var(--dur) var(--spring); }
.format-option-copy { display: grid; }
.format-option-copy small { color: var(--md-sys-color-on-surface-variant); font-size: 0.8125rem; }
.format-option-check { opacity: 0; transform: scale(0.4); transition: opacity var(--dur-fast) var(--effect), transform var(--dur) var(--spring-fast); color: var(--md-sys-color-primary); }
.format-option:has(input:checked) { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: var(--shape-xl); }
.format-option:has(input:checked) .format-option-icon { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 50%; }
.format-option:has(input:checked) .format-option-check { opacity: 1; transform: none; }
.format-option:has(input:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.landing-join-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.landing-join-form .btn-row .btn { flex: 1; }
.landing-join-form .btn-row { flex-wrap: nowrap; }
@media (max-width: 479px) { .landing-join-form { grid-template-columns: 1fr; } .landing-join-form .btn-row .btn { flex: 1; } }
.landing-resume { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.landing-resume-copy { display: grid; gap: 2px; }
.landing-resume-actions { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.landing-resume-actions .btn-filled { flex: 1; }
.landing-credits { text-align: center; }

/* ---- Setup ---------------------------------------------------------------------------------- */
.setup-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.setup-side { display: grid; gap: 16px; position: sticky; top: calc(var(--app-bar-height) + 16px); }
@media (max-width: 1023px) { .setup-layout { grid-template-columns: 1fr; } .setup-side { position: static; } }
.roster-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.roster-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.roster-tools .search-field { flex: 1 1 200px; }
.roster-list { display: grid; gap: 4px; counter-reset: roster; }
.roster-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 40px; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--shape-l);
  background: var(--md-sys-color-surface-container-low);
  animation: pop-in var(--dur) var(--spring) both;
}
.roster-row:focus-within { background: var(--md-sys-color-surface-container-high); }
.roster-index { font-weight: 700; font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; }
.roster-name input { width: 100%; height: 44px; padding: 0 8px; border: 0; border-radius: var(--shape-s); background: transparent; font-size: 1rem; font-weight: 600; outline: none; }
.roster-name input:focus { background: var(--md-sys-color-surface-container-highest); box-shadow: inset 0 -2px 0 var(--md-sys-color-primary); }
.roster-limit input { width: 64px; height: 40px; padding: 0 8px; border: 0; border-radius: var(--shape-s); background: var(--md-sys-color-surface-container-highest); text-align: center; font-variant-numeric: tabular-nums; }
.roster-paid { height: 36px; }
@media (max-width: 599px) {
  .roster-row { grid-template-columns: 28px minmax(0, 1fr) 40px; }
  .roster-paid, .roster-limit { grid-column: 2; justify-self: start; }
  .roster-row > .icon-btn { grid-row: 1; grid-column: 3; }
  .roster-limit { grid-column: 2; margin-top: -4px; }
}
.format-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.format-tile {
  display: grid; justify-items: center; gap: 6px;
  padding: 14px 8px;
  border: 0; border-radius: var(--shape-l);
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  transition: border-radius var(--dur) var(--spring), background-color var(--dur-fast) var(--effect);
}
.format-tile .icon { width: 28px; height: 28px; }
.format-tile.is-selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: var(--shape-xl); }
.format-tile.is-selected .icon { color: var(--md-sys-color-primary); }
.format-tile:disabled { opacity: 0.5; }
.rules-list { display: grid; gap: 16px; padding: 4px 0; }
.organizer-cut { display: grid; gap: 12px; padding: 16px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container-low); }
.organizer-cut-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.organizer-cut-head > div { display: grid; }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv-grid > div { display: grid; padding: 10px 12px; border-radius: var(--shape-m); background: var(--md-sys-color-surface-container-high); }
.kv-grid dt { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.kv-grid dd { font-weight: 800; font-variant-numeric: tabular-nums; }
.kv-grid .is-accent { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.kv-grid .is-accent dt { color: inherit; }
.setup-start { grid-template-columns: minmax(0, 1fr); }
.setup-start .btn { justify-self: stretch; }

/* ---- Control (running) ----------------------------------------------------------------------------- */
.control.has-nav { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 8px 24px; padding-left: max(8px, calc(var(--gutter) - 16px)); }
.control-main { display: grid; gap: 20px; min-width: 0; }
@media (max-width: 839px) {
  .control.has-nav { grid-template-columns: minmax(0, 1fr); padding-left: var(--gutter); padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}
.control-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.control-hero-main { display: grid; gap: 12px; min-width: 0; }
.control-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.next-step { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--shape-xxl); padding: 24px 28px; }
.next-step > div { display: grid; gap: 2px; }
@media (max-width: 599px) {
  .control-hero { grid-template-columns: 1fr; }
  .control-ring { display: none; }
  .next-step { grid-template-columns: 1fr; padding: 20px; border-radius: var(--shape-xl); }
}
.control-ring { width: 148px; }
.control-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.control-toolbar .switch-inline { margin-left: auto; }
.control-content { scroll-margin-top: calc(var(--app-bar-height) + 16px); }
.view-section { display: grid; gap: 16px; }

/* ---- Board cards -------------------------------------------------------------------------------------- */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.board-card {
  display: grid; gap: 16px; padding: 16px;
  border-radius: var(--shape-xl);
  background: var(--md-sys-color-surface-container);
  animation: pop-in var(--dur-slow) var(--spring) both;
  transition: background-color var(--dur) var(--effect);
}
.board-card.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); }
.board-card.is-off { opacity: 0.7; }
.board-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.board-head > div { display: grid; }
.board-idle { display: grid; justify-items: center; gap: 8px; padding: 16px; text-align: center; color: var(--md-sys-color-on-surface-variant); border-radius: var(--shape-l); background: var(--md-sys-color-surface-container-low); }
.board-idle .icon { width: 32px; height: 32px; }
.board-card > .btn { justify-self: center; }
.board-form { display: grid; gap: 14px; }
.board-question { display: grid; }
.board-question small { color: var(--md-sys-color-on-surface-variant); font-size: 0.8125rem; }
.board-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.board-actions > .btn:last-child { flex: 1 1 auto; max-width: 260px; margin-left: auto; }

.pick-list { display: grid; gap: 8px; }
.pick-list.is-versus { grid-template-columns: 1fr 1fr; }
.pick-list.is-compact .pick-tile { min-height: 56px; padding: 8px 12px; }
@media (max-width: 399px) { .pick-list.is-versus { grid-template-columns: 1fr; } }
.pick-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 68px; padding: 10px 14px;
  border-radius: var(--shape-l);
  background: var(--md-sys-color-surface-bright);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  cursor: pointer; user-select: none;
  transition: border-radius var(--dur) var(--spring-fast), background-color var(--dur-fast) var(--effect), box-shadow var(--dur-fast) var(--effect), transform var(--dur) var(--spring-fast);
}
.pick-tile input { position: absolute; opacity: 0; pointer-events: none; }
.pick-tile:active { transform: scale(0.98); }
.pick-copy { display: grid; gap: 2px; min-width: 0; }
.pick-copy strong { font-size: 1.0625rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-copy small { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.pick-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--md-sys-color-outline-variant);
  color: transparent;
  transition: all var(--dur) var(--spring-fast);
}
.pick-tile:has(input:checked) { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); box-shadow: none; border-radius: var(--shape-xl); }
.pick-tile:has(input:checked) .pick-copy small { color: inherit; opacity: 0.85; }
.pick-tile:has(input:checked) .pick-mark { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); box-shadow: none; border-radius: var(--shape-m); transform: rotate(-8deg) scale(1.08); }
.pick-tile.is-winner-pick:has(input:checked) { background: var(--success-container); color: var(--on-success-container); }
.pick-tile.is-winner-pick:has(input:checked) .pick-mark { background: var(--success); color: var(--on-success); }
.pick-tile:has(input:focus-visible) { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.pick-tile.is-danger:not(:has(input:checked)) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-sys-color-error) 55%, transparent); }
.pick-tile.is-leg-winner { opacity: 0.55; cursor: not-allowed; }
.pick-tile.is-leg-winner .pick-copy small::after { content: " · Leg-Sieger"; font-weight: 700; }

.recorder { display: grid; gap: 12px; }
.recorder-highscores, .single-highlight { display: grid; gap: 10px; padding: 12px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container-low); }
.recorder-highscores > header, .single-highlight > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.recorder-highscores > header > div, .single-highlight > header > div { display: grid; }
.recorder-highscores small, .single-highlight small { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.recorder .icon { color: var(--md-sys-color-tertiary); }
.single-highlight.is-active { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.single-highlight-fields, .highscore-entry { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(90px, 0.8fr); gap: 8px; align-items: end; }
.highscore-list { display: grid; gap: 8px; }
.highscore-entry { grid-template-columns: auto minmax(0, 1.4fr) minmax(80px, 0.8fr) auto; padding: 8px; border-radius: var(--shape-m); background: var(--md-sys-color-surface-container); animation: pop-in var(--dur) var(--spring) both; }
.highscore-entry .quick-values { grid-column: 2 / 4; display: flex; gap: 6px; }
.highscore-index { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--md-sys-color-tertiary); align-self: center; }
.recorder-note { display: flex; gap: 8px; color: var(--md-sys-color-on-surface-variant); }
.recorder-note .icon { width: 18px; height: 18px; flex: none; }
.chip-assist { height: 32px; padding: 0 12px; }

/* ---- Groups / bracket -------------------------------------------------------------------------------- */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .lanes { grid-template-columns: 1fr; } }
.lane { display: grid; gap: 10px; padding: 12px; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container-low); }
.lane > header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.lane > header strong { flex: 1; }
.lane-playing > header .icon { color: var(--md-sys-color-primary); }
.lane-done > header .icon { color: var(--success); }
.lane-empty { padding: 8px; }
.group-card { display: grid; gap: 8px; padding: 14px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container-high); }
.group-card > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.group-card li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 0.9375rem; }
.group-card li .icon { width: 18px; height: 18px; color: var(--md-sys-color-outline); }
.group-card li.is-scratched { color: var(--md-sys-color-error); font-weight: 700; }
.group-card li.is-scratched .icon { color: inherit; }
.group-card li small { font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }

.bracket-scroll { overflow-x: auto; padding-bottom: 8px; border-radius: var(--shape-l); scroll-snap-type: x proximity; }
.bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 16px; }
.bracket-stage { display: grid; gap: 12px; align-content: start; padding: 12px; border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container-low); scroll-snap-align: start; }
.bracket-stage.is-current { background: var(--md-sys-color-secondary-container); }
.bracket-stage > header { display: flex; justify-content: space-between; align-items: baseline; }
.bracket-lane { display: grid; gap: 8px; }
.bracket-lane h3 { color: var(--md-sys-color-on-surface-variant); }
.lane-loser h3 { color: var(--md-sys-color-tertiary); }
.lane-final h3 { color: var(--md-sys-color-primary); }
.bracket-match { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--shape-m); background: var(--md-sys-color-surface-container-highest); }
.bracket-match > header { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--md-sys-color-on-surface-variant); }
.bracket-match.is-playing { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.bracket-match p { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.9375rem; }
.bracket-match p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-match p.is-winner { font-weight: 800; color: var(--md-sys-color-primary); }
.bracket-match p.is-winner .icon { width: 18px; height: 18px; }
.bracket-match p.is-loser { color: var(--md-sys-color-on-surface-variant); text-decoration: line-through; }
.bracket-match.is-bye { opacity: 0.7; }

/* ---- Players --------------------------------------------------------------------------------------- */
.players-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .players-layout { grid-template-columns: 1fr; } }
.list-header { display: flex; align-items: center; gap: 10px; }
.list-header strong { flex: 1; font-size: 1.125rem; }
.list-header .icon { color: var(--md-sys-color-primary); }
.player-list { display: grid; gap: 2px; }
.player-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-radius: var(--shape-m); }
.player-row + .player-row { border-top: 1px solid var(--md-sys-color-outline-variant); border-radius: 0; }
.player-copy { display: grid; min-width: 0; }
.player-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-copy small { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.player-actions { display: flex; }
.player-row.is-danger .avatar { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.player-row.is-out { opacity: 0.75; }
.player-row.is-dq .player-copy strong { text-decoration: line-through; }

/* ---- Results ------------------------------------------------------------------------------------------ */
.results-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.results-side { display: grid; gap: 16px; }
@media (max-width: 1023px) { .results-layout { grid-template-columns: 1fr; } }
.ranking-list { display: grid; }
.ranking-row { display: grid; grid-template-columns: 40px auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 4px; }
.ranking-row + .ranking-row { border-top: 1px solid var(--md-sys-color-outline-variant); }
.ranking-place { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--shape-m); font-weight: 800; font-variant-numeric: tabular-nums; background: var(--md-sys-color-surface-container-high); }
.ranking-place .icon { width: 20px; height: 20px; }
.ranking-copy { display: grid; min-width: 0; }
.ranking-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-copy small { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.ranking-metric { display: grid; justify-items: end; line-height: 1.1; }
.ranking-metric b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ranking-metric small { font-size: 0.6875rem; color: var(--md-sys-color-on-surface-variant); }
.ranking-score { font-size: 0.8125rem; font-weight: 700; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.ranking-row.is-top-1 .ranking-place { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: 50%; }
.ranking-row.is-top-2 .ranking-place, .ranking-row.is-top-3 .ranking-place { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.ranking-row.is-dq { opacity: 0.6; }
@media (max-width: 479px) { .ranking-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .ranking-row .avatar, .ranking-row .ranking-metric { display: none; } }

.ledger { display: grid; gap: 4px; }
.ledger div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--md-sys-color-outline-variant); font-size: 0.875rem; }
.ledger dd { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payout-list { display: grid; gap: 8px; }
.payout-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container); }
.payout-row > span { display: grid; min-width: 0; }
.payout-row small { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.payout-row b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.payout-row.place-1 { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.payout-row.place-1 .shape { --fill: var(--md-sys-color-primary); --on: var(--md-sys-color-on-primary); }

.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.award-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container); }
.award-card > div { display: grid; min-width: 0; }
.award-card small { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.award-card strong { font-size: 1rem; }
.award-card p { font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award-card b { font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--md-sys-color-primary); white-space: nowrap; }
.award-card .shape { --fill: var(--md-sys-color-tertiary-container); --on: var(--md-sys-color-on-tertiary-container); }
.award-card.tone-red .shape, .award-card.tone-pink .shape { --fill: var(--md-sys-color-secondary-container); --on: var(--md-sys-color-primary); }
.award-card.tone-gold .shape, .award-card.tone-green .shape { --fill: var(--md-sys-color-secondary-container); --on: var(--md-sys-color-on-secondary-container); }

.activity-list { display: grid; }
.activity-row { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 0; }
.activity-row + .activity-row { border-top: 1px solid var(--md-sys-color-outline-variant); }
.activity-row time { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); padding-top: 6px; }
.activity-dot { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.activity-dot .icon { width: 18px; height: 18px; }
.activity-row.has-out .activity-dot { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.activity-row > div { display: grid; min-width: 0; }
.activity-row small { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }

/* ---- Finished ------------------------------------------------------------------------------------------ */
.finished-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; }
@media (max-width: 1023px) { .finished-hero { grid-template-columns: 1fr; } }
.champion-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--shape-xxl);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.champion-card .eyebrow { color: inherit; opacity: 0.85; }
.champion-copy { display: grid; gap: 12px; min-width: 0; }
.champion-shape { --size: clamp(96px, 14vw, 160px); --fill: var(--md-sys-color-primary); --on: var(--md-sys-color-on-primary); }
.champion-shape .icon { width: 46%; height: 46%; }
.champion-shape > svg { animation: spin 30s linear infinite; }
.champion-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.champion-facts div { display: grid; padding: 10px 14px; border-radius: var(--shape-l); background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
.champion-facts dt { font-size: 0.75rem; opacity: 0.85; }
.champion-facts dd { font-weight: 800; font-size: 1.125rem; }
@media (max-width: 599px) { .champion-card { grid-template-columns: 1fr; } }
.reveal-control > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.reveal-control > header > div { display: grid; }
.podium-section { display: grid; gap: 12px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; }
.podium-step {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 24px 16px 20px;
  border-radius: var(--shape-xxl) var(--shape-xxl) var(--shape-l) var(--shape-l);
  background: var(--md-sys-color-surface-container-high);
  animation: rise var(--dur-slow) var(--spring) both;
  animation-delay: calc(var(--step, 0) * 120ms);
}
.podium-step strong { overflow-wrap: anywhere; }
.podium-step.place-1 { order: 2; min-height: 260px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.podium-step.place-1 .shape { --size: 88px; --fill: var(--md-sys-color-primary); --on: var(--md-sys-color-on-primary); }
.podium-step.place-2 { order: 1; min-height: 210px; }
.podium-step.place-3 { order: 3; min-height: 180px; }
.podium-step.place-2 .shape, .podium-step.place-3 .shape { --fill: var(--md-sys-color-secondary-container); --on: var(--md-sys-color-on-secondary-container); }
.podium-prize { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@media (max-width: 599px) {
  .podium { grid-template-columns: 1fr; }
  .podium-step, .podium-step.place-1, .podium-step.place-2, .podium-step.place-3 { order: 0; min-height: 0; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; padding: 14px 16px; border-radius: var(--shape-xl); }
  .podium-step .shape { grid-row: span 2; }
  .podium-prize { grid-column: 2; }
}
.finished-note { display: flex; gap: 8px; align-items: center; justify-content: center; }
.finished-note .icon { width: 18px; height: 18px; }

/* ---- Elimination reveal ------------------------------------------------------------------------------------ */
.exit-reveal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 55%, transparent);
  animation: exit-life var(--duration) linear var(--offset) both;
}
@keyframes exit-life { 0% { opacity: 0; } 6%, 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.exit-reveal-panel {
  width: min(880px, 100%); max-height: 90dvh; overflow: hidden;
  display: grid; gap: 20px; padding: clamp(20px, 4vw, 36px);
  border-radius: var(--shape-xxl);
  background: var(--md-sys-color-surface-container-high); box-shadow: var(--shadow-3);
  animation: dialog-in var(--dur-slow) var(--spring) var(--offset) both;
}
.exit-reveal-panel > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
.exit-reveal-panel > header > div { display: grid; gap: 4px; }
.exit-reveal-panel h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.05; font-weight: 850; font-stretch: 118%; }
.exit-reveal-panel .shape-md { --size: 80px; }
.exit-pages { overflow: hidden; }
.exit-track { display: flex; width: calc(var(--pages) * 100%); animation: exit-pages calc(var(--duration) * 0.85) steps(var(--pages), jump-none) var(--offset) both; }
.exit-reveal:not(.has-pages) .exit-track { animation: none; }
@keyframes exit-pages { to { transform: translateX(calc((1 - var(--pages)) * 100% / var(--pages))); } }
.exit-page { width: calc(100% / var(--pages)); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-content: start; }
.exit-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
  padding: 12px 16px; border-radius: var(--shape-l);
  background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container);
  animation: pop-in var(--dur-slow) var(--spring) calc(var(--offset) + var(--i) * var(--entry)) both;
}
.exit-number { grid-row: span 2; font-weight: 850; font-stretch: 118%; font-size: 1.25rem; opacity: 0.7; }
.exit-card strong { font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exit-card small { font-size: 0.8125rem; }
.exit-reveal-panel > footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exit-reveal-panel > footer strong { flex: 1; }
.exit-reveal-panel > footer .icon { color: var(--md-sys-color-primary); }
.exit-reveal.is-tv .exit-reveal-panel { width: min(1400px, 94vw); }
.exit-reveal.is-tv .exit-reveal-panel h2 { font-size: 4rem; }
.exit-reveal.is-tv .exit-card strong { font-size: 1.5rem; }