/* =========================================================
   V15 — LIVE FULLSCREEN + DESKTOP CLEANUP
========================================================= */
.live-fullscreen-button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(8,8,10,.78);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.live-fullscreen-button:hover {
    background: rgba(20,20,24,.94);
    border-color: rgba(255,255,255,.30);
    transform: translateY(-1px);
}
.live-fullscreen-button:focus,
.live-fullscreen-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.live-fullscreen-icon { font-size: 1.08rem; line-height: 1; }
.live-player:fullscreen,
.live-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
}
.live-player:fullscreen img,
.live-player:-webkit-full-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.live-player:fullscreen .live-fullscreen-button,
.live-player:-webkit-full-screen .live-fullscreen-button {
    right: 22px;
    bottom: 22px;
}

/* No browser-blue click/focus flash inside leaderboard/profile UI. */
.mobile-leaderboard-overlay,
.mobile-leaderboard-overlay *,
.player-profile-modal,
.player-profile-modal *,
.player-profile-player,
.history-player-name,
.session-history-player-cell,
.mobile-history-player-name,
.session-history-button,
.mobile-session-history-button,
.mobile-leaderboard-open,
.mobile-leaderboard-close,
.mobile-leaderboard-tab {
    -webkit-tap-highlight-color: transparent !important;
}
.mobile-leaderboard-overlay button:focus,
.mobile-leaderboard-overlay button:focus-visible,
.mobile-leaderboard-overlay [tabindex]:focus,
.mobile-leaderboard-overlay [tabindex]:focus-visible,
.player-profile-modal button:focus,
.player-profile-modal button:focus-visible,
.player-profile-player:focus,
.player-profile-player:focus-visible,
.history-player-name:focus,
.history-player-name:focus-visible,
.session-history-button:focus,
.session-history-button:focus-visible,
.mobile-leaderboard-open:focus,
.mobile-leaderboard-open:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.player-profile-player,
.history-player-name,
.mobile-leaderboard-tab,
.mobile-session-history-button {
    user-select: none;
}

@media (min-width: 701px) {
    main { max-width: 1220px; }
    .header { margin-bottom: 24px; }
    .dashboard-grid { max-width: none; margin-bottom: 18px; }
    .dashboard-main .live-section { margin-bottom: 16px; }
    .live-header { margin-bottom: 10px; }
    .live-player { border-radius: 18px; box-shadow: 0 16px 46px rgba(0,0,0,.30); }
    .game-section, .record-section { padding: 20px; border-radius: 18px; }
    .record-section { margin-top: 0; }
    .record-buttons { gap: 10px; margin-top: 14px; }
    .record-button { min-height: 62px; padding: 14px 10px; border-radius: 13px; font-size: 1.05rem; }
    .library { margin-top: 28px; }
    .library-header { margin-bottom: 14px; }
    .tools { margin-bottom: 14px; }
}
@media (max-width: 700px) {
    .live-fullscreen-button {
        right: 9px;
        bottom: 9px;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
    }
    .live-fullscreen-label { display: none; }
}


/* =========================================================
   V16 — FULLSCREEN FALLBACK + TAP FIX + OVERLAY MOTION
========================================================= */

/* Reliable live-feed fullscreen fallback for mobile browsers. */
.live-player.live-pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: #000 !important;
}
.live-player.live-pseudo-fullscreen img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
}
.live-player.live-pseudo-fullscreen .live-fullscreen-button {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
}
body.live-pseudo-fullscreen-active {
    overflow: hidden !important;
}

/* Kill the remaining blue tap/focus box on the mobile tournament tab. */
#mobile-leaderboard-tournaments-tab,
#mobile-leaderboard-tournaments-tab:active,
#mobile-leaderboard-tournaments-tab:focus,
#mobile-leaderboard-tournaments-tab:focus-visible,
.mobile-leaderboard-tab,
.mobile-leaderboard-tab:active,
.mobile-leaderboard-tab:focus,
.mobile-leaderboard-tab:focus-visible {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation;
}

/* Smooth overlay entrance / exit. */
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalRiseIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-overlay,
.tournament-results-overlay {
    animation: overlayFadeIn .18s ease-out both;
}
.modal-overlay .modal,
.modal-overlay .player-profile-modal,
.tournament-results-modal {
    animation: modalRiseIn .22s cubic-bezier(.2,.8,.2,1) both;
}
.tournament-results-overlay.is-closing {
    opacity: 0;
    transition: opacity .18s ease-in;
}
.tournament-results-overlay.is-closing .tournament-results-modal {
    opacity: 0;
    transform: translateY(8px) scale(.99);
    transition: opacity .16s ease-in, transform .18s ease-in;
}

/* Existing shared leaderboard overlay: animate on both desktop and mobile. */
.mobile-leaderboard-overlay {
    opacity: 0;
    transform: translateY(10px) scale(.992);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.mobile-leaderboard-overlay.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.mobile-leaderboard-overlay.is-closing {
    opacity: 0;
    transform: translateY(8px) scale(.995);
}

/* Full-screen mobile leaderboard should fade, not visibly scale away from viewport edges. */
@media (max-width: 700px) {
    .mobile-leaderboard-overlay {
        transform: none;
        transition: opacity .18s ease;
    }
    .mobile-leaderboard-overlay.is-open { transform: none; }
    .mobile-leaderboard-overlay.is-closing { transform: none; }

    .live-fullscreen-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-overlay .modal,
    .modal-overlay .player-profile-modal,
    .tournament-results-overlay,
    .tournament-results-modal,
    .mobile-leaderboard-overlay {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   V17 — CONTEXTUAL LIVE FULLSCREEN CONTROL
========================================================= */
.live-fullscreen-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(5px) !important;
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s linear .18s,
        background .15s ease,
        border-color .15s ease !important;
}

.live-fullscreen-button.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
}

/* Do not permanently reveal the control just because fullscreen is active. */
.live-player:fullscreen .live-fullscreen-button,
.live-player:-webkit-full-screen .live-fullscreen-button,
.live-player.live-pseudo-fullscreen .live-fullscreen-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.live-player:fullscreen .live-fullscreen-button.is-visible,
.live-player:-webkit-full-screen .live-fullscreen-button.is-visible,
.live-player.live-pseudo-fullscreen .live-fullscreen-button.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* The feed itself is the discoverable fullscreen-control trigger. */
.live-player {
    cursor: pointer;
}


/* =========================================================
   V18 — REMOVE BROWSER BLUE TAP / FOCUS HITBOX SITE-WIDE
========================================================= */

/*
 * Kill Chrome/Safari/Android's blue tap-highlight everywhere.
 * This covers replay Play / Rename / Share / Delete as well as
 * every other current and future clickable control.
 */
html,
body,
body * {
    -webkit-tap-highlight-color: transparent !important;
}

/*
 * Remove native browser focus painting from interactive elements.
 * We replace keyboard focus below with a neutral site-colored ring
 * instead of the browser-blue rectangle.
 */
button,
a,
input,
select,
textarea,
summary,
[role="button"],
[tabindex] {
    -webkit-tap-highlight-color: transparent !important;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[role="button"]:focus,
[tabindex]:focus {
    outline: none !important;
}

/*
 * Keep keyboard navigation visible without bringing back the blue box.
 * Mouse/touch clicks will not leave a focus ring.
 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 1px solid rgba(255,255,255,.34) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/*
 * Prevent text-selection flashes on controls that visually behave
 * as buttons while leaving normal page text selectable.
 */
button,
[role="button"],
.replay-action,
.replay-actions button,
.replay-card button,
.library button {
    user-select: none;
    -webkit-user-select: none;
}


/* =========================================================
   V19 — SUBTLE SITE-WIDE BUTTON PRESS MOTION
========================================================= */

/*
 * Smooth, restrained interaction feedback for actual controls.
 * Keeps existing colors/design, but replaces abrupt press effects
 * with one consistent low-key motion.
 */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.mobile-leaderboard-tab,
.mobile-leaderboard-open,
.mobile-leaderboard-close,
.mobile-session-history-button,
.session-history-button,
.replay-action,
.replay-actions a,
.replay-actions button,
.library a.button,
.library button,
.live-fullscreen-button {
    transition:
        transform .12s cubic-bezier(.2,.7,.3,1),
        opacity .14s ease,
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        color .16s ease !important;
    transform-origin: center;
}

/*
 * Mouse/touch press: almost imperceptible compression.
 * No bounce or exaggerated movement.
 */
button:active,
[role="button"]:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.mobile-leaderboard-tab:active,
.mobile-leaderboard-open:active,
.mobile-leaderboard-close:active,
.mobile-session-history-button:active,
.session-history-button:active,
.replay-action:active,
.replay-actions a:active,
.replay-actions button:active,
.library a.button:active,
.library button:active,
.live-fullscreen-button:active {
    transform: translateY(1px) scale(.985) !important;
    opacity: .94;
    box-shadow: none !important;
}

/*
 * Avoid old "jump up" effects fighting the new press motion.
 * Hover remains subtle and does not resize the control.
 */
@media (hover: hover) and (pointer: fine) {
    button:hover,
    [role="button"]:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    .mobile-leaderboard-tab:hover,
    .mobile-leaderboard-open:hover,
    .mobile-leaderboard-close:hover,
    .mobile-session-history-button:hover,
    .session-history-button:hover,
    .replay-action:hover,
    .replay-actions a:hover,
    .replay-actions button:hover,
    .library a.button:hover,
    .library button:hover {
        transform: translateY(-1px);
    }

    button:active,
    [role="button"]:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active,
    .mobile-leaderboard-tab:active,
    .mobile-leaderboard-open:active,
    .mobile-leaderboard-close:active,
    .mobile-session-history-button:active,
    .session-history-button:active,
    .replay-action:active,
    .replay-actions a:active,
    .replay-actions button:active,
    .library a.button:active,
    .library button:active,
    .live-fullscreen-button:active {
        transform: translateY(1px) scale(.985) !important;
    }
}

/* Respect reduced-motion users without changing any functionality. */
@media (prefers-reduced-motion: reduce) {
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .mobile-leaderboard-tab,
    .mobile-leaderboard-open,
    .mobile-leaderboard-close,
    .mobile-session-history-button,
    .session-history-button,
    .replay-action,
    .replay-actions a,
    .replay-actions button,
    .library a.button,
    .library button,
    .live-fullscreen-button {
        transition: none !important;
    }
}


/* =========================================================
   V20 — LEADERBOARD NAVIGATION + DESKTOP POLISH
========================================================= */

/* Shared leaderboard player buttons should always look like text, not native buttons. */
.mobile-leaderboard-player.player-profile-player,
.mobile-leaderboard-content button.mobile-leaderboard-player {
    display: inline;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    color: inherit !important;
    font: inherit;
    font-weight: 800;
    line-height: inherit;
    text-align: inherit;
    box-shadow: none !important;
    cursor: pointer;
    vertical-align: baseline;
}

.mobile-leaderboard-player.player-profile-player:hover,
.mobile-leaderboard-player.player-profile-player:active,
.mobile-leaderboard-player.player-profile-player:focus,
.mobile-leaderboard-player.player-profile-player:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
}

/* Give clickable names a low-key text interaction on desktop. */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
    .mobile-leaderboard-player.player-profile-player {
        transition:
            opacity .14s ease,
            color .14s ease !important;
    }

    .mobile-leaderboard-player.player-profile-player:hover {
        opacity: .72;
        transform: none !important;
    }

    .mobile-leaderboard-player.player-profile-player:active {
        opacity: .58;
        transform: none !important;
    }
}

/* Back-arrow state uses the same top-right control footprint as the old X. */
.mobile-leaderboard-close {
    font-family: inherit;
    transition:
        transform .12s cubic-bezier(.2,.7,.3,1),
        opacity .14s ease,
        background-color .16s ease,
        border-color .16s ease !important;
}


/* =========================================================
   V21 — HIDE ALL SCROLLBARS, KEEP SCROLLING
========================================================= */

/* Firefox */
html,
body,
body *,
* {
    scrollbar-width: none !important;
}

/* Legacy Edge / IE style property where supported */
html,
body,
body *,
* {
    -ms-overflow-style: none !important;
}

/* Chromium / Safari / mobile WebKit */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/*
 * Scrolling remains enabled anywhere overflow is already set.
 * This only hides the visual scrollbar track/thumb.
 */


/* =========================================================
   V22 — MOBILE GAME SETUP WITHOUT FORCED KEYBOARD
========================================================= */

@media (max-width: 700px) {
    /*
     * Autofill stays available even when the input itself is not focused.
     * Keep the list compact so Start Game remains usable with maximum space.
     */
    .game-player-suggestions {
        max-height: min(180px, 30dvh);
        overscroll-behavior: contain;
    }

    .game-player-suggestion {
        touch-action: manipulation;
    }

    /*
     * Avoid browser scroll anchoring moving the setup around while
     * suggestion lists switch from one player slot to the next.
     */
    .game-section,
    .game-form,
    .game-player-input-wrap {
        overflow-anchor: none;
    }
}


/* =========================================================
   V23 — MOBILE GAME AUTOFILL ABOVE REPLAY SECTION
========================================================= */

@media (max-width: 700px) {
    /*
     * Team 2's autocomplete can extend below the game card.
     * Let it escape the game section instead of being clipped by
     * the following "Record a replay" layout.
     */
    .game-section,
    .game-form,
    .game-form-content,
    .game-team,
    .game-team-fields,
    .game-player-input-wrap {
        overflow: visible !important;
    }

    .game-section {
        position: relative;
        z-index: 20;
    }

    .record-section {
        position: relative;
        z-index: 1;
    }

    .game-player-input-wrap {
        position: relative;
        z-index: 30;
    }

    .game-player-input-wrap:focus-within,
    .game-player-input-wrap:has(.game-player-suggestions:not(.hidden)) {
        z-index: 200;
    }

    .game-player-suggestions {
        z-index: 500 !important;
        max-height: min(220px, 34dvh);
        box-shadow: 0 14px 34px rgba(0,0,0,.52);
    }
}


/* Round-robin standings and fixture schedule */
.round-robin-heading { margin: 18px 0 10px; color: var(--text); font-size: 14px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.round-robin-heading:first-child { margin-top: 0; }
.round-robin-table-wrap { width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; }
.round-robin-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--surface-1); }
.round-robin-table th, .round-robin-table td { padding: 10px 5px; border-bottom: 1px solid var(--border); text-align: center; white-space: normal; overflow-wrap: anywhere; }
.round-robin-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.round-robin-table th:nth-child(2), .round-robin-table td:nth-child(2) { text-align: left; }
.round-robin-table th:nth-child(1), .round-robin-table td:nth-child(1) { width: 7%; }
.round-robin-table th:nth-child(2), .round-robin-table td:nth-child(2) { width: 39%; }
.round-robin-table th:nth-child(n+3), .round-robin-table td:nth-child(n+3) { width: 10.8%; }
.round-robin-table tbody tr:last-child td { border-bottom: 0; }
.round-robin-table tbody tr:first-child { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.round-robin-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.round-robin-round { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); }
.round-robin-matches { display: grid; gap: 10px; }
@media (max-width: 640px) {
    .round-robin-schedule { grid-template-columns: 1fr; }
    .round-robin-table th, .round-robin-table td { padding: 9px 2px; font-size: 11px; }
    .round-robin-table th { font-size: 9px; letter-spacing: 0; }
    .round-robin-table th:nth-child(1), .round-robin-table td:nth-child(1) { width: 7%; }
    .round-robin-table th:nth-child(2), .round-robin-table td:nth-child(2) { width: 37%; padding-left: 5px; }
    .round-robin-table th:nth-child(n+3), .round-robin-table td:nth-child(n+3) { width: 11.2%; }
}