styles.css

@import '@lichess-org/chessground/assets/chessground.base.css';
@import '@lichess-org/chessground/assets/chessground.cburnett.css';

/* Self-hosted webfonts (no third-party requests — see privacy policy).
   Variable weight files: one woff2 covers 100-900. */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}

.tnmp {
    /* ── Type stack (home screen; other surfaces adopt per-screen as the
       redesign lands) ─────────────────────────────────────────────── */
    --font-sans: 'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
    --font-serif: 'Instrument Serif', 'Times New Roman', serif;

    color-scheme: dark;

    /* ── Base colors (themes override these) ─────────────── */
    --foreground: light-dark(black, white);
    --shadow: black;
    --accent: #00c853;
    --modal-bg: #2d2d2d;

    /* ── Derived: text ───────────────────────────────────── */
    --text-primary: var(--foreground);
    --text-muted: rgb(from var(--foreground) r g b / 0.85);
    --text-subtle: rgb(from var(--foreground) r g b / 0.7);
    --text-faint: rgb(from var(--foreground) r g b / 0.6);
    --text-link-hover: rgb(from var(--foreground) r g b / 0.8);

    /* ── Derived: surfaces & borders ─────────────────────── */
    --surface-primary: var(--modal-bg);
    --surface: rgb(from var(--foreground) r g b / 0.06);
    --surface-subtle: rgb(from var(--foreground) r g b / 0.08);
    --surface-btn: rgb(from var(--foreground) r g b / 0.04);

    --border-color: rgb(from var(--foreground) r g b / 0.15);
    --border-subtle: 1px solid rgb(from var(--foreground) r g b / 0.2);
    --border-share: 2px solid rgb(from var(--foreground) r g b / 0.4);
    
    --raised-panel-bg: light-dark(rgba(0,0,0,0.03), rgba(0,0,0,0.25));
    --popup-bg: rgb(from var(--modal-bg) r g b / 0.97);

    /* ── Derived: overlays ───────────────────────────────── */
    --overlay-light: rgb(from var(--foreground) r g b / 0.2);
    --overlay-light-hover: rgb(from var(--foreground) r g b / 0.3);

    --overlay-dark: rgb(from var(--shadow) r g b / 0.35);
    --overlay-backdrop: rgb(from var(--shadow) r g b / 0.6);

    /* ── Derived: shadows ────────────────────────────────── */
    --shadow-color: rgb(from var(--shadow) r g b / 0.3);
    --shadow-text: 2px 2px 4px var(--shadow-color);

    /* ── Derived: win/loss/draw ───────────────────────────── */
    --win: color-mix(in srgb, #00ff00, light-dark(black, white) 30%);
    --lose: color-mix(in srgb, #ff0000, light-dark(black, white) 30%);
    --result-win-bg: rgb(from var(--win) r g b / 0.22);
    --result-win-border: var(--win);
    --result-win-text: var(--win);
    --result-lose-bg: rgb(from var(--lose) r g b / 0.22);
    --result-lose-border: var(--lose);
    --result-lose-text: var(--lose);
    --result-draw-border: rgb(from var(--foreground) r g b / 0.5);
    --result-draw-bg: rgb(from var(--foreground) r g b / 0.15);

    /* ── Explorer piece-color bar (pure accents; bodies blend
       with --modal-bg at point of use, like the eval bar) ─── */
    --bar-white: #e8e8e8;
    --bar-draw: #808080;
    --bar-black: #1a1a1a;

    /* ── Derived: viewer chrome ───────────────────────────── */
    --toolbar-icon: rgb(from var(--foreground) r g b / 0.85);

    --close-btn-bg: light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.5));
    --close-btn-bg-hover: light-dark(rgba(0,0,0,0.12), rgba(0,0,0,0.7));


    /* ── Derived: status ─────────────────────────────────── */
    --status-error: #ff6b6b;
    --status-error-bg: rgb(from var(--status-error) r g b / 0.1);
    --status-success: #69db7c;
    --status-success-bg: rgb(from var(--status-success) r g b / 0.1);

    /* ── Constants: radii ────────────────────────────────── */
    --radius-card: 24px;
    --radius-pill: 50px;
    --radius-sm: 8px;
    --radius-xs: 4px;

    /* ── Constants: transitions ───────────────────────────── */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ── Fixed colors: state gradients (main page) ───────── */
    --gradient-yes-start: #00c853;
    --gradient-yes-end: #1de9b6;
    --gradient-no-start: #ff1744;
    --gradient-no-end: #ff6d00;
    --gradient-loading-start: #424242;
    --gradient-loading-end: #616161;
    --gradient-too-early-start: #7b1fa2;
    --gradient-too-early-end: #9c27b0;
    --gradient-in-progress-start: #1565c0;
    --gradient-in-progress-end: #42a5f5;
    --gradient-results-start: #f57c00;
    --gradient-results-end: #ffb74d;
    --gradient-off-season-start: #5D8047;
    --gradient-off-season-end: #7BA862;

    /* ── Fixed colors: board interaction ──────────────────── */
    --board-select: rgba(20, 160, 255, 0.45);
    --board-dot: rgba(20, 160, 255, 0.3);
    --board-capture: rgba(20, 160, 255, 0.35);
    --board-highlight: rgba(255, 255, 100, 0.4);

    /* ── NAG move assessment colors (Lichess-style) ──
       light-dark() resolves via each element's inherited color-scheme —
       so the move list in a light-scheme modal gets deeper/contrasty
       values, dark mode keeps the original vivid-on-dark tones. */
    --nag-brilliant:   light-dark(#1fb9cf, #26c6da);
    --nag-good:        light-dark(#3f8d42, #66bb6a);
    --nag-interesting: light-dark(#7d4bc0, #ab7ae6);
    --nag-dubious:     light-dark(#1976d2, #42a5f5);
    --nag-mistake:     light-dark(#d18324, #e8a735);
    --nag-blunder:     light-dark(#c0392b, #e74c3c);
    --nag-worst:       light-dark(#8e2a1e, #c0392b);
    --nag-forced:      light-dark(#546e7a, #78909c);
    
}

/* Stacked elevation shadows — dark-mode: inset light illusion + drop stack */
html.tnmp {
    --shadow-xs:
        inset 0 1px 0 0    rgba(255,255,255,0.05),
        inset 0 0 0 1px    rgba(255,255,255,0.02),
              0 0 0 1px    rgba(0,0,0,0.12),
              0 1px 1px -0.5px rgba(0,0,0,0.18),
              0 3px 3px -1.5px rgba(0,0,0,0.18),
              0 6px 6px   -3px rgba(0,0,0,0.18);

    --shadow-sm:
        inset 0 1px 0 0    rgba(255,255,255,0.08),
        inset 0 0 0 1px    rgba(255,255,255,0.04),
              0 0 0 1px    rgba(0,0,0,0.16),
              0 1px 1px -0.5px rgba(0,0,0,0.18),
              0 3px 3px -1.5px rgba(0,0,0,0.18),
              0 6px 6px   -3px rgba(0,0,0,0.18),
              0 12px 12px  -6px rgba(0,0,0,0.18);

    --shadow-md:
        inset 0 1px 0 0    rgba(255,255,255,0.11),
        inset 0 0 0 1px    rgba(255,255,255,0.06),
              0 0 0 1px    rgba(0,0,0,0.20),
              0 1px 1px -0.5px rgba(0,0,0,0.18),
              0 3px 3px -1.5px rgba(0,0,0,0.18),
              0 6px 6px   -3px rgba(0,0,0,0.18),
              0 12px 12px  -6px rgba(0,0,0,0.18),
              0 24px 24px -12px rgba(0,0,0,0.18),
              0 48px 48px -24px rgba(0,0,0,0.18);

    --shadow-modal:
        inset 0 1px 0 0    rgba(255,255,255,0.11),
        inset 0 0 0 1px    rgba(255,255,255,0.06),
              0 0 0 1px    rgba(0,0,0,0.20),
              0 1px 1px -0.5px rgba(0,0,0,0.18),
              0 3px 3px -1.5px rgba(0,0,0,0.18),
              0 6px 6px   -3px rgba(0,0,0,0.18),
              0 12px 12px  -6px rgba(0,0,0,0.18),
              0 24px 24px -12px rgba(0,0,0,0.18),
              0 48px 48px -24px rgba(0,0,0,0.18),
              0 64px 64px -32px rgba(0,0,0,0.18);
}

/* Light-scheme overrides — re-derive all foreground-based vars for light */
.light-scheme {
    --foreground: black;
    --text-primary: var(--foreground);
    --text-muted: rgb(from var(--foreground) r g b / 0.85);
    --text-subtle: rgb(from var(--foreground) r g b / 0.7);
    --text-faint: rgb(from var(--foreground) r g b / 0.6);
    --text-link-hover: rgb(from var(--foreground) r g b / 0.8);
    --surface: rgb(from var(--foreground) r g b / 0.06);
    --surface-subtle: rgb(from var(--foreground) r g b / 0.08);
    --border-color: rgb(from var(--foreground) r g b / 0.15);
    --overlay-light: rgb(from var(--foreground) r g b / 0.2);
    --overlay-light-hover: rgb(from var(--foreground) r g b / 0.3);
    --surface-primary: var(--modal-bg);
    --popup-bg: rgb(from var(--modal-bg) r g b / 0.97);
    --raised-panel-bg: rgba(0,0,0,0.03);
    --toolbar-icon: rgb(from var(--foreground) r g b / 0.85);
    --close-btn-bg: rgba(0,0,0,0.06);
    --close-btn-bg-hover: rgba(0,0,0,0.12);

    --shadow-xs:
        0 0 0 1px rgb(0 0 0 / 0.08),
        0 1px 1px -0.5px rgb(0 0 0 / 0.08),
        0 3px 3px -1.5px rgb(0 0 0 / 0.08),
        0 6px 6px   -3px rgb(0 0 0 / 0.08);

    --shadow-sm:
        0 0 0 1px rgb(0 0 0 / 0.08),
        0 1px 1px -0.5px rgb(0 0 0 / 0.08),
        0 3px 3px -1.5px rgb(0 0 0 / 0.08),
        0 6px 6px   -3px rgb(0 0 0 / 0.08),
        0 12px 12px  -6px rgb(0 0 0 / 0.08);

    --shadow-md:
        0 0 0 1px rgb(0 0 0 / 0.08),
        0 1px 1px -0.5px rgb(0 0 0 / 0.08),
        0 3px 3px -1.5px rgb(0 0 0 / 0.08),
        0 6px 6px   -3px rgb(0 0 0 / 0.08),
        0 12px 12px  -6px rgb(0 0 0 / 0.08),
        0 24px 24px -12px rgb(0 0 0 / 0.08),
        0 48px 48px -24px rgb(0 0 0 / 0.08);

    --shadow-modal:
        0 0 0 1px rgb(0 0 0 / 0.08),
        0 1px 1px -0.5px rgb(0 0 0 / 0.08),
        0 3px 3px -1.5px rgb(0 0 0 / 0.08),
        0 6px 6px   -3px rgb(0 0 0 / 0.08),
        0 12px 12px  -6px rgb(0 0 0 / 0.08),
        0 24px 24px -12px rgb(0 0 0 / 0.08),
        0 48px 48px -24px rgb(0 0 0 / 0.08),
        0 64px 64px -32px rgb(0 0 0 / 0.08);
}

.tnmp {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: normal;
}

/* Form elements don't inherit font by default — force it */
.tnmp button,
.tnmp input,
.tnmp select,
.tnmp textarea {
    font-family: inherit;
    letter-spacing: normal;
    line-height: normal;
}

/* Block host-page overrides on common elements */
.tnmp h1, .tnmp h2, .tnmp h3, .tnmp h4, .tnmp h5, .tnmp h6,
.tnmp p, .tnmp label, .tnmp a {
    font-family: inherit;
    letter-spacing: normal;
    line-height: normal;
}

.tnmp *,
.tnmp *::before,
.tnmp *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent host-page pseudo-element decorations from bleeding in.
   Exclude ::after on tooltip buttons since tooltips use ::after for content. */
.tnmp button::before, .tnmp button:not([data-tooltip])::after,
.tnmp a::before, .tnmp a::after,
.tnmp input::before, .tnmp input::after {
    content: none;
}

/* Shared patterns */
.viewer-player-name,
.browser-name,
.profile-row-name,
.explorer-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.move,
.move-variation,
.editor-h-btn,
.browser-game-row,
.profile-row,
.explorer-row {
    transition: background var(--transition-fast);
}

.off-season-countdown-label,
.countdown-label,
.profile-section-title {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-tab,
.profile-row-name,
.explorer-table-header {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nag-section-title,
.browser-section-header {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Meta-label convention (set by the home tracker/pairing labels):
   letterspaced uppercase mono for section and context labels — labels
   only, never player names. */
.viewer-round-label,
.browser-section-header,
.profile-section-title,
.explorer-table-header,
.nag-section-title {
    font-family: var(--font-mono);
}

html.tnmp {
    min-height: 100%;
    transition: background var(--transition-slow);
}

body.tnmp {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Respect iPhone notch / home-indicator / landscape cutouts.
       env() is 0 on non-notched devices — no-op elsewhere. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

body.tnmp::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.03) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
    pointer-events: none;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
    text-align: left;
    padding: 2rem 1.25rem;
    max-width: 480px;
    width: 100%;
}

html.yes {
    background: linear-gradient(135deg, var(--gradient-yes-start) 0%, var(--gradient-yes-end) 100%);
}

html.no {
    background: linear-gradient(135deg, var(--gradient-no-start) 0%, var(--gradient-no-end) 100%);
}

html.loading-state {
    background: linear-gradient(135deg, var(--gradient-loading-start) 0%, var(--gradient-loading-end) 100%);
}

html.too-early {
    background: linear-gradient(135deg, var(--gradient-too-early-start) 0%, var(--gradient-too-early-end) 100%);
}

html.in-progress {
    background: linear-gradient(135deg, var(--gradient-in-progress-start) 0%, var(--gradient-in-progress-end) 100%);
}

html.results {
    background: linear-gradient(135deg, var(--gradient-results-start) 0%, var(--gradient-results-end) 100%);
}

html.off-season {
    background: linear-gradient(135deg, var(--gradient-off-season-start) 0%, var(--gradient-off-season-end) 100%);
}

/* Dark mode: near-black scoreboard base; the answer letters carry the
   state color (tinted meme texture rendered by ui.js). */
html.dark-mode.yes, html.dark-mode.no, html.dark-mode.loading-state,
html.dark-mode.too-early, html.dark-mode.in-progress,
html.dark-mode.results, html.dark-mode.off-season {
    background: #0d0d0f;
}

/* Off-season countdown */
.off-season-countdown {
    background: var(--overlay-dark);
    border-radius: var(--radius-card);
    padding: 2.5rem 3rem;
    max-width: 520px;
}

.off-season-countdown-label {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.off-season-countdown-units {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    text-shadow: var(--shadow-text);
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: 0.85rem;
    color: var(--text-subtle);
    margin-top: 0.35rem;
}

/* ── Home scoreboard chrome (design: v1-scoreboard) ──────────────── */

.container {
    font-family: var(--font-sans);
}

.loading,
.refresh-container {
    text-align: center;
}

.home-topbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0 0.25rem;
    margin-bottom: 1rem;
}

.home-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(from var(--text-primary) r g b / 0.75);
    white-space: nowrap;
}

#home-context {
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}

#home-context::after {
    content: ' ↗';
    opacity: 0.5;
}

#home-context:hover {
    color: var(--text-primary);
}

/* ── Mobile app shell (sheet + navbar, <1000px only) ─────────────── */

/* Desktop: the wrappers vanish — .container is body's flex child as ever. */
.app-shell,
.app-screen {
    display: contents;
}

.app-navbar {
    display: none;
}

@media (max-width: 999px) {
    /* The shell is a full-bleed sheet (viewer-modal anatomy): one fixed
       surface owns the whole screen including the rounded corners, the
       content scrolls inside it, and the navbar is the sheet's bottom
       edge — no isolated strip that has to prove it reaches the edge. */
    .app-shell {
        display: flex;
        flex-direction: column;
        position: fixed;
        /* Offsets ONLY, no width/height — the viewer modal's exact
           recipe, proven to reach the physical bottom on notched
           iPhones. Adding height:100% over-constrains the box: CSS
           drops `bottom` and sizes to the layout viewport, which on
           iOS ends ABOVE the home-indicator zone — that was the
           floating navbar with ~50px of letterbox below it. */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Navbar geometry, shared between the bar and the scroller's
           clearance. The item row rides 12px into the home-indicator
           inset — the viewer toolbar's proven stance (iOS only claims
           edge swipes; taps in the inset land fine). The max() keeps a
           small pad on non-notched devices where env() is 0. */
        --navbar-pad-bottom: max(calc(env(safe-area-inset-bottom) - 12px), 0.2rem);
        --navbar-clearance: calc(53px + var(--navbar-pad-bottom));
    }

    .app-screen {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: env(safe-area-inset-top) env(safe-area-inset-right)
            var(--navbar-clearance) env(safe-area-inset-left);
    }

    /* The navbar overlays the scroller (native tab-bar anatomy):
       content slides behind the glass and shows through the blur
       instead of stopping dead at an opaque chin. */
    .app-navbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* Above the scroller's stacking contexts (.container is z-index:1) —
           content must slide UNDER the glass, never over it. */
        z-index: 10;
        padding: 0.3rem 0.5rem var(--navbar-pad-bottom);
        background: rgba(28, 28, 33, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgb(from var(--text-primary) r g b / 0.12);
    }

    /* The navbar subsumes the footer on mobile — no plaintext links. */
    .footer {
        display: none;
    }

    .container {
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
        margin: 0 auto;
    }

    /* The navbar owns wayfinding on mobile — in-content buttons remain
       only where the state's verb is an ACTION (Check Again + countdown).
       View Games duplicates the Games tab; the external-link states
       (yes/results/off-season) are covered by Games and the topbar link. */
    #games-btn {
        display: none;
    }

    html.yes .button-row,
    html.results .button-row,
    html.off-season .button-row {
        display: none;
    }
}

.nav-item {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0.25rem 0.15rem;
    color: rgb(from var(--text-primary) r g b / 0.55);
    transition: color var(--transition-fast);
}

.nav-item svg {
    width: 20px;
    height: 20px;
}

.nav-item span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav-item.nav-active,
.nav-item:hover {
    color: var(--text-primary);
}

.home-live {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.home-live.hidden {
    display: none;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgb(from var(--text-primary) r g b / 0.25);
    animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
    50% { opacity: 0.45; }
}

.home-prompt {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgb(from var(--text-primary) r g b / 0.92);
    text-align: left;
    margin: 0;
    flex-shrink: 0;
}

.loading {
    color: var(--text-primary);
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid var(--overlay-light);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.result {
    animation: fadeIn var(--transition-slow);
}

.result.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fluid answer — SVG text sized by viewBox, spans the column at any length */
.answer-fit {
    margin: 0 0 0.75rem;
    line-height: 0;
}

.answer-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-sans);
}

html:not(.dark-mode) .answer-svg {
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.4));
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.home-sub {
    font-size: 1.05rem;
    line-height: 1.3;
    color: rgb(from var(--text-primary) r g b / 0.9);
    max-width: 320px;
    margin: 0 0 1.25rem;
    padding: 0 0.25rem;
}

/* Meme card + caption — the personality section, back by popular demand */
.meme {
    margin-top: 1.1rem;
}

.meme.hidden {
    display: none;
}

.meme img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: block;
}

.meme-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.3;
    color: rgb(from var(--text-primary) r g b / 0.92);
    text-align: center;
    margin: 0.6rem 0 0;
}

.home-extra {
    margin-top: 1rem;
}

.home-error {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text-primary);
    margin: 0.75rem 0 0;
}

.home-error-small {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: var(--text-subtle);
}

/* ── Tracker bar: contiguous result cells + score header ─────────── */

.tracker-section.hidden {
    display: none;
}

.tracker-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(from var(--text-primary) r g b / 0.7);
    margin-bottom: 0.4rem;
    padding: 0 2px;
}

.tracker-player {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgb(from var(--text-primary) r g b / 0.35);
    text-underline-offset: 3px;
}

.tracker-player:hover {
    color: var(--text-primary);
}

.tracker-score {
    color: rgb(from var(--text-primary) r g b / 0.45);
    font-variant-numeric: tabular-nums;
}

.tracker-score b {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.tracker-bar {
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.tracker-cell {
    all: unset;
    flex: 1;
    aspect-ratio: 1 / 1.15;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.tracker-cell:last-child {
    border-right: none;
}

.tracker-cell[data-clickable] {
    cursor: pointer;
}

.tracker-cell[data-clickable]:hover {
    filter: brightness(1.12);
}

.tb-w { background: linear-gradient(180deg, #2fa64a 0%, #1a7a31 100%); }
.tb-l { background: linear-gradient(180deg, #e53e3e 0%, #a31a1a 100%); }
.tb-d { background: linear-gradient(180deg, #6a6a72 0%, #4a4a52 100%); }
.tb-bye { background: linear-gradient(180deg, #5a5a62 0%, #3a3a42 100%); }
.tb-x { background: linear-gradient(180deg, #2a2a30 0%, #1f1f25 100%); }

.tb-selected {
    box-shadow: inset 0 -3px 0 #fff, inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

.tb-live {
    box-shadow: inset 0 -3px 0 #fff, inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.tb-num {
    position: absolute;
    top: 3px;
    left: 4px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.55);
}

.tb-piece {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.tb-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
    animation: live-pulse 1.6s ease-in-out infinite;
}

.tb-future-dot {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1;
}

/* ── Expanded round detail card ──────────────────────────────────── */

.tracker-detail-card {
    margin-top: 0.6rem;
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    background: #1a1a1f;
    box-shadow: var(--shadow-sm);
    position: relative;
    text-align: center;
    animation: expand-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    color: #fff;
}

@keyframes expand-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.td-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1;
}

.td-close:hover {
    color: #fff;
}

.td-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.62);
    text-transform: uppercase;
}

.td-verb {
    margin-top: 0.45rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.td-verb-w { color: #5dd67c; }
.td-verb-l { color: #ef6b6b; }
.td-verb-d { color: #e0e0e0; }

.td-opp {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.td-piece {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.td-opp-text {
    text-align: left;
}

.td-opp-name {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.1;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
}

.td-opp-sub {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* ── Pairing pill (split bar: you | VS | opponent) ───────────────── */

.pairing-section {
    margin-top: 0.9rem;
}

.pairing-section.hidden {
    display: none;
}

.pairing-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(from var(--text-primary) r g b / 0.7);
    margin-bottom: 0.4rem;
    padding: 0 2px;
}

.pairing-pill {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-height: 52px;
    color: #fff;
    /* Solid base so the translucent seam composites over the card,
       not the page gradient behind it. */
    background: #1c1c22;
}

.pp-side {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, #28282e 0%, #1c1c22 100%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-left {
    padding: 0 8px 0 16px;
}

.pp-right {
    padding: 0 16px 0 8px;
}

.pp-left .pp-info {
    text-align: right;
}

/* The name-link button shrink-wraps as a block box, so the parent's
   text-align can't place it — push it to the seam side with margin. */
.pp-left .pp-name-link {
    margin-left: auto;
}

.pp-info {
    flex: 1;
    min-width: 0;
}

.pp-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-name-link {
    display: block;
    max-width: 100%;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
    text-align: inherit;
}

.pp-rating {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

.pp-piece {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.pp-seam {
    width: 28px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.5) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35), inset -1px 0 0 rgba(0, 0, 0, 0.35);
}

.pairing-pill-bye {
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, #28282e 0%, #1c1c22 100%);
    padding: 0 16px;
}

.pp-bye-label {
    font-size: 0.95rem;
    font-weight: 700;
}

/* ── Final results pill (W / D / L) ──────────────────────────────── */

.results-pill {
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    color: #fff;
}

.rp-seg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0;
}

.rp-w { background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.rp-d { background: linear-gradient(180deg, #4a4a52 0%, #32323a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.35), inset -1px 0 0 rgba(0, 0, 0, 0.35); }
.rp-l { background: linear-gradient(180deg, #c62828 0%, #8e1f1f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }

.rp-num {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.rp-label {
    font-family: var(--font-mono);
    font-size: 0.53rem;
    letter-spacing: 0.13em;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    margin-top: 3px;
}


.refresh-container {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.button-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
}

.button-row > button {
    flex: 1;
}

.check-btn {
    padding: 0.85rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-family: var(--font-sans);
    color: #1a1a1a;
    background: #fff;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.check-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-color);
}

.check-btn:active {
    transform: translateY(0);
}

.share-btn {
    padding: 0.85rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: rgb(from var(--text-primary) r g b / 0.08);
    border: 1.5px solid rgb(from var(--text-primary) r g b / 0.28);
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.share-btn:hover {
    transform: translateY(-2px);
    background: var(--overlay-light-hover);
}

.share-btn:active {
    transform: translateY(0);
}

/* Toast notifications */
.toast {
    position: fixed;
    font-family: var(--font-sans);
    top: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(-0.5rem);
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-sm);
    border-bottom: 2.5px solid;
    background: linear-gradient(135deg,
        var(--modal-bg),
        color-mix(in srgb, var(--modal-bg), light-dark(white, black) 42%));
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity var(--transition-medium), transform var(--transition-medium);
    z-index: 9000;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    cursor: pointer;
}

.toast-icon {
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.toast-success { border-color: var(--nag-good); }
.toast-success .toast-icon { color: var(--nag-good); }
.toast-success .toast-icon::before { content: '!'; }

.toast-error { border-color: var(--nag-blunder); }
.toast-error .toast-icon { color: var(--nag-blunder); }
.toast-error .toast-icon::before { content: '??'; }

.toast-info { border-color: var(--gradient-in-progress-end); }
.toast-info .toast-icon { color: var(--gradient-in-progress-end); }
.toast-info .toast-icon::before { content: '\24D8'; }

.toast-shake { animation: toast-shake 0.4s ease; }

@keyframes toast-shake {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    20% { transform: translateX(calc(-50% - 6px)) translateY(0); }
    40% { transform: translateX(calc(-50% + 5px)) translateY(0); }
    60% { transform: translateX(calc(-50% - 3px)) translateY(0); }
    80% { transform: translateX(calc(-50% + 2px)) translateY(0); }
}

#offline-banner {
    position: fixed;
    font-family: var(--font-sans);
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 152, 0, 0.9);
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--transition-medium);
    pointer-events: none;
}

#offline-banner.show {
    opacity: 1;
}

.countdown {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-subtle);
    background: rgba(0, 0, 0, 0.15);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-card);
    font-variant-numeric: tabular-nums;
}

#countdown-time {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.footer {
    margin-top: 2rem;
}

.footer a,
.footer-link {
    color: var(--text-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 0.9rem;
    cursor: pointer;
}

.footer-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.footer a:hover,
.footer-link:hover {
    color: var(--text-primary);
}

.footer-divider {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0.5rem;
}

/* Settings Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

/* Modal open/close animations — macOS sheet style */
@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modal-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes modal-content-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes modal-content-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-14px); }
}

/* fill:both is LOAD-BEARING on .viewer-tab-host: the held translateY(0)
   creates a stacking context that keeps the host's chrome above the
   positioned .modal-backdrop sibling. (The host also sets position:
   relative for this — see the tab-bar block — but keep the fill so the
   entry states never flash.) */
.modal:not(.hidden):not(.closing) .modal-backdrop {
    animation: modal-backdrop-in 200ms ease-out both;
}
.modal:not(.hidden):not(.closing) .modal-content,
.modal:not(.hidden):not(.closing) .viewer-tab-host {
    animation: modal-content-in 250ms ease-out both;
}
.modal.closing {
    pointer-events: none;
}
.modal.closing .modal-backdrop {
    animation: modal-backdrop-out 160ms ease-in both;
}
.modal.closing .modal-content,
.modal.closing .viewer-tab-host {
    animation: modal-content-out 160ms ease-in both;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    /* Design unification: all modals share the home screen's type stack. */
    font-family: var(--font-sans);
    background: linear-gradient(135deg,
        var(--modal-bg),
        color-mix(in srgb, var(--modal-bg), light-dark(white, black) 42%));
    border-radius: var(--radius-card);
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-modal);
}

.modal-content h2 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

#browser-title,
.browser-title-panel {
    white-space: nowrap;
    text-align: center;
    min-width: 0;
    flex-shrink: 0;
}

.browser-title-select {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--surface);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem;
    box-shadow: var(--shadow-xs);
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* OS-rendered dropdown menus use platform-native backgrounds (usually white).
   Force dark text on options so they're legible across all OS/browser combos. */
.browser-title-select option,
.browser-round-select option,
.browser-chip-select option,
select.editor-header-input option {
    color: #1a1a1a;
    background: #fff;
}

/* ── Tournament picker (custom dropdown replacing <select>) ─────────── */

.browser-title-trigger {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--surface);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem;
    box-shadow: var(--shadow-xs);
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    overflow: hidden;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.browser-title-trigger:hover {
    background: var(--overlay-light);
}
.browser-title-trigger[aria-expanded="true"] {
    background: var(--overlay-light);
    box-shadow: var(--shadow-xs), 0 0 0 1px var(--accent);
}
.browser-title-trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.browser-title-trigger-chevron {
    color: var(--text-faint);
    flex-shrink: 0;
    transition: transform var(--transition-fast), color var(--transition-fast);
}
.browser-title-trigger[aria-expanded="true"] .browser-title-trigger-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

/* Popover panel — anchored via JS (position: fixed).
   Uses fully-opaque modal bg (not --popup-bg's 97%) because any transparency
   leaks host-page content through when the embed is on a light page. */
.tm-popover {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: var(--modal-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.75rem 0.75rem 0.5rem;
    font-family: var(--font-sans);
    color: var(--text-primary);
    animation: tm-popover-in 180ms ease-out both;
}
.tm-popover.hidden { display: none; }

@keyframes tm-popover-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* input.tm-search selector (tag + class) outranks any host-page `input[type=text]`
   rules when the embed ships inside a site with its own input styling. */
input.tm-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--overlay-light);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    outline: none;
    font-family: inherit;
    transition: box-shadow var(--transition-fast);
    margin-bottom: 0.6rem;
}
input.tm-search::placeholder { color: var(--text-faint); }
input.tm-search:focus { box-shadow: var(--shadow-xs), 0 0 0 1px var(--accent); }

/* Year range slider */
.tm-range-filter { padding: 0 0.2rem; margin-bottom: 0.6rem; }
.tm-range-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.3rem;
}
.tm-range-label {
    font-size: 0.8rem;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.tm-range-reset {
    font-size: 0.7rem;
    color: var(--text-faint);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: inherit;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.tm-range-reset:hover { color: var(--text-primary); background: var(--overlay-light); }
.tm-range-reset.hidden { display: none; }

.tm-dual-range { position: relative; height: 24px; }
.tm-dual-range input[type="range"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 24px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: transparent; pointer-events: none; margin: 0;
    border: none; outline: none; padding: 0;
}
.tm-dual-range input[type="range"]:focus { outline: none; }
.tm-dual-range input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px; background: transparent;
}
.tm-dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-primary);
    border: none;
    box-shadow: 0 1px 3px var(--shadow-color);
    margin-top: -5px; cursor: pointer; pointer-events: all;
    transition: transform var(--transition-fast);
}
.tm-dual-range input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tm-dual-range input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.25); }
.tm-dual-range input[type="range"]::-moz-range-track {
    height: 4px; border-radius: 2px; background: transparent;
}
.tm-dual-range input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-primary); border: none;
    cursor: pointer; pointer-events: all;
}
.tm-range-track {
    position: absolute; top: 10px; left: 0; right: 0; height: 4px;
    border-radius: 2px; background: var(--overlay-light); pointer-events: none;
}
.tm-range-fill {
    position: absolute; top: 0; height: 100%;
    background: var(--accent); border-radius: 2px; opacity: 0.85;
    transition: left 0.05s, width 0.05s;
    pointer-events: auto; /* override parent track's pointer-events: none */
    cursor: grab;
    touch-action: none;   /* prevent browser from scrolling during drag */
}
.tm-range-fill::before {
    /* Expand vertical hit area for easier grabbing (track is only 4px tall) */
    content: '';
    position: absolute;
    inset: -10px 0;
}
.tm-range-fill:active { cursor: grabbing; }
.tm-range-ticks {
    position: relative;
    height: 12px;
    margin-top: 0.15rem;
}
.tm-range-ticks span {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    font-size: 0.58rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
}
.tm-range-ticks span::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -4px;
    width: 1px;
    height: 3px;
    background: var(--text-faint);
    opacity: 0.4;
    transform: translateX(-50%);
}
.tm-range-ticks span.tm-tick-first { transform: translateX(0); }
.tm-range-ticks span.tm-tick-last  { transform: translateX(-100%); }
.tm-range-ticks span.tm-tick-first::before { left: 0; transform: none; }
.tm-range-ticks span.tm-tick-last::before  { left: auto; right: 0; transform: none; }

/* Scrollable list */
.tm-list {
    flex: 1;
    overflow-y: auto;
    min-height: 120px;
    border-radius: var(--radius-sm);
    padding: 0.15rem 0;
    margin: 0 -0.15rem;
}
.tm-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.85rem;
}

.tm-year-header {
    padding: 0.6rem 0.4rem 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-subtle);
    letter-spacing: -0.01em;
    border-top: 1px solid var(--border-color);
    margin-top: 0.2rem;
}
.tm-year-header:first-child { border-top: none; margin-top: 0; padding-top: 0.2rem; }
.tm-year-header.hidden { display: none; }

.tm-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.5rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    gap: 0.5rem;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tm-row:hover,
.tm-row.focused {
    background: var(--overlay-light);
    border-left-color: var(--accent);
    color: var(--text-primary);
}
.tm-row.active {
    background: var(--surface);
    color: var(--text-primary);
    border-left-color: var(--accent);
}
.tm-row.hidden { display: none; }

.tm-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm-row-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    white-space: nowrap;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.tm-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.tm-stat svg {
    width: 12px; height: 12px;
    fill: currentColor;
    flex-shrink: 0;
    opacity: 0.75;
}
/* Stat colors: deeper on light bg for contrast, lighter on dark bg.
   light-dark() resolves via the popover's inline color-scheme (see syncScheme). */
.tm-stat-players { color: light-dark(#2c6ca8, #8fb6dd); }
.tm-stat-rounds  { color: light-dark(#466d33, #a9cd88); }
.tm-stat-games   { color: light-dark(#9a6f1d, #e0bb72); }

.tm-range-explore {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0.1rem;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface-subtle);
    border: 1px solid rgb(from var(--accent) r g b / 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tm-range-explore:hover {
    background: rgb(from var(--accent) r g b / 0.14);
    border-color: var(--accent);
}
.tm-range-explore.hidden { display: none; }

.tm-count {
    text-align: center;
    color: var(--text-faint);
    margin: 0.4rem 0 0.2rem;
    font-size: 0.72rem;
}

/* Side-popover preview — purely a positioning wrapper.
   All visual styling comes from .editor-header-inner.tournament-info-inner inside. */
.tm-info-popover {
    position: fixed;
    z-index: 10001;
    font-family: var(--font-sans);
    animation: tm-popover-in 160ms ease-out both;
}
.tm-info-popover.hidden { display: none; }

/* Touch devices: no hover → no preview */
@media (hover: none) {
    .tm-info-popover { display: none !important; }
}

.setting-group {
    margin-bottom: 1.5rem;
}

.setting-group label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.setting-group input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid rgb(from var(--foreground) r g b / 0.2);
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.setting-group input[type="text"]::placeholder {
    color: var(--text-faint);
}

.setting-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

.setting-name-wrap {
    position: relative;
}

.setting-hint {
    color: var(--text-faint);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.modal-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--overlay-light);
}

.modal-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-btn:hover {
    transform: translateY(-2px);
}

.modal-btn:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Primary = the home CTA pill: maximum-contrast fill, not accent green.
   light-dark inverts it for light-scheme modals (white-on-white fails). */
.modal-btn-primary {
    background: light-dark(#1a1a1a, #fff);
    color: light-dark(#fff, #1a1a1a);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.8));
}

.modal-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.8));
}

.modal-btn-secondary {
    background: rgb(from var(--text-primary) r g b / 0.08);
    color: var(--text-primary);
    border: 1.5px solid rgb(from var(--text-primary) r g b / 0.28);
    box-shadow: var(--shadow-xs);
}

.modal-btn-secondary:hover {
    background: var(--overlay-light);
}

/* Push section state visibility */
#push-section[data-push="unsupported"] .push-when-unsubscribed,
#push-section[data-push="unsupported"] .push-when-subscribed,
#push-section[data-push="unsubscribed"] .push-when-unsupported,
#push-section[data-push="unsubscribed"] .push-when-subscribed,
#push-section[data-push="subscribed"] .push-when-unsupported,
#push-section[data-push="subscribed"] .push-when-unsubscribed,
#push-section[data-push="unknown"] .push-when-unsupported,
#push-section[data-push="unknown"] .push-when-unsubscribed,
#push-section[data-push="unknown"] .push-when-subscribed { display: none; }

/* Notification UI */
.notification-status {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
}

.notification-status-error {
    color: var(--status-error);
    background: var(--status-error-bg);
}

.notification-status-success {
    color: var(--status-success);
    background: var(--status-success-bg);
}

.notification-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-status-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--text-primary);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-card);
    font-size: 0.9rem;
    font-weight: 600;
}

.modal-btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

/* ─── Collection Browser ──────────────────────────────────────── */

.cb-content {
    max-width: 720px;
    width: 90%;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.cb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cb-header h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-search {
    flex: 0 0 14rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 2px solid rgb(from var(--foreground) r g b / 0.2);
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
    color: var(--text-primary);
    font-family: inherit;
}

.cb-search:focus {
    outline: none;
    border-color: var(--accent);
}

.cb-search::placeholder {
    color: var(--text-faint);
}

.cb-table-wrap {
    flex: 1;
    overflow-y: auto;
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
}

.cb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.cb-table thead th {
    position: sticky;
    top: 0;
    background: var(--modal-bg);
    color: var(--text-primary);
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid rgb(from var(--foreground) r g b / 0.2);
    user-select: none;
}

.cb-table th.cb-sortable {
    cursor: pointer;
}

.cb-table th.cb-sortable:hover {
    background: var(--overlay-light);
}

.cb-table th.cb-sort-active::after {
    content: " ▾";
    font-size: 0.75em;
    opacity: 0.7;
}

.cb-table th.cb-sort-asc::after {
    content: " ▴";
}

.cb-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgb(from var(--foreground) r g b / 0.08);
    color: var(--text-primary);
}

.cb-row {
    cursor: pointer;
}

.cb-row:hover {
    background: rgb(from var(--accent) r g b / 0.12);
}

.cb-col-games,
.cb-col-modified {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.cb-col-games {
    text-align: right;
    width: 4rem;
}

.cb-col-modified {
    width: 7rem;
}

.cb-kind-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--overlay-light);
    color: var(--text-faint);
}

.cb-kind-user {
    background: rgb(from var(--accent) r g b / 0.25);
    color: var(--text-primary);
}

/* Pinned "new collection" row (save mode) */
.cb-new-row td {
    padding: 0.5rem 0.75rem;
    background: rgb(from var(--accent) r g b / 0.06);
    border-bottom: 1px solid rgb(from var(--foreground) r g b / 0.2);
}

.cb-new-trigger {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.3rem 0;
    cursor: pointer;
    font-family: inherit;
}

.cb-new-trigger:hover {
    text-decoration: underline;
}

.cb-new-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cb-new-name-input,
.cb-new-desc-input {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 2px solid rgb(from var(--foreground) r g b / 0.2);
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
    color: var(--text-primary);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.cb-new-name-input:focus,
.cb-new-desc-input:focus {
    outline: none;
    border-color: var(--accent);
}

.cb-new-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.cb-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.9rem;
}

.cb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--overlay-light);
}

.cb-import-wrap {
    position: relative;
}

.cb-import-menu {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 0;
    min-width: 12rem;
    background: var(--surface);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.cb-import-item {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: var(--radius-xs, 3px);
}

.cb-import-item:hover {
    background: var(--overlay-light);
}

/* Hide on mobile — desktop-only per platform-split policy */
@media (max-width: 999px) {
    #collection-browser-modal {
        display: none !important;
    }
}

.notify-prefs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
}

.setting-group .notify-pref-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: 0;
}

.notify-pref-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.hidden {
    display: none !important;
}

/* Debug panel */
.debug-panel {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--overlay-dark);
    border-radius: var(--radius-sm);
}

.debug-panel p {
    color: var(--text-faint);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.debug-panel button {
    margin: 0.25rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    background: var(--overlay-light);
    color: var(--text-primary);
    border: 1px solid var(--overlay-light-hover);
    border-radius: var(--radius-xs);
    cursor: pointer;
}

.debug-panel button:hover {
    background: var(--overlay-light-hover);
}

/* About Modal */
.modal-content-wide {
    max-width: 480px;
}

.about-body {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.about-body p {
    margin-bottom: 1rem;
}

.about-body a,
.privacy-body a,
.setting-feedback a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.about-body a:hover,
.privacy-body a:hover,
.setting-feedback a:hover {
    color: var(--accent);
}

.about-disclaimer {
    background: var(--surface);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--text-subtle);
}

.about-privacy {
    font-size: 0.9rem;
    color: var(--text-subtle);
}

.about-body .about-credit {
    font-size: 0.85rem;
    color: var(--text-faint);
    margin-bottom: 0;
}

/* Privacy Modal */
.modal-content-scrollable {
    max-height: 80vh;
    overflow-y: auto;
}

.privacy-body {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.privacy-body p {
    margin-bottom: 0.75rem;
}

.privacy-body h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--overlay-light);
}

.privacy-body h4 {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.75rem;
    margin-bottom: 0.3rem;
}

.privacy-body ul {
    margin: 0.4rem 0 0.75rem 1.25rem;
    color: var(--text-subtle);
}

.privacy-body li {
    margin-bottom: 0.25rem;
}

.privacy-updated {
    font-size: 0.8rem;
    color: var(--text-faint);
}

/* Settings feedback hint */
.setting-feedback {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-faint);
}

/* Focus indicators for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--text-link-hover);
    outline-offset: 2px;
}

.modal-content :focus-visible {
    outline-color: var(--accent);
}

.setting-group input[type="text"]:focus-visible {
    outline: none;
    border-color: var(--accent);
}

/* Game Viewer Modal */
.modal-content-viewer {
    position: relative;
    /* Design-unification trial: the viewer adopts the home screen's
       type stack (2026-08-05, step 1 of the language merge). */
    font-family: var(--font-sans);
    background: linear-gradient(135deg,
        var(--modal-bg),
        color-mix(in srgb, var(--modal-bg), light-dark(white, black) 42%));
    border-radius: var(--radius-card);
    max-width: 560px;
    width: 95%;
    max-height: 98vh;
    max-height: 98dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-modal), inset 0 1px 0 0 rgba(255,255,255,0.05);
}

.viewer-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

button.viewer-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 10;
    background: var(--close-btn-bg);
    border: none;
    color: var(--toolbar-icon);
    padding: 0;
    margin: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.viewer-close:hover {
    color: var(--accent);
    background: var(--close-btn-bg-hover);
}

/* Mobile app-shell nav bar — hidden on desktop, shown below 1000px.
   Sits at the top of the modal, extends through the safe-area (notch)
   with matched bg so the status bar icons sit on our header instead of
   over content. Three-col grid: back · title · close. */
.viewer-navbar { display: none; }

/* Chessground overrides */
.viewer-board cg-board {
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.viewer-board cg-board square.move-dest {
    background: radial-gradient(var(--board-dot) 22%, transparent 0);
}
.viewer-board cg-board square.oc.move-dest {
    background: radial-gradient(transparent 0%, transparent 80%, var(--board-capture) 80%);
}
.viewer-board cg-board square.last-move,
.tab-preview-board cg-board square.last-move {
    background-color: var(--board-highlight);
}
.viewer-board cg-board square.selected {
    background-color: var(--board-select);
}

.viewer-header {
    margin-bottom: 0.75rem;
}

.viewer-browser-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.viewer-round-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.viewer-browse-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    font-family: inherit;
    color: var(--text-muted);
    background: var(--surface-btn);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    padding: 0;
    line-height: 1;
}

.viewer-browse-arrow:hover {
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.viewer-browse-arrow:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.viewer-browse-arrow.hidden {
    display: inline-flex !important;
    visibility: hidden;
}

.viewer-browse-back {
    background: none;
    border: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-decoration-color: var(--text-muted);
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
}
.viewer-browse-back:hover { color: var(--text-primary); }

.viewer-filter-chip {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin-bottom: 0.4rem;
}

.viewer-filter-clear {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-family: inherit;
    color: var(--text-faint);
    background: var(--overlay-light);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    padding: 0 0.5rem 0 0.35rem;
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.viewer-filter-clear:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.35);
}

.viewer-opening {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--raised-panel-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.viewer-eco-code {
    font-weight: 700;
    color: var(--text-subtle);
    margin-right: 0.4rem;
}

.viewer-players {
    display: flex;
    align-items: stretch;
    gap: 0;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
}

.viewer-player {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
    background: var(--surface-subtle);
    border-bottom: 2px solid transparent;
    border-top: 1px solid var(--surface);
}

/* White: name left, score+icon right */
.viewer-player:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.viewer-player:first-child .viewer-player-name {
    flex: 1;
    text-align: left;
}

/* Black: score+icon left, name right */
.viewer-player:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.viewer-player:last-child .viewer-player-name {
    flex: 1;
    text-align: right;
}

.viewer-player.viewer-winner {
    border-bottom-color: var(--result-win-border);
    background: var(--result-win-bg);
}

.viewer-player.viewer-loser {
    border-bottom-color: var(--result-lose-border);
    background: var(--result-lose-bg);
}

.viewer-player.viewer-draw {
    border-bottom-color: var(--result-draw-border);
    background: var(--result-draw-bg);
}

.viewer-player-score {
    /* Results are chess data — mono like every other number in the app.
       (A serif accent was trialed here 2026-08-05 and read as a one-off.) */
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex-shrink: 0;
    color: var(--text-primary);
}

.viewer-winner .viewer-player-score { color: var(--result-win-text); }
.viewer-winner .viewer-player-name,
.viewer-winner .viewer-player-elo { color: var(--text-primary); }

.viewer-loser .viewer-player-score { color: var(--result-lose-text); }
.viewer-loser .viewer-player-name,
.viewer-loser .viewer-player-elo { color: var(--text-primary); }

.viewer-player-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--text-subtle);
    background: rgb(from var(--foreground) r g b / 0.06);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.viewer-player-clock .clock-icon {
    flex-shrink: 0;
}

.viewer-player-clock.clock-active {
    color: var(--text-primary);
    background: rgb(from var(--foreground) r g b / 0.1);
}

.viewer-player-clock.clock-low {
    color: var(--result-lose-text);
    background: rgb(from var(--result-lose-text) r g b / 0.12);
}

.viewer-piece-icon {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    flex-shrink: 0;
}

.viewer-player-rating {
    font-family: var(--font-mono);
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.viewer-unrated {
    opacity: 0.6;
}
.viewer-player-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    cursor: pointer;
}

.viewer-player-name:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Board layout */
.tnmp-viewer-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
}

.viewer-board-col {
    position: relative;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.viewer-board-col::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    box-shadow:
        inset 0 1px 0 0    rgba(255,255,255,0.08),
        inset 0 0 0 1px    rgba(255,255,255,0.04);
    pointer-events: none;
    z-index: 4;
}
.light-scheme .viewer-board-col {
    box-shadow:
        0 1px 1px -0.5px rgb(0 0 0 / 0.08),
        0 3px 3px -1.5px rgb(0 0 0 / 0.08),
        0 6px 6px   -3px rgb(0 0 0 / 0.08),
        0 12px 12px  -6px rgb(0 0 0 / 0.08);
}
.light-scheme .viewer-board-col::after {
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.light-scheme .eval-bar {
    background: color-mix(in srgb, var(--modal-bg) 20%, #1a1a1a);
}
.viewer-board {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    flex-shrink: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 0;
}

/* Engine choice dialog */
.engine-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}
.engine-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}
.engine-choice input[type="radio"] { margin-top: 3px; }
.engine-choice-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--text-primary, #e0e0e0);
}
.engine-choice-label small {
    color: var(--text-secondary, #999);
    font-size: 0.8rem;
}

/* Move list */
.viewer-moves {
    width: 100%;
    min-width: 0;
    height: 120px;
    overflow-y: auto;
    user-select: none;
    -webkit-user-select: none;
    overflow-x: hidden;
    padding: 0.5rem 0.75rem;
    background: var(--raised-panel-bg);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.8;
    box-shadow: var(--shadow-sm);
}

/* Engine analysis panel */
.engine-panel {
    background: var(--raised-panel-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: 0.8rem;
    /* The panel mounts in four hosts of very different widths (side col,
       browser column, mobile sheet, explorer) — it adapts to its own
       measured width, not the viewport's. */
    container-type: inline-size;
}
.engine-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
    /* Squeezed past its floor, the header breaks into title/controls
       rows instead of clipping — leaf items never split mid-content. */
    flex-wrap: wrap;
    row-gap: 0.15rem;
}
.engine-panel-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.engine-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}
.engine-variant-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-faint, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.engine-panel-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-faint, rgba(255, 255, 255, 0.5));
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}
.engine-depth {
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    white-space: nowrap;
}

/* Narrow panel: shed diagnostics before anything interactive. */
@container (max-width: 430px) {
    .engine-nps { display: none; }
}
@container (max-width: 340px) {
    .engine-variant-badge { display: none; }
}
.engine-lines-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}
.engine-lines-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.1rem 0.2rem;
    cursor: pointer;
}
.engine-pv-lines {
    display: flex;
    flex-direction: column;
}
.engine-pv-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    min-height: 1.6em;
    font-family: var(--font-mono);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.engine-pv-row:last-child { border-bottom: none; }
.engine-pv-score {
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 3.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    line-height: 1.3;
}
.engine-score-white {
    background: #f0f0f0;
    color: #1a1a1a;
}
.engine-score-black {
    background: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.engine-score-even {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}
.engine-pv-moves {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    line-height: 1.4;
}
.engine-pv-movenum {
    color: var(--text-faint);
}
.engine-pv-move {
    cursor: pointer;
    padding: 0.05rem 0.15rem;
    border-radius: 2px;
}
.engine-pv-move:hover {
    background: rgb(from var(--accent) r g b /0.2);
    color: var(--text-primary);
}
.engine-pv-empty { min-height: 1.6em; }
.engine-pv-loading { color: var(--text-subtle); font-size: 0.8rem; padding: 0.5rem 0.75rem; }

/* Engine pause/play button */
.engine-pause-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}
.engine-pause-btn:hover { color: var(--text-primary); }

/* Engine speed indicator */
.engine-nps {
    font-size: 0.6rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* Engine settings gear */
.engine-settings-btn {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}
.engine-settings-btn:hover { color: var(--text-primary); }

/* Engine settings dialog */
.engine-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.engine-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.engine-setting-name {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 5em;
}
.engine-setting-select {
    background: var(--overlay-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    flex: 1;
    max-width: 160px;
}
.engine-setting-depth-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    max-width: 200px;
}
.engine-setting-range {
    flex: 1;
    accent-color: var(--accent);
}
.engine-setting-val {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    min-width: 1.5em;
    text-align: center;
}
.engine-setting-inf-label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
}
.engine-setting-inf-label input { cursor: pointer; }

/* Eval bar */
.eval-bar {
    width: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--modal-bg) 50%, #1a1a1a);
    border: none;
    position: relative;
    overflow: hidden;
    align-self: stretch;
    box-shadow: var(--shadow-sm);
}
.eval-bar.hidden { display: none; }
.eval-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: #e8e8e8;
    transition: height 0.3s ease;
}
.eval-bar-flipped .eval-bar-fill {
    bottom: auto;
    top: 0;
}
.eval-bar-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    z-index: 1;
    line-height: 1;
}
.eval-bar-label-bottom { bottom: 4px; }
.eval-bar-label-top { top: 4px; }
.eval-bar-label-dark { color: #1a1a1a; }
.eval-bar-label-light { color: #e0e0e0; }

.move-number {
    color: var(--text-faint);
    margin-right: 0.1rem;
}

.move {
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    white-space: nowrap;
}

.move:hover {
    background: rgb(from var(--accent) r g b /0.15);
}

.move-current {
    background: rgb(from var(--accent) r g b /0.25);
    color: var(--accent);
}

.move-nag {
    color: var(--nag-mistake);
    font-weight: 700;
    font-size: 0.95em;
    margin-left: 1px;
}
/* Move assessment colors (Lichess-style) — applied to NAG symbol, main-line moves, and variation moves */
.move-nag [data-nag="3"],  .move:has([data-nag="3"]),  .move-variation:has([data-nag="3"])  { color: var(--nag-brilliant); }
.move-nag [data-nag="1"],  .move:has([data-nag="1"]),  .move-variation:has([data-nag="1"])  { color: var(--nag-good); }
.move-nag [data-nag="5"],  .move:has([data-nag="5"]),  .move-variation:has([data-nag="5"])  { color: var(--nag-interesting); }
.move-nag [data-nag="6"],  .move:has([data-nag="6"]),  .move-variation:has([data-nag="6"])  { color: var(--nag-dubious); }
.move-nag [data-nag="2"],  .move:has([data-nag="2"]),  .move-variation:has([data-nag="2"])  { color: var(--nag-mistake); }
.move-nag [data-nag="4"],  .move:has([data-nag="4"]),  .move-variation:has([data-nag="4"])  { color: var(--nag-blunder); }
.move-nag [data-nag="9"],  .move:has([data-nag="9"]),  .move-variation:has([data-nag="9"])  { color: var(--nag-worst); }
.move-nag [data-nag="7"],  .move:has([data-nag="7"]),  .move-variation:has([data-nag="7"])  { color: var(--nag-forced); }

/* Current-move highlight on an annotated move: swap the subtle accent-tint
   for a vivid fill in the NAG's own color and flip text/NAG-symbol to white
   for contrast. Non-annotated current moves keep the default accent tint.
   Each selector carries both the main-line and variation context so it
   beats the existing `.move-table .move.move-current` / `.move-variation.move-current`
   rules on specificity. */
.move-table .move.move-current:has([data-nag="3"]),
.move-variation.move-current:has([data-nag="3"]) { background: var(--nag-brilliant); }
.move-table .move.move-current:has([data-nag="1"]),
.move-variation.move-current:has([data-nag="1"]) { background: var(--nag-good); }
.move-table .move.move-current:has([data-nag="5"]),
.move-variation.move-current:has([data-nag="5"]) { background: var(--nag-interesting); }
.move-table .move.move-current:has([data-nag="6"]),
.move-variation.move-current:has([data-nag="6"]) { background: var(--nag-dubious); }
.move-table .move.move-current:has([data-nag="2"]),
.move-variation.move-current:has([data-nag="2"]) { background: var(--nag-mistake); }
.move-table .move.move-current:has([data-nag="4"]),
.move-variation.move-current:has([data-nag="4"]) { background: var(--nag-blunder); }
.move-table .move.move-current:has([data-nag="9"]),
.move-variation.move-current:has([data-nag="9"]) { background: var(--nag-worst); }
.move-table .move.move-current:has([data-nag="7"]),
.move-variation.move-current:has([data-nag="7"]) { background: var(--nag-forced); }

.move-table .move.move-current:has([data-nag]),
.move-variation.move-current:has([data-nag]),
.move-table .move.move-current:has([data-nag]) .move-nag [data-nag],
.move-variation.move-current:has([data-nag]) .move-nag [data-nag] { color: #fff; }

.move-comment {
    color: var(--text-faint);
    font-style: italic;
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

.move-variation {
    color: var(--text-muted);
    font-size: 0.92em;
    cursor: pointer;
    padding: 0.1rem 0.15rem;
    border-radius: 3px;
}

.move-variation:hover {
    background: rgb(from var(--accent) r g b /0.1);
}

.move-variation.move-current {
    background: rgb(from var(--accent) r g b /0.2);
    color: var(--accent);
}

.move-variation-block {
    color: var(--text-faint);
    font-size: 0.92em;
}

/* Variation collapse toggle */
.var-toggle {
    cursor: pointer;
    color: var(--text-faint);
    font-size: 1.1em;
    margin-right: 0.2em;
    user-select: none;
}

[data-var-node] {
    cursor: pointer;
}

.mt-variation.collapsed,
.move-variation-block.collapsed {
    color: var(--text-faint);
}

.mt-variation.collapsed {
    border-left-style: dashed;
}

/* Branch popover — centered overlay when branch mode prompts a choice */
.branch-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;
    border-radius: inherit;
}

.branch-popover {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--popup-bg);
    border-radius: var(--radius-sm);
    padding: 4px;
    min-width: 100px;
    box-shadow: var(--shadow-md);
}

.branch-option {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.branch-option:hover,
.branch-option.branch-selected {
    background: var(--border-color);
    color: var(--text-primary);
}

.branch-option.branch-main {
    font-weight: 600;
}

/* Shared raised-panel look: dark bg, subtle border, soft shadow */
.raised-panel {
    background: var(--raised-panel-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* Toolbar: full-width dark bar spanning modal bottom */
.viewer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding: 0.25rem;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}
.viewer-toolbar.hidden {
    display: none;
}

.viewer-tool-group {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;
    margin-top: -5px;
}

.viewer-tool-btn {
    position: relative;
    background: transparent;
    color: var(--toolbar-icon);
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.5rem;
    touch-action: manipulation;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0.35rem;
    flex-shrink: 0;
}

.viewer-tool-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.viewer-tool-btn:hover {
    background: var(--overlay-light);
    color: var(--accent);
}

.tool-label {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    opacity: 0.7;
    white-space: nowrap;
    pointer-events: none;
}

.viewer-tool-btn.active {
    color: var(--accent);
}

/* Separator between tool buttons and nav controls */
.viewer-toolbar-sep {
    width: 1px;
    height: 1.4rem;
    background: var(--border-color);
    flex-shrink: 0;
    margin: 0 0.1rem;
}

/* Nav group: the central playback controls */
.viewer-nav-group {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.viewer-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    color: var(--toolbar-icon);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0.4rem;
}

.viewer-nav-btn svg {
    width: 100%;
    height: 100%;
}

.viewer-nav-btn:hover {
    background: var(--overlay-light);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.viewer-nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.viewer-nav-btn:disabled:hover {
    background: transparent;
    color: var(--toolbar-icon);
}

/* Toolbar tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--surface-primary);
    color: var(--text-primary);
    font-size: 0.7rem;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: var(--radius-xs);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    transition-delay: 0s;
    z-index: 100;
}

/* Hover-capable devices only — on touch, :hover sticks after a tap and
   the tooltip parks itself over whatever sits below the button. */
@media (hover: hover) {
    [data-tooltip]:hover::after {
        opacity: 1;
        transition-delay: 0.5s;
    }
}

[data-tooltip]:active::after {
    opacity: 0;
    transition-delay: 0s;
}

/* Share popover */
.share-btn-wrapper {
    position: relative;
}

.share-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    min-width: 150px;
    overflow: hidden;
}

.share-popover.hidden {
    display: none;
}

.share-option {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.share-option:hover {
    background: var(--overlay-light);
}

.share-option.hidden {
    display: none;
}

/* Overflow menu (mobile only — hidden on desktop) */
.overflow-btn-wrapper {
    display: none; /* shown via mobile media query */
    position: relative;
}

.overflow-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    min-width: 180px;
    overflow: hidden;
}

.overflow-menu.hidden {
    display: none;
}

.overflow-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.overflow-item svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: var(--text-muted);
}

.overflow-item:hover {
    background: var(--overlay-light);
}

.overflow-item.active {
    color: var(--accent);
}

.overflow-item.active svg {
    color: var(--accent);
}

.overflow-sep {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}

/* Emphasize play button */
.viewer-play-btn {
    width: 2.8rem;
    height: 2.8rem;
    padding: 0.35rem;
    background: var(--overlay-light);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.viewer-play-btn:hover {
    background: var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Add Moves prompt (submission workflow) */
.viewer-add-moves {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.viewer-add-moves p { margin: 0; }
.viewer-add-moves-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}
.viewer-add-moves-btn:hover { opacity: 0.85; }
.viewer-submit-btn { color: var(--accent); }
.viewer-submit-btn:hover { background: var(--accent); color: #fff; }
/* View Game button in round detail */
.view-game-btn {
    margin-top: 0.75rem;
    padding: 0.55rem 1.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--overlay-light);
    border: 1px solid rgb(from var(--text-primary) r g b / 0.28);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.view-game-btn:hover {
    background: var(--overlay-light-hover);
    transform: translateY(-1px);
}

/* Mobile: toggle browser panel vs viewer via .browser-only */
.viewer-browser-panel:not(.hidden) {
    display: none; /* hidden by default on mobile */
}
.modal-content-viewer.browser-only .viewer-browser-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 0;
}
.modal-content-viewer.browser-only .viewer-main {
    display: none;
}
.modal-content-viewer.browser-only .viewer-close {
    z-index: 2; /* above browser panel */
}

/* Desktop wide viewer — side-by-side board + moves */
@media (min-width: 768px) {
    .modal-content-viewer {
        max-width: 95vw;
        height: 90vh;
        width: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .viewer-browser-panel.hidden { display: none; }
    .viewer-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .tnmp-viewer-layout {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
    }
    .viewer-board-col {
        display: flex;
        flex-direction: column;
        height: 100%;
        flex-shrink: 0;
        aspect-ratio: 1;
    }
    .viewer-board {
        width: 100%;
        aspect-ratio: 1;
        max-width: none;
        min-width: 200px;
    }
    .viewer-side-col {
        flex: 1;
        min-width: 160px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height: 100%;
        min-height: 0;
    }
    .viewer-moves {
        flex: 1;
        height: auto;
        overflow-y: auto;
    }
    .engine-panel {
        flex-shrink: 0;
    }
}

/* Below 1000px: mobile = full-screen app, not a modal-on-backdrop. */
@media (max-width: 999px) {
    /* Full-bleed app shell — pinned directly to the viewport. No dvh, no
       inherited sizing from ancestors, no flex centering artifacts. The navbar
       pads safe-area-top, the toolbar pads safe-area-bottom; L/R insets apply
       to the shell for landscape notch/cutouts. */
    .modal-content-viewer {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
        background: var(--modal-bg);
    }
    /* Desktop floating close is replaced by navbar close on mobile */
    .modal-content-viewer > button.viewer-close { display: none; }
    /* Hide the in-panel round·board nav — the round/board label lives in the navbar now */
    .modal-content-viewer .viewer-browser-nav { display: none; }

    /* Nav bar — top strip with safe-area-top padding, matched bg, extends through notch */
    .viewer-navbar {
        display: grid;
        grid-template-columns: 2.75rem 1fr 2.75rem;
        align-items: center;
        flex-shrink: 0;
        padding-top: env(safe-area-inset-top);
        background: var(--modal-bg);
        border-bottom: 1px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.08));
    }
    .viewer-navbar-btn {
        background: transparent;
        border: none;
        color: var(--toolbar-icon);
        width: 2.75rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        margin: 0;
    }
    .viewer-navbar-btn:hover,
    .viewer-navbar-btn:active {
        color: var(--accent);
    }
    .viewer-navbar-title {
        text-align: center;
        font-weight: 600;
        font-size: 1rem;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 0.5rem;
        min-width: 0;
    }
    /* Back button hidden in browser mode (top-level — nothing to go back to) */
    .modal-content-viewer.navbar-mode-browser .viewer-navbar-back {
        visibility: hidden;
    }

    /* Browser list extends through safe-area-bottom; inner scroll padding keeps
       the last game row clear of the home indicator without exposing modal bg. */
    .modal-content-viewer.browser-only .browser-games {
        padding-bottom: calc(0.3rem + env(safe-area-inset-bottom));
    }

    /* When the .browser-title-panel is hosted inside the navbar slot
       (browser mode only), flatten its h2/select styling to fit the nav row. */
    .viewer-navbar-title .browser-title-panel {
        margin: 0;
        padding: 0;
        font-size: 1rem;
        font-weight: 600;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .viewer-navbar-title .browser-title-select,
    .viewer-navbar-title .browser-title-trigger {
        font-size: 1rem;
        padding: 0.35rem 0.5rem;
        box-shadow: none;
        background: transparent;
        font-weight: 600;
    }
    .tnmp-viewer-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .viewer-board-col {
        height: auto;
        flex-shrink: 1;
        width: 100%;
        aspect-ratio: auto;
    }
    .viewer-board {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .eval-bar { display: none !important; }
    .viewer-side-col {
        width: 100%;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .engine-panel {
        margin-top: 0.4rem;
    }
    .engine-pv-row:nth-child(n+2) { display: none; }
    .engine-lines-label { display: none; }
    .viewer-moves {
        flex: 1;
        height: auto;
        min-width: 0;
        width: 100%;
    }
    .viewer-toolbar {
        gap: 0.1rem;
        padding: 0.2rem 0.2rem calc(0.2rem + env(safe-area-inset-bottom));
    }
    .viewer-toolbar-sep {
        margin: 0;
    }
    .viewer-tool-btn {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0.3rem;
        flex-direction: row;
    }
    .tool-label { display: none; }
    .viewer-nav-btn {
        width: 2rem;
        height: 2.25rem;
        padding: 0.35rem;
    }
    .viewer-play-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ─── Tab Bar ─────────────────────────────────────────────────── */

.viewer-tab-host {
    display: contents;
}
@media (min-width: 1600px) {
    .viewer-tab-host {
        display: flex;
        flex-direction: column;
        max-height: 98vh;
        max-height: 98dvh;
        /* Paint above the .modal-backdrop sibling explicitly — without
           this, the host's gradient (and the tab bar on it) only stayed
           on top via the entry animation's held transform. */
        position: relative;
    }
    /* Tab-host owns the modal chrome only when a tab bar sits on top of it.
       Without the tab bar (single-tab embed), the modal-content-viewer
       keeps its own background and shadow from the base rule. */
    .viewer-tab-host:has(.viewer-tab-bar) {
        border-radius: var(--radius-card);
        background: linear-gradient(135deg,
            var(--modal-bg),
            color-mix(in srgb, var(--modal-bg), light-dark(white, black) 42%));
        box-shadow: var(--shadow-modal), inset 0 1px 0 0 rgba(255,255,255,0.08);
    }
    .viewer-tab-host:has(.viewer-tab-bar) .modal-content-viewer {
        box-shadow: none;
    }
}
.viewer-tab-bar {
    display: none; /* hidden on mobile */
}

@media (min-width: 1600px) {
    .viewer-tab-bar {
        display: flex;
        align-items: flex-end;
        background: light-dark(rgb(from var(--accent) r g b / 0.15), rgba(0, 0, 0, 0.4));
        padding: 6px 6px 0 6px;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        gap: 0;
        min-height: 38px;
        flex-shrink: 0;
    }
    .viewer-tab-bar .tab-list {
        display: flex;
        min-width: 0;
    }
    .viewer-tab-bar .tab-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 1 250px;
        min-width: 0;
        max-width: 250px;
        padding: 6px 10px;
        border: none;
        background: transparent;
        color: var(--text-primary);
        opacity: 0.6;
        font-size: 0.8rem;
        cursor: pointer;
        position: relative;
        border-radius: 12px;
        margin-bottom: 4px;
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .viewer-tab-bar .tab-btn + .tab-btn {
        margin-left: 3px;
    }
    /* Floating divider between tabs */
    .viewer-tab-bar .tab-btn + .tab-btn::before {
        content: '';
        position: absolute;
        left: -2px;
        top: 15%;
        height: 60%;
        width: 2px;
        background: currentColor;
        opacity: 0.15;
    }
    .viewer-tab-bar .tab-btn.tab-active + .tab-btn::before,
    .viewer-tab-bar .tab-btn:hover::before,
    .viewer-tab-bar .tab-btn:hover + .tab-btn:not(.tab-active)::before {
        opacity: 0;
    }
    .viewer-tab-bar .tab-btn:hover:not(.tab-active) {
        background: rgb(from var(--accent) r g b / 0.15);
    }
    .viewer-tab-bar .tab-btn.tab-dragging {
        z-index: 20;
        cursor: grabbing;
    }
    .viewer-tab-bar .tab-btn.tab-active {
        color: var(--text-primary);
        opacity: 1;
        position: relative;
        z-index: 3;
        border-radius: 12px 12px 0 0;
        margin-top: auto;
        height: 37px;
        margin-bottom: -1px;
        padding-top: 1px;
        box-shadow:
            inset 0 1px 0 0 rgba(255,255,255,0.08),
            inset 1px 0 0 0 rgba(255,255,255,0.08),
            inset -1px 0 0 0 rgba(255,255,255,0.08);
    }
    .viewer-tab-bar .tab-btn.tab-active::before {
        content: '';
        position: absolute;
        top: auto; bottom: 0; left: -14px;
        width: 15px; height: 15px;
        background:
            radial-gradient(circle at 0 0, transparent 14px, rgba(255,255,255,0.08) 14px, rgba(255,255,255,0.08) 15px, transparent 15px),
            radial-gradient(circle at 0 0, transparent 14px, var(--tab-left, light-dark(var(--modal-bg), var(--surface-subtle))) 14px);
        opacity: 1;
        z-index: 2;
    }
    .viewer-tab-bar .tab-btn.tab-active::after {
        content: '';
        position: absolute;
        bottom: 0; right: -14px;
        width: 15px; height: 15px;
        background:
            radial-gradient(circle at 100% 0, transparent 14px, rgba(255,255,255,0.08) 14px, rgba(255,255,255,0.08) 15px, transparent 15px),
            radial-gradient(circle at 100% 0, transparent 14px, var(--tab-right, light-dark(var(--modal-bg), var(--surface-subtle))) 14px);
        z-index: 2;
    }
    .tab-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        text-align: left;
    }
    .tab-icon {
        flex-shrink: 0;
    }
    .tab-close {
        flex-shrink: 0;
        font-size: 1rem;
        line-height: 1;
        opacity: 0;
        padding: 2px 4px;
        border-radius: 4px;
        transition: opacity var(--transition-fast), background var(--transition-fast);
    }
    .tab-active .tab-close {
        opacity: 0.5;
    }
    .tab-btn:hover .tab-close {
        opacity: 0.5;
    }
    .tab-close:hover {
        opacity: 1 !important;
        background: var(--overlay-light);
    }
    .tab-close.hidden {
        display: none;
    }
    .tab-new,
    .tab-bar-close {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--text-primary);
        opacity: 0.6;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px 4px;
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .tab-new:hover,
    .tab-bar-close:hover {
        background: var(--surface-subtle);
        color: var(--text-primary);
        opacity: 1;
    }
    .tab-bar-close {
        margin-right: 3px;
    }
    .tab-new {
        margin-left: 3px;
        padding-bottom: 2px;
    }
    /* When tab bar exists, hide the in-modal floating close button — tab bar owns close */
    .viewer-tab-host:has(.viewer-tab-bar) .modal-content-viewer > button.viewer-close {
        display: none;
    }
    /* Only square the top corners when a tab bar is actually rendered above
       (tab bar is absent in single-tab embed mode). */
    .viewer-tab-host:has(.viewer-tab-bar) .modal-content-viewer {
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08);
    }
    .viewer-tab-host {
        width: 95vw;
    }
}

/* Tab hover preview */
.tab-preview {
    position: absolute;
    z-index: 100;
    width: 260px;
    background: var(--modal-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    transition: left 150ms ease, top 150ms ease, opacity 150ms ease;
}
.tab-preview.hidden {
    display: none;
}
.tab-preview-board {
    width: 260px;
    height: 260px;
}
.tab-preview-label {
    padding: 6px 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Desktop combined layout: browser + viewer side-by-side */
@media (min-width: 1000px) {
    .modal-content-viewer.has-browser {
        flex-direction: row;
        width: 100%;
        padding: 0;
    }
    .modal-content-viewer.has-browser .viewer-main {
        display: flex; /* override .browser-only hiding */
        padding: 1.5rem 1.5rem 1.5rem 0.75rem;
    }
    .modal-content-viewer.browser-only .viewer-main {
        display: flex; /* .browser-only is ignored on desktop */
    }
    /* Explorer back button is only useful on mobile (desktop shows both panels) */
    [data-action="explorer-back"] { display: none; }
    .viewer-browser-panel:not(.hidden) {
        display: flex;
        flex-direction: column;
        flex: 0 0 520px;
        overflow: hidden;
        padding: 1.5rem 0.75rem 1.5rem 1.5rem;
    }
}

/* 1000-1599px: stacked column layout inside browser panel (same as mobile, just wider) */
@media (min-width: 1000px) and (max-width: 1599px) {
    .tool-label { display: none; }
    .viewer-tool-group { margin-top: 0; }
    .modal-content-viewer.has-browser {
        height: 90vh;
        max-width: 1000px;
    }
    .has-browser .tnmp-viewer-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .has-browser .viewer-board-col {
        height: auto;
        flex-shrink: 1;
        width: 100%;
        aspect-ratio: auto;
    }
    .has-browser .viewer-board {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .has-browser .viewer-side-col {
        width: 100%;
    }
    .has-browser .viewer-moves {
        flex: 1;
        height: auto;
        min-width: 0;
        width: 100%;
    }
    /* Engine panel moves under browser column on tablet */
    .viewer-browser-panel > .engine-panel {
        flex-shrink: 0;
        margin: 0.5rem 0 0;
        width: 100%;
        box-sizing: border-box;
    }
    .viewer-browser-panel > .engine-panel .engine-pv-moves {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .has-browser .eval-bar { display: none !important; }
}

/* Browser panel content styling */
.viewer-browser-panel .browser-content {
    margin-top: calc(9rem / 16);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.viewer-browser-panel .browser-search {
    padding: 0;
}
.viewer-browser-panel .browser-filters {
    padding: 0 0.75rem;
}
.viewer-browser-panel .browser-games-wrap {
    flex: 1;
    padding: 0.25rem;
}
.viewer-browser-panel .browser-game-row {
    padding: calc(0.35rem + 1.5px) 0.75rem;
    font-size: 0.82rem;
}
.viewer-browser-panel .browser-game-row.active {
    background: rgb(from var(--accent) r g b / 0.15);
}
.viewer-browser-panel h2 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Move table (desktop two-column format) */
.move-table {
    display: grid;
    grid-template-columns: 2rem 1fr 1fr;
    gap: 0;
    width: 100%;
}

.move-table .move-num {
    color: var(--text-faint);
    font-size: 0.9em;
    padding: 0.2rem 0.4rem 0.2rem 0;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.move-table .move {
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.move-table .move:hover {
    background: rgb(from var(--accent) r g b /0.15);
}

.move-table .move-empty {
    padding: 0.2rem 0.4rem;
    display: flex;
    align-items: center;
}

.move-table .move-num,
.move-table .move,
.move-table .move-empty {
    border-bottom: 1px solid var(--surface);
}

.move-table .mt-stripe {
    background: rgb(from var(--accent) r g b / 0.035);
}

.move-table .mt-comment {
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-style: italic;
    font-size: 0.85em;
    padding: 0.15rem 0.4rem 0.3rem 2.4rem;
    border-bottom: 1px solid var(--surface);
    overflow-wrap: anywhere;
    min-width: 0;
}

.comment-editing {
    outline: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.2);
    cursor: text;
}

.move-table .mt-variation {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.88em;
    padding: 0.2rem 0.4rem 0.2rem 2.4rem;
    border-bottom: 1px solid var(--surface);
    border-left: 2px solid rgb(from var(--accent) r g b /0.5);
    line-height: 1.7;
    overflow-wrap: anywhere;
    min-width: 0;
}

.move-table .move.move-current {
    background: rgb(from var(--accent) r g b /0.25);
    color: var(--accent);
}

/* ==========================================================================
   PGN Editor — only editor-specific styles (reuses viewer-* classes)
   ========================================================================== */

.editor-h-btn {
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
.editor-h-btn:hover { background: var(--overlay-light-hover); }
.editor-h-btn-secondary { background: var(--surface-subtle); }
.editor-h-btn-secondary:hover { background: var(--border-color); }

/* Editor comment input (below board in editor mode) */
/* Status bar */
/* NAG picker */
.editor-nag-picker {
    position: fixed;
    z-index: 2001;
    background: var(--popup-bg);
    border-radius: var(--radius-sm);
    padding: 6px;
    max-height: min(70vh, 500px);
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    width: max-content;
    min-width: 200px;
    max-width: 260px;
}
.editor-nag-picker:not(.hidden) { display: block; }
.nag-section { margin-bottom: 4px; }
.nag-section:last-child { margin-bottom: 0; }
.nag-section-title {
    font-size: 0.65rem;
    color: var(--text-faint);
    padding: 4px 8px 2px;
}
.nag-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 5px 8px;
    text-align: left;
}
.nag-btn:hover { background: var(--overlay-light); }
.nag-btn.nag-active { background: rgb(from var(--accent) r g b /0.2); }
.nag-btn.nag-active .nag-symbol { color: var(--accent); }
.nag-symbol {
    width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--nag-mistake);
    flex-shrink: 0;
}
.nag-btn[data-nag="3"]  .nag-symbol { color: var(--nag-brilliant); }
.nag-btn[data-nag="1"]  .nag-symbol { color: var(--nag-good); }
.nag-btn[data-nag="5"]  .nag-symbol { color: var(--nag-interesting); }
.nag-btn[data-nag="6"]  .nag-symbol { color: var(--nag-dubious); }
.nag-btn[data-nag="2"]  .nag-symbol { color: var(--nag-mistake); }
.nag-btn[data-nag="4"]  .nag-symbol { color: var(--nag-blunder); }
.nag-btn[data-nag="9"]  .nag-symbol { color: var(--nag-worst); }
.nag-btn[data-nag="7"]  .nag-symbol { color: var(--nag-forced); }
.nag-label {
    font-size: 0.8rem;
    color: var(--text-subtle);
}

/* Move context menu (right-click / long-press) — opens instantly, fades on close */
.editor-context-menu {
    position: fixed;
    z-index: 2001;
    background: var(--popup-bg);
    border-radius: var(--radius-sm);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-width: 180px;
}
.editor-context-menu.closing,
.share-popover.closing,
.overflow-menu.closing {
    animation: menu-fade-out 200ms ease-out both;
    pointer-events: none;
}
@keyframes menu-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.ctx-nag-row {
    display: flex;
    gap: 2px;
    padding: 6px 6px 8px;
    border-bottom: 1px solid var(--overlay-light);
    margin-bottom: 4px;
}
.ctx-nag {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 0;
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.ctx-nag:hover { background: var(--overlay-light); }
.ctx-nag.nag-active { background: rgb(from var(--accent) r g b /0.2); border-color: rgb(from var(--accent) r g b /0.4); }
.ctx-nag[data-nag="1"] { color: var(--nag-good); }
.ctx-nag[data-nag="2"] { color: var(--nag-mistake); }
.ctx-nag[data-nag="3"] { color: var(--nag-brilliant); }
.ctx-nag[data-nag="4"] { color: var(--nag-blunder); }
.ctx-nag[data-nag="5"] { color: var(--nag-interesting); }
.ctx-nag[data-nag="6"] { color: var(--nag-dubious); }
.ctx-item {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
}
.editor-context-menu .ctx-item:first-child { padding-top: 8px; }
.editor-context-menu .ctx-item:last-child { padding-bottom: 8px; }
.ctx-item:hover { background: var(--overlay-light); }

/* Promotion picker */
.board-promotion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 4px;
    background: rgba(0,0,0,0.9);
    border: 1px solid var(--overlay-light-hover);
    border-radius: 10px;
    padding: 8px;
    z-index: 30;
}
.board-promotion:not(.hidden) { display: flex; }
.promo-btn {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 6px;
    background: var(--overlay-light);
    cursor: pointer;
    padding: 4px;
}
.promo-btn:hover { background: rgba(255,255,255,0.25); }
.promo-btn img { width: 100%; height: 100%; object-fit: contain; }

/* Import dialog */
.editor-import-dialog {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: var(--overlay-backdrop);
    z-index: 25;
}
.editor-import-dialog:not(.hidden) { display: flex; }
.editor-import-content {
    background: linear-gradient(135deg,
        var(--modal-bg),
        color-mix(in srgb, var(--modal-bg), light-dark(white, black) 42%));
    border-radius: var(--radius-card);
    padding: 1.25rem;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-modal);
}
.editor-import-content h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--text-primary);
}
.editor-import-text {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--surface);
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
    color: var(--text-primary);
    font-family: monospace;
    font-size: 0.8rem;
    resize: vertical;
    box-sizing: border-box;
    box-shadow: inset 0 2px 4px var(--shadow-color);
}
.editor-import-text.drag-over {
    border-color: var(--accent);
    background: rgba(74, 144, 226, 0.1);
}
.editor-file-btn { cursor: pointer; }
.editor-file-btn input { display: none; }
.editor-import-spacer { flex: 1; }
.editor-import-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.editor-dirty-content { max-width: 400px; }
.editor-dirty-message { color: var(--text-subtle); margin: 0.5rem 0 1rem; }
.editor-dirty-actions { flex-wrap: wrap; }

/* Confirm dialog */
.confirm-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-backdrop);
    z-index: 30;
}
.confirm-dialog {
    background: linear-gradient(135deg,
        var(--modal-bg),
        color-mix(in srgb, var(--modal-bg), light-dark(white, black) 42%));
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    max-width: 300px;
    box-shadow: var(--shadow-modal);
    text-align: center;
}
.confirm-message {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.confirm-btn {
    padding: 0.4rem 1rem;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--result-lose-text);
    color: white;
}
.confirm-btn:hover { filter: brightness(1.15); }
.confirm-btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
}

/* Header editor popup */
.editor-header-popup {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--overlay-backdrop);
    z-index: 25;
}
.editor-header-popup:not(.hidden) { display: flex; }
.editor-header-inner {
    background: linear-gradient(135deg,
        var(--modal-bg),
        color-mix(in srgb, var(--modal-bg), light-dark(white, black) 42%));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    padding: 1rem 1.25rem;
    width: min(340px, 90vw);
}
.editor-header-title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}
.editor-header-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.75rem;
    align-items: center;
}
.editor-header-fields label {
    font-size: 0.8rem;
    color: var(--text-subtle);
    text-align: right;
    white-space: nowrap;
}
.editor-header-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-header-empty {
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: 0.8rem;
    text-align: center;
    padding: 1rem 0;
}

/* Tournament info popup */
.tournament-info-inner {
    min-width: 280px;
}

.tournament-info-inner .editor-header-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tournament-info-dates {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-subtle);
    margin: -0.25rem 0 0.75rem;
}

.ti-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.ti-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-xs);
}

.ti-stat svg {
    opacity: 0.7;
    flex-shrink: 0;
}

.ti-section-title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: 0.35rem;
    text-align: center;
}

.ti-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.ti-section {
    font-size: 0.72rem;
    color: var(--text-subtle);
    background: var(--surface-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
}

.ti-officials {
    border-top: 1px solid var(--border-color);
    padding-top: 0.6rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.ti-official {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

.ti-official-role {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    margin-bottom: 0.1rem;
}

.tournament-info-link {
    margin-top: 0.5rem;
    text-align: center;
}

.tournament-info-link a {
    font-size: 0.75rem;
    color: var(--accent);
    text-decoration: none;
}

.tournament-info-link a:hover {
    text-decoration: underline;
}
input.editor-header-input,
select.editor-header-input {
    width: 100%;
    min-width: 0;
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    margin: 0;
    padding: 5px 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: inherit;
    box-sizing: border-box;
}
.editor-header-input:focus {
    border-color: var(--overlay-light-hover);
    outline: none;
}
select.editor-header-input {
    appearance: auto;
}
.editor-header-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

@media (max-width: 767px) {
    /* Mobile toolbar: borderless, [flip] | [start][prev][next×2] | [more]
       Flex weights: 1 | (1 + 1 + 2) | 1 — Forward gets a double slot. */
    .viewer-toolbar.raised-panel {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    .viewer-toolbar {
        gap: 0.25rem;
        padding: 0.4rem 0;
    }

    /* Hidden on mobile: right tool group (moved to overflow), separators,
       play/pause, skip-to-end, and left-group items other than Flip. */
    .viewer-tool-group:first-child > :not([data-action="viewer-flip"]),
    .viewer-tool-group-end,
    .viewer-toolbar-sep,
    .viewer-play-btn,
    .viewer-nav-btn[data-action="viewer-end"] {
        display: none;
    }

    /* Left: Flip (1 unit) */
    .viewer-tool-group:first-child {
        flex: 1 1 0;
        margin-top: 0;
    }
    .viewer-tool-group:first-child .viewer-tool-btn {
        flex: 1 1 0;
        width: auto;
        height: 3rem;
        padding: 0.55rem;
        border-radius: var(--radius-xs);
    }
    .viewer-tool-group:first-child .viewer-tool-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Center: Start + Prev + Next (1 + 1 + 2) */
    .viewer-nav-group {
        flex: 4 4 0;
        gap: 0.25rem;
    }
    .viewer-nav-btn {
        flex: 1 1 0;
        width: auto;
        height: 3rem;
        border-radius: var(--radius-xs);
    }
    .viewer-nav-btn[data-action="viewer-next"] {
        flex: 2 2 0;
    }

    /* Right: More/overflow (1 unit) */
    .overflow-btn-wrapper {
        flex: 1 1 0;
        display: flex;
    }
    .viewer-overflow-btn {
        flex: 1 1 0;
        width: auto;
        height: 3rem;
        border-radius: var(--radius-xs);
    }
}

/* Chessboard2 dragged piece: ensure it's visible above modal layers */
/* Chessground: dragged pieces above modals */
cg-board piece.dragging { z-index: 10000 !important; }

/* Game Browser (always inside viewer-browser-panel) */

.browser-content {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.browser-search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.browser-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

input.browser-search-input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--overlay-light);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    outline: none;
    transition: box-shadow var(--transition-fast), background var(--transition-fast);
    box-sizing: border-box;
    margin: 0;
}

.browser-search-input::placeholder {
    color: var(--text-faint);
}

.browser-search-input:focus {
    box-shadow: var(--shadow-xs), 0 0 0 1px var(--accent);
    background: var(--overlay-light);
}

.browser-search-clear {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-subtle);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.browser-search-clear:not(.hidden) {
    display: flex;
}

.browser-search-clear:hover {
    color: var(--text-primary);
    background: var(--overlay-light);
}

.browser-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 0.2rem;
    background: var(--popup-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-modal);
    max-height: 16rem;
    overflow-y: auto;
}

.browser-ac-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text-muted);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.browser-ac-item:hover,
.browser-ac-item.browser-ac-focused {
    background: var(--overlay-light);
    color: var(--text-primary);
}

.browser-ac-item strong {
    color: var(--text-primary);
    font-weight: 700;
}

.browser-ac-profile {
    color: var(--accent);
    border-bottom: 1px solid var(--surface-subtle);
    font-size: 0.78rem;
}

.browser-ac-profile:hover,
.browser-ac-profile.browser-ac-focused {
    background: rgb(from var(--accent) r g b /0.08);
    color: var(--accent);
}

.browser-profile-link {
    display: block;
    width: 100%;
    padding: 0.45rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--accent);
    background: rgb(from var(--accent) r g b /0.06);
    border: 1px solid rgb(from var(--accent) r g b /0.15);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.browser-profile-link:hover {
    background: rgb(from var(--accent) r g b /0.12);
    border-color: rgb(from var(--accent) r g b /0.3);
}

.browser-ac-empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-faint);
}

.browser-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0.75rem;
}

.browser-filters.hidden {
    display: none;
}

.browser-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-subtle);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.browser-filter-trigger:hover {
    color: var(--text-primary);
}

.browser-collapse-all {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-faint);
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    margin-left: 0.15rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.browser-collapse-all:hover {
    color: var(--text-primary);
}
.browser-filter-trigger .ms-caret {
    font-size: 0.6rem;
    color: var(--text-faint);
}

/* Multi-select popover — shared filter dropdown (sections, rounds). */
.ms-popover {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    min-width: 9rem;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--modal-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 0.35rem;
    font-family: inherit;
    color: var(--text-primary);
    animation: tm-popover-in 160ms ease-out both;
}
.ms-popover.hidden {
    display: none;
}

.ms-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
}
.ms-option:hover {
    background: var(--overlay-light);
}
.ms-option.ms-on {
    color: var(--text-primary);
}
.ms-check {
    flex: none;
    width: 1em;
    color: var(--accent);
    font-size: 0.8rem;
}
.ms-option-label {
    flex: 1;
}
.ms-all {
    font-weight: 700;
}
.ms-divider {
    height: 1px;
    margin: 0.25rem 0.15rem;
    background: var(--overlay-light);
}

.browser-round-select {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-subtle);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.4rem;
    margin-right: 0.5rem;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}

.browser-chips {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.browser-chips.hidden {
    display: none;
}

.browser-section-btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-faint);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.browser-section-btn:hover {
    color: var(--text-muted);
}

.browser-section-btn.browser-section-active {
    color: var(--text-muted);
    border-bottom-color: var(--text-muted);
}

.browser-chip-select {
    padding: 0.25rem 0.4rem;
    font-size: 0.72rem;
    font-family: inherit;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--overlay-light);
    border-radius: var(--radius-xs);
    cursor: pointer;
    max-width: 100%;
}

.browser-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1.1rem;
    flex-shrink: 0;
    padding: 0;
    background: var(--surface-btn);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    cursor: pointer;
    transition: color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-xs);
}

.browser-action-btn svg {
    width: 18px;
    height: 18px;
}

.browser-action-btn:hover {
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* Tooltips below for browser action buttons (parent has overflow:hidden) */
.browser-action-btn[data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 6px);
}
.browser-action-btn:last-child[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Editor ECO display */

.browser-games-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.browser-games {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.3rem 0;
}

.browser-game-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Extra 1.5px top/bottom absorbs the inter-row gap into each row's hit
       area, so the cursor never falls into dead space between rows. */
    padding: calc(0.35rem + 1.5px) 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

@media (hover: hover) {
    .browser-game-row:hover {
        background: var(--overlay-light);
    }
}

.browser-board {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-faint);
    min-width: 1.5rem;
    flex-shrink: 0;
}

.browser-player {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.browser-player-white {
    justify-content: flex-end;
}

.browser-player-black {
    justify-content: flex-start;
}

.browser-result-center {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    width: 5.5rem;
}

.browser-result-half {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    gap: 0.2rem;
    padding: 0.2rem 0.35rem;
    background: var(--surface);
    border-bottom: 2px solid transparent;
}

.browser-result-half:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.browser-result-half:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.browser-result-half.browser-winner {
    border-bottom-color: var(--result-win-border);
    background: var(--result-win-bg);
}

.browser-result-half.browser-loser {
    border-bottom-color: var(--result-lose-border);
    background: var(--result-lose-bg);
}

.browser-result-half.browser-draw {
    border-bottom-color: var(--result-draw-border);
    background: var(--result-draw-bg);
}

.browser-vs {
    display: none;
    font-size: 0.65rem;
    color: var(--text-faint);
    font-style: italic;
}

/* Pairing rows: show "vs.", hide scores, dim row */
.browser-game-row[data-pairing="true"] .browser-result-half { display: none; }
.browser-game-row[data-pairing="true"] .browser-vs { display: inline; }
.browser-game-row[data-pairing="true"] .browser-result-center {
    gap: 0.25rem;
    padding: 0.2rem 0.35rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
}
.browser-game-row[data-pairing="true"] { opacity: 0.8; cursor: default; }

/* Unrated elo */
.browser-elo:empty::before {
    content: 'unr.';
    opacity: 0.6;
}

.browser-piece-icon {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
}

.browser-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
}

.browser-elo {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.browser-score {
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 0.7rem;
    text-align: center;
    color: var(--text-primary);
}

.browser-winner .browser-score {
    color: var(--result-win-text);
}

.browser-loser .browser-score {
    color: var(--result-lose-text);
}

.browser-section-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-sizing: border-box;
    padding: 0 0.5rem;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    border-radius: var(--radius-sm);
}

@media (hover: hover) {
    .browser-section-header:hover {
        background: var(--overlay-light);
    }
}

.browser-collapse-chevron {
    flex: none;
    width: 0.8em;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--text-faint);
}

.browser-header-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-header-count {
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.65rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Indent grows with nesting depth (position); text style keys off group (type). */
.browser-header-l1 {
    padding-left: 1.3rem;
}
.browser-header-l2 {
    padding-left: 2.1rem;
}

.browser-group-event .browser-header-label {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}
.browser-group-round .browser-header-label {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
}
.browser-group-section .browser-header-label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Coalesced breadcrumb header: Event > Round > Section on one row. Each segment
   keeps its level's weight/font so the hierarchy still reads inline. */
.browser-header-crumb .browser-header-label {
    font-size: 0.76rem;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.browser-crumb-seg {
    white-space: nowrap;
}
.browser-crumb-sep {
    margin: 0 0.3rem;
    color: var(--text-faint);
    font-weight: 400;
}
.browser-crumb-seg.browser-group-event {
    font-weight: 700;
    color: var(--text-primary);
}
.browser-crumb-seg.browser-group-round {
    font-weight: 600;
    color: var(--text-secondary);
}
.browser-crumb-seg.browser-group-section {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.browser-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem;
}

.browser-empty-img {
    flex: 1;
    width: 100%;
    object-fit: contain;
    margin-top: 1rem;
}

/* ==========================================================================
   Player Profile Modal
   ========================================================================== */

.profile-modal-content {
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-modal-content h2 {
    text-align: center;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    line-height: normal;
    letter-spacing: normal;
}

.profile-uscf-link {
    font-size: 0.65em;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    vertical-align: middle;
    margin-left: 0.25em;
}

.profile-uscf-link:hover {
    text-decoration: underline;
}

.profile-body {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-loading,
.profile-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.profile-error {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--status-error);
}

.profile-empty-small {
    text-align: center;
    padding: 1rem;
    color: var(--text-faint);
    font-size: 0.85rem;
}

/* Tabs */
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--overlay-light);
    flex-shrink: 0;
}

.profile-tab {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-faint);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.profile-tab:hover {
    color: var(--text-muted);
}

/* Active tab highlight via data-active attribute */
.profile-tabs[data-active="overview"] [data-tab="overview"],
.profile-tabs[data-active="openings"] [data-tab="openings"],
.profile-tabs[data-active="opponents"] [data-tab="opponents"] {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

/* Unified profile row — used for stats, tournaments, openings, opponents */
.profile-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.35rem;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.profile-row:hover {
    background: var(--overlay-light);
}

/* Compact variant for openings/opponents (single-line, dense) */
.profile-row-compact {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.15rem;
    background: none;
    box-shadow: none;
}

.profile-row-compact .profile-row-label {
    flex: 1;
    min-width: 0;
}

.profile-row-compact .profile-row-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.profile-row-compact .profile-bar {
    width: 10rem;
    flex-shrink: 0;
    margin: 0;
    height: 1rem;
}

.profile-row-compact .profile-bar span {
    font-size: 0.6rem;
}

.profile-row-link:hover {
    color: var(--accent);
}

.profile-row-compact .profile-row-summary {
    font-size: 0.7rem;
    width: 4.5rem;
    flex-shrink: 0;
    text-align: right;
    justify-content: flex-end;
}

.profile-row-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.profile-row-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-subtle);
    min-width: 0;
}

.profile-row-summary {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-faint);
}

.profile-row-divider {
    color: var(--border-color);
}

/* Win/Loss/Draw bar */
.profile-bar {
    display: flex;
    height: 1.4rem;
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin: 0.35rem 0;
}

.profile-bar-win,
.profile-bar-draw,
.profile-bar-loss {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    border-bottom: 2px solid transparent;
}

.profile-bar-win span,
.profile-bar-draw span,
.profile-bar-loss span {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.profile-bar-win {
    background: var(--result-win-bg);
    border-bottom-color: var(--win);
}
.profile-bar-win span { color: var(--win); }

.profile-bar-draw {
    background: var(--result-draw-bg);
    border-bottom-color: var(--result-draw-border);
}
.profile-bar-draw span { color: var(--text-primary); }

.profile-bar-loss {
    background: var(--result-lose-bg);
    border-bottom-color: var(--lose);
}
.profile-bar-loss span { color: var(--lose); }

.profile-tab-header {
    flex-shrink: 0;
    padding: 0.75rem 0.4rem 0;
}

.profile-tab-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    padding: 0 0.4rem;
}

.profile-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-subtle);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--surface-subtle);
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.profile-color-icon {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
}

/* Opponent search + list */
.profile-opponent-search {
    padding-bottom: 0.5rem;
}

.profile-opponent-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--transition-fast);
}

.profile-opponent-input:focus {
    border-color: var(--accent);
}

.profile-opponent-input::placeholder {
    color: var(--text-faint);
}


/* ==========================================================================
   Opening Explorer
   ========================================================================== */

.explorer-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0;
    min-height: 1.6rem;
}

.explorer-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.explorer-ply {
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
    transition: color 0.1s, background 0.1s;
}
.explorer-ply:hover {
    color: var(--accent);
    background: var(--surface-subtle);
}

.explorer-count {
    font-size: 0.75rem;
    color: var(--text-faint);
    flex-shrink: 0;
}

.explorer-table {
    display: flex;
    flex-direction: column;
}

.explorer-table-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-faint);
    border-bottom: 1px solid var(--overlay-light);
}

.explorer-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--surface);
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.explorer-row:hover {
    background: var(--overlay-light);
}

.explorer-row-all {
    border-top: 1px solid var(--border);
    cursor: default;
}

.explorer-row-all:hover {
    background: var(--overlay-light);
}

.explorer-all-label {
    font-style: italic;
    color: var(--text-faint);
}

.explorer-row-selected {
    background: rgb(from var(--accent) r g b /0.08);
}

.explorer-row-selected:hover {
    background: rgb(from var(--accent) r g b /0.12);
}

.explorer-tip {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 8px;
    background: var(--popup-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.explorer-row:hover .explorer-tip {
    opacity: 1;
}

.explorer-tip-w,
.explorer-tip-d,
.explorer-tip-b {
    color: var(--text-muted);
}

.explorer-tip-w::before,
.explorer-tip-d::before,
.explorer-tip-b::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-radius: 2px;
    border: 1px solid var(--border-color);
}

.explorer-tip-w::before { background: var(--bar-white); }
.explorer-tip-d::before { background: var(--bar-draw); }
.explorer-tip-b::before { background: var(--bar-black); }

.explorer-col-move {
    min-width: 3rem;
    flex-shrink: 0;
}

.explorer-san {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.explorer-col-games {
    min-width: 2.5rem;
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.explorer-col-bar {
    flex: 1;
    min-width: 3rem;
    padding: 0 0.3rem;
}

.explorer-bar {
    display: flex;
    height: 1rem;
    border-radius: var(--radius-xs);
    overflow: hidden;
    border: 1px solid rgb(from var(--border-color) r g b / calc(alpha / 2));
}

.explorer-bar-w {
    background: color-mix(in srgb, var(--modal-bg) 55%, var(--bar-white));
    border-bottom: 2px solid var(--bar-white);
}

.explorer-bar-d {
    background: color-mix(in srgb, var(--modal-bg) 55%, var(--bar-draw));
    border-bottom: 2px solid var(--bar-draw);
}

.explorer-bar-b {
    background: color-mix(in srgb, var(--modal-bg) 55%, var(--bar-black));
    border-bottom: 2px solid var(--bar-black);
}

.explorer-col-score {
    min-width: 2.5rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}
.explorer-col-pos {
    min-width: 2rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.7;
}
.explorer-row-transposition {
    opacity: 0.5;
}

/* Explorer content + toolbar layout */
.explorer-content { flex: 1; }
.viewer-moves:has(.explorer-toolbar) {
    display: flex;
    flex-direction: column;
}

/* Explorer toolbar: reset, back, view games */
.explorer-toolbar {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}
.explorer-tb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background: var(--surface-btn);
    color: var(--text-muted);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}
.explorer-tb-btn:hover:not(:disabled) { background: var(--surface-subtle); color: var(--accent); box-shadow: var(--shadow-sm); }
.explorer-tb-btn.active { color: var(--accent); }
.explorer-tb-btn:disabled { opacity: 0.3; cursor: default; }
.explorer-tb-games {
    flex: 1;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 500;
}
@media (min-width: 1000px) { .explorer-tb-games { display: none; } }

.explorer-empty {
    text-align: center;
    color: var(--text-faint);
    padding: 1.5rem;
    font-size: 0.85rem;
}

/* ==========================================================================
   Mobile (max-width: 600px)
   ========================================================================== */
@media (max-width: 600px) {
    /* Layout */
    /* Sides only — top/bottom (incl. navbar clearance) come from the
       <1000px app-shell block and must not be stomped. */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Off-season countdown */
    .off-season-countdown { padding: 1.5rem 1.5rem; }
    .countdown-value { font-size: 2.5rem; }
    .off-season-countdown-units { gap: 1rem; }

    /* Viewer — full-bleed on phone; panels handle their own internal padding. */
    .modal-content-viewer.browser-only h2 { padding: 1rem 1rem 0.5rem; }
    .modal-content-viewer.browser-only .browser-search,
    .modal-content-viewer.browser-only .browser-filters {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .viewer-board { max-width: 100%; }
    .viewer-moves { height: 100px; font-size: 0.8rem; }
    .viewer-player-name { font-size: 0.75rem; }
    .viewer-player { gap: 0.2rem; padding: 0.35rem 0.4rem; }
    .viewer-opening { font-size: 0.7rem; }
    .viewer-filter-chip { margin-bottom: 0.25rem; }

    /* Browser */
    .browser-game-row { padding: calc(0.3rem + 1.5px) 0.3rem; gap: 0.25rem; }
    .browser-result-half { padding: 0.15rem 0.25rem; }
    .browser-name { font-size: 0.7rem; }
    .browser-elo { display: none; }

    /* Profile */
    .profile-modal-content { width: 98%; padding: 1.25rem; }
    .profile-tab { font-size: 0.7rem; padding: 0.5rem 0.25rem; }
    .profile-row-name { max-width: 8rem; }

    /* Explorer */
    .explorer-col-bar { min-width: 2rem; }
}

/* Style modal */
/* ── Settings panel (tabbed: You · Style · About) ────────────────── */

.settings-modal-content {
    max-width: 560px;
    width: 95%;
    max-height: 90vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

.settings-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 3px;
    margin: 0 0 1.1rem;
    background: rgb(from var(--shadow) r g b / 0.35);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgb(from var(--foreground) r g b / 0.04), inset 0 0 0 1px rgb(from var(--foreground) r g b / 0.05);
    flex-shrink: 0;
}

.settings-tab {
    padding: 0.5rem 0;
    background: transparent;
    color: var(--text-subtle);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.settings-tab-active {
    background: rgb(from var(--foreground) r g b / 0.1);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgb(from var(--foreground) r g b / 0.1), inset 0 0 0 1px rgb(from var(--foreground) r g b / 0.06);
}

.settings-pane {
    overflow-y: auto;
    min-height: 0;
}

.settings-pane.hidden {
    display: none;
}

/* Privacy policy drills in from the About tab */
.privacy-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.6rem 0;
    border-top: 1px solid var(--border-color);
    margin-top: 0.75rem;
}

.privacy-details summary:hover {
    color: var(--text-primary);
}

.privacy-details[open] summary {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}

.settings-about-cta {
    margin-top: 1rem;
}

.style-close-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: var(--close-btn-bg);
    border: none;
    color: var(--toolbar-icon);
    font-size: 1.5rem;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.style-close-btn:hover {
    color: var(--accent);
    background: var(--close-btn-bg-hover);
}
.style-preview-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto 1.25rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.preview-sq {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-sq img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
}

/* Style controls */
.style-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.style-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.style-row > label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-subtle);
    min-width: 50px;
    margin: 0;
}

/* Embed branding */
.embed-brand {
    position: absolute;
    bottom: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-decoration: none;
    letter-spacing: 0.02em;
    pointer-events: auto;
    z-index: 1;
}
.embed-brand:hover {
    color: var(--text-muted);
}

/* Board coordinates — inside the board */
.cg-wrap coords {
    font-size: 10px;
}
/* Ranks: top-right of each square along the h-file */
.cg-wrap coords.ranks {
    top: 0;
    left: auto;
    right: 0;
    text-align: right;
}
.cg-wrap coords.ranks coord {
    transform: none;
    padding: 0.25em 0.35em 0 0;
}
/* Files: bottom-left of each square along rank 1 */
.cg-wrap coords.files {
    bottom: 0;
    left: 0;
    text-transform: none;
    text-align: left;
}
.cg-wrap coords.files coord {
    padding: 0 0 0 0.5em;
}
/* coord-light = light square → dark text; coord-dark = dark square → light text */
.cg-wrap coords coord.coord-light { color: rgba(0, 0, 0, 0.6); }
.cg-wrap coords coord.coord-dark { color: rgba(255, 255, 255, 0.7); }

.style-toggles-row {
    display: flex;
    gap: 1.5rem;
}
.style-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}
.style-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
    cursor: pointer;
}
.style-toggle-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Custom dropdown */
.style-dropdown {
    position: relative;
    flex: 1;
}
.style-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}
.style-dropdown-trigger:hover {
    border-color: var(--overlay-light-hover);
}
.style-dropdown.open .style-dropdown-trigger {
    border-color: var(--accent);
}
.style-dropdown-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-subtle);
}
.style-dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    background: var(--popup-bg);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}
.style-dropdown.open .style-dropdown-menu {
    display: block;
}
.style-dropdown.dropup .style-dropdown-menu {
    top: auto;
    bottom: calc(100% + 4px);
}
.style-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition-fast);
}
.style-dropdown-item:hover {
    background: var(--overlay-light);
}
.style-dropdown-item.active {
    color: var(--text-primary);
    background: var(--overlay-light);
}
.style-dropdown-label {
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Piece preview row (in trigger and menu items) */
.style-piece-row {
    display: flex;
    gap: 1px;
}
.style-piece-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Board color swatch (2x2 grid) */
.style-board-swatch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.style-board-swatch span {
    display: block;
}

/* App scheme swatch */
.style-scheme-swatch {
    width: 32px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 2px;
    flex-shrink: 0;
}
.style-scheme-swatch span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Board row: dropdown + color pickers */
.style-board-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}
.style-board-row .style-dropdown {
    flex: 1;
}
.color-picker {
    width: 32px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    padding: 0;
    flex-shrink: 0;
}
.color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch { border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; }
.app-scheme-name {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Collections UI hidden pending design — remove these three lines to re-enable. */
.browser-save,
.browser-load,
.share-option[data-action="viewer-save"] { display: none; }

/* ── Standings ──────────────────────────────────────────────────── */

.viewer-standings {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    /* The pane is a frame, not a scroller — the card inside scrolls. */
    overflow: hidden;
    padding: 0.75rem;
    box-sizing: border-box;
}
.viewer-standings.hidden { display: none; }

@media (min-width: 1000px) {
    /* Match viewer-main's panel margins; extra top clears the modal ✕. */
    .viewer-standings {
        padding: 3.5rem 1.5rem 1.5rem 0.75rem;
    }
}

/* Shares .raised-panel chrome with the viewer's other panels. It is ALSO
   the scroll container for both axes: sticky header (top), identity
   columns (left), and total (right) pin to the card's rounded edges —
   padding on a scrollport would become a see-through strip, so the card
   has none and the cells' own padding provides the interior spacing. */
.standings-card {
    /* Solid stand-ins for the translucent raised-panel tones — sticky
       cells must cover content scrolling beneath them, so alpha is out.
       Composites match --raised-panel-bg over the modal surface.
       References --modal-bg DIRECTLY (not --surface-primary): app schemes
       set --modal-bg inline on the modal, and only a var() resolved at
       this element picks that override up. */
    --std-base: light-dark(
        color-mix(in srgb, var(--modal-bg) 97%, var(--shadow)),
        color-mix(in srgb, var(--modal-bg) 75%, var(--shadow))
    );
    --std-raised: color-mix(in srgb, var(--std-base) 90%, var(--foreground));
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--std-base);
    align-self: stretch;
}

.standings-table {
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    background: var(--std-base);
}
.standings-table th,
.standings-table td {
    padding: 0.35rem 0.5rem;
    text-align: center;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    height: 2rem;
    background: var(--std-base);
}
.standings-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--std-raised);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 0 var(--border-color);
}

.std-section-row td {
    position: sticky;
    top: 2rem;            /* sits directly under the header (which is 2rem tall) */
    z-index: 2;
    background: var(--std-raised);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding-left: 0.75rem;
    box-shadow: 0 1px 0 var(--border-color);
}
.std-section-label {
    display: inline-block;
    position: sticky;
    left: 0.75rem;
}

/* Identity columns stay put while rounds scroll horizontally.
   Rank width is pinned hard — the name column's sticky offset assumes
   exactly 2.25rem, and auto table layout would otherwise widen it. */
.std-th-rank,
.std-cell-rank {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    color: var(--text-faint);
    font-weight: 600;
}
.std-th-name,
.std-cell-name {
    position: sticky;
    left: 2.25rem;
    z-index: 1;
    box-shadow: 1px 0 0 var(--border-color);
}
/* Corner header cells sit above both scroll axes — needs the extra
   specificity to beat the generic `thead th` z-index. */
.standings-table thead .std-th-rank,
.standings-table thead .std-th-name,
.standings-table thead .std-th-total {
    z-index: 4;
}
.std-th-name { text-align: left; }
.std-cell-name {
    text-align: left;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.std-player-link {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}
.std-player-link:hover { color: var(--accent); }

.std-th-rating,
.std-cell-rating {
    width: 3.25rem;
    color: var(--text-subtle);
}

.std-th-round,
.std-cell {
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    font-weight: 700;
    font-size: 0.8rem;
}
.std-cell-win { background: color-mix(in srgb, var(--win) 20%, var(--std-base)); color: var(--win); }
.std-cell-loss { background: color-mix(in srgb, var(--lose) 20%, var(--std-base)); color: var(--lose); }
.std-cell-draw { background: var(--std-raised); color: var(--text-muted); }
.std-cell-bye { color: var(--text-subtle); }

.std-cell-btn {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0;
    display: block;
}
.std-cell-clickable:hover { filter: brightness(1.2); }

/* Total pinned opposite the names */
.std-th-total,
.std-cell-total {
    position: sticky;
    right: 0;
    z-index: 1;
    width: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--std-raised);
    box-shadow: -1px 0 0 var(--border-color);
}
.std-th-total { z-index: 4; }

.standings-empty {
    color: var(--text-subtle);
    font-style: italic;
    padding: 2rem;
    text-align: center;
}

/* Mobile: while standings are open they replace the game list, but the
   search/toolbar row stays — it holds the (active) standings toggle,
   which is the only way back to the list. */
@media (max-width: 999px) {
    .modal-content-viewer.browser-only:has(.viewer-standings:not(.hidden)) .browser-chips,
    .modal-content-viewer.browser-only:has(.viewer-standings:not(.hidden)) .browser-filters,
    .modal-content-viewer.browser-only:has(.viewer-standings:not(.hidden)) .browser-games-wrap {
        display: none;
    }
    .modal-content-viewer.browser-only:has(.viewer-standings:not(.hidden)) .viewer-browser-panel,
    .modal-content-viewer.browser-only:has(.viewer-standings:not(.hidden)) .browser-content {
        flex: 0 0 auto;
        min-height: 0;
    }
}

/* Narrow phones: the identity columns + total would leave only slivers
   for the actual round results. Drop the rating column (one tap away on
   the profile) and tighten names so rounds get real estate. */
@media (max-width: 480px) {
    .std-th-rating,
    .std-cell-rating {
        display: none;
    }
    .std-cell-name {
        max-width: 7.5rem;
    }
}

/* Desktop: a 7-round table needs ~640px. Lift the modal's 1000px cap
   while standings are open so every round fits without shrinking the
   games list. */
@media (min-width: 1000px) and (max-width: 1599px) {
    .modal-content-viewer.has-browser:has(.viewer-standings:not(.hidden)) {
        max-width: min(1200px, 96vw);
    }
}

.browser-standings-btn.active {
    background: var(--accent);
    color: var(--text-primary);
}

/* ── GIF Maker ──────────────────────────────────────────────────── */

.gif-maker-content {
    max-width: 880px;
    width: 95%;
    padding: 1.5rem 1.5rem 1.25rem;
    /* Tall content (esp. stacked single-column on phones): cap to the
       viewport and scroll inside the modal, not the page. */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#gif-maker-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.modal-close-btn {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
    line-height: 1;
}
.modal-close-btn:hover { color: var(--text-primary); background: var(--surface-btn); }

.gif-maker-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Row 2 takes the stage's excess height, keeping the PGN and
       options rows snug instead of drifting apart. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
        'pgn stage'
        'options stage';
    gap: 0 1.25rem;
    align-items: start;
}
.gif-maker-pgn { grid-area: pgn; }
.gif-maker-options { grid-area: options; }
.gif-maker-output { grid-area: stage; }
/* Stacked on phones, the stage follows the PGN — the preview and the
   Generate button are the payoff; style tweaks come after. */
@media (max-width: 720px) {
    .gif-maker-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 'pgn' 'stage' 'options';
    }
    .gif-maker-output { margin-top: 0.85rem; }
}

.gif-maker-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin: 0.85rem 0 0.4rem;
    font-weight: 600;
}
.gif-maker-pgn > .gif-maker-label:first-child { margin-top: 0; }

/* ── Inputs column ── */

.gif-pgn-input {
    width: 100%;
    min-height: 9rem;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 0.55rem 0.7rem;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    resize: vertical;
}
.gif-pgn-input:focus {
    outline: none;
    border-color: var(--accent);
}

.gif-pgn-status {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-subtle);
    min-height: 1.1em;
}
.gif-pgn-status.ok    { color: var(--status-success); }
.gif-pgn-status.error { color: var(--status-error); }

.gif-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    font: inherit;
    font-size: 0.85rem;
}

.gif-board-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}
.gif-board-presets .preset-chip {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.gif-board-presets .preset-chip:hover { background: var(--surface-subtle); }
.gif-board-presets .preset-chip.active {
    background: rgb(from var(--accent) r g b / 0.18);
    border-color: var(--accent);
    color: var(--text-primary);
}

.gif-board-customs {
    display: flex;
    gap: 0.6rem;
}
.gif-color-pair {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-faint);
}
.gif-color-pair input[type="color"] {
    width: 32px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 0;
    background: none;
    cursor: pointer;
}
.gif-color-pair input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.gif-color-pair input[type="color"]::-webkit-color-swatch         { border: 0; border-radius: 3px; }

/* ── Output column ── */

.gif-stage {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0.4rem;
}
.gif-preview-pane {
    display: flex;
    flex-direction: column;
}
.gif-preview {
    aspect-ratio: 5 / 6; /* board + header/footer bars (720×864 frame) */
    width: 100%;
    background: var(--surface);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 0.78rem;
    overflow: hidden;
}
.gif-preview:empty::before { content: 'Paste a PGN to see your video here'; }
/* No frames yet: keep the scrubber row's space but not its dead 0/0 UI */
.gif-preview-pane:has(.gif-preview:empty) .gif-scrubber-wrap { visibility: hidden; }
.gif-preview svg {
    width: 100%;
    height: 100%;
    display: block;
}
.gif-preview-error {
    padding: 1rem;
    color: var(--text-faint);
    text-align: center;
}
video.gif-result-img { background: #000; }

.gif-scrubber-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.gif-scrubber {
    flex: 1;
    accent-color: var(--accent);
}
.gif-frame-counter {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gif-behavior {
    padding: 0.75rem 0.9rem;
    margin-top: 0.75rem;
}
.gif-behavior-row + .gif-behavior-row { margin-top: 0.75rem; }
.gif-behavior .gif-maker-label { margin-top: 0; }

.gif-timing-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.gif-timing-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
.gif-timing-options input[type="radio"] { accent-color: var(--accent); }

.gif-custom-ms {
    margin-top: 0.5rem;
    width: 9rem;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 0.3rem 0.5rem;
    font: inherit;
    font-size: 0.82rem;
}

.gif-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1.25rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
}
.gif-checkbox input[type="checkbox"] { accent-color: var(--accent); }

.gif-action-row {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gif-progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.gif-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--surface);
    border-radius: 3px;
    overflow: hidden;
}
.gif-progress-fill {
    height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 0.15s ease;
}
.gif-progress-text {
    font-size: 0.75rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gif-result-img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 auto 0.75rem;
    border-radius: var(--radius-xs);
    background: var(--surface);
}
.gif-result-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}


/* ── Rating estimator ───────────────────────────────────────────── */

.estimator-modal-content {
    max-width: 480px;
    width: calc(100vw - 2rem);
}

.est-title {
    margin: 0 0 1rem;
    font-size: 1.3rem;
}

.est-select,
.est-inputs input[type="number"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 2px solid rgb(from var(--foreground) r g b / 0.2);
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.est-select:focus,
.est-inputs input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}

.est-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.est-inputs .setting-group {
    margin-bottom: 0;
}

.est-rows {
    margin: 1rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.est-row {
    display: grid;
    grid-template-columns: 2.2rem 1fr 5rem auto auto;
    align-items: center;
    gap: 0.5rem;
}

.est-row-round {
    color: var(--text-faint);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.est-row-opp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.est-row-anon {
    color: var(--text-faint);
    font-style: italic;
}

.est-row-rating {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    border: 2px solid rgb(from var(--foreground) r g b / 0.15);
    border-radius: var(--radius-xs);
    background: var(--overlay-light);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.est-row-rating:focus {
    outline: none;
    border-color: var(--accent);
}

.est-seg {
    display: flex;
    border: 2px solid rgb(from var(--foreground) r g b / 0.15);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.est-seg-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: transparent;
    color: var(--text-faint);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.est-seg-btn + .est-seg-btn {
    border-left: 1px solid rgb(from var(--foreground) r g b / 0.15);
}

/* Selected result speaks the app's result colors, mirroring the
   standings crosstable: win/lose tinted, draw neutral. */
.est-seg-on.est-seg-win {
    background: var(--result-win-bg);
    color: var(--result-win-text);
}

.est-seg-on.est-seg-loss {
    background: var(--result-lose-bg);
    color: var(--result-lose-text);
}

.est-seg-on.est-seg-draw {
    background: var(--result-draw-bg);
    color: var(--text-muted);
}

.est-row-del {
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
}

.est-row-del:hover {
    color: var(--lose);
}

.est-empty {
    color: var(--text-faint);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.est-result {
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
}

.est-result-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
}

.est-result-rating {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.est-result-change {
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.est-up {
    color: var(--win);
}

.est-down {
    color: var(--lose);
}

.est-result-badge {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.est-result-detail {
    margin: 0.4rem 0 0;
    color: var(--text-faint);
    font-size: 0.8rem;
}

.est-footnote {
    margin-top: 0.75rem;
}

/* ── Tools sheet ────────────────────────────────────────────────── */

.tools-sheet {
    max-width: 380px;
    width: calc(100vw - 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tools-title {
    margin: 0 0 0.25rem;
    font-size: 1.3rem;
}

.tools-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.85rem 1rem;
    text-align: left;
    border: 2px solid rgb(from var(--foreground) r g b / 0.12);
    border-radius: var(--radius-sm);
    background: var(--overlay-light);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.tools-item:hover,
.tools-item:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.tools-item svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--accent);
}

.tools-item-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tools-item-name {
    font-weight: 600;
}

.tools-item-desc {
    font-size: 0.8rem;
    color: var(--text-faint);
    line-height: 1.35;
}