:root {
    --bier-appbar-height: 4rem;
    --bier-primary: #0277bd;
    --bier-primary-hover: #01579b;
    --bier-primary-light: #e8f4fa;
    --bier-secondary: #1565c0;
    --bier-info: #0277bd;
    --bier-success: #2e7d32;
    --bier-warning: #8a5a00;
    --bier-error: #c33d36;
    --bier-page: #ffffff;
    --bier-background-gray: #f3f6f8;
    --bier-surface: #ffffff;
    --bier-surface-alt: #f7f9fa;
    --bier-appbar: #ffffff;
    --bier-appbar-text: #183247;
    --bier-appbar-text-muted: #36586b;
    --bier-drawer: #fbfcfd;
    --bier-text: #183247;
    --bier-text-secondary: #476579;
    --bier-text-disabled: #8ca6b5;
    --bier-nav-text: #36586b;
    --bier-action: #54788e;
    --bier-action-disabled: #9db3bf;
    --bier-action-disabled-background: #e4eef3;
    --bier-border: #d7e2e8;
    --bier-border-strong: #adc3ce;
    --bier-input-border: #7fa6ba;
    --bier-divider-light: #e9eff2;
    --bier-hover: #f0f6f9;
    --bier-active: #dceef8;
    --bier-table-hover: #eaf5fb;
    --bier-focus: #01579b;
    --bier-on-primary: #ffffff;
    --bier-warning-surface: #fff8e1;
    --bier-error-surface: #fff4f2;
    --bier-error-border: #e6aaa4;
    --bier-shadow-rgb: 24 50 71;
    --bier-text-rgb: 24 50 71;
    --bier-primary-rgb: 2 119 189;
    --bier-icon-accent: #ef4f49;
    --bier-icon-accent-rgb: 239 79 73;
    --bier-icon-on-accent: #ffffff;
    --bier-icon-accent-dark: #ffcdd2;
    --bier-icon-accent-dark-rgb: 255 205 210;
    --bier-icon-on-accent-dark: #3b1110;
    --bier-border-rgb: 199 220 232;
}

/*
 * MudBlazor assigns palette classes to generated icons. Keep their visual accent separate from
 * the blue primary controls, while allowing filled surfaces and semantic states to own their
 * foreground contrast.
 */
.mud-theme-dark {
    --bier-icon-accent: var(--bier-icon-accent-dark);
    --bier-icon-accent-rgb: var(--bier-icon-accent-dark-rgb);
    --bier-icon-on-accent: var(--bier-icon-on-accent-dark);
}

.mud-icon-root,
.mud-icon-root.mud-icon-default,
.mud-icon-root.mud-primary-text,
.mud-icon-root.mud-secondary-text,
.mud-icon-root.mud-info-text {
    color: var(--bier-icon-accent) !important;
}

/* Drawer icons and expansion affordances do not always render as MudIcon components. */
.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-expand-icon {
    color: var(--bier-icon-accent) !important;
}

/* Explicit semantic icons retain their state color outside of a filled surface. */
.mud-icon-root.mud-success-text {
    color: var(--mud-palette-success, var(--bier-success)) !important;
}

.mud-icon-root.mud-warning-text {
    color: var(--mud-palette-warning, var(--bier-warning)) !important;
}

.mud-icon-root.mud-error-text {
    color: var(--mud-palette-error, var(--bier-error)) !important;
}

.mud-alert-outlined-success .mud-icon-root,
.mud-alert-text-success .mud-icon-root {
    color: var(--mud-palette-success, var(--bier-success)) !important;
}

.mud-alert-outlined-warning .mud-icon-root,
.mud-alert-text-warning .mud-icon-root {
    color: var(--mud-palette-warning, var(--bier-warning)) !important;
}

.mud-alert-outlined-error .mud-icon-root,
.mud-alert-text-error .mud-icon-root {
    color: var(--mud-palette-error, var(--bier-error)) !important;
}

.mud-button-outlined-success .mud-icon-root,
.mud-button-text-success .mud-icon-root {
    color: var(--mud-palette-success, var(--bier-success)) !important;
}

.mud-button-outlined-warning .mud-icon-root,
.mud-button-text-warning .mud-icon-root {
    color: var(--mud-palette-warning, var(--bier-warning)) !important;
}

.mud-button-outlined-error .mud-icon-root,
.mud-button-text-error .mud-icon-root {
    color: var(--mud-palette-error, var(--bier-error)) !important;
}

/* Filled buttons and alerts provide their own readable foreground for their icons. */
.mud-button-filled .mud-icon-root,
.mud-alert[class*="mud-alert-filled-"] .mud-icon-root {
    color: currentColor !important;
}

/* Recolor only icon-bearing blue avatars; text-only avatars keep their role/group colors. */
.mud-avatar-filled.mud-avatar-filled-primary:has(.mud-icon-root),
.mud-avatar-filled.mud-avatar-filled-secondary:has(.mud-icon-root),
.mud-avatar-filled.mud-avatar-filled-info:has(.mud-icon-root) {
    color: var(--bier-icon-on-accent) !important;
    background-color: var(--bier-icon-accent) !important;
}

.mud-avatar-filled.mud-avatar-filled-primary:has(.mud-icon-root) .mud-icon-root,
.mud-avatar-filled.mud-avatar-filled-secondary:has(.mud-icon-root) .mud-icon-root,
.mud-avatar-filled.mud-avatar-filled-info:has(.mud-icon-root) .mud-icon-root,
.mud-avatar-filled.mud-avatar-filled-success:has(.mud-icon-root) .mud-icon-root,
.mud-avatar-filled.mud-avatar-filled-warning:has(.mud-icon-root) .mud-icon-root,
.mud-avatar-filled.mud-avatar-filled-error:has(.mud-icon-root) .mud-icon-root {
    color: currentColor !important;
}

.mud-avatar-outlined.mud-avatar-outlined-primary:has(.mud-icon-root),
.mud-avatar-outlined.mud-avatar-outlined-secondary:has(.mud-icon-root),
.mud-avatar-outlined.mud-avatar-outlined-info:has(.mud-icon-root) {
    color: var(--bier-icon-accent) !important;
    border-color: var(--bier-icon-accent) !important;
}

.mud-avatar-outlined.mud-avatar-outlined-success:has(.mud-icon-root) .mud-icon-root {
    color: var(--mud-palette-success, var(--bier-success)) !important;
}

.mud-avatar-outlined.mud-avatar-outlined-warning:has(.mud-icon-root) .mud-icon-root {
    color: var(--mud-palette-warning, var(--bier-warning)) !important;
}

.mud-avatar-outlined.mud-avatar-outlined-error:has(.mud-icon-root) .mud-icon-root {
    color: var(--mud-palette-error, var(--bier-error)) !important;
}

/* Disabled state must win over the accent and over a component's normal color class. */
.mud-nav-link.mud-nav-link-disabled .mud-nav-link-icon,
.mud-nav-link.mud-nav-link-disabled .mud-nav-link-expand-icon,
.mud-disabled .mud-icon-root,
[disabled] .mud-icon-root,
[aria-disabled="true"] .mud-icon-root,
.mud-icon-root.mud-disabled,
.mud-icon-root[disabled] {
    color: var(--mud-palette-text-disabled, var(--bier-text-disabled)) !important;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bier-page);
}

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    overflow-x: clip;
}

h1:focus {
    outline: none;
}

code {
    overflow-wrap: anywhere;
}

.compact-form {
    width: 100%;
    max-width: 28rem;
}

.auth-form {
    margin-top: 1.25rem;
}

.form-field {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--mud-palette-text-primary, var(--bier-text));
    font-size: 0.9rem;
    font-weight: 600;
}

.form-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs, var(--bier-input-border));
    border-radius: 0.625rem;
    background: var(--mud-palette-surface, var(--bier-surface));
    color: var(--mud-palette-text-primary, var(--bier-text));
    font: inherit;
    font-size: 1rem;
}

.form-input:focus {
    border-color: var(--mud-palette-primary, var(--bier-primary));
    outline: 2px solid color-mix(in srgb, var(--mud-palette-primary, var(--bier-primary)) 35%, transparent);
    outline-offset: 0;
}

.form-actions {
    display: flex;
    margin-top: 1.25rem;
}

.form-submit {
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--mud-palette-primary, var(--bier-primary));
    border-radius: 0.625rem;
    background: var(--mud-palette-primary, var(--bier-primary));
    color: var(--bier-on-primary);
    cursor: pointer;
    font: inherit;
    font-weight: 650;
}

.form-submit:hover {
    background: var(--bier-primary-hover);
}

.form-submit:focus-visible {
    outline: 3px solid var(--bier-focus);
    outline-offset: 2px;
}

.form-alert {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bier-error-border);
    border-radius: 0.625rem;
    background: var(--bier-error-surface);
    color: var(--bier-error);
}

.table-cell-nowrap {
    white-space: nowrap;
}

.bier-page-header {
    margin-bottom: 2rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--bier-border);
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--bier-surface) 0%, var(--bier-surface-alt) 100%);
    box-shadow: 0 8px 24px rgb(var(--bier-shadow-rgb) / 6%);
}

.bier-page-header-main,
.bier-page-header-copy,
.bier-card-header-copy,
.bier-metric-copy {
    min-width: 0;
}

.bier-page-header-copy {
    flex: 1 1 auto;
}

.bier-page-title {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.bier-page-header-icon {
    flex: 0 0 auto;
    box-shadow: 0 4px 10px rgb(var(--bier-icon-accent-rgb) / 20%);
}

.bier-page-back-button {
    min-height: 2.75rem;
    flex: 0 0 auto;
}

.bier-section-card {
    overflow: hidden;
    border: 1px solid var(--bier-border);
    background: var(--mud-palette-surface, var(--bier-surface));
}

.bier-card-header {
    padding: 1rem 1.25rem;
    background: var(--bier-surface-alt);
}

.bier-card-header-copy {
    flex: 1 1 auto;
}

.bier-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}

.bier-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bier-empty-state {
    margin-top: 1rem;
    padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
    border-color: var(--bier-border);
    background: rgb(255 255 255 / 72%);
}

.bier-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: 0.85rem;
}

.bier-metric-tile {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--bier-border);
    background: var(--mud-palette-surface, var(--bier-surface));
}

.bier-metric-value {
    font-weight: 750;
}

.bier-table-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bier-border);
    background: var(--mud-palette-surface, var(--bier-surface));
}

.bier-compact-table-card {
    width: 100%;
    max-width: 36rem;
    margin-right: auto;
}

.bier-table-scroll {
    min-width: 0;
    overflow-x: auto;
}

.bier-table-scroll .mud-table-container {
    overflow-x: auto;
}

.bier-guest-group-card .bier-card-header {
    border-bottom: 1px solid var(--bier-border);
    background: linear-gradient(90deg, var(--bier-surface), var(--bier-surface-alt));
}

.guest-groups-standings {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guest-groups-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bier-border);
}

.guest-groups-row:last-child {
    border-bottom: 0;
}

.guest-groups-row.bier-guest-groups-row-qualified {
    background: #e8f7f0;
    box-shadow: inset 4px 0 0 #13a36b;
}

.guest-groups-rank {
    color: var(--bier-text-secondary);
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.guest-groups-team-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    max-width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 0.75rem;
    background: transparent;
    color: #077f92;
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.bier-guest-groups-row-qualified .guest-groups-rank,
.bier-guest-groups-row-qualified .guest-groups-team-link {
    color: #08794f;
}

.guest-groups-team-link:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    box-shadow: 0 2px 8px rgb(var(--bier-shadow-rgb) / 10%);
}

.guest-groups-team-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.guest-groups-metrics {
    display: grid;
    grid-template-columns: repeat(2, 3rem) repeat(2, 5.5rem);
    gap: 1rem;
    margin: 0;
}

.guest-groups-metric {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.guest-groups-metric dt {
    color: var(--bier-text-secondary);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.guest-groups-metric abbr {
    text-decoration: none;
}

.guest-groups-metric dd {
    margin: 0;
    color: var(--bier-text-secondary);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .guest-groups-row {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: 0.5rem 0.75rem;
        padding: 0.75rem 1rem;
    }

    .guest-groups-metrics {
        grid-column: 2;
        grid-template-columns: repeat(2, minmax(0, 0.6fr)) repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .guest-groups-metric dd {
        font-size: 0.875rem;
    }
}

.bier-statistics-table .mud-table-root {
    min-width: 48rem;
}

/* Keep an exact tie warning visible even when MudTable applies its hover background. */
.bier-statistics-table .bier-statistics-row-qualification-conflict > td {
    background-color: #ffebee !important;
}

.bier-statistics-table .bier-statistics-row-qualification-conflict:hover > td {
    background-color: #ffcdd2 !important;
}

.bier-statistics-table .bier-statistics-row-qualification-conflict:focus-within > td {
    box-shadow: inset 0 0 0 2px var(--mud-palette-error, var(--bier-error));
}

.bier-game-schedule-table .mud-table-cell {
    padding-inline: 0.5rem;
}

.bier-game-schedule-table .game-number-cell {
    width: 2.5rem;
    min-width: 2.5rem;
    text-align: center;
}

.bier-game-schedule-table .game-lines {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.bier-game-schedule-table .game-line {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 2.25rem;
}

.bier-game-schedule-table .game-team-cell {
    width: 10rem;
    min-width: 8rem;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.bier-game-schedule-table .game-team-line {
    align-items: flex-start;
}

.bier-game-schedule-table .game-score-cell {
    width: 5rem;
    min-width: 4.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.bier-game-schedule-table .game-score-line {
    justify-content: flex-end;
}

.bier-game-schedule-table .game-score-line .score-value {
    width: 100%;
}

.bier-game-schedule-table .game-score-input {
    width: 4.5rem;
    min-width: 4rem;
    max-width: 4.5rem;
}

.bier-game-schedule-table .game-action-cell {
    min-width: 8rem;
    vertical-align: middle;
}

.bier-game-schedule-table .game-action-buttons {
    align-items: center;
}

/* Keep the result state visible even when MudTable applies its hover background. */
.bier-game-schedule-table .game-row-finished > td {
    background-color: #e0f2ff !important;
}

.bier-game-schedule-table .game-row-unfinished > td {
    background-color: #fff0ee !important;
}

.bier-game-schedule-table .game-row-finished:hover > td {
    background-color: #cbe9fa !important;
}

.bier-game-schedule-table .game-row-unfinished:hover > td {
    background-color: #ffe0dc !important;
}

.bier-game-schedule-table .game-row-finished:focus-within > td,
.bier-game-schedule-table .game-row-unfinished:focus-within > td {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary, var(--bier-primary));
}

.bier-status-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bier-scoreboard {
    padding: 0.85rem;
    border-radius: 0.75rem;
    background: var(--bier-surface-alt);
}

.bier-score-row {
    min-height: 2.5rem;
}

.score-team {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.score-value {
    min-width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.score-entry {
    width: 100%;
}

.score-save-button {
    margin-left: auto;
    min-height: 2.75rem;
}

.bracket-match-card {
    min-height: 10rem;
}

.bracket-match-card .mud-card-content {
    height: 100%;
}

.bier-auth-panel {
    width: 100%;
    max-width: 32rem;
    margin: clamp(1rem, 5vw, 3rem) auto 0;
    padding: clamp(1.25rem, 5vw, 2.25rem);
}

.bier-auth-header {
    text-align: center;
}

.bier-auth-icon {
    margin-bottom: 0.75rem;
}

.bier-full-width {
    width: 100%;
}

.bier-status-panel {
    width: 100%;
    max-width: 42rem;
    margin: clamp(1rem, 6vw, 4rem) auto 0;
    padding: clamp(1.5rem, 5vw, 3rem);
}

.bier-status-panel h1 {
    margin: 0;
}

.bier-danger-card {
    border: 1px solid var(--bier-error-border);
    background: #fff8f6;
}

.bier-danger-header {
    background: #fff0ed;
}

.tournament-card {
    height: 100%;
}

.tournament-card .mud-card-content {
    height: 100%;
}

.guest-tournament-status-card {
    background:
        radial-gradient(circle at 100% 0, rgb(var(--bier-primary-rgb) / 10%), transparent 22rem),
        var(--mud-palette-surface, var(--bier-surface));
}

.guest-tournament-status-content {
    padding: clamp(1.25rem, 3vw, 2rem) !important;
}

.guest-tournament-status-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.guest-tournament-status-heading > .mud-icon-root {
    width: 2rem;
    height: 2rem;
    padding: 0.55rem;
    border-radius: 50%;
    color: var(--bier-icon-on-accent) !important;
    background: var(--bier-icon-accent);
    box-shadow: 0 6px 16px rgb(var(--bier-icon-accent-rgb) / 25%);
}

.guest-tournament-status-heading .mud-typography-overline {
    color: var(--mud-palette-text-secondary, var(--bier-text-secondary));
    letter-spacing: 0.1em;
}

.guest-tournament-status-heading .mud-typography-h6 {
    font-weight: 750;
}

.guest-tournament-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.guest-status-step {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--mud-palette-text-disabled, var(--bier-text-disabled));
    text-align: center;
}

.guest-status-step:not(:first-child)::before {
    position: absolute;
    z-index: 0;
    top: 1.3rem;
    right: 50%;
    width: 100%;
    height: 0.25rem;
    border-radius: 999px;
    background: var(--bier-divider-light);
    content: "";
}

.guest-status-step.is-complete::before,
.guest-status-step.is-current::before {
    background: var(--mud-palette-primary, var(--bier-primary));
}

.guest-status-step-marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 0.2rem solid var(--bier-border);
    border-radius: 50%;
    background: var(--mud-palette-surface, var(--bier-surface));
}

.guest-status-step-marker .mud-icon-root {
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor !important;
}

.guest-status-step.is-complete {
    color: var(--mud-palette-primary, var(--bier-primary));
}

.guest-status-step.is-complete .guest-status-step-marker {
    border-color: var(--mud-palette-primary, var(--bier-primary));
    color: var(--bier-on-primary);
    background: var(--mud-palette-primary, var(--bier-primary));
}

.guest-status-step.is-current {
    color: var(--mud-palette-text-primary, var(--bier-text));
}

.guest-status-step.is-current .guest-status-step-marker {
    border-color: var(--bier-icon-accent);
    color: var(--bier-icon-on-accent);
    background: var(--bier-icon-accent);
    box-shadow: 0 0 0 0.4rem rgb(var(--bier-icon-accent-rgb) / 16%),
                0 0.4rem 1rem rgb(var(--bier-icon-accent-rgb) / 25%);
    transform: scale(1.08);
}

.guest-status-step-label {
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    font-weight: 650;
}

.guest-status-step.is-current .guest-status-step-label {
    font-weight: 800;
}

.guest-status-current-badge {
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    color: var(--bier-icon-on-accent);
    background: var(--bier-icon-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
}

@media (max-width: 599.98px) {
    .guest-tournament-status-content {
        overflow-x: auto;
    }

    .guest-tournament-progress {
        min-width: 36rem;
        padding: 0.35rem 0.25rem 0.5rem;
    }
}

.tournament-card-name {
    overflow-wrap: anywhere;
    font-weight: 700;
}

.guest-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
    min-width: 0;
}

.guest-team-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bier-border);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.guest-team-card:hover {
    border-color: var(--bier-border-strong);
    box-shadow: 0 10px 24px rgb(var(--bier-shadow-rgb) / 12%);
    transform: translateY(-2px);
}

.guest-team-card-link {
    display: block;
    height: 100%;
    min-width: 0;
    color: var(--mud-palette-text-primary, var(--bier-text));
    text-decoration: none;
}

.guest-team-card-link:focus-visible {
    outline: 3px solid var(--bier-focus);
    outline-offset: -3px;
}

.guest-team-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--bier-divider-light);
    background: linear-gradient(135deg, var(--bier-surface-alt), var(--mud-palette-surface, var(--bier-surface)));
}

.guest-team-card-icon,
.guest-team-card-arrow {
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.guest-team-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--bier-icon-on-accent);
    background: var(--bier-icon-accent);
    box-shadow: 0 4px 10px rgb(var(--bier-icon-accent-rgb) / 20%);
}

.guest-team-card-icon .mud-icon-root {
    color: currentColor !important;
}

.guest-team-card-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 750;
}

.guest-team-card-arrow {
    width: 2rem;
    height: 2rem;
    color: var(--mud-palette-primary, var(--bier-primary));
    background: var(--bier-primary-light);
    transition: transform 160ms ease;
}

.guest-team-card:hover .guest-team-card-arrow {
    transform: translateX(0.2rem);
}

.guest-team-card-players {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.9rem 1rem 1rem;
}

.guest-team-card-player {
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--bier-divider-light);
    border-radius: 0.65rem;
    background: var(--bier-surface-alt);
    overflow-wrap: anywhere;
}

.guest-team-player-number {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--mud-palette-primary, var(--bier-primary));
    background: var(--bier-primary-light);
    font-size: 0.7rem;
    font-weight: 800;
}

.guest-team-card-player .mud-icon-root {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

.table-cell-right {
    text-align: right;
}

.table-rank {
    color: var(--mud-palette-text-secondary, var(--bier-text-secondary));
}

.statistics-summary {
    width: 100%;
    max-width: 32rem;
}

.tournament-link,
.guest-portal-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    gap: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

/* Shared by the server-rendered bracket and the Guest WebAssembly assembly. */
.bracket-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    margin-top: 1.25rem;
}

.bracket-round {
    min-width: 0;
}

.bracket-team {
    min-width: 0;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
}

.bracket-stage-label {
    font-weight: 700;
}

.bracket-round-header {
    padding: 0.65rem 0.8rem;
    border-color: var(--bier-border);
    background: var(--bier-surface-alt);
}

.team-member-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The Guest pyramid is intentionally dependency-free: the cards and SVG share one coordinate
   system, so the complete binary-tree geometry stays readable at every legal bracket size. */
.guest-pyramid-viewport {
    width: 100%;
    min-width: 0;
    height: clamp(26rem, calc(100dvh - 10rem), 52rem);
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable both-edges;
    border: 1px solid var(--bier-border-strong);
    border-radius: 0.8rem;
    background: var(--bier-background-gray);
    direction: rtl;
}

.guest-pyramid-viewport:focus-visible {
    outline: 3px solid var(--bier-focus);
    outline-offset: 2px;
}

.guest-pyramid-scroll-content {
    width: max-content;
    min-width: max-content;
    min-height: max-content;
    padding: 0.8rem;
    direction: ltr;
}

.guest-pyramid-surface {
    position: relative;
    box-sizing: border-box;
    direction: ltr;
    background-image: linear-gradient(rgb(var(--bier-border-rgb) / 34%) 1px, transparent 1px),
                      linear-gradient(90deg, rgb(var(--bier-border-rgb) / 24%) 1px, transparent 1px);
    background-size: 100% 2.125rem, 2.75rem 100%;
}

.guest-pyramid-round-heading {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    min-height: 3rem;
    padding: 0.45rem 0.55rem 0.35rem;
    overflow: hidden;
    border-bottom: 2px solid var(--bier-primary);
    border-radius: 0.55rem 0.55rem 0 0;
    background: rgb(255 255 255 / 94%);
    text-align: center;
}

.guest-pyramid-round-heading h3 {
    margin: 0;
    overflow: hidden;
    color: var(--bier-text);
    font-size: 0.8rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-pyramid-round-heading span {
    display: block;
    margin-top: 0.1rem;
    color: var(--bier-text-secondary);
    font-size: 0.68rem;
}

.guest-pyramid-connectors {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.guest-pyramid-connectors path {
    fill: none;
    stroke: var(--bier-primary-hover);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
}

.guest-pyramid-match-card {
    position: absolute;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    padding: 0.5rem 0.65rem;
    overflow: hidden;
    border: 1px solid var(--bier-border-strong);
    border-radius: 0.7rem;
    background: var(--bier-surface);
    box-shadow: 0 4px 12px rgb(var(--bier-shadow-rgb) / 10%);
}

.guest-pyramid-final-match {
    border-color: var(--bier-primary);
    background: var(--bier-active);
    box-shadow: 0 6px 16px rgb(var(--bier-primary-rgb) / 16%);
}

.guest-pyramid-third-match {
    border-color: #6aa9c0;
    background: #eff9fc;
}

.guest-pyramid-match-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    min-height: 1.1rem;
    color: var(--bier-text-secondary);
    font-size: 0.66rem;
    line-height: 1.1;
}

.guest-pyramid-match-round {
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-pyramid-match-number {
    flex: 0 0 auto;
    white-space: nowrap;
}

.guest-pyramid-match-state {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.14rem 0.32rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

.guest-pyramid-state-open {
    background: #fff0ee;
    color: #8c2f25;
}

.guest-pyramid-state-finished {
    background: #e0f2ff;
    color: #245c78;
}

.guest-pyramid-special-label {
    min-height: 1rem;
    margin-top: 0.15rem;
    color: var(--bier-primary-hover);
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.1;
}

.guest-pyramid-third-match .guest-pyramid-special-label {
    color: var(--bier-secondary);
}

.guest-pyramid-team-list {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    margin-top: 0.2rem;
}

.guest-pyramid-team-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    min-height: 2rem;
}

.guest-pyramid-team-row + .guest-pyramid-team-row {
    border-top: 1px solid var(--bier-border);
}

.guest-pyramid-team-name {
    display: -webkit-box;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--bier-text);
    font-size: 0.83rem;
    font-weight: 650;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.15;
}

.guest-pyramid-team-missing {
    color: #7893a1;
    font-weight: 500;
}

.guest-pyramid-score {
    flex: 0 0 1.55rem;
    color: var(--bier-text);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    text-align: right;
}

@media (max-width: 600px) {
    .guest-pyramid-viewport {
        height: min(76dvh, 42rem);
        min-height: 22rem;
    }
}

@media (min-width: 768px) {
    .bracket-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .bracket-round {
        width: 14rem;
        flex: 0 0 14rem;
    }
}

.tabular-numbers {
    font-variant-numeric: tabular-nums;
}

.qr-code {
    display: block;
    width: min(100%, 16rem);
    height: auto;
    padding: 0.5rem;
    border-radius: 0.625rem;
    background: #fff;
}

#blazor-error-ui {
    z-index: 10000;
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--bier-warning);
    background: var(--bier-warning-surface);
    color: var(--bier-text);
    box-shadow: 0 -1px 8px rgb(var(--bier-shadow-rgb) / 18%);
    color-scheme: light only;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 0.55rem;
    right: 1rem;
    cursor: pointer;
    color: var(--bier-text-secondary);
    font-size: 1.4rem;
}

.blazor-error-boundary {
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    background: var(--bier-error);
    color: #fff;
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten.";
}

@media (max-width: 600px) {
    .compact-form {
        max-width: none;
    }

    .bier-page-header {
        margin-bottom: 1.25rem;
        padding: 1rem;
    }

    .bier-page-header-main {
        align-items: flex-start;
    }

    .bier-page-back-button {
        width: 100%;
        justify-content: flex-start;
    }

    .bier-card-header {
        padding: 0.9rem 1rem;
    }

    .bier-scoreboard {
        padding: 0.65rem;
    }

    .bier-score-row {
        min-height: 2.75rem;
    }

    .score-entry .mud-input-control {
        min-width: 7.25rem;
        flex: 1 1 7.25rem;
    }

    .bier-game-schedule-table .mud-table-root {
        min-width: 30rem;
    }
}

/*
 * TV presentation
 *
 * The presentation uses its own dark, high-contrast canvas. It lives inside the normal
 * authenticated shell during preview and fills the browser viewport after the fullscreen action.
 */
.guest-tv-loading,
.guest-tv-error {
    min-height: 18rem;
}

.guest-tv-stage {
    --guest-tv-ink: #f8fbff;
    --guest-tv-muted: #a9bdd0;
    --guest-tv-line: rgb(144 192 224 / 22%);
    --guest-tv-stage-padding: clamp(1rem, 2.4vw, 2rem);
    position: relative;
    min-height: min(70rem, calc(100vh - 8rem));
    overflow: clip;
    isolation: isolate;
    padding: var(--guest-tv-stage-padding);
    border: 1px solid rgb(146 199 231 / 26%);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 8% 8%, rgb(20 135 191 / 30%), transparent 34%),
        radial-gradient(circle at 95% 88%, rgb(239 79 73 / 20%), transparent 30%),
        linear-gradient(135deg, #061726 0%, #0c2c45 50%, #061725 100%);
    color: var(--guest-tv-ink);
    box-shadow: 0 24px 80px rgb(0 15 28 / 35%);
}

.guest-tv-stage::before,
.guest-tv-stage::after {
    position: absolute;
    z-index: -1;
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    content: "";
    filter: blur(4px);
    opacity: .28;
    pointer-events: none;
}

.guest-tv-stage::before {
    top: -24rem;
    right: 20%;
    border: 1px solid rgb(160 220 255 / 35%);
}

.guest-tv-stage::after {
    bottom: -25rem;
    left: 10%;
    border: 1px solid rgb(255 133 121 / 25%);
}

.guest-tv-stage:fullscreen {
    --guest-tv-stage-padding: clamp(1.25rem, 3vw, 3rem);
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    padding: var(--guest-tv-stage-padding);
}

html.guest-tv-fullscreen-active,
body.guest-tv-fullscreen-active {
    overflow: hidden;
}

.guest-tv-toolbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 2.5rem;
    color: var(--guest-tv-muted);
    font-size: clamp(.72rem, 1.1vw, .9rem);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guest-tv-live,
.guest-tv-connection-warning {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.guest-tv-warning-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
}

.guest-tv-connection-warning {
    margin-left: auto;
    color: #ffd28a;
    letter-spacing: .02em;
    text-transform: none;
}

.guest-tv-warning-dot {
    background: #ffd28a;
    box-shadow: 0 0 0 .22rem rgb(255 210 138 / 15%);
}

.guest-tv-fullscreen-button,
.guest-tv-pause-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.4rem;
    margin-left: auto;
    padding: .42rem .75rem;
    border: 1px solid rgb(173 220 247 / 35%);
    border-radius: .7rem;
    background: rgb(8 33 52 / 62%);
    color: var(--guest-tv-ink);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.guest-tv-fullscreen-button:hover,
.guest-tv-pause-button:hover {
    border-color: rgb(173 220 247 / 70%);
    background: rgb(20 73 104 / 80%);
    transform: translateY(-1px);
}

.guest-tv-fullscreen-button:focus-visible,
.guest-tv-pause-button:focus-visible {
    outline: 3px solid #8fd6ff;
    outline-offset: 3px;
}

.guest-tv-pause-button {
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    z-index: 5;
}

/* Let entrance fades finish so pausing at a page boundary cannot hide the new page. */
.guest-tv-stage.is-paused .guest-tv-bracket-surface,
.guest-tv-stage.is-paused .guest-tv-table-card,
.guest-tv-stage.is-paused .guest-tv-table-team-name-text {
    animation-play-state: paused !important;
}

.guest-tv-hero,
.guest-tv-screen {
    animation: none;
}

.guest-tv-content {
    padding-bottom: 2rem;
    animation: guest-tv-screen-in .65s cubic-bezier(.2, .72, .2, 1) both;
}

.guest-tv-hero {
    display: flex;
    min-height: min(57rem, calc(100vh - 13rem));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    text-align: center;
}

.guest-tv-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.guest-tv-logo-frame {
    display: grid;
    width: clamp(8rem, 18vw, 15rem);
    height: clamp(8rem, 18vw, 15rem);
    place-items: center;
    border: 1px solid rgb(198 231 250 / 70%);
    border-radius: 2.2rem;
    background: #d7eeff;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 28%), 0 0 0 .7rem rgb(215 238 255 / 8%);
    animation: guest-tv-logo-in .9s cubic-bezier(.2, .8, .2, 1) both;
}

.guest-tv-guest-qr {
    display: grid;
    gap: .45rem;
    padding: clamp(.55rem, 1vw, .85rem);
    border: 1px solid rgb(198 231 250 / 55%);
    border-radius: 1.25rem;
    background: #fff;
    color: #163047;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 28%);
}

.guest-tv-guest-qr img {
    width: clamp(7rem, 15vw, 12.5rem);
    height: clamp(7rem, 15vw, 12.5rem);
}

.guest-tv-guest-qr span {
    font-size: clamp(.68rem, 1vw, .85rem);
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guest-tv-logo {
    width: 86%;
    height: 86%;
    object-fit: contain;
}

.guest-tv-kicker {
    margin: 0 0 .7rem;
    color: #8fd6ff;
    font-size: clamp(.68rem, 1.15vw, .9rem);
    font-weight: 760;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.guest-tv-tournament-name {
    max-width: 17ch;
    margin: 0;
    color: var(--guest-tv-ink);
    font-size: clamp(2.2rem, 6.5vw, 6.5rem);
    font-weight: 820;
    letter-spacing: -.05em;
    line-height: .98;
    overflow-wrap: anywhere;
}

.guest-tv-phase {
    margin: 1.2rem 0 0;
    color: #ffd0c9;
    font-size: clamp(1rem, 2vw, 1.55rem);
    font-weight: 650;
}

.guest-tv-hero-line {
    width: clamp(6rem, 15vw, 12rem);
    height: 2px;
    margin: 2rem 0 1rem;
    background: linear-gradient(90deg, transparent, #ff7168, transparent);
}

.guest-tv-hint {
    margin: 0;
    color: var(--guest-tv-muted);
    font-size: clamp(.78rem, 1.25vw, 1rem);
}

.guest-tv-screen {
    position: relative;
    min-height: min(57rem, calc(100vh - 13rem));
    padding: clamp(1rem, 2vw, 2.3rem) clamp(.15rem, 1vw, 1rem) 1rem;
}

.guest-tv-screen-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto clamp(1rem, 2.4vh, 1.8rem);
    max-width: 100rem;
}

.guest-tv-screen-header h1 {
    margin: 0;
    color: var(--guest-tv-ink);
    font-size: clamp(1.85rem, 4vw, 4.2rem);
    font-weight: 790;
    letter-spacing: -.045em;
}

.guest-tv-screen-header .guest-tv-kicker {
    margin-bottom: .45rem;
}

.guest-tv-page-count {
    flex: 0 0 auto;
    padding: .45rem .75rem;
    border: 1px solid var(--guest-tv-line);
    border-radius: 99rem;
    color: #b8d9ee;
    font-size: clamp(.72rem, 1.05vw, .9rem);
    font-weight: 650;
    letter-spacing: .05em;
}

.guest-tv-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.55rem, 1vw, .95rem);
    max-width: 100rem;
    margin: 0 auto;
}

.guest-tv-team-card {
    display: grid;
    min-height: clamp(6rem, 12vh, 9rem);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .8rem;
    align-content: center;
    padding: clamp(.75rem, 1.3vw, 1.2rem);
    border: 1px solid var(--guest-tv-line);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgb(18 59 83 / 90%), rgb(8 31 49 / 90%));
    box-shadow: 0 .65rem 1.5rem rgb(0 5 12 / 18%);
    animation: guest-tv-card-in .55s cubic-bezier(.2, .72, .2, 1) both;
}

.guest-tv-team-card:nth-child(1) { --tv-team-index: 0; }
.guest-tv-team-card:nth-child(2) { --tv-team-index: 1; }
.guest-tv-team-card:nth-child(3) { --tv-team-index: 2; }
.guest-tv-team-card:nth-child(4) { --tv-team-index: 3; }
.guest-tv-team-card:nth-child(5) { --tv-team-index: 4; }
.guest-tv-team-card:nth-child(6) { --tv-team-index: 5; }
.guest-tv-team-card:nth-child(7) { --tv-team-index: 6; }
.guest-tv-team-card:nth-child(8) { --tv-team-index: 7; }
.guest-tv-team-card:nth-child(9) { --tv-team-index: 8; }
.guest-tv-team-card:nth-child(10) { --tv-team-index: 9; }
.guest-tv-team-card:nth-child(11) { --tv-team-index: 10; }
.guest-tv-team-card:nth-child(12) { --tv-team-index: 11; }

.guest-tv-team-card {
    animation-delay: calc(var(--tv-team-index, 0) * 35ms);
}

.guest-tv-team-index {
    grid-row: 1 / span 2;
    align-self: center;
    color: #74c9f6;
    font-size: clamp(.8rem, 1.3vw, 1.1rem);
    font-variant-numeric: tabular-nums;
    font-weight: 760;
}

.guest-tv-team-card strong {
    min-width: 0;
    overflow: visible;
    color: var(--guest-tv-ink);
    font-size: clamp(1rem, 1.65vw, 1.55rem);
    font-weight: 730;
    overflow-wrap: anywhere;
    line-height: 1.08;
    white-space: normal;
}

.guest-tv-team-card > span:last-child {
    min-width: 0;
    margin-top: .3rem;
    overflow: hidden;
    color: var(--guest-tv-muted);
    font-size: clamp(.68rem, 1vw, .88rem);
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-tv-group-header {
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
}

.guest-tv-group-header h1 {
    color: #89c8ec;
    font-size: clamp(.85rem, 1.5vw, 1.4rem);
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.guest-tv-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(.5rem, 1.2vw, 1.2rem);
    max-width: 100rem;
    margin: 0 auto;
}

.guest-tv-group-column {
    min-width: 0;
}

.guest-tv-group-column h2 {
    margin: 0 0 .55rem;
    color: var(--guest-tv-ink);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 730;
    line-height: 1.25;
}

.guest-tv-standings {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--guest-tv-line);
    border-radius: 1rem;
    background: rgb(5 23 38 / 72%);
    box-shadow: 0 1.25rem 3rem rgb(0 5 12 / 22%);
}

.guest-tv-standing-row {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: center;
    gap: .35rem .5rem;
    min-height: clamp(4.5rem, 9vh, 6rem);
    padding: .55rem clamp(.5rem, .9vw, .9rem);
    border-bottom: 1px solid rgb(144 192 224 / 11%);
    color: #dbeaf4;
    font-size: clamp(.9rem, 1.2vw, 1.2rem);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.guest-tv-standing-row > :nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
}

.guest-tv-standing-row:last-child {
    border-bottom: 0;
}

.guest-tv-standing-metrics {
    grid-column: 2;
    display: grid;
    grid-template-columns: .6fr .6fr 1.2fr 1.2fr;
    gap: .25rem;
    margin: 0;
}

.guest-tv-standing-metrics > div {
    min-width: 0;
}

.guest-tv-standing-metrics dt {
    color: #8fb6cb;
    font-size: .7em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.guest-tv-standing-metrics abbr {
    text-decoration: none;
}

.guest-tv-standing-metrics dd {
    margin: .1rem 0 0;
    font-size: .85em;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.guest-tv-standing-row.is-leader {
    background: linear-gradient(90deg, rgb(239 79 73 / 13%), transparent 65%);
}

.guest-tv-standing-rank {
    grid-row: 1 / span 2;
    align-self: center;
    color: #8fd6ff;
    font-size: 1.25em;
    font-weight: 780;
}

.guest-tv-standing-row.is-leader .guest-tv-standing-rank {
    color: #ffd083;
}

.guest-tv-halls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.8rem, 2vw, 1.8rem);
    max-width: 110rem;
    margin: 0 auto;
}

.guest-tv-hall {
    min-width: 0;
    padding: clamp(.75rem, 1.2vw, 1.25rem);
    border: 1px solid var(--guest-tv-line);
    border-radius: 1.1rem;
    background: rgb(5 23 38 / 64%);
}

.guest-tv-hall h2 {
    margin: 0 0 .7rem;
    color: #b9dff3;
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    font-weight: 730;
}

.guest-tv-hall h2 small {
    color: #7797aa;
    font-size: .62em;
    font-weight: 500;
}

.guest-tv-hall-idle {
    opacity: .72;
}

.guest-tv-table-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    gap: clamp(.32rem, .75vw, .65rem);
}

.guest-tv-table-card {
    display: flex;
    min-height: clamp(3.5rem, 6.2vh, 5.3rem);
    flex-direction: column;
    justify-content: center;
    padding: clamp(.25rem, .45vw, .42rem) clamp(.42rem, .75vw, .7rem);
    border: 1px solid rgb(144 192 224 / 13%);
    border-radius: .72rem;
    background: rgb(10 37 57 / 68%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.guest-tv-table-card.is-playing {
    border-color: rgb(92 194 239 / 54%);
    background: linear-gradient(135deg, rgb(17 74 103 / 95%), rgb(9 42 65 / 94%));
    box-shadow: 0 .35rem 1rem rgb(0 7 15 / 24%), inset 0 1px 0 rgb(255 255 255 / 9%);
}

.guest-tv-table-card.is-recent {
    border-color: #ffd083;
    background: linear-gradient(135deg, rgb(125 78 43 / 88%), rgb(52 46 40 / 92%));
    box-shadow: 0 0 0 .18rem rgb(255 208 131 / 12%), 0 0 1.2rem rgb(255 185 92 / 23%);
    animation: guest-tv-new-table 2.2s ease-in-out infinite;
}

.guest-tv-table-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    margin-bottom: .12rem;
    color: #82a7bc;
    font-size: clamp(.55rem, .68vw, .64rem);
    font-weight: 670;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.guest-tv-table-number {
    flex: 0 0 auto;
}

.guest-tv-table-group {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-tv-new-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .12rem .3rem;
    border-radius: .3rem;
    background: #ffd083;
    color: #402719;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.guest-tv-table-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, auto));
    min-width: 0;
    gap: .02rem;
    color: #f3f9fc;
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    font-weight: 730;
    line-height: .84;
}

.guest-tv-table-teams > span:first-child,
.guest-tv-table-teams > span:last-child {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guest-tv-table-team-name-text {
    display: inline-block;
    width: max-content;
    max-width: none;
    white-space: nowrap;
}

.guest-tv-table-teams > span.is-overflowing > .guest-tv-table-team-name-text {
    animation: guest-tv-team-name-reveal 11s ease-in-out infinite;
}

.guest-tv-table-versus {
    display: none;
}

.guest-tv-table-free-label {
    color: #577a8e;
    font-size: clamp(.72rem, 1vw, .9rem);
}

.guest-tv-no-data {
    display: grid;
    min-height: 20rem;
    place-items: center;
    color: var(--guest-tv-muted);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
}

.guest-tv-bracket-screen {
    padding-bottom: 0;
}

/* The pyramid is the only TV page that is meant to use the whole stage. Keep it
   flush with the stage edges and let the toolbar/pause controls sit above it. */
.guest-tv-stage[data-tv-stage="bracketpyramid"] {
    display: flex;
    flex-direction: column;
}

.guest-tv-stage[data-tv-stage="bracketpyramid"] .guest-tv-content {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    padding-bottom: 0;
}

.guest-tv-stage[data-tv-stage="bracketpyramid"] .guest-tv-bracket-screen {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin-inline: calc(-1 * var(--guest-tv-stage-padding));
    padding: 0;
}

.guest-tv-stage[data-tv-stage="bracketpyramid"] .guest-tv-bracket-viewport {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    /* The viewport background reaches the stage edges, while the animated surface keeps the
       same content bounds it had before the bracket screen received negative inline margins. */
    padding-inline: var(--guest-tv-stage-padding);
    border-radius: 0;
}

.guest-tv-bracket-viewport {
    position: relative;
    width: 100%;
    height: min(66vh, 51rem);
    overflow: hidden;
    border: 1px solid var(--guest-tv-line);
    border-radius: 1.1rem;
    background: radial-gradient(circle at 50% 8%, rgb(26 91 126 / 24%), transparent 58%), rgb(4 20 33 / 68%);
}

.guest-tv-bracket-surface {
    position: relative;
    transform: scale(var(--tv-bracket-scale));
    transform-origin: top left;
}

.guest-tv-bracket-surface.has-pan {
    animation: guest-tv-bracket-pan-single var(--tv-bracket-pan-duration, 15s) ease-in-out 1 both;
}

.guest-tv-bracket-surface.has-pan.has-previous-round {
    animation-name: guest-tv-bracket-pan-previous-current;
}

.guest-tv-bracket-connectors {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}

.guest-tv-bracket-connectors path {
    fill: none;
    stroke: rgb(129 201 233 / 46%);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.guest-tv-bracket-round-heading {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    height: 3rem;
    padding: 0 .55rem;
    border-bottom: 1px solid rgb(129 201 233 / 28%);
    color: #9fd8f5;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.guest-tv-bracket-round-heading span {
    color: #7196aa;
    font-size: .72rem;
    text-transform: none;
}

.guest-tv-bracket-match {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .18rem;
    padding: .45rem .6rem;
    border: 1px solid rgb(128 194 224 / 28%);
    border-radius: .62rem;
    background: linear-gradient(135deg, rgb(16 62 88 / 96%), rgb(7 32 51 / 96%));
    box-shadow: 0 .35rem 1rem rgb(0 5 12 / 22%);
    animation: guest-tv-bracket-card-in .65s cubic-bezier(.2, .72, .2, 1) both;
    animation-delay: calc(var(--tv-node-index, 0) * 24ms);
}

.guest-tv-bracket-match.is-final {
    border-color: rgb(255 208 131 / 75%);
    background: linear-gradient(135deg, rgb(105 73 43 / 96%), rgb(50 40 35 / 97%));
}

.guest-tv-bracket-match.is-third-place {
    border-color: rgb(128 194 224 / 20%);
}

.guest-tv-bracket-match-meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: #82aac0;
    font-size: .63rem;
    font-weight: 650;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.guest-tv-bracket-team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-width: 0;
    color: #f3f9fc;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 680;
    line-height: 1.05;
}

.guest-tv-bracket-team span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.guest-tv-bracket-team b {
    flex: 0 0 auto;
    color: #ffd083;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.guest-tv-bracket-special {
    color: #ffd083;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@keyframes guest-tv-screen-in {
    from { opacity: 0; transform: translateY(1rem) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes guest-tv-logo-in {
    from { opacity: 0; transform: translateY(1.25rem) scale(.82) rotate(-2deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes guest-tv-card-in {
    from { opacity: 0; transform: translateY(.7rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes guest-tv-bracket-card-in {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes guest-tv-bracket-pan-single {
    0%, 8% {
        /* A first-round bracket has no predecessor: scan its column once. */
        transform: translate(var(--tv-bracket-pan-current-x, 0px), 0) scale(var(--tv-bracket-scale));
    }
    92%, 100% {
        /* Move the camera down so the lower matches remain readable. */
        transform: translate(var(--tv-bracket-pan-current-x, 0px), var(--tv-bracket-pan-distance, 0px)) scale(var(--tv-bracket-scale));
    }
}

@keyframes guest-tv-bracket-pan-previous-current {
    0%, 6% {
        /* Start at the top of the previous round. */
        transform: translate(var(--tv-bracket-pan-previous-x, 0px), 0) scale(var(--tv-bracket-scale));
    }
    45% {
        /* Finish the previous round at the bottom of the surface. */
        transform: translate(var(--tv-bracket-pan-previous-x, 0px), var(--tv-bracket-pan-distance, 0px)) scale(var(--tv-bracket-scale));
    }
    45.01%, 53% {
        /* Change columns at the top of the current round before its downward scan. */
        transform: translate(var(--tv-bracket-pan-current-x, 0px), 0) scale(var(--tv-bracket-scale));
    }
    94%, 100% {
        /* Finish the current round at the bottom, then let Blazor switch screens. */
        transform: translate(var(--tv-bracket-pan-current-x, 0px), var(--tv-bracket-pan-distance, 0px)) scale(var(--tv-bracket-scale));
    }
}

@keyframes guest-tv-new-table {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.018); }
}

@keyframes guest-tv-team-name-reveal {
    0%, 10% {
        transform: translateX(0);
    }
    42%, 65% {
        transform: translateX(var(--tv-team-name-overflow, 0px));
    }
    92%, 100% {
        transform: translateX(0);
    }
}

@media (max-width: 62rem) {
    .guest-tv-team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guest-tv-halls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 42rem) {
    .guest-tv-stage {
        --guest-tv-stage-padding: .75rem;
        min-height: calc(100vh - 6rem);
        border-radius: 1rem;
        padding: var(--guest-tv-stage-padding);
    }

    .guest-tv-toolbar {
        flex-wrap: wrap;
    }

    .guest-tv-connection-warning {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    .guest-tv-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guest-tv-group-grid {
        grid-template-columns: 1fr;
    }

    .guest-tv-table-card {
        min-height: 3.5rem;
        padding: .35rem;
    }

    .guest-tv-table-teams {
        font-size: .95rem;
    }

    .guest-tv-bracket-viewport {
        height: 62vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guest-tv-stage *,
    .guest-tv-stage *::before,
    .guest-tv-stage *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}