/* World Cup 2026 Toto — premium dark UI */

:root {
    --bg: #0a0e14;
    --surface: #121820;
    --surface-2: #181f2a;
    --border: rgba(255, 255, 255, 0.06);
    --text: #eef1f5;
    --text-muted: #9ca3af;
    --gold: #e8b923;
    --gold-dim: rgba(232, 185, 35, 0.15);
    --green: #22c55e;
    --green-glow: rgba(34, 197, 94, 0.35);
    --red: #ef4444;
    --rank-1: #e8b923;
    --rank-2: #b0b8c4;
    --rank-3: #c87941;
    --rank-4: #22c55e;
    --rank-5: #3b82f6;
    --rank-default: #2a3140;
    --radius: 12px;
    --max-width: 720px;
    --desktop-max: 1180px;
    --glass-bg: rgba(18, 26, 38, 0.62);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 10px;
    --z-music-player: 1100;
    --z-update-toast: 1200;
    --z-mobile-swipe-hint: 1300;
}

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #1a2433;
    background-image: url("../assets/bg.png");
    background-position: center 35%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(1.12) saturate(1.05);
}

.page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(12, 18, 28, 0.25) 0%,
        rgba(12, 18, 28, 0.42) 50%,
        rgba(12, 18, 28, 0.58) 100%
    );
    pointer-events: none;
}

.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.app {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
}

.app:not(.loaded) {
    visibility: hidden;
}

.app.loaded {
    visibility: visible;
}

.hidden {
    display: none !important;
}

.coming-soon {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.coming-soon-footer {
    text-align: center;
}

.coming-soon-title {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.coming-soon-title .gold {
    color: var(--gold);
}

.coming-soon-tag {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.reg-counter {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(232, 185, 35, 0.12);
}

.reg-counter-layout {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
}

.reg-counter-ring-wrap {
    position: relative;
    width: 11.5rem;
    height: 11.5rem;
    flex-shrink: 0;
}

.reg-counter-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.reg-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 16;
}

.reg-ring-fill {
    fill: none;
    stroke: url(#regProgressGrad);
    stroke-width: 16;
    stroke-linecap: round;
    filter: url(#regProgressGlow);
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
    transition: none;
}

.reg-counter-pct {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.12);
}

.reg-counter-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    pointer-events: none;
}

.reg-counter-pct-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.reg-counter-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.reg-counter-goal-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
    line-height: 1.2;
}

.reg-counter-summary {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.reg-counter-participants {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.02em;
}

.reg-counter-deadline {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    color: rgba(156, 163, 175, 0.75);
}

.countdown-panel {
    position: relative;
    z-index: 1;
    padding: 0 1.25rem 1.5rem;
    border-top: 1px solid rgba(232, 185, 35, 0.1);
    background: linear-gradient(180deg, rgba(232, 185, 35, 0.04) 0%, transparent 100%);
}

.countdown-label {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.countdown-units {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.25rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.countdown-value {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text);
    text-shadow: 0 0 16px rgba(232, 185, 35, 0.15);
}

.countdown-name {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.countdown-live {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(232, 185, 35, 0.35);
}

.countdown-loading,
.countdown-empty {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.25rem 0 0.5rem;
}

.scoreboard-app {
    width: 100%;
    --swipe-screen-height: auto;
}

.scoreboard-app:not(.is-swipe-ready) .main-swipe {
    visibility: hidden;
}

.main-swipe {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 0 1rem 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.main-swipe.is-positioning {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.main-swipe::-webkit-scrollbar {
    display: none;
}

.swipe-screen {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

@media (max-width: 799px) {
    .main-swipe {
        height: var(--swipe-screen-height);
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
    }

    .swipe-screen {
        height: var(--swipe-screen-height);
        max-height: var(--swipe-screen-height);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.65rem;
    }

    .scoreboard-screen > .predictions-panel {
        margin-top: 0;
    }
}

.knockout-swipe-screens {
    display: contents;
}

.knockout-desktop-grid {
    display: none;
}

.desktop-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scoreboard-screen > .title-row {
    margin-bottom: 1rem;
}

.rules-panel,
.knockout-panel {
    border-radius: var(--radius);
    overflow: hidden;
}

.rules-panel {
    direction: rtl;
}

.rules-head,
.knockout-panel-head,
.knockout-panel-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.knockout-panel-top {
    align-items: center;
    padding: 0.85rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(3, 7, 18, 0.16);
}

.knockout-panel-top span:last-child {
    color: var(--gold);
}

.knockout-panel-head {
    align-items: flex-start;
    border-bottom: 0;
    padding-bottom: 0.5rem;
}

.rules-head {
    display: block;
}

.rules-kicker,
.knockout-kicker {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rules-title,
.knockout-title {
    margin: 0;
    font-size: clamp(1.45rem, 5vw, 2.15rem);
    line-height: 1.08;
}

.rules-copy {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.rules-grid {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

.rules-block {
    padding: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(13, 17, 23, 0.36);
}

.rules-block h3 {
    margin: 0 0 0.55rem;
    color: var(--text);
    font-size: 0.95rem;
}

.rules-block ul {
    margin: 0;
    padding-inline-start: 1.1rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.knockout-badges {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    flex-shrink: 0;
}

.knockout-points-badge,
.knockout-count {
    align-self: flex-start;
    flex-shrink: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(232, 185, 35, 0.24);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(232, 185, 35, 0.1);
    font-size: 0.72rem;
    font-weight: 800;
}

.knockout-points-badge {
    color: #0b1b11;
    border-color: rgba(74, 222, 128, 0.72);
    background: linear-gradient(135deg, #86efac, #22c55e);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.2);
}

.knockout-qualified-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.45rem 1.25rem 1rem;
}

.knockout-qualified-list.is-empty {
    display: block;
}

.knockout-qualified-list.is-empty p {
    margin: 0;
    color: var(--text-muted);
}

.qualified-team {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.3rem;
    padding: 0.12rem 0.75rem 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(255, 255, 255, 0.07);
    font-weight: 800;
}

.qualified-team .team-flag--sm {
    width: 1.65rem;
    height: 1.65rem;
}

.knockout-match-list {
    display: grid;
    gap: 0.7rem;
    padding: 0 1rem 1rem;
}

.knockout-match-card {
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(13, 17, 23, 0.38);
}

.knockout-match-card.is-live {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.knockout-match-card.is-pending {
    opacity: 0.78;
}

.knockout-match-meta,
.knockout-match-state {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.knockout-match-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.55rem;
}

.knockout-match-team {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-weight: 800;
}

.knockout-match-team span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knockout-match-team--away {
    justify-content: flex-end;
    text-align: right;
}

.knockout-match-score {
    min-width: 2.75rem;
    padding: 0.35rem 0.45rem;
    border-radius: 999px;
    text-align: center;
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.panel-title {
    margin: 0;
    padding: 0.75rem 1.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    line-height: 1.2;
}

.next-games-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
}

.next-games-scroll-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
}

.next-games-scroll-hint {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 1.75rem;
    padding-top: 0.15rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(13, 17, 23, 0.94) 0%, rgba(13, 17, 23, 0) 100%);
    opacity: 1;
    transition: opacity 0.25s ease;
}

.next-games-scroll-hint.hidden {
    opacity: 0;
}

.next-games-scroll-hint svg {
    width: 0.7rem;
    height: 0.7rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.next-games-scroll {
    overflow: hidden;
    max-height: var(--next-games-collapsed-h, 13.75rem);
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.next-games-scroll.is-height-instant,
.lb-body.is-height-instant {
    transition: none !important;
}

.next-games-scroll.is-open {
    overflow-y: auto;
    max-height: min(28rem, 62vh);
}

.next-games-scroll.has-past-results:not(.is-open) {
    overflow-y: auto;
    scrollbar-width: none;
}

.next-games-scroll.has-past-results:not(.is-open)::-webkit-scrollbar {
    display: none;
}

.next-games-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0 0.35rem;
}

.next-games-skeleton {
    display: grid;
    gap: 0;
}

.next-game-skeleton-row {
    height: 4.75rem;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.07) 48%, transparent 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    background-size: 220% 100%, 100% 100%;
    animation: skeleton-sweep 1.15s ease-in-out infinite;
}

.next-game-skeleton-row:last-child {
    border-bottom: none;
}

@keyframes skeleton-sweep {
    0% {
        background-position: 120% 0, 0 0;
    }
    100% {
        background-position: -120% 0, 0 0;
    }
}

.next-game-item {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.next-game-item:last-child {
    border-bottom: none;
}

.next-game-item--knockout {
    background: rgba(232, 185, 35, 0.035);
}

.next-game-item--pending .next-game-team {
    color: var(--text-muted);
}

.next-game-item--pending .next-game-vs-badge {
    color: var(--gold);
    border-color: rgba(232, 185, 35, 0.22);
    background: rgba(232, 185, 35, 0.08);
}

.next-game-matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.next-game-team {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text);
}

.next-game-team--home {
    justify-content: flex-end;
    text-align: right;
}

.next-game-team--away {
    justify-content: flex-start;
    text-align: left;
}

.next-game-team .team-flag--sm {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.next-game-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.next-game-vs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    flex-shrink: 0;
    justify-self: center;
}

.next-game-meta {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.next-game-item--played {
    opacity: 0.78;
}

.next-game-item--played .next-game-team-name {
    color: var(--text-muted);
}

.next-game-score-badge {
    width: auto;
    min-width: 1.5rem;
    padding: 0 0.3rem;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: var(--gold);
    border-color: rgba(232, 185, 35, 0.28);
    background: rgba(232, 185, 35, 0.08);
}

.next-game-item--next {
    background: rgba(232, 185, 35, 0.05);
}

.next-games-empty {
    margin: 0;
    padding: 1.25rem 1.15rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}


.btn-standings {
    grid-column: 1 / -1;
}

.btn-fixtures,
.btn-standings {
    display: block;
    flex-shrink: 0;
    width: calc(100% - 2.5rem);
    margin: 0.85rem 1.25rem 1.15rem;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    background: transparent;
    border: 1px solid rgba(232, 185, 35, 0.35);
    border-radius: 8px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        background 0.2s,
        margin 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-fixtures:hover,
.btn-standings:hover {
    border-color: rgba(232, 185, 35, 0.55);
    background: rgba(232, 185, 35, 0.08);
}

.coming-soon.glass-panel {
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    margin-bottom: 1.5rem;
}

.leaderboard.glass-panel {
    background: var(--glass-bg);
}

@media (min-width: 800px) {
    .app {
        max-width: var(--desktop-max);
        padding: 1.5rem 1.5rem 2.5rem;
    }

    .main-swipe {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .swipe-screen {
        flex: none;
        width: 100%;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .scoreboard-screen {
        order: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
        column-gap: 1.25rem;
        row-gap: 1.15rem;
    }

    .scoreboard-screen > .scoreboard-card {
        grid-column: 1 / -1;
        grid-row: 1;
        width: min(100%, 860px);
        justify-self: center;
    }

    .scoreboard-screen > .title-row {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-bottom: 0;
    }

    .scoreboard-screen > .predictions-panel {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .knockout-swipe-screens {
        order: 2;
        display: block;
        width: 100%;
    }

    .knockout-swipe-screens > .knockout-screen {
        display: none;
    }

    .knockout-desktop-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr) minmax(260px, 0.72fr);
        gap: 1rem;
        align-items: stretch;
    }

    .knockout-desktop-col {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-width: 0;
        height: 100%;
    }

    .knockout-desktop-col--middle {
        display: flex;
        flex-direction: column;
    }

    .knockout-desktop-col--middle .knockout-desktop-round {
        display: flex;
        min-width: 0;
    }

    .knockout-desktop-col--middle .knockout-panel {
        height: 100%;
        width: 100%;
    }

    .knockout-desktop-round--r16 {
        grid-column: auto;
    }

    .knockout-desktop-col--middle .knockout-match-list,
    .knockout-desktop-col--late .knockout-match-list {
        gap: 0.55rem;
    }

    .knockout-desktop-col--middle .knockout-match-card,
    .knockout-desktop-col--late .knockout-match-card {
        padding: 0.75rem;
    }

    .rules-screen {
        order: 3;
    }

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

    @media (max-width: 1040px) {
        .knockout-desktop-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .knockout-desktop-col--late {
            grid-column: 1 / -1;
        }

        .knockout-desktop-col--middle {
            grid-column: 2;
        }
    }

    .desktop-dashboard {
        display: contents;
    }

    .leaderboard {
        grid-column: 1;
        grid-row: 4;
        align-self: start;
    }

    .next-games-panel {
        grid-column: 2;
        grid-row: 4;
        align-self: start;
        position: sticky;
        top: 1.5rem;
        z-index: 20;
        min-width: 0;
    }

    .leaderboard {
        --lb-pad-x: 1.35rem;
    }

    .lb-col {
        font-size: 0.68rem;
    }

    .lb-row {
        padding: 0.85rem var(--lb-pad-x);
    }

    .lb-player {
        font-size: 0.9rem;
    }

    .lb-pts {
        font-size: 1.05rem;
    }

    .panel-title {
        padding: 0.75rem 1.35rem;
        font-size: 0.68rem;
    }

    .next-game-team {
        font-size: 0.82rem;
    }

    .next-game-team .team-flag--sm {
        width: 1.3rem;
        height: 1.3rem;
    }

    .next-game-meta {
        font-size: 0.82rem;
    }

    .next-game-item {
        padding: 1.05rem 1.35rem;
    }

    .hero-body {
        padding: 2.25rem 2rem 2.5rem;
    }

    .hero-score {
        font-size: 3.25rem;
    }

    .hero-team-name {
        font-size: 1.15rem;
    }

    .last-updated {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }
}

/* ── Scoreboard card (top bar + live score) ── */

.scoreboard-card {
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid rgba(232, 185, 35, 0.32);
    box-shadow:
        0 0 0 1px rgba(232, 185, 35, 0.06),
        0 0 40px rgba(232, 185, 35, 0.14),
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(232, 185, 35, 0.18);
    overflow: hidden;
}

.scoreboard-card.is-live {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.08),
        0 0 40px rgba(239, 68, 68, 0.12),
        inset 0 1px 0 rgba(232, 185, 35, 0.18);
}

.scoreboard-card .top-bar {
    margin-bottom: 0;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(232, 185, 35, 0.12);
    background: rgba(0, 0, 0, 0.15);
}

.hero-body {
    position: relative;
    padding: 2rem 1.5rem 2.25rem;
    overflow: hidden;
}

.hero-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.018) 2px,
        rgba(255, 255, 255, 0.018) 4px
    );
    pointer-events: none;
}

.hero-body::after {
    content: "";
    position: absolute;
    top: 42%;
    left: 50%;
    width: 280px;
    height: 160px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(232, 185, 35, 0.22) 0%, rgba(232, 185, 35, 0.06) 45%, transparent 72%);
    pointer-events: none;
}

.hero-body-inner {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem 1.5rem;
}

.hero-dual-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.hero-body-inner--dual .hero-dual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.hero-match-slot {
    min-width: 0;
}

.hero-body-inner--dual .hero-team-name {
    font-size: 0.82rem;
}

.hero-body-inner--dual .hero-score {
    font-size: 2rem;
}

.hero-body-inner--dual .hero-score.hero-vs {
    font-size: 1.2rem;
}

.hero-body-inner--dual .hero-flag-frame {
    width: 2.65rem;
    height: 2.65rem;
}

@media (max-width: 640px) {
    .hero-body-inner--dual .hero-dual-grid {
        grid-template-columns: 1fr;
    }
}

.hero-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.hero-flag-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.45) 100%);
    box-shadow:
        0 0 20px rgba(232, 185, 35, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -8px 16px rgba(0, 0, 0, 0.35);
}

.hero-flag-frame .team-flag--hero {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.hero-team-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
}

.hero-team-side {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    min-width: 6rem;
    padding: 0.5rem 0;
}

.hero-score {
    font-size: 2.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text);
    text-align: center;
    line-height: 1;
    text-shadow: 0 0 32px rgba(232, 185, 35, 0.35);
}

.hero-score.hero-vs {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(238, 241, 245, 0.55);
    text-shadow: 0 0 24px rgba(232, 185, 35, 0.2);
}

.hero-meta {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}

.hero-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
}

.hero-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    animation: live-pulse 1.4s ease-in-out infinite;
}

.hero-empty {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 1.25rem;
}

/* ── Match predictions ── */

.predictions-panel {
    display: grid;
    gap: 0.5rem;
    margin: -0.65rem 0 1.25rem;
}

.predictions-summary,
.prediction-card {
    border-radius: var(--radius);
    border: 1px solid rgba(232, 185, 35, 0.18);
    overflow: hidden;
}

.predictions-summary {
    padding: 1rem 1.1rem 1.15rem;
}

.qualified-panel {
    padding: 1rem 1.1rem 1.15rem;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.22);
    overflow: hidden;
}

.qualified-head {
    margin-bottom: 0.85rem;
}

.qualified-rounds {
    display: grid;
    gap: 0.55rem;
}

.qualified-round {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.42);
}

.qualified-round-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qualified-round-head span:last-child {
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

.qualified-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.qualified-team {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    max-width: 100%;
    min-height: 2rem;
    padding: 0.26rem 0.55rem 0.26rem 0.32rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.32);
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.62), rgba(15, 23, 42, 0.58));
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.1;
}

.qualified-team span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qualified-team .team-flag--sm {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}

.predictions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.predictions-title,
.prediction-card-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.predictions-sub,
.prediction-card-sub {
    margin: 0.22rem 0 0;
    font-size: 0.76rem;
    font-weight: 650;
    color: var(--text-muted);
}

.predictions-count {
    flex-shrink: 0;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(232, 185, 35, 0.28);
    background: rgba(232, 185, 35, 0.1);
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.prediction-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
    text-align: center;
}

.prediction-advance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.prediction-advance-team {
    display: grid;
    grid-template-rows: 1.35rem 2.45rem 1.85rem;
    align-items: center;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.7rem;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.prediction-advance-team--home {
    border-color: rgba(96, 165, 250, 0.24);
}

.prediction-advance-team--away {
    border-color: rgba(232, 185, 35, 0.24);
}

.prediction-advance-team--neither {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.34);
}

.prediction-advance-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-width: 0;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 850;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prediction-advance-name .team-flag--sm {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}

.prediction-outcome {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.prediction-pct {
    justify-self: start;
    font-size: clamp(1.8rem, 5vw, 2.45rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
}

.prediction-pct-note {
    color: var(--text-muted);
    font-size: 0.46em;
    font-weight: 850;
    vertical-align: baseline;
}

.prediction-outcome--home .prediction-pct {
    color: #60a5fa;
    text-shadow: 0 0 22px rgba(96, 165, 250, 0.25);
}

.prediction-outcome--draw .prediction-pct {
    color: #cbd5e1;
}

.prediction-outcome--away .prediction-pct {
    color: var(--gold);
    text-shadow: 0 0 22px rgba(232, 185, 35, 0.24);
}

.prediction-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.prediction-believer {
    display: grid;
    align-self: end;
    justify-self: stretch;
    gap: 0.08rem;
    min-width: 0;
    overflow: hidden;
    color: rgba(226, 232, 240, 0.76);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prediction-believer-label {
    color: var(--gold);
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.prediction-believer-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prediction-believer strong {
    color: var(--text);
    font-weight: 850;
}

.prediction-believer--empty {
    visibility: hidden;
}

.prediction-bar {
    display: flex;
    height: 0.58rem;
    margin-top: 1rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.prediction-bar span {
    min-width: 0;
}

.prediction-bar-home {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.prediction-bar-draw {
    background: linear-gradient(90deg, #94a3b8, #d1d5db);
}

.prediction-bar-away {
    background: linear-gradient(90deg, #f59e0b, var(--gold));
}

.prediction-bar-both {
    background: linear-gradient(90deg, #22c55e, #facc15);
}

.prediction-bar-neither {
    background: linear-gradient(90deg, #475569, #94a3b8);
}

.prediction-bar--advance {
    margin-top: 0.85rem;
}

@media (max-width: 640px) {
    .predictions-summary--advance {
        padding-inline: 0.62rem;
    }

    .prediction-advance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.34rem;
    }

    .prediction-advance-team {
        grid-template-rows: 1.05rem 1.95rem 1.5rem;
        gap: 0.12rem;
        min-height: 5.05rem;
        padding: 0.5rem 0.34rem;
    }

    .prediction-advance-team--neither {
        grid-column: auto;
    }

    .prediction-believer {
        display: block;
        overflow: hidden;
        max-width: 100%;
        font-size: 0.54rem;
        line-height: 1.1;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .prediction-believer-label {
        display: block;
        margin-bottom: 0.12rem;
        font-size: 0.44rem;
        letter-spacing: 0.08em;
    }

    .prediction-believer-value {
        display: block;
    }

    .prediction-pct {
        font-size: clamp(1.42rem, 8.2vw, 2rem);
    }

    .prediction-pct-note {
        font-size: 0.42em;
    }

    .prediction-advance-team--neither {
        justify-items: center;
        text-align: center;
    }
}

.prediction-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.prediction-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    padding: 0.95rem 1rem 1rem;
}

.prediction-scoreline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 0.65rem 0 0.25rem;
    align-self: center;
}

.prediction-scoreline .team-flag--sm {
    width: 1.5rem;
    height: 1.5rem;
}

.prediction-score {
    font-size: clamp(1.8rem, 5vw, 2.35rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text);
    text-shadow: 0 0 22px rgba(232, 185, 35, 0.24);
}

.prediction-card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 1.1rem;
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.prediction-card-meta--player {
    color: var(--text);
}

.prediction-card-meta .crown-icon {
    width: 0.95rem;
    height: 0.95rem;
}

/* ── Top bar ── */

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.top-bar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.viewer-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #dbeafe;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.34);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.16);
    white-space: nowrap;
}

.viewer-count::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.72);
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.42);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.22);
}

.live-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.85);
    animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(0.85);
    }
}

.last-updated {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.last-updated-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
}

.update-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
    flex-shrink: 0;
}

.status-dot.is-live {
    background: var(--red);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.65);
    animation: live-pulse 1.4s ease-in-out infinite;
}

#topBarDatetime,
#lastUpdateDatetime {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.status-dot.hidden {
    display: none;
}

.btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.btn-refresh:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.btn-refresh-icon {
    width: 14px;
    height: 14px;
}

/* ── Title row ── */

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.page-title .gold {
    color: var(--gold);
}

.games-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid rgba(232, 185, 35, 0.25);
    border-radius: 999px;
    white-space: nowrap;
}

.games-badge-dot {
    font-size: 0.5rem;
    line-height: 1;
}

/* ── Leaderboard ── */

.leaderboard {
    --lb-cols: 2.75rem 2rem minmax(0, 1fr) 2.5rem 3.5rem;
    --lb-gap: 1rem;
    --lb-pad-x: 1.25rem;
    display: grid;
    grid-template-columns: var(--lb-cols);
    column-gap: var(--lb-gap);
    border-radius: var(--radius);
    overflow: hidden;
}

.leaderboard.has-live-picks {
    --lb-cols: 2.75rem 2rem minmax(0, 1fr) 6.8rem 2.5rem 3.5rem;
}

.leaderboard:not(.glass-panel) {
    background: var(--surface);
    border: 1px solid var(--border);
}

.lb-tabs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    background: linear-gradient(180deg, rgba(18, 28, 42, 0.48), rgba(3, 7, 18, 0.12));
}

.lb-tab {
    position: relative;
    min-width: 0;
    padding: 0.64rem 0.45rem 0.72rem;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition:
        color 0.18s,
        border-color 0.18s,
        background 0.18s,
        box-shadow 0.18s;
}

.lb-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.32rem;
    width: min(3.6rem, 42%);
    height: 2px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(232, 185, 35, 0.24);
    opacity: 0;
    transform: translateX(-50%) scaleX(0.72);
    transition:
        opacity 0.18s,
        transform 0.18s;
}

.lb-tab:hover,
.lb-tab:focus-visible {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    outline: none;
}

.lb-tab.is-active {
    color: var(--gold);
    border-color: rgba(232, 185, 35, 0.22);
    background: rgba(232, 185, 35, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lb-tab.is-active::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

.lb-filter {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem var(--lb-pad-x);
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.025);
}

.lb-filter-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lb-filter-select {
    min-width: min(14rem, 62%);
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    background-color: rgba(3, 7, 18, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.lb-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    padding: 0.75rem var(--lb-pad-x);
    border-bottom: 1px solid var(--border);
}

.lb-header .lb-col-pts {
    grid-column: auto;
}

.lb-col {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lb-col-rank,
.lb-col-trend,
.lb-col-player {
    text-align: left;
}

.lb-col-trend {
    text-align: center;
}

.lb-col-pts {
    text-align: right;
}

.lb-col-follow {
    text-align: center;
}

.lb-col-pick,
.lb-pick-cell {
    display: none;
}

.leaderboard.has-live-picks .lb-col-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.leaderboard.has-live-picks .lb-pick-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.lb-h-short {
    display: none;
}

.lb-body {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    overflow: hidden;
    max-height: var(--lb-scroll-collapsed-h, none);
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.lb-body.is-open {
    overflow-y: auto;
    max-height: min(70vh, 52rem);
}

.lb-body.is-expanding .lb-row {
    animation: enter-lb-row 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--reveal-i, 0) * 24ms);
}

.lb-coming-soon {
    grid-column: 1 / -1;
    min-height: 13.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.lb-coming-soon-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.lb-coming-soon-copy {
    max-width: 18rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.lb-empty {
    grid-column: 1 / -1;
    min-height: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 2rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.lb-empty-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
}

.lb-empty-copy {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.lb-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-height: 3.55rem;
    padding: 0.75rem var(--lb-pad-x);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background 0.15s;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.lb-row:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.8);
    outline-offset: -2px;
}

.lb-row > *:not(.lb-row-flag):not(.lb-row-flag-fade) {
    position: relative;
    z-index: 1;
}

.lb-row::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

/* Champion pick — subtle flag watermark on the right (flagcdn <img>) */
.lb-row.lb-row--champion .lb-row-flag {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(70%, 15.5rem);
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: 0.5;
    filter: saturate(0.72) brightness(0.7) contrast(1.04);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.16) 22%, black 52%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.16) 22%, black 52%);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* Wash flag into row — heavy on the left, clear on the right */
.lb-row.lb-row--champion .lb-row-flag-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(15, 20, 28, 1) 0%,
        rgba(15, 20, 28, 0.98) 28%,
        rgba(15, 20, 28, 0.78) 50%,
        rgba(15, 20, 28, 0.34) 76%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

.lb-row.rank-1 {
    border-left-color: var(--rank-1);
}

.lb-row.rank-1::before {
    opacity: 1;
    background: linear-gradient(
        90deg,
        rgba(232, 185, 35, 0.16) 0%,
        rgba(232, 185, 35, 0.07) 38%,
        transparent 72%
    );
}

.lb-row.rank-2 {
    border-left-color: var(--rank-2);
}

.lb-row.rank-2::before {
    opacity: 1;
    background: linear-gradient(
        90deg,
        rgba(176, 184, 196, 0.14) 0%,
        rgba(176, 184, 196, 0.05) 38%,
        transparent 72%
    );
}

.lb-row.rank-3 {
    border-left-color: var(--rank-3);
}

.lb-row.rank-3::before {
    opacity: 1;
    background: linear-gradient(
        90deg,
        rgba(200, 121, 65, 0.15) 0%,
        rgba(200, 121, 65, 0.06) 38%,
        transparent 72%
    );
}

.lb-row.rank-4 {
    border-left-color: var(--rank-4);
}

.lb-row.rank-4::before {
    opacity: 1;
    background: linear-gradient(
        90deg,
        rgba(34, 197, 94, 0.13) 0%,
        rgba(34, 197, 94, 0.05) 38%,
        transparent 72%
    );
}

.lb-row.rank-5 {
    border-left-color: var(--rank-5);
}

.lb-row.rank-5::before {
    opacity: 1;
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.13) 0%,
        rgba(59, 130, 246, 0.05) 38%,
        transparent 72%
    );
}

.lb-rank-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-trend-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-follow-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-follow-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgba(156, 163, 175, 0.88);
    background: rgba(3, 7, 18, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    cursor: pointer;
    transition:
        color 0.18s,
        background 0.18s,
        border-color 0.18s,
        box-shadow 0.18s,
        transform 0.18s;
}

.lb-follow-btn:hover,
.lb-follow-btn:focus-visible {
    color: var(--gold);
    border-color: rgba(232, 185, 35, 0.55);
    background: rgba(232, 185, 35, 0.12);
    outline: none;
}

.lb-follow-btn.is-followed {
    color: var(--gold);
    border-color: rgba(232, 185, 35, 0.7);
    background: rgba(232, 185, 35, 0.16);
    box-shadow: 0 0 14px rgba(232, 185, 35, 0.22);
}

.lb-follow-btn:active {
    transform: scale(0.94);
}

.lb-follow-icon {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lb-row .lb-pts {
    grid-column: auto;
}

.lb-pick-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-width: 0;
    width: 100%;
}

.lb-pick-head-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    width: 100%;
    min-width: 0;
}

.lb-pick-head-item {
    flex: 0 0 3rem;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

.lb-pick-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 1.72rem;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    background: rgba(232, 185, 35, 0.12);
    border: 1px solid rgba(232, 185, 35, 0.32);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lb-pick-score {
    flex: 0 0 auto;
    min-width: 1.55rem;
    text-align: center;
    white-space: nowrap;
}

.lb-pick-pill--full {
    color: #dcfce7;
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(74, 222, 128, 0.7);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.24);
}

.lb-pick-pill--some {
    color: #fef3c7;
    background: rgba(232, 185, 35, 0.2);
    border-color: rgba(232, 185, 35, 0.72);
    box-shadow: 0 0 12px rgba(232, 185, 35, 0.2);
}

.lb-pick-pill--zero {
    color: #fee2e2;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(248, 113, 113, 0.68);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.lb-pick-pill--empty {
    min-width: 3rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.lb-pick-pill--empty .lb-pick-score {
    letter-spacing: 0.08em;
}

.lb-pick-advance-empty {
    min-width: 2.45rem;
}

.lb-pick-advance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 1.72rem;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.lb-pick-advance.lb-pick-pill--full,
.lb-pick-advance.lb-pick-pill--some,
.lb-pick-advance.lb-pick-pill--zero {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
}

.lb-pick-flags {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.lb-pick-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.42rem;
    height: 1.42rem;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
}

.lb-pick-flag + .lb-pick-flag {
    margin-left: -0.34rem;
}

.lb-pick-flag .team-flag--sm {
    width: 1.12rem;
    height: 1.12rem;
    box-shadow: none;
}

.lb-pick-flag.is-leading {
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.55));
}

.lb-row:last-child {
    border-bottom: none;
}

.lb-row:hover::before {
    filter: brightness(1.08);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #f5d061, #c9920a);
    color: #1a1200;
    box-shadow: 0 0 18px rgba(232, 185, 35, 0.55);
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #d4dae3, #8a939e);
    color: #1a1a1a;
    box-shadow: 0 0 12px rgba(176, 184, 196, 0.35);
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #e09a5a, #a85a20);
    color: #1a1000;
    box-shadow: 0 0 12px rgba(200, 121, 65, 0.35);
}

.rank-badge.rank-4 {
    background: linear-gradient(135deg, #4ade80, #16a34a);
    color: #052e12;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.rank-badge.rank-5 {
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #0a1628;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.rank-badge.rank-default {
    background: var(--rank-default);
    color: var(--text-muted);
    font-weight: 600;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid transparent;
    line-height: 0;
}

.trend-icon {
    display: block;
    font-size: 0.45rem;
    line-height: 1;
    font-weight: 700;
}

.trend-badge-up .trend-icon,
.trend-badge-down .trend-icon {
    transform: translateY(0.5px);
}

.trend-badge-up {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.14);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.28);
}

.trend-badge-up .trend-icon {
    color: #4ade80;
}

.trend-badge-down {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.14);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

.trend-badge-down .trend-icon {
    color: #f87171;
}

.trend-badge-same {
    display: grid;
    place-items: center;
    border-color: rgba(107, 114, 128, 0.45);
    background: rgba(107, 114, 128, 0.12);
    box-shadow: 0 0 6px rgba(107, 114, 128, 0.15);
}

.trend-badge-same::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9ca3af;
}

.lb-player {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: visible;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
}

.lb-player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.crown-icon {
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    color: var(--gold);
    flex-shrink: 0;
    overflow: visible;
    filter: drop-shadow(0 0 4px rgba(232, 185, 35, 0.5));
}

.lb-pts {
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

/* ── Player bets page ── */

.player-page {
    width: min(100% - 2rem, 980px);
    margin: 0 auto;
    padding: 1.25rem 0 2.5rem;
}

.player-page-header,
.player-overview,
.player-knockout,
.player-bets {
    border-radius: var(--radius);
    overflow: hidden;
}

.player-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.player-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(232, 185, 35, 0.35);
    color: var(--text);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.player-title-block {
    min-width: 0;
}

.player-page-kicker {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.player-page-title {
    margin: 0;
    font-size: clamp(1.45rem, 4vw, 2.4rem);
    line-height: 1.1;
}

.player-page-summary {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
}

.player-overview {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.06);
}

.player-knockout {
    margin-bottom: 1rem;
    padding: 1rem;
    background:
        linear-gradient(180deg, rgba(8, 24, 43, 0.74), rgba(4, 12, 24, 0.7)),
        var(--surface);
}

.player-knockout-head {
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px 8px 0 0;
    background: rgba(3, 7, 18, 0.28);
}

.player-knockout-head span:last-child {
    color: var(--gold);
    text-align: right;
}

.player-knockout > .player-bets-header.player-knockout-head {
    display: grid;
}

.player-knockout-carousel {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
}

.player-knockout-carousel::-webkit-scrollbar {
    display: none;
}

.player-knockout-round {
    min-width: 0;
    border: 1px solid rgba(112, 135, 166, 0.32);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(18, 35, 58, 0.46), rgba(7, 16, 31, 0.46)),
        rgba(13, 17, 23, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 16px 35px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.player-knockout-round + .player-knockout-round {
    border-left-color: rgba(112, 135, 166, 0.32);
}

.player-knockout-round-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    list-style: none;
}

.player-knockout-round-head::-webkit-details-marker {
    display: none;
}

.player-knockout-round-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(232, 185, 35, 0.18);
    border-radius: 999px;
    color: var(--gold);
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    background:
        radial-gradient(circle at 50% 38%, rgba(232, 185, 35, 0.2), transparent 34%),
        rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 18px rgba(232, 185, 35, 0.08);
}

.player-knockout-title-block {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.player-knockout-kicker {
    display: block;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.player-knockout-title {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--text);
}

.player-knockout-summary {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
    min-width: max-content;
}

.player-knockout-points {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: var(--gold);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.player-knockout-points strong {
    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1;
}

.player-knockout-points span {
    font-size: 0.82rem;
}

.player-knockout-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.player-knockout-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    padding-left: 1.05rem;
}

.player-knockout-count::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    border: 2px solid currentColor;
    transform: translateY(-50%);
}

.player-knockout-count::after {
    content: "";
    position: absolute;
    left: 0.29rem;
    top: 50%;
    transform: translate(-50%, -50%);
}

.player-knockout-count--correct::before {
    background: rgba(34, 197, 94, 0.12);
}

.player-knockout-count--correct::after {
    width: 0.22rem;
    height: 0.38rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -58%) rotate(42deg);
}

.player-knockout-count--missed::before {
    background: rgba(239, 68, 68, 0.12);
}

.player-knockout-count--missed::after {
    content: "x";
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.player-knockout-count--pending::before {
    background: rgba(142, 162, 191, 0.1);
}

.player-knockout-count--pending::after {
    width: 0.22rem;
    height: 0.22rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-34%, -52%);
}

.player-knockout-count--correct {
    color: #22c55e;
}

.player-knockout-count--missed {
    color: #ef4444;
}

.player-knockout-count--pending {
    color: #8ea2bf;
}

.player-knockout-toggle {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    position: relative;
}

.player-knockout-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: translate(-50%, -62%) rotate(45deg);
    transition: transform 0.2s ease;
}

.player-knockout-round[open] .player-knockout-toggle::before {
    transform: translate(-50%, -36%) rotate(225deg);
}

.player-knockout-team.is-pending {
    color: #8ea2bf;
}

.player-knockout-team.is-correct {
    color: #22c55e;
}

.player-knockout-team.is-missed {
    color: #ef4444;
}

.player-knockout-teams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.4rem, 1fr));
    gap: 0.65rem;
    padding: 1rem 1.1rem 1.15rem;
}

.player-knockout-teams.is-empty p,
.player-knockout-empty {
    margin: 0;
    padding: 1rem;
    color: var(--text-muted);
}

.player-knockout-team {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.55rem;
    max-width: 100%;
    padding: 0.22rem 0.95rem 0.22rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
    font-weight: 800;
}

.player-knockout-team .team-flag--sm {
    width: 1.6rem;
    height: 1.6rem;
}

.player-knockout-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-knockout-team.is-correct {
    border-color: rgba(34, 197, 94, 0.75);
    color: #f8fff9;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.26), rgba(34, 197, 94, 0.1));
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.14);
}

.player-knockout-team.is-missed {
    border-color: rgba(239, 68, 68, 0.8);
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.42), rgba(127, 29, 29, 0.12));
    filter: grayscale(1);
}

.player-knockout-team.is-missed .player-knockout-team-name {
    opacity: 0.72;
}

.player-knockout-team.is-pending {
    border-color: rgba(148, 163, 184, 0.42);
    color: var(--text);
}

.player-knockout-round--final .player-knockout-teams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.player-knockout-round--final .player-knockout-team {
    min-height: 3.25rem;
    padding: 0.35rem 1rem 0.35rem 0.65rem;
    gap: 0.65rem;
    font-size: 1.02rem;
}

.player-knockout-round--final .player-knockout-team .team-flag--sm {
    width: 2.2rem;
    height: 2.2rem;
}

.player-knockout-winner-pick {
    display: grid;
    gap: 0.55rem;
    padding: 0 1.1rem 1.2rem;
}

.player-knockout-winner-label {
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.player-knockout-team--winner {
    width: fit-content;
    min-width: min(100%, 14rem);
}

.player-knockout-team--winner .player-knockout-team-name {
    font-size: 1.12rem;
}

.player-knockout-team--winner .team-flag--sm {
    width: 2.45rem;
    height: 2.45rem;
}

.player-knockout-round--final .player-knockout-team--winner .team-flag--sm {
    width: 2.45rem;
    height: 2.45rem;
}

@media (max-width: 760px) {
    .player-knockout {
        padding: 0;
    }

    .player-knockout-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0;
        padding-top: 0;
    }

    .player-knockout-round {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .player-knockout-round + .player-knockout-round {
        border-left: 1px solid var(--border);
    }

    .player-knockout-round-head {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.95rem 1rem;
    }

    .player-knockout-round-icon,
    .player-knockout-toggle {
        display: none;
    }

    .player-knockout-summary {
        gap: 0.25rem;
    }

    .player-knockout-counts {
        display: none;
    }

    .player-knockout-teams {
        grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr));
        padding: 0.85rem 1rem 1rem;
    }

    .player-knockout-round--final .player-knockout-teams {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .player-knockout-round--final .player-knockout-team {
        min-height: 3.05rem;
        padding: 0.32rem 0.75rem 0.32rem 0.48rem;
        gap: 0.52rem;
        font-size: 0.94rem;
    }

    .player-knockout-round--final .player-knockout-team .team-flag--sm {
        width: 2.25rem;
        height: 2.25rem;
    }

    .player-knockout-round--final .player-knockout-team--winner .team-flag--sm {
        width: 2.45rem;
        height: 2.45rem;
    }

    .player-knockout-winner-pick {
        padding: 0 1rem 1rem;
    }

    .player-knockout-team--winner {
        width: 100%;
    }
}

.player-stat {
    padding: 1rem;
    background: rgba(13, 17, 23, 0.46);
}

.player-stat-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.player-stat-value {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.6rem;
    font-size: 1.25rem;
    font-weight: 800;
    white-space: nowrap;
}

.player-stat-team {
    font-size: 1rem;
    min-width: 0;
}

.player-stat-team span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-stat-subvalue {
    color: var(--gold);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.player-bets-header,
.player-bet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5rem 5rem 4rem;
    gap: 0.75rem;
    align-items: center;
}

.player-bets-header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.player-bet-row {
    min-height: 4.4rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
}

.player-bet-row:last-child {
    border-bottom: none;
}

.player-bet-row--played {
    background: rgba(232, 185, 35, 0.035);
}

.player-bet-row--focus {
    background:
        linear-gradient(90deg, rgba(232, 185, 35, 0.14), rgba(30, 136, 229, 0.08)),
        rgba(13, 17, 23, 0.52);
    border-left-color: var(--gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.player-bet-row--full {
    border-left-color: #4ade80;
}

.player-bet-row--some {
    border-left-color: var(--gold);
}

.player-bet-row--zero {
    border-left-color: var(--red);
}

.player-bet-match {
    min-width: 0;
    display: grid;
    grid-template-columns: 5.7rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
}

.player-bet-meta {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.player-bet-match-num,
.player-bet-date {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}

.player-bet-teams {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.32rem;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 800;
}

.player-bet-vs {
    display: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.player-bet-mobile-summary {
    display: none;
}

.player-bet-team {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    line-height: 1.2;
}

.player-bet-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-bet-score,
.player-bet-points {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.player-bet-score {
    width: 4.35rem;
    min-height: 2rem;
    flex-direction: column;
    gap: 0.1rem;
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.player-bet-row--played .player-bet-score {
    background: rgba(7, 11, 18, 0.48);
    border-color: rgba(232, 185, 35, 0.14);
}

.player-bet-score-label {
    display: none;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-bet-score-value {
    line-height: 1.1;
}

.player-bet-points {
    min-width: 2.25rem;
    min-height: 2rem;
    padding: 0.3rem 0.45rem;
    flex-direction: column;
    gap: 0.1rem;
    border-radius: 999px;
    text-align: center;
}

.player-points--full {
    color: #052e12;
    background: #4ade80;
}

.player-points--some {
    color: #1a1200;
    background: var(--gold);
}

.player-points--zero {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.22);
}

.player-points--pending {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
}

.player-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 6.4rem;
    z-index: calc(var(--z-music-player) - 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    border: 1px solid rgba(232, 185, 35, 0.38);
    border-radius: 50%;
    color: var(--gold);
    background: rgba(13, 20, 31, 0.9);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.65rem) scale(0.96);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.player-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.player-back-to-top:hover,
.player-back-to-top:focus-visible {
    border-color: rgba(232, 185, 35, 0.72);
    background: rgba(20, 29, 43, 0.96);
    outline: none;
}

.player-back-to-top svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ── Flags ── */

.team-flag {
    display: inline-block;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    overflow: hidden;
    /* Keep flag-icons contain/center — cover crops Saltire & similar flags into an “X” */
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.team-flag--hero {
    width: 2.35rem;
    height: 2.35rem;
}

.team-flag--sm {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
}

/* ── Responsive ── */

@media (max-width: 520px) {
    .app {
        padding: 1rem 0.75rem 2rem;
    }

    .page-title {
        font-size: 1.1rem;
    }

    .hero-team-name {
        width: 5.4rem;
        max-width: 5.4rem;
        font-size: clamp(0.6rem, 2.8vw, 0.68rem);
        letter-spacing: 0.045em;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hero-score {
        font-size: 2rem;
    }

    .hero-score.hero-vs {
        font-size: 1.15rem;
    }

    .hero-body {
        padding: 1.25rem 0.85rem 1.5rem;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(5.8rem, auto) minmax(0, 1fr);
        gap: 0.55rem;
    }

    .hero-team {
        align-items: center;
    }

    .hero-center {
        min-width: 5.8rem;
    }

    .predictions-panel {
        margin-top: 0;
        gap: 0.45rem;
    }

    .predictions-summary {
        padding: 0.9rem 0.85rem 1rem;
    }

    .qualified-panel {
        padding: 0.85rem;
    }

    .qualified-round {
        padding: 0.62rem;
    }

    .qualified-team {
        max-width: 100%;
        font-size: 0.72rem;
    }

    .predictions-head {
        gap: 0.65rem;
        margin-bottom: 0.95rem;
    }

    .predictions-count {
        display: none;
    }

    .prediction-outcomes {
        gap: 0.45rem;
    }

    .prediction-advance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.36rem;
    }

    .prediction-advance-team {
        grid-template-rows: 1.05rem 1.95rem 1.5rem;
        padding: 0.55rem 0.34rem;
    }

    .prediction-advance-team--neither {
        grid-column: auto;
    }

    .prediction-advance-name {
        gap: 0.24rem;
        font-size: 0.62rem;
    }

    .prediction-advance-name .team-flag--sm {
        width: 1rem;
        height: 1rem;
    }

    .prediction-label {
        font-size: 0.48rem;
        letter-spacing: 0.08em;
    }

    .prediction-believer {
        font-size: 0.52rem;
        white-space: nowrap;
    }

    .prediction-believer-label {
        font-size: 0.42rem;
    }

    .prediction-card {
        padding: 0.85rem;
        min-width: 0;
        grid-template-rows: 1.6rem 2.4rem 1fr auto;
    }

    .prediction-scoreline {
        gap: 0.5rem;
        margin-top: 0.35rem;
    }

    .prediction-scoreline .team-flag--sm {
        width: 1.25rem;
        height: 1.25rem;
    }

    .prediction-card-title {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        line-height: 1.2;
    }

    .prediction-card-sub {
        font-size: 0.66rem;
        line-height: 1.25;
    }

    .prediction-card-meta {
        font-size: 0.68rem;
    }

    .prediction-score {
        font-size: clamp(1.45rem, 8vw, 1.8rem);
    }

    .scoreboard-card .top-bar {
        padding: 0.7rem 0.85rem;
        align-items: center;
        gap: 0.55rem;
    }

    .last-updated {
        flex: 1 1 auto;
        min-width: 0;
    }

    .update-label {
        font-size: 0.6rem;
    }

    #topBarDatetime {
        font-size: 0.68rem;
    }

    .top-bar-actions {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0.15rem;
        min-width: 0;
        min-height: 2.35rem;
        padding: 0.22rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(3, 7, 18, 0.22);
    }

    .viewer-count {
        order: 1;
        padding: 0.24rem 0.5rem;
        font-size: 0.52rem;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .btn-refresh {
        order: 3;
        position: relative;
        width: 1.9rem;
        height: 1.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 0;
        color: rgba(248, 250, 252, 0.88);
        background: transparent;
        border-color: transparent;
        border-radius: 50%;
        box-shadow: none;
    }

    .top-bar-actions:has(.viewer-count.hidden):has(.live-badge.hidden) {
        flex-basis: 2.35rem;
        width: 2.35rem;
        height: 2.35rem;
    }

    .btn-refresh:hover {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
    }

    .live-badge {
        order: 2;
        padding: 0.24rem 0.5rem;
        font-size: 0.52rem;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .btn-refresh-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 15px;
        height: 15px;
        display: block;
    }

    .lb-h-long {
        display: none;
    }

    .lb-h-short {
        display: inline;
    }

    .leaderboard {
        --lb-cols: 2.15rem 1.7rem minmax(0, 1fr) 2rem 2.65rem;
        --lb-gap: 0.55rem;
        --lb-pad-x: 0.75rem;
    }

    .leaderboard.has-live-picks {
        --lb-cols: 1.85rem 1.35rem minmax(0, 1fr) 5.35rem 1.65rem 2.15rem;
        --lb-gap: 0.32rem;
    }

    .lb-tabs {
        gap: 0.25rem;
        padding: 0.45rem;
    }

    .lb-tab {
        padding: 0.55rem 0.28rem;
        font-size: 0.54rem;
        letter-spacing: 0.06em;
        border-radius: 7px;
    }

    .lb-filter {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .lb-filter-select {
        min-width: 58%;
        font-size: 0.72rem;
    }

    .lb-header,
    .lb-row {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .lb-row {
        min-height: 3.25rem;
    }

    .lb-body.is-open {
        overflow-y: visible;
        max-height: none;
    }

    .lb-col {
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }

    .lb-player {
        font-size: 0.78rem;
        gap: 0.25rem;
        min-width: 0;
    }

    .lb-pts {
        font-size: 0.95rem;
    }

    .lb-pick-pill {
        min-width: 2.45rem;
        min-height: 1.34rem;
        padding: 0.14rem 0.22rem;
        font-size: 0.68rem;
    }

    .lb-pick-list,
    .lb-pick-head-list {
        gap: 0.24rem;
    }

    .lb-pick-head-item {
        flex-basis: 2.45rem;
    }

    .lb-pick-score {
        min-width: 1.28rem;
    }

    .lb-pick-advance-empty {
        min-width: 2rem;
    }

    .lb-pick-advance {
        min-width: 1.9rem;
        min-height: 1.34rem;
    }

    .lb-pick-flag {
        width: 1.12rem;
        height: 1.12rem;
    }

    .lb-pick-flag + .lb-pick-flag {
        margin-left: -0.28rem;
    }

    .lb-pick-flag .team-flag--sm {
        width: 0.9rem;
        height: 0.9rem;
    }

    .lb-follow-btn {
        width: 1.75rem;
        height: 1.75rem;
    }

    .lb-follow-icon {
        width: 0.9rem;
        height: 0.9rem;
    }

    .lb-row.lb-row--champion .lb-row-flag {
        width: min(72%, 12.5rem);
        opacity: 0.48;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.14) 22%, black 52%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.14) 22%, black 52%);
    }

    .lb-player-name {
        overflow: hidden;
        text-overflow: ellipsis;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    }

    .rank-badge {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.68rem;
    }

    .crown-icon {
        width: 14px;
        height: 14px;
    }

    .trend-badge {
        width: 18px;
        height: 18px;
    }

    .countdown-panel {
        padding: 0 0.85rem 1.25rem;
    }

    .countdown-value {
        font-size: 1.1rem;
    }

    .coming-soon-title {
        font-size: 1.1rem;
    }

    .reg-counter-layout {
        gap: 1rem;
        max-width: none;
    }

    .reg-counter-ring-wrap {
        width: 8.75rem;
        height: 8.75rem;
    }

    .reg-counter-pct {
        font-size: 1.75rem;
    }

    .reg-counter-goal-title {
        font-size: 1.1rem;
    }

    .reg-counter-summary {
        font-size: 0.76rem;
    }

    .hero-flag-frame {
        width: 2.75rem;
        height: 2.75rem;
    }

    .hero-flag-frame .team-flag--hero {
        width: 2rem;
        height: 2rem;
    }

    .trend-badge-same::after {
        width: 3.5px;
        height: 3.5px;
    }
}

/* ── Admin (mobile-first) ── */

.admin-body {
    -webkit-tap-highlight-color: transparent;
}

.admin-app {
    --max-width: 100%;
    --admin-tab-h: 3.25rem;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: calc(var(--admin-tab-h) + env(safe-area-inset-bottom, 0px) + 1.25rem);
}

@media (min-width: 480px) {
    .admin-app {
        --max-width: 520px;
    }
}

@media (min-width: 768px) {
    .admin-app {
        --max-width: 640px;
    }
}

.admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.admin-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 14, 20, 0.96);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
}

.admin-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--admin-tab-h);
    padding: 0.5rem 0.35rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.admin-tab.is-active {
    color: var(--gold);
    background: rgba(232, 185, 35, 0.1);
}

.admin-tab.hidden {
    display: none;
}

.admin-tabs:has(#tabBtnPlayers.hidden) {
    grid-template-columns: repeat(3, 1fr);
}

.admin-tab-panels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.admin-tab-panel {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.admin-tab-panel.is-active {
    display: flex;
}

.admin-empty-state {
    margin: 1.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.admin-login-card {
    width: 100%;
    max-width: 420px;
}

.admin-login-hero {
    padding: 2rem 1.5rem 1.25rem;
}

.admin-login-title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
}

.admin-login-tag {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.admin-login-form {
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(232, 185, 35, 0.12);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0 0.35rem;
}

.admin-header-brand {
    min-width: 0;
    flex: 1;
}

.admin-header .page-title {
    margin-bottom: 0.15rem;
    font-size: 1rem;
    line-height: 1.2;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.admin-header-actions .btn-refresh {
    padding: 0.45rem 0.55rem;
    font-size: 0.65rem;
}

.admin-header-btn-label {
    display: none;
}

.admin-file-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

@media (min-width: 480px) {
    .admin-header .page-title {
        font-size: 1.1rem;
    }

    .admin-header-actions .btn-refresh {
        padding: 0.45rem 0.7rem;
    }

    .admin-header-btn-label {
        display: inline;
    }
}

.admin-nav-link {
    text-decoration: none;
}

.admin-status {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.admin-publish-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
}

.admin-publish-card {
    margin-bottom: 0;
    background: var(--surface);
    border: 1px solid rgba(232, 185, 35, 0.28);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.admin-publish-card .admin-mode-detail,
.admin-publish-card .admin-mode-banner {
    background: var(--surface-2);
}

.admin-publish-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-mode-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(232, 185, 35, 0.35);
    background: rgba(232, 185, 35, 0.1);
    color: var(--gold);
}

.admin-mode-chip.is-local {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.admin-mode-toggle {
    padding: 0.3rem 0.65rem;
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.admin-mode-toggle:hover {
    color: var(--text);
    border-color: rgba(232, 185, 35, 0.3);
}

.admin-mode-detail {
    border-bottom: 1px solid var(--border);
}

.admin-mode-banner {
    margin: 0;
    padding: 0.55rem 1.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.admin-mode-banner.mode-local {
    background: rgba(34, 197, 94, 0.08);
    color: #bbf7d0;
}

.admin-mode-banner.mode-prod {
    background: rgba(232, 185, 35, 0.06);
    color: #fde68a;
}

.admin-mode-banner a {
    color: var(--gold);
}

.admin-mode-banner code {
    font-size: 0.85em;
}

.admin-publish-match-list {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.admin-publish-match-item {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid rgba(232, 185, 35, 0.28);
    border-radius: 10px;
    background: rgba(9, 14, 22, 0.34);
}

.admin-publish-match-list.is-empty {
    min-height: 3rem;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 10px;
}

.admin-publish-match-badge {
    justify-self: center;
    color: var(--gold);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-publish-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
}

.admin-publish-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.75rem;
    background: var(--surface-2);
}

.admin-publish-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 1.5rem;
}

.admin-publish-bar-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.admin-publish-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
}

.admin-publish-match.is-empty .admin-publish-scores {
    opacity: 0.45;
    pointer-events: none;
}

.admin-publish-num {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.04em;
}

.admin-publish-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    text-align: center;
}

.admin-publish-team--home {
    justify-content: center;
}

.admin-publish-team--away {
    justify-content: center;
}

.admin-publish-flag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.admin-publish-flag .team-flag--sm {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

.admin-publish-team-name {
    display: block;
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.admin-publish-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.admin-publish-hint {
    margin: 0;
    padding: 0.35rem 0.75rem 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
}

.admin-publish-form .admin-msg {
    margin: 0;
    padding: 0.25rem 0.75rem 0.5rem;
    min-height: 0;
    text-align: center;
    font-size: 0.72rem;
}

.btn-gold--publish {
    width: min(100%, 12rem);
    min-height: 2.45rem;
    align-self: center;
    padding: 0.55rem 0.9rem;
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-gold--slim {
    padding: 0.55rem 0.85rem;
    font-size: 0.68rem;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.admin-panel-msg {
    margin: 0;
    padding: 0.35rem 0.85rem 0;
    min-height: 1.2em;
}

.admin-panel-head {
    padding: 0.45rem 0.55rem 0.4rem;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.admin-panel-head .admin-panel-title {
    padding: 0;
    border: none;
    background: transparent;
}

.admin-panel-sub {
    margin: 0.15rem 0 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.admin-panel-head--autopilot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-panel-head--knockout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-autopilot {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.admin-autopilot-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    text-align: right;
}

.admin-autopilot-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}

.admin-autopilot-hint {
    font-size: 0.6rem;
    color: var(--text-muted);
    line-height: 1.2;
    max-width: 7.5rem;
}

.admin-autopilot-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
}

.admin-autopilot-switch:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 999px;
}

.admin-autopilot-switch-track {
    position: relative;
    width: 2.5rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--border);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.admin-autopilot-switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--text-muted);
    transform: translateY(-50%);
    transition: transform 0.2s ease, background 0.2s ease;
}

.admin-autopilot-switch.is-on .admin-autopilot-switch-track {
    background: rgba(212, 175, 55, 0.25);
    border-color: rgba(212, 175, 55, 0.55);
}

.admin-autopilot-switch.is-on .admin-autopilot-switch-thumb {
    transform: translate(1.05rem, -50%);
    background: var(--gold);
}

.admin-autopilot-switch.is-on .admin-autopilot-state {
    color: var(--gold);
}

.admin-autopilot-state {
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 1.6rem;
    text-align: left;
}

.admin-autopilot-switch.is-off .admin-autopilot-state {
    color: var(--text-muted);
}

.admin-match-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.6rem 0.75rem;
    max-height: none;
}

.admin-match-card {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr) 2.7rem minmax(0, 1fr) 2.45rem;
    align-items: center;
    gap: 0.45rem;
    min-height: 4.15rem;
    padding: 0.72rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.admin-match-card.is-clickable:active {
    transform: scale(0.995);
}

.admin-match-card.is-unplayed {
    color: var(--text-muted);
}

.admin-match-card.is-next {
    border-color: rgba(232, 185, 35, 0.35);
}

.admin-match-card.is-selected {
    border-color: rgba(232, 185, 35, 0.55);
    background: rgba(232, 185, 35, 0.08);
    box-shadow: inset 3px 0 0 var(--gold);
}

.admin-match-card.is-live {
    border-color: rgba(239, 68, 68, 0.4);
}

.admin-match-card.is-live.is-selected {
    box-shadow: inset 3px 0 0 #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.admin-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    border: 1px solid rgba(232, 185, 35, 0.38);
    border-radius: 50%;
    color: var(--gold);
    background: rgba(13, 20, 31, 0.92);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.65rem) scale(0.96);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.admin-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.admin-back-to-top:hover,
.admin-back-to-top:focus-visible {
    border-color: rgba(232, 185, 35, 0.72);
    background: rgba(20, 29, 43, 0.96);
    outline: none;
}

.admin-back-to-top svg {
    width: 1.25rem;
    height: 1.25rem;
}

.admin-match-num {
    align-self: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    line-height: 1;
}

.admin-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    text-align: center;
}

.admin-match-team--home {
    justify-content: center;
}

.admin-match-team--away {
    justify-content: center;
}

.admin-match-flag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.admin-match-flag .team-flag--sm {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.admin-match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex-shrink: 0;
    align-self: stretch;
    padding: 0.1rem 0;
}

.admin-match-live-badge {
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.22);
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    line-height: 1.15;
}

.admin-match-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    min-height: 1.5rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted);
    text-align: center;
    line-height: 1;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-match-score.is-played-score {
    color: var(--text);
    border-color: rgba(232, 185, 35, 0.2);
    background: rgba(232, 185, 35, 0.08);
}

.admin-match-card.is-unplayed .admin-match-score {
    font-size: 0.72rem;
    font-weight: 600;
}

.admin-match-live {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.admin-match-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

.admin-match-team--away .admin-match-name {
    text-align: center;
}

.admin-live-btn,
.admin-restore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}

.admin-live-btn svg,
.admin-restore-btn svg {
    width: 0.85rem;
    height: 0.85rem;
}

.admin-live-btn--play:hover {
    color: var(--gold);
    border-color: rgba(232, 185, 35, 0.45);
    background: rgba(232, 185, 35, 0.12);
}

.admin-live-btn--stop {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.14);
}

.admin-live-btn--stop:hover {
    color: #fff;
    border-color: rgba(239, 68, 68, 0.65);
    background: rgba(239, 68, 68, 0.28);
}

.admin-restore-btn {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.38);
    background: rgba(59, 130, 246, 0.1);
}

.admin-restore-btn:hover {
    color: #fff;
    border-color: rgba(96, 165, 250, 0.62);
    background: rgba(59, 130, 246, 0.22);
}

.admin-live-btn:active,
.admin-restore-btn:active {
    transform: scale(0.94);
}

.admin-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-select,
.admin-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.admin-select:focus,
.admin-input:focus,
.admin-score-input:focus {
    outline: none;
    border-color: rgba(232, 185, 35, 0.45);
    box-shadow: 0 0 0 2px rgba(232, 185, 35, 0.12);
}

.admin-score-sep {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1;
}

.admin-score-input {
    width: 100%;
    padding: 0.65rem 0.4rem;
    font-family: inherit;
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--text);
    background: var(--surface);
    border: 1px solid rgba(232, 185, 35, 0.2);
    border-radius: 8px;
    -moz-appearance: textfield;
}

.admin-score-input.admin-score-input--inline {
    width: 2.1rem;
    max-width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    padding: 0;
    font-size: 1rem;
    border-radius: 8px;
}

.admin-score-input::-webkit-outer-spin-button,
.admin-score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.admin-msg {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    min-height: 1.2em;
}

.admin-msg.is-error {
    color: #fca5a5;
}

.admin-msg.is-success {
    color: #86efac;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1.25rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0a0e14;
    background: linear-gradient(180deg, #f0cc4a 0%, var(--gold) 55%, #c99a12 100%);
    border: 1px solid rgba(232, 185, 35, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s;
}

.btn-gold:hover {
    filter: brightness(1.06);
}

.btn-gold:active {
    transform: scale(0.99);
}

.btn-gold:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-gold--compact {
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    width: 100%;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    align-items: start;
}

.admin-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.admin-panel-title {
    margin: 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.admin-lb-list {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow-y: visible;
}

.admin-lb-row {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}

.admin-lb-row:last-child {
    border-bottom: none;
}

.admin-lb-rank {
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    font-size: 0.78rem;
}

.admin-lb-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-lb-pts {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.admin-api-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-api-head .admin-panel-title {
    border-bottom: none;
    background: transparent;
}

.admin-api-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem;
}

.admin-api-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.65rem;
    background: rgba(15, 23, 42, 0.42);
}

.admin-api-row.is-update {
    border-color: rgba(232, 185, 35, 0.75);
    background: rgba(232, 185, 35, 0.1);
}

.admin-api-row.is-unmatched {
    border-color: rgba(239, 68, 68, 0.38);
}

.admin-api-row-head,
.admin-api-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.admin-api-row-head {
    justify-content: space-between;
}

.admin-api-match,
.admin-api-state,
.admin-api-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-api-match {
    color: var(--gold);
    background: rgba(232, 185, 35, 0.1);
}

.admin-api-state {
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.1);
}

.admin-api-status {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
}

.admin-api-row.is-update .admin-api-status {
    color: var(--gold);
    background: rgba(232, 185, 35, 0.16);
}

.admin-api-row.is-unmatched .admin-api-status {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
}

.admin-api-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-api-teams span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.admin-api-teams span:last-child {
    justify-content: flex-end;
    text-align: right;
}

.admin-api-teams strong {
    min-width: 3.1rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.45rem;
    text-align: center;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.admin-api-meta {
    flex-wrap: wrap;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.admin-api-empty {
    margin: 0;
    padding: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.admin-registration {
    margin-bottom: 0;
    border: none;
    background: transparent;
}

.admin-reg-intro {
    margin: 0;
    padding: 0;
    font-size: inherit;
}

.admin-reg-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 0.85rem;
}

@media (max-width: 560px) {
    .admin-reg-stats {
        grid-template-columns: 1fr;
    }
}

.admin-reg-stat {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.admin-reg-stat-head {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-reg-value {
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    line-height: 1;
}

.admin-reg-goal {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.admin-reg-bar {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.admin-reg-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #c99a12, var(--gold));
    transition: width 0.35s ease;
}

.admin-reg-bar--prize .admin-reg-bar-fill {
    background: linear-gradient(90deg, #15803d, var(--green));
}

.admin-reg-deadline {
    margin: 0;
    padding: 0 0.85rem 0.65rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-reg-editor {
    padding: 0 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.admin-reg-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(232, 185, 35, 0.09), rgba(34, 197, 94, 0.04)),
        rgba(0, 0, 0, 0.16);
}

.admin-field-help {
    margin: 0.3rem 0 0;
    max-width: 30rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.admin-reg-count-pill {
    flex-shrink: 0;
    padding: 0.35rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(232, 185, 35, 0.24);
    border-radius: 999px;
    background: rgba(232, 185, 35, 0.1);
}

.admin-reg-editor .btn-gold {
    max-width: none;
}

.admin-player-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 7.5rem;
    padding: 0.85rem;
    align-content: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(24, 31, 42, 0.86);
}

.admin-player-empty {
    margin: auto;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.admin-player-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    height: 2rem;
    padding: 0 0.3rem 0 0.7rem;
    color: var(--text);
    border: 1px solid rgba(232, 185, 35, 0.22);
    border-radius: 999px;
    background: rgba(232, 185, 35, 0.1);
}

.admin-player-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-player-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
}

.admin-player-remove:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.28);
    border-color: rgba(239, 68, 68, 0.4);
}

.admin-player-add-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
}

.admin-knockout-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
    align-self: center;
}

.admin-knockout-head-actions .btn-gold {
    width: auto;
    min-width: 9.5rem;
}

.admin-add-player-btn {
    width: auto;
    min-width: 5.5rem;
}

.admin-knockout-eliminated {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: rgba(8, 13, 20, 0.34);
}

.admin-knockout-eliminated-head,
.admin-knockout-eliminated-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.admin-knockout-eliminated-controls {
    align-items: stretch;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: end;
}

.admin-knockout-eliminated-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.45rem;
    max-height: 14rem;
    overflow: auto;
    padding-right: 0.15rem;
}

.admin-knockout-eliminated-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    min-height: 2.15rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 999px;
    color: var(--text);
    background: rgba(24, 31, 42, 0.72);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.admin-knockout-eliminated-chip.is-selected {
    border-color: rgba(239, 68, 68, 0.78);
    background: rgba(127, 29, 29, 0.36);
    color: #fecaca;
}

.admin-knockout-eliminated-chip .team-flag--sm {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
}

.admin-knockout-eliminated-chip span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-knockout-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.6rem 0.75rem;
}

.admin-knockout-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(13, 17, 23, 0.42);
}

.admin-knockout-card.is-live {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.admin-knockout-card.is-played {
    border-color: rgba(232, 185, 35, 0.26);
}

.admin-knockout-card-head,
.admin-knockout-teams,
.admin-knockout-controls,
.admin-knockout-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.admin-knockout-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    justify-content: initial;
    align-items: center;
    min-width: 0;
}

.admin-knockout-api-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(232, 185, 35, 0.12);
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(232, 185, 35, 0.045);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-knockout-api-meta span:last-child {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-knockout-round,
.admin-knockout-date,
.admin-knockout-state {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.admin-knockout-round {
    margin-left: 0.4rem;
    color: var(--text);
}

.admin-knockout-state {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: var(--gold);
    background: rgba(232, 185, 35, 0.1);
}

.admin-knockout-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
}

.admin-knockout-team {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.admin-knockout-team--away {
    grid-template-columns: minmax(0, 1fr) auto;
}

.admin-knockout-team--away .admin-knockout-team-flag {
    order: 2;
}

.admin-knockout-team-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

.admin-knockout-team-flag .team-flag--sm {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
}

.admin-knockout-team-select,
.admin-knockout-winner {
    width: 100%;
    min-width: 0;
    height: 2.45rem;
    padding: 0 0.65rem;
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(24, 31, 42, 0.92);
}

.admin-knockout-center {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    min-width: 4.8rem;
}

.admin-knockout-scoreline {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 0.35rem;
}

.admin-knockout-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.admin-knockout-score {
    width: 3.8rem;
}

.admin-knockout-tiebreak {
    display: none;
}

.admin-knockout-card.is-tie .admin-knockout-tiebreak {
    display: block;
}

.admin-knockout-publish-item.is-tie .admin-knockout-tiebreak {
    display: block;
}

.admin-knockout-winner {
    width: min(100%, 15rem);
}

.admin-knockout-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
}

.admin-knockout-actions .btn-refresh,
.admin-knockout-actions .btn-gold {
    width: 100%;
    min-height: 2.45rem;
}

.admin-knockout-publish-card .admin-publish-bar {
    padding: 0.75rem;
}

.admin-knockout-publish-item {
    position: relative;
}

.admin-knockout-publish-live {
    margin: 0.25rem auto 0;
}

.admin-knockout-publish-team {
    gap: 0.35rem;
}

.admin-knockout-publish-select {
    width: min(100%, 8.5rem);
    height: 2.15rem;
    padding: 0 0.55rem;
    font-size: 0.7rem;
    text-align: center;
}

.admin-knockout-publish-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.35rem;
}

.admin-knockout-row .admin-match-score {
    color: var(--text);
}

@media (max-width: 560px) {
    .admin-reg-editor-head {
        flex-direction: column;
    }

    .admin-player-add-row {
        grid-template-columns: 1fr;
    }

    .admin-add-player-btn {
        width: 100%;
    }

    .admin-knockout-eliminated {
        gap: 0.55rem;
        padding: 0.65rem 0.6rem;
    }

    .admin-knockout-eliminated-head {
        align-items: flex-start;
    }

    .admin-knockout-eliminated-controls {
        grid-template-columns: 4.25rem 1fr;
    }

    .admin-knockout-eliminated-controls .btn-gold {
        grid-column: auto;
    }

    .admin-knockout-eliminated-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 10.5rem;
    }

    .admin-knockout-eliminated-chip {
        min-height: 2rem;
        padding: 0.32rem 0.45rem;
        font-size: 0.66rem;
    }

    .admin-knockout-list {
        gap: 0.45rem;
        padding: 0.5rem;
    }

    .admin-knockout-card {
        gap: 0.5rem;
        padding: 0.6rem;
        border-radius: 8px;
    }

    .admin-knockout-card-head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem;
    }

    .admin-knockout-date {
        font-size: 0.66rem;
    }

    .admin-knockout-state {
        grid-column: auto;
        justify-self: end;
        padding: 0.15rem 0.42rem;
        font-size: 0.58rem;
    }

    .admin-knockout-api-meta {
        display: none;
    }

    .admin-knockout-api-meta span:last-child {
        text-align: left;
    }

    .admin-knockout-teams {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.35rem;
    }

    .admin-knockout-team,
    .admin-knockout-team--away {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        text-align: center;
    }

    .admin-knockout-team--away .admin-knockout-team-flag {
        order: 0;
    }

    .admin-knockout-team-flag {
        width: 1.55rem;
        height: 1.55rem;
    }

    .admin-knockout-team-flag .team-flag--sm {
        width: 1.5rem;
        height: 1.5rem;
    }

    .admin-knockout-team-select {
        height: 2.05rem;
        padding: 0 1.65rem 0 0.45rem;
        font-size: 0.68rem;
        text-align: center;
    }

    .admin-knockout-center {
        min-width: 3.9rem;
    }

    .admin-knockout-scoreline {
        gap: 0.22rem;
    }

    .admin-knockout-score {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        font-size: 1rem;
    }

    .admin-knockout-tiebreak {
        margin-top: -0.1rem;
    }

    .admin-knockout-winner {
        width: 100%;
        max-width: none;
        height: 2.25rem;
        font-size: 0.74rem;
    }

    .admin-knockout-actions {
        display: grid;
        grid-template-columns: 2.35rem minmax(0, 1fr);
        gap: 0.4rem;
    }

    .admin-knockout-actions .btn-refresh,
    .admin-knockout-actions .btn-gold {
        width: 100%;
        min-height: 2.25rem;
        padding: 0.5rem 0.35rem;
        font-size: 0.64rem;
    }

    .admin-knockout-actions .admin-live-btn {
        width: 2.35rem;
        height: 2.35rem;
        min-height: 2.35rem;
        padding: 0;
    }
}

/* Mobile: title row + four header buttons on one line */
@media (max-width: 767px) {
    .admin-back-to-top {
        right: 0.85rem;
        bottom: calc(4.65rem + env(safe-area-inset-bottom, 0px));
        width: 2.65rem;
        height: 2.65rem;
    }

    .admin-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        margin-bottom: 1.1rem;
    }

    .admin-header-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.3rem;
        width: 100%;
    }

    .admin-header-actions .btn-refresh {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        min-height: 2.35rem;
        padding: 0.4rem 0.25rem;
        font-size: 0.58rem;
        letter-spacing: 0.05em;
    }

    .admin-header-actions .admin-header-btn-label {
        display: none;
    }

    .admin-tab-panels {
        gap: 0.85rem;
    }

    .admin-publish-match {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.4rem 0.5rem;
    }

    .admin-publish-team {
        align-items: center;
    }

    .admin-publish-team-name {
        font-size: 0.68rem;
        line-height: 1.15;
    }

    .admin-publish-flag .team-flag--sm {
        width: 1.5rem;
        height: 1.5rem;
    }

    .admin-score-input.admin-score-input--inline {
        width: 1.95rem;
        max-width: 1.95rem;
        height: 1.95rem;
        font-size: 0.92rem;
    }

    .admin-publish-scores {
        gap: 0.25rem;
    }

    .admin-score-sep {
        font-size: 0.8rem;
    }

    .admin-match-card {
        grid-template-columns: 1.45rem minmax(0, 1fr) minmax(3rem, max-content) minmax(0, 1fr) 2.35rem;
        gap: 0.35rem;
        padding: 0.65rem 0.45rem;
    }

    .admin-match-score {
        min-width: 2.5rem;
        padding: 0.15rem 0.35rem;
        font-size: 0.8rem;
    }

    .admin-match-name {
        font-size: 0.68rem;
        line-height: 1.15;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .admin-match-flag .team-flag--sm {
        width: 1.55rem;
        height: 1.55rem;
    }
}

@media (min-width: 768px) {
    .admin-app {
        --max-width: 900px;
        padding-top: 1.25rem;
    }

    .admin-header {
        margin-bottom: 1.25rem;
        padding: 0;
    }

    .admin-publish-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        padding: 0.95rem 1rem;
    }

    .admin-publish-meta {
        align-self: stretch;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.45rem;
        min-width: 7rem;
    }

    .admin-publish-match {
        min-width: 0;
        gap: 1.1rem;
    }

    .admin-publish-team-name {
        max-width: 7rem;
        font-size: 0.82rem;
    }

    .admin-publish-flag .team-flag--sm {
        width: 2rem;
        height: 2rem;
    }

    .admin-score-input.admin-score-input--inline {
        width: 2.5rem;
        max-width: 2.5rem;
        height: 2.5rem;
        font-size: 1.1rem;
    }

    .btn-gold--publish {
        width: 6.5rem;
        min-height: 2.7rem;
        align-self: center;
        padding: 0.65rem 0.9rem;
        font-size: 0.7rem;
    }

    .admin-match-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        padding: 0.7rem 0.75rem 0.9rem;
    }

    .admin-match-card {
        grid-template-columns: 1.8rem minmax(0, 1fr) 3rem minmax(0, 1fr) 2.65rem;
        min-height: 5.25rem;
        padding: 0.9rem 0.75rem;
        gap: 0.55rem;
    }

    .admin-match-num {
        font-size: 0.72rem;
    }

    .admin-match-name {
        max-width: 8.5rem;
        font-size: 0.82rem;
    }

    .admin-match-flag .team-flag--sm {
        width: 2.2rem;
        height: 2.2rem;
    }

    .admin-match-score {
        min-width: 2.5rem;
        min-height: 1.85rem;
        font-size: 0.95rem;
    }

    .admin-live-btn,
    .admin-restore-btn {
        width: 2.6rem;
        height: 2.6rem;
    }

    .admin-live-btn svg,
    .admin-restore-btn svg {
        width: 1rem;
        height: 1rem;
    }
}

@media (min-width: 1180px) {
    .admin-app {
        --max-width: 1180px;
    }

    .admin-match-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-match-name {
        max-width: 7rem;
    }
}

/* ── Temporary group-stage stats promo ── */

.stats-promo-wrap {
    position: fixed;
    z-index: var(--z-music-player);
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(30rem, calc(100vw - 2rem));
}

.stats-promo-banner {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 4.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius);
    border-color: rgba(232, 185, 35, 0.35);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    box-shadow:
        0 12px 38px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stats-promo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 12% 50%, rgba(232, 185, 35, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(232, 185, 35, 0.12), rgba(37, 99, 235, 0.1));
    pointer-events: none;
}

.stats-promo-banner > * {
    position: relative;
    z-index: 1;
}

.stats-promo-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.6rem;
    border: 1px solid rgba(232, 185, 35, 0.45);
    border-radius: 999px;
    background: rgba(232, 185, 35, 0.12);
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.stats-promo-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.stats-promo-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.96rem;
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-promo-copy span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-promo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0 0.9rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffd93d 0%, var(--gold) 100%);
    color: #101318;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(232, 185, 35, 0.18);
}

.stats-promo-banner:hover .stats-promo-cta {
    filter: brightness(1.05);
}

/* ── Background music player ── */

.music-player-wrap {
    position: fixed;
    z-index: var(--z-music-player);
    isolation: isolate;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
    bottom: 1.25rem;
    right: 1.25rem;
    max-width: calc(100vw - 1.5rem);
    overflow: visible;
}

.music-player {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    border-radius: var(--radius);
    flex: 1;
    min-width: 0;
    height: 4.1rem;
}

.music-player-art {
    position: relative;
    width: 5.25rem;
    min-width: 5.25rem;
    height: 100%;
    background: #0a0e14;
    overflow: hidden;
    flex-shrink: 0;
}

.music-player-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0a0e14;
    transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease;
}

.music-player-art.is-changing .music-player-video {
    transition: none;
}

.music-player-art.is-changing.is-track-next .music-player-video {
    animation: music-art-in-next 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.music-player-art.is-changing.is-track-prev .music-player-video {
    animation: music-art-in-prev 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.music-player.is-track-change.is-track-next .music-player-body {
    animation: music-body-in-next 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.music-player.is-track-change.is-track-prev .music-player-body {
    animation: music-body-in-prev 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes music-art-in-next {
    0% {
        opacity: 0.5;
        transform: translateX(100%);
        filter: brightness(1.15) saturate(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: brightness(1) saturate(1);
    }
}

@keyframes music-art-in-prev {
    0% {
        opacity: 0.5;
        transform: translateX(-100%);
        filter: brightness(1.15) saturate(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: brightness(1) saturate(1);
    }
}

@keyframes music-body-in-next {
    0% {
        opacity: 0;
        transform: translateX(1.35rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes music-body-in-prev {
    0% {
        opacity: 0;
        transform: translateX(-1.35rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes music-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.music-player-close {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(14, 20, 30, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s,
        transform 0.12s,
        box-shadow 0.15s;
}

.music-player-close svg {
    width: 0.72rem;
    height: 0.72rem;
}

.music-player-close:hover {
    color: var(--text);
    border-color: rgba(232, 185, 35, 0.5);
    background: rgba(22, 30, 44, 0.98);
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(232, 185, 35, 0.15);
    transform: scale(1.08);
}

.music-player-close:active {
    transform: scale(0.96);
}

.music-player-close:focus-visible {
    outline: 2px solid rgba(232, 185, 35, 0.55);
    outline-offset: 2px;
}

.music-player.is-awaiting-play .music-btn--main {
    border-color: rgba(232, 185, 35, 0.65);
    box-shadow: 0 0 0 2px rgba(232, 185, 35, 0.22);
}

.music-player-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.35rem 0.65rem 0.38rem 0.55rem;
}

.music-player-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.music-player-label {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.music-player-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
}

.music-player-title-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

.music-player-title-copy {
    display: none !important;
}

.music-player-title-track.is-scrolling .music-player-title-copy {
    display: inline-block !important;
}

.music-player-title-track.is-scrolling {
    width: max-content;
    animation: music-marquee var(--marquee-duration, 10s) linear infinite;
}

.music-player-title-text {
    display: inline-block;
    padding-right: 2.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
}

.music-player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.music-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.music-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.music-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
}

.music-btn:active {
    transform: scale(0.94);
}

.music-btn--main {
    width: 2rem;
    height: 2rem;
    border-color: rgba(232, 185, 35, 0.35);
    background: rgba(232, 185, 35, 0.12);
    color: var(--gold);
}

.music-btn--main svg {
    width: 1.05rem;
    height: 1.05rem;
}

.music-btn--main.is-playing {
    box-shadow: 0 0 14px rgba(232, 185, 35, 0.25);
}

.music-btn--main .music-icon-pause {
    display: none;
}

.music-btn--main.is-playing .music-icon-play {
    display: none;
}

.music-btn--main.is-playing .music-icon-pause {
    display: block;
}

.music-player-reopen {
    position: fixed;
    z-index: calc(var(--z-music-player) - 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    color: var(--gold);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s, box-shadow 0.15s;
}

.music-player-reopen svg {
    width: 1.15rem;
    height: 1.15rem;
}

.music-player-reopen:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

@media (min-width: 721px) {
    .music-player-wrap {
        bottom: 1.25rem;
        right: 1.25rem;
        box-sizing: content-box;
        width: 22rem;
        padding-top: 0.55rem;
        padding-right: 0.55rem;
    }

    .music-player {
        width: 22rem;
        height: 4.5rem;
    }

    .music-player-art {
        width: 4.5rem;
        min-width: 4.5rem;
        border-radius: var(--radius) 0 0 var(--radius);
    }

    .music-player-body {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.75rem 0.45rem 0.75rem;
    }

    .music-player-info {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    .music-player-marquee:not(:has(.is-scrolling)) {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .music-player-marquee:has(.is-scrolling) {
        mask-image: linear-gradient(
            90deg,
            #000 0%,
            #000 82%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            #000 0%,
            #000 82%,
            transparent 100%
        );
    }

    .music-player-title-text {
        font-size: 0.8rem;
        padding-right: 0.5rem;
    }

    .music-player-controls {
        flex-shrink: 0;
        gap: 0.35rem;
    }

    .music-player-close {
        top: 0;
        right: 0;
        width: 1.55rem;
        height: 1.55rem;
    }

    .music-player-reopen {
        bottom: 1.25rem;
        right: 1.25rem;
    }
}

@media (max-width: 720px) {
    body.stats-promo-visible .app {
        padding-bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px));
    }

    body.music-player-visible .app {
        padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }

    .player-back-to-top {
        right: 0.85rem;
        bottom: calc(4.45rem + env(safe-area-inset-bottom, 0px));
        width: 2.65rem;
        height: 2.65rem;
    }

    .glass-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(18, 26, 38, 0.94);
    }

    .page-bg {
        filter: none;
    }

    .stats-promo-wrap {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
    }

    .stats-promo-banner {
        min-height: calc(4.35rem + env(safe-area-inset-bottom, 0px));
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding: 0.62rem 0.9rem calc(0.62rem + env(safe-area-inset-bottom, 0px));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
        background: #0b1018;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .stats-promo-kicker {
        position: absolute;
        top: 0.42rem;
        left: 0.9rem;
        min-height: 1.35rem;
        padding: 0 0.45rem;
        font-size: 0.52rem;
    }

    .stats-promo-copy {
        padding-top: 1.25rem;
    }

    .stats-promo-copy strong {
        font-size: 0.86rem;
    }

    .stats-promo-copy span {
        font-size: 0.68rem;
    }

    .stats-promo-cta {
        min-height: 2.35rem;
        padding: 0 0.72rem;
        font-size: 0.66rem;
    }

    .music-player-wrap {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .music-player-video {
        transform: translateZ(0);
    }

    .music-player-wrap {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        gap: 0;
        padding: 0;
        margin: 0;
    }

    .music-player {
        width: 100%;
        min-height: 3.75rem;
        height: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 0;
        border: none;
        border-top: 1px solid rgba(232, 185, 35, 0.22);
        background: #0b1018;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.4);
    }

    .music-player-art {
        width: 3.75rem;
        min-width: 3.75rem;
        height: 3.75rem;
        align-self: stretch;
    }

    .music-player-body {
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        padding: 0.5rem 2.25rem 0.5rem 0.7rem;
    }

    .music-player-info {
        flex: 1;
        min-width: 0;
        justify-content: center;
    }

    .music-player-label {
        display: none;
    }

    .music-player-title-text {
        font-size: 0.82rem;
        padding-right: 0.25rem;
    }

    .music-player-marquee:not(:has(.is-scrolling)) {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .music-player-marquee:has(.is-scrolling) {
        mask-image: linear-gradient(
            90deg,
            #000 0%,
            #000 78%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            #000 0%,
            #000 78%,
            transparent 100%
        );
    }

    .music-player-controls {
        gap: 0.2rem;
        flex-shrink: 0;
        padding-right: 0.05rem;
    }

    .music-player-close {
        top: 0;
        bottom: env(safe-area-inset-bottom, 0px);
        right: 0.7rem;
        margin-top: auto;
        margin-bottom: auto;
        width: 1.4rem;
        height: 1.4rem;
    }

    .music-player-close svg {
        width: 0.68rem;
        height: 0.68rem;
    }

    .music-btn {
        width: 2rem;
        height: 2rem;
        border-color: transparent;
        background: transparent;
    }

    .music-btn svg {
        width: 0.88rem;
        height: 0.88rem;
    }

    .music-btn--main {
        width: 2.15rem;
        height: 2.15rem;
        border-color: rgba(232, 185, 35, 0.45);
        background: rgba(232, 185, 35, 0.16);
    }

    .music-btn--main svg {
        width: 1rem;
        height: 1rem;
    }

    .music-player-reopen {
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Load entrance animations ── */

@keyframes enter-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes enter-slide-left {
    from {
        opacity: 0;
        transform: translateX(-28px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes enter-slide-right {
    from {
        opacity: 0;
        transform: translateX(28px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes enter-scale-pop {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes enter-lb-row {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes enter-badge-pop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes enter-pts {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes enter-crown {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.5) rotate(-12deg);
    }
    70% {
        transform: translateY(2px) scale(1.08) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes enter-flag-reveal {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 0.42;
        transform: translateX(0);
    }
}

@keyframes gold-shimmer {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.35);
    }
}

@keyframes games-badge-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(34, 197, 94, 0);
    }
    40% {
        transform: scale(1.04);
        box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Hold initial hidden state until enter-play triggers */
    .app.await-enter .scoreboard-card,
    .app.await-enter .coming-soon,
    .app.await-enter.is-live .title-row,
    .app.await-enter.is-live .leaderboard,
    .app.await-enter.is-live .next-games-panel {
        opacity: 0;
        transform: translateY(22px);
    }

    .app.await-enter .hero-animate .hero-team--home {
        opacity: 0;
        transform: translateX(-48px) scale(0.9);
    }

    .app.await-enter .hero-animate .hero-team--away {
        opacity: 0;
        transform: translateX(48px) scale(0.9);
    }

    .app.await-enter .hero-animate .hero-center {
        opacity: 0;
        transform: scale(0.7);
    }

    .app.await-enter .lb-row--enter {
        opacity: 0;
        transform: translateX(-32px);
    }

    .app.await-enter .next-game-item--enter {
        opacity: 0;
        transform: translateY(16px);
    }

    .app.await-enter .countdown-unit--enter {
        opacity: 0;
        transform: scale(0.6);
    }

    .app.enter-play .scoreboard-card {
        animation: enter-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .app.enter-play .hero-animate .hero-team--home {
        animation: enter-slide-left 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
    }

    .app.enter-play .hero-animate .hero-team--away {
        animation: enter-slide-right 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
    }

    .app.enter-play .hero-animate .hero-center {
        animation: enter-scale-pop 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) 0.35s both;
    }

    .app.enter-play .countdown-unit--enter {
        animation: enter-scale-pop 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) both;
        animation-delay: calc(0.4s + var(--enter-i, 0) * 90ms);
    }

    .app.enter-play .coming-soon {
        animation: enter-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
    }

    .app.enter-play.is-live .title-row {
        animation: enter-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    .app.enter-play.is-live .leaderboard {
        animation: enter-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
    }

    .app.enter-play.is-live .next-games-panel {
        animation: enter-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
    }

    .app.enter-play .lb-row--enter {
        animation: enter-lb-row 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: calc(0.45s + var(--enter-i, 0) * 110ms);
    }

    .app.enter-play .lb-row--enter .rank-badge {
        animation: enter-badge-pop 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) both;
        animation-delay: calc(0.55s + var(--enter-i, 0) * 110ms);
    }

    .app.enter-play .lb-row--enter .lb-pts {
        animation: enter-pts 0.45s ease both;
        animation-delay: calc(0.6s + var(--enter-i, 0) * 110ms);
    }

    .app.enter-play .lb-row--enter.lb-row--champion .lb-row-flag {
        animation: enter-flag-reveal 0.75s ease both;
        animation-delay: calc(0.52s + var(--enter-i, 0) * 110ms);
    }

    .app.enter-play .lb-row.rank-1.lb-row--enter .crown-icon {
        animation: enter-crown 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        animation-delay: calc(0.7s + var(--enter-i, 0) * 110ms);
    }

    .app.enter-play .next-game-item--enter {
        animation: enter-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: calc(0.65s + var(--enter-i, 0) * 100ms);
    }

    .app.enter-play .page-title .gold,
    .app.enter-play .coming-soon-title .gold {
        animation: gold-shimmer 2.4s ease-in-out 0.9s 2;
    }

    .games-badge--pulse {
        animation: games-badge-pulse 0.9s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .next-games-scroll,
    .lb-body {
        transition: none;
    }

    .btn-fixtures,
    .btn-standings {
        transition: border-color 0.2s, background 0.2s;
    }

    .music-player-title-track.is-scrolling {
        animation: none;
    }

    .music-player-art.is-changing.is-track-next .music-player-video,
    .music-player-art.is-changing.is-track-prev .music-player-video,
    .music-player.is-track-change.is-track-next .music-player-body,
    .music-player.is-track-change.is-track-prev .music-player-body {
        animation: none;
    }

    .reg-ring-fill {
        transition: none;
    }
}

/* Live update toast */
.update-toast {
    position: fixed;
    left: 50%;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: var(--z-update-toast);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: min(calc(100vw - 2rem), 420px);
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    transform: translateX(-50%) translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.update-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.update-toast-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    color: var(--green);
}

.update-toast-body {
    flex: 1;
    min-width: 0;
}

.update-toast-title {
    margin: 0 0 0.2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--green);
}

.update-toast-message {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
}

.update-toast-dismiss {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.update-toast-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.update-toast-dismiss svg {
    width: 1rem;
    height: 1rem;
}

.mobile-swipe-hint {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(3.65rem + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-mobile-swipe-hint);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.72rem;
    pointer-events: none;
}

.mobile-swipe-hint-card {
    position: relative;
    width: min(100%, 21rem);
    padding: 1rem;
    border-radius: 16px;
    pointer-events: auto;
    background:
        linear-gradient(135deg, rgba(232, 185, 35, 0.08), transparent 42%),
        rgba(10, 16, 27, 0.96);
    border-color: rgba(232, 185, 35, 0.24);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

.mobile-swipe-hint-title {
    margin: 0 0 0.45rem;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.2;
}

.mobile-swipe-hint-body {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.mobile-swipe-hint-close {
    width: 100%;
    min-height: 2.85rem;
    margin-top: 0.9rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    color: #111827;
    border: 1px solid rgba(232, 185, 35, 0.5);
    background: linear-gradient(180deg, #f5d33f, #e8b923);
    box-shadow: 0 10px 24px rgba(232, 185, 35, 0.22);
    cursor: pointer;
}

@media (min-width: 761px) {
    .mobile-swipe-hint {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .player-page {
        width: 100%;
        max-width: 980px;
        padding: 1rem 0.75rem 2.75rem;
        overflow: hidden;
    }

    .player-page-header,
    .player-overview {
        border-radius: var(--radius);
        background: rgba(13, 20, 31, 0.9);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .player-page-header {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.85rem;
        min-height: 0;
        padding: 0.72rem 0.8rem;
        margin-bottom: 0.7rem;
    }

    .player-back-link {
        flex: 0 0 auto;
        min-width: 4.7rem;
        min-height: 2.35rem;
        padding: 0 0.85rem;
        border-color: rgba(232, 185, 35, 0.42);
        border-radius: 9px;
        background: rgba(7, 11, 18, 0.35);
        font-size: 0.68rem;
    }

    .player-title-block {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.6rem;
        align-items: center;
        flex: 1 1 auto;
    }

    .player-page-kicker {
        display: none;
    }

    .player-page-title {
        min-width: 0;
        font-size: 1.25rem;
        letter-spacing: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .player-page-summary {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 0.32rem 0.5rem;
        border: 1px solid rgba(232, 185, 35, 0.26);
        border-radius: 999px;
        background: rgba(232, 185, 35, 0.1);
        color: var(--text-muted);
        font-size: 0.66rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

    .player-overview {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        margin-bottom: 1rem;
        background: rgba(13, 20, 31, 0.9);
    }

    .player-stat {
        min-height: 5.1rem;
        padding: 0.9rem 0.7rem;
        background: rgba(7, 11, 18, 0.2);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    .player-stat-label {
        margin-bottom: 0.55rem;
        font-size: 0.64rem;
    }

    .player-stat-value {
        min-height: 1.4rem;
        font-size: 1.35rem;
    }

    .player-stat-team {
        gap: 0.28rem;
        font-size: 0.95rem;
    }

    .player-stat-team .team-flag {
        width: 1.15rem;
        height: 1.15rem;
    }

    .player-stat:last-child {
        border-right: none;
    }

    .player-stat:nth-child(2n) {
        border-right: none;
    }

    .player-bets {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .player-bets-header {
        display: none;
    }

    .player-bets-list {
        display: grid;
        gap: 2.45rem;
    }

    .player-bet-row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        align-items: stretch;
        min-height: 0;
        margin-top: 1.85rem;
        padding: 1.35rem 0.9rem 1.55rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-left-color: rgba(255, 255, 255, 0.08);
        border-radius: var(--radius);
        background: rgba(28, 36, 44, 0.92);
        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .player-bet-row--full,
    .player-bet-row--some,
    .player-bet-row--zero {
        border-left-color: rgba(255, 255, 255, 0.08);
    }

    .player-bet-row--played {
        background: rgba(28, 36, 44, 0.94);
    }

    .player-bet-row--focus {
        background:
            linear-gradient(135deg, rgba(232, 185, 35, 0.16), rgba(30, 136, 229, 0.1)),
            rgba(28, 36, 44, 0.94);
        border-color: rgba(232, 185, 35, 0.42);
        box-shadow:
            0 10px 26px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .player-bet-match {
        grid-column: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.95rem;
    }

    .player-bet-meta {
        display: grid;
        justify-items: center;
        padding: 0;
        min-height: 0;
    }

    .player-bet-match-num,
    .player-bet-date {
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .player-bet-match-num {
        display: none;
        color: var(--text-muted);
        font-weight: 800;
        text-align: center;
    }

    .player-bet-date {
        position: absolute;
        top: -2.45rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: calc(100% - 1rem);
        padding: 0.52rem 0.95rem;
        overflow: hidden;
        border-radius: 8px;
        background: rgba(28, 36, 44, 0.95);
        color: var(--text);
        font-size: 0.92rem;
        font-weight: 800;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    }

    .player-bet-teams {
        width: 100%;
        max-width: 22rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(5.65rem, 1fr) minmax(6.75rem, 8rem) minmax(5.65rem, 1fr);
        gap: 0.35rem;
        align-items: center;
        justify-content: center;
    }

    .player-bet-team {
        flex-direction: column;
        justify-content: center;
        gap: 0.65rem;
        overflow: visible;
        text-align: center;
    }

    .player-bet-team--home {
        grid-column: 3;
        grid-row: 1;
    }

    .player-bet-team--away {
        grid-column: 1;
        grid-row: 1;
    }

    .player-bet-team .team-flag {
        width: 3.45rem;
        height: 2.2rem;
        aspect-ratio: 16 / 10;
        border-radius: 5px;
    }

    .player-bet-team-name {
        max-width: 100%;
        overflow: visible;
        font-size: 0.92rem;
        line-height: 1.15;
        text-overflow: clip;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .player-bet-mobile-summary {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        justify-items: center;
        align-self: center;
        column-gap: 0.48rem;
        row-gap: 0.42rem;
        min-width: 0;
        font-variant-numeric: tabular-nums;
    }

    .player-bet-mobile-group {
        flex: 0 0 100%;
        color: var(--text-muted);
        font-size: 0.84rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
    }

    .player-bet-mobile-scoreline {
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: 1.45rem 1.05rem 2.25rem 1.05rem 1.45rem;
        align-items: center;
        justify-content: center;
        gap: 0.28rem;
    }

    .player-bet-mobile-pick {
        color: var(--text-muted);
        font-size: 0.9rem;
        font-weight: 700;
        text-align: center;
    }

    .player-bet-mobile-score {
        color: var(--text);
        font-size: 1.36rem;
        font-weight: 850;
        line-height: 1;
        text-align: center;
    }

    .player-bet-mobile-label {
        flex: 0 0 100%;
        color: var(--text-muted);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
        text-align: center;
        text-transform: none;
    }

    .player-bet-mobile-points {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        font-size: 1.02rem;
        font-weight: 900;
        line-height: 1;
    }

    .player-bet-mobile-line,
    .player-bet-mobile-value {
        display: none;
    }

    .player-bet-row > .player-bet-score,
    .player-bet-row > .player-bet-points {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .update-toast {
        transition: opacity 0.2s ease;
    }

    .player-back-to-top {
        transition: opacity 0.2s ease;
    }

    .admin-back-to-top {
        transition: opacity 0.2s ease;
    }
}