/* =====================================================================
   LIVE SCORING
   ---------------------------------------------------------------------
   Shared by all four live pages:
     /live/{id}            /live/{id}/fullscreen
     /live/matches         /live/matches/fullscreen

   Self-contained on purpose. FullscreenLayout.razor renders only
   <MudThemeProvider/> and @Body — it never loads public-theme.css — so
   every custom property this file needs is declared on .live-root
   rather than inherited from the site theme. Values mirror the brand
   indigo/purple tokens so the live board still reads as CyBowling.

   Always side by side, and dense by squeezing PADDING rather than type:
   a team commonly fields five players, so two teams means ten scoresheets
   on screen at once, but the digits still have to read from across the
   centre. Type sizes track Lanetalk (16px rolls / 20px running totals);
   the space comes back out of the gaps. No density or layout toggle.
   ===================================================================== */

.live-root {
    /* ---- Surfaces (deep indigo, brand family) ---- */
    --live-bg: #14152b;
    --live-surface: #1e2140;
    --live-surface-2: #2a2e52;
    --live-border: rgba(148, 163, 184, .18);
    --live-border-strong: rgba(148, 163, 184, .32);

    /* ---- Brand accent ---- */
    --live-accent: #8b5cf6;
    --live-accent-soft: #a78bfa;
    --live-gradient: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);

    /* ---- Text ---- */
    --live-text: #e8eaf6;
    --live-muted: #9aa0c3;

    /* ---- The high-contrast scoresheet strip ---- */
    --live-sheet-bg: #ffffff;
    --live-sheet-ink: #0f172a;
    --live-sheet-gap: 4px;

    /* ---- Status ---- */
    --live-live: #e11d48;
    --live-done: #22c55e;
    --live-split: #b91c1c;
    --live-warn: #f59e0b;

    /* ---- Sizing. Big digits, tight boxes. ---- */
    --live-roll-size: 16px;
    --live-total-size: 20px;
    --live-name-size: 18px;
    --live-rail-size: 24px;
    --live-frame-min: 40px;
    --live-card-radius: 10px;

    min-height: 100vh;
    box-sizing: border-box;
    padding: 10px 12px 20px;
    background: var(--live-bg);
    color: var(--live-text);
    font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
}

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

/* =====================================================================
   Header
   ===================================================================== */

.live-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: var(--live-card-radius);
    background: var(--live-gradient);
    color: #fff;
}

.live-header--inline {
    padding: 8px 12px;
    margin-bottom: 0;
    border-radius: var(--live-card-radius) var(--live-card-radius) 0 0;
}

.live-header__org {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: .78;
    margin-bottom: 3px;
}

.live-header__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.15;
}

.live-header--inline .live-header__title {
    font-size: 17px;
}

.live-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 5px;
    font-size: 13px;
    opacity: .85;
}

.live-header--inline .live-header__meta {
    font-size: 11px;
}

.live-header__teams {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.live-header__vs {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .16);
}

.live-header__side {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.live-header__updated {
    width: 100%;
    text-align: right;
    font-size: 11px;
    opacity: .75;
}

/* =====================================================================
   Chips and pills
   ===================================================================== */

.live-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.live-pill--live {
    background: var(--live-live);
    color: #fff;
    animation: livePulse 2s ease-in-out infinite;
}

.live-pill--done {
    background: rgba(34, 197, 94, .16);
    border: 1px solid rgba(34, 197, 94, .45);
    color: var(--live-done);
    font-size: 11px;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .live-pill--live,
    .live-player__dot {
        animation: none;
    }
}

/* =====================================================================
   Status notice (match not live)
   ===================================================================== */

.live-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--live-border-strong);
    background: var(--live-surface);
    font-size: 14px;
    color: var(--live-muted);
}

.live-notice__icon {
    font-size: 18px;
    line-height: 1;
}

.live-notice--completed {
    border-color: rgba(34, 197, 94, .45);
    color: var(--live-done);
}

.live-notice--postponed {
    border-color: rgba(245, 158, 11, .45);
    color: var(--live-warn);
}

.live-notice--cancelled {
    border-color: rgba(225, 29, 72, .45);
    color: #fb7185;
}

/* =====================================================================
   Controls bar
   ===================================================================== */

.live-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--live-surface);
    border: 1px solid var(--live-border);
}

.live-controls__label {
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--live-muted);
}

.live-controls__group {
    display: flex;
    gap: 4px;
}

.live-controls__divider {
    width: 1px;
    height: 20px;
    background: var(--live-border-strong);
}

.live-controls__spacer {
    margin-left: auto;
}

.live-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--live-border-strong);
    background: transparent;
    color: var(--live-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.live-btn:hover {
    color: var(--live-text);
    border-color: var(--live-accent-soft);
}

.live-btn.is-active {
    background: var(--live-accent);
    border-color: var(--live-accent);
    color: #fff;
    font-weight: 700;
}

.live-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--live-accent-soft);
    font-size: 13px;
    text-decoration: none;
}

.live-link:hover {
    text-decoration: underline;
}

/* =====================================================================
   Layout
   ===================================================================== */

.live-game {
    margin-bottom: 18px;
}

.live-game__label {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--live-muted);
}

/* Always side by side. auto-fit means the usual two teams take half the width
   each, and it degrades to one column below the minmax floor. The floor is
   sized so a column still clears the sheet's own 10 x --live-frame-min plus
   the rail — any narrower and the scoresheet would start scrolling. */
.live-teams {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(580px, 1fr));
}

.live-matches {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}

.live-message {
    padding: 48px 20px;
    text-align: center;
    font-size: 17px;
    color: var(--live-muted);
}

.live-message--error {
    color: #fb7185;
}

/* =====================================================================
   Match card (multi-match grid)
   ===================================================================== */

.live-match-card {
    border-radius: var(--live-card-radius);
    border: 1px solid var(--live-border);
    background: var(--live-surface);
    overflow: hidden;
}

.live-match-card__body {
    display: grid;
    gap: 6px;
    padding: 6px;
}

/* =====================================================================
   Team card
   ===================================================================== */

.live-team {
    border-radius: var(--live-card-radius);
    border: 1px solid var(--live-border);
    background: var(--live-surface);
    overflow: hidden;
}

.live-team__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    background: var(--live-surface-2);
    border-bottom: 1px solid var(--live-border);
}

.live-team__name {
    margin: 0;
    font-size: calc(var(--live-name-size) + 2px);
    font-weight: 800;
    letter-spacing: -.3px;
}

.live-team__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-team__label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--live-muted);
}

.live-team__total {
    font-size: calc(var(--live-rail-size) + 2px);
    font-weight: 800;
    line-height: 1;
    color: var(--live-accent-soft);
}

.live-team__players {
    display: grid;
    gap: 1px;
    background: var(--live-border);
}

.live-team__empty {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--live-muted);
}

/* =====================================================================
   Player row
   ===================================================================== */

.live-player {
    padding: 3px 6px 4px;
    background: var(--live-surface);
}

.live-player__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 1px;
    padding: 0 2px;
}

.live-player__id {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.live-player__name {
    font-size: var(--live-name-size);
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--live-accent-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-player__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-live);
    animation: livePulse 1.5s ease-in-out infinite;
}

.live-player__hcp {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--live-muted);
}

.live-player__game {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--live-muted);
}

.live-player__body {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.live-player__sheet {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

/* ---- Right rail: max projection, game total, series ---- */

.live-rail {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 2px;
}

.live-rail__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.live-rail__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--live-muted);
}

.live-rail__value {
    font-size: calc(var(--live-rail-size) * .6);
    font-weight: 700;
    color: var(--live-muted);
}

.live-rail__total {
    min-width: 2.4em;
    text-align: right;
    font-size: var(--live-rail-size);
    font-weight: 800;
    line-height: 1;
    color: var(--live-text);
}

.live-rail__total.is-complete {
    color: var(--live-done);
}

/* =====================================================================
   Scoresheet — the white high-contrast strip
   ===================================================================== */

.live-sheet {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: calc(var(--live-frame-min) * 10);
    border-radius: 5px;
    overflow: hidden;
    background: var(--live-sheet-bg);
    color: var(--live-sheet-ink);
}

.live-frame {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The gap between frames is painted rather than spaced, so the strip stays
   one solid white block instead of ten floating tiles. */
.live-frame + .live-frame::before {
    content: '';
    position: absolute;
    left: calc(var(--live-sheet-gap) * -1);
    top: 0;
    width: var(--live-sheet-gap);
    height: 100%;
    background: var(--live-surface);
    z-index: 1;
}

.live-frame--tenth {
    flex: 1.4 1 0;
}

.live-frame__rolls {
    display: flex;
    align-items: center;
    min-height: calc(var(--live-roll-size) + 8px);
    font-size: var(--live-roll-size);
    font-weight: 700;
}

.live-roll {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Split: the first ball sits inside a red ring, the way a printed sheet marks it. */
.live-roll--split::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.35em;
    height: 1.35em;
    transform: translate(-50%, -50%);
    border: 1px solid var(--live-split);
    border-radius: 50%;
}

/* Strike: one large X across the whole frame, not a letter in the first box. */
.live-frame__strike {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(var(--live-roll-size) + 8px);
}

.live-frame__strike svg {
    width: calc(var(--live-roll-size) * 1.1);
    height: calc(var(--live-roll-size) * 1.1);
}

.live-frame__total {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--live-total-size) + 5px);
    font-size: var(--live-total-size);
    font-weight: 800;
    line-height: 1;
}

.live-sheet--empty {
    /* No frames to line up, so drop the ten-column floor and let it fit any width. */
    min-width: 0;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--live-total-size) + 21px);
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 900px) {
    .live-teams {
        grid-template-columns: 1fr;
    }

    .live-matches {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .live-root {
        --live-roll-size: 13px;
        --live-total-size: 16px;
        --live-name-size: 15px;
        --live-rail-size: 20px;
        --live-frame-min: 30px;
        padding: 8px 8px 20px;
    }

    .live-header {
        padding: 12px;
    }

    .live-header__title {
        font-size: 19px;
    }

    .live-header__side {
        justify-content: flex-start;
    }

    .live-header__updated {
        text-align: left;
    }

    .live-player__body {
        flex-direction: column;
        gap: 6px;
    }

    .live-rail {
        justify-content: flex-end;
        padding-left: 0;
    }
}