/* =============================================================
   app.css
   Dark industrial theme — wall-mounted iPad, dartboard environment
   Optimised for landscape orientation, large touch targets,
   high contrast, and legibility from 1-2 metres away.
   ============================================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Share+Tech+Mono&display=swap');

/* --- CSS Variables --- */
:root {
    /* Colours */
    --bg-primary:     #0d0d0d;
    --bg-surface:     #1a1a1a;
    --bg-raised:      #242424;
    --bg-hover:       #2e2e2e;

    --accent:         #f0a500;      /* amber gold */
    --accent-dim:     #a87200;
    --accent-glow:    rgba(240, 165, 0, 0.15);

    --text-primary:   #f0ece0;
    --text-secondary: #888880;
    --text-dim:       #555550;

    --double-color:   #c0392b;      /* red for doubles */
    --treble-color:   #27ae60;      /* green for trebles */
    --single-color:   #4a90d9;      /* blue for singles */
    --bull-color:     #f0a500;      /* amber for bull */

    --bust-color:     #c0392b;
    --checkout-color: #27ae60;

    --border:         #333330;
    --border-accent:  #f0a500;

    --danger:         #c0392b;
    --danger-dim:     #7a1e1a;

    /* Spacing */
    --gap:            8px;
    --gap-lg:         16px;
    --radius:         6px;
    --radius-lg:      10px;

    /* Touch target minimum */
    --btn-min:        64px;

    /* Typography */
    --font-display:   'Rajdhani', sans-serif;
    --font-mono:      'Share Tech Mono', monospace;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;   /* prevents double-tap zoom on iOS */
}

html, body {
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}



/* Prevent iOS text size adjustment on rotation */
body {
    -webkit-text-size-adjust: 100%;
}

/* --- Layout Shell --- */
/* Game shell layout — only applies when game is active */
body.mode-game #app {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board"
        "status  status";
    width: 100vw;
    height: 100vh;
    gap: 0;
}

/* Setup screen — body scrolls, app grows */
body.mode-setup {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    min-height: 100%;
}
body.mode-setup #app {
    display: block;
    width: 100%;
    height: auto;
}

/* Stats screen — flex column, fills viewport, inner content scrolls */
body.mode-stats {
    overflow: hidden;
    height: 100%;
}
body.mode-stats #app {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ── Small screens (phones in landscape): stats page becomes fully scrollable ──
   Targets landscape viewports narrower than 1024px (phones) but not iPad (1024px+) */
@media (max-width: 1023px) and (orientation: landscape) {
    body.mode-stats {
        overflow: auto;
        height: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.mode-stats #app {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    /* Stats player picker */
    .stats-player-list {
        overflow: visible;
        height: auto;
    }
    /* Prevent SVG charts from overflowing narrow screens */
    .daily-trend-svg,
    .heatmap-svg-wrap svg {
        max-width: 100%;
    }
}

/* --- Header --- */
#header {
    grid-area: header;
}

/* ── Shared game header bar (501/201/Cricket/Shanghai/Practice) ── */
.game-header,
#header {
    grid-area: header;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    height: 52px;
    gap: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Left slot: title wrap + rules btn */
.gh-left {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.gh-title-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}

.gh-game-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    line-height: 1.1;
    white-space: nowrap;
}

.gh-match-info {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.07em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Centre slot: End + Restart */
.gh-centre {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* Right slot: Undo + Next (+ Speech for 501/201) */
.gh-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

/* Shared game-header button base */
.gh-btn {
    height: 34px;
    padding: 0 11px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    white-space: nowrap;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transition: background 0.1s, -webkit-transform 0.1s;
    transition: background 0.1s, transform 0.1s;
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--text-primary);
}
.gh-btn:active { -webkit-transform: scale(0.95); transform: scale(0.95); }
.gh-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Red: End / Restart */
.gh-btn-red {
    border-color: #6a2020;
    color: #e05555;
    background: rgba(192,57,43,0.08);
}
.gh-btn-red:active { background: rgba(192,57,43,0.18); }

/* Undo */
.gh-btn-undo {
    border-color: var(--accent-dim);
    color: var(--accent);
}
.gh-btn-undo:active { background: var(--accent-glow); }
.gh-btn-undo:disabled { border-color: var(--border); color: var(--text-dim); }

/* Next */
.gh-btn-next {
    border-color: var(--treble-color);
    color: var(--treble-color);
}
.gh-btn-next:active { background: rgba(46,204,113,0.12); }
.gh-btn-next:disabled { border-color: var(--border); color: var(--text-dim); }

/* Speech toggle button in header */
.speech-toggle {
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    white-space: nowrap;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.speech-toggle.speech-on {
    border-color: var(--accent-dim);
    color: var(--accent);
    background: var(--accent-glow);
}

.speech-toggle:active {
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}

/* Legacy match-info (keep for setMatchInfo() compat) */
#match-info {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.07em;
}

/* --- Sidebar: Scoreboard --- */
#sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--gap);
    overflow-y: auto;
}

.player-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    transition: border-color 0.15s ease;
}

.player-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--accent-glow);
}

.player-card.bust {
    border-color: var(--bust-color);
}

.player-card.checkout {
    border-color: var(--checkout-color);
}

.player-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.player-card.active .player-name {
    color: var(--accent);
}

.player-score {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.player-card.active .player-score {
    color: #ffffff;
}

/* ── Score progress ring ── */
.score-ring-svg {
    display: block;
    width: 140px;
    height: 140px;
    margin: 6px auto 6px;
    /* Start arc from top (12 o'clock) */
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.score-ring-track {
    fill: none;
    stroke: rgba(167, 139, 250, 0.12);
    stroke-width: 8;
}

.score-ring-arc {
    fill: none;
    stroke: #a78bfa;
    stroke-width: 8;
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset 0.4s ease;
    transition: stroke-dashoffset 0.4s ease;
}

/* Dim the arc on inactive cards */
.player-card:not(.active) .score-ring-arc {
    stroke: rgba(167, 139, 250, 0.35);
    -webkit-transition: stroke-dashoffset 0.4s ease, stroke 0.15s ease;
    transition: stroke-dashoffset 0.4s ease, stroke 0.15s ease;
}

.score-ring-dart {
    font-size: 18px;
    text-anchor: middle;
    dominant-baseline: central;
}

.score-ring-text {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 400;
    fill: var(--text-primary);
    text-anchor: middle;
    dominant-baseline: central; /* ignored on iOS 12 — dy fallback set on element */
    letter-spacing: -0.02em;
}

.player-card.active .score-ring-text {
    fill: #ffffff;
}

.player-card.active .score-ring-arc {
    stroke: #a78bfa;
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6));
}

.player-darts {
    display: flex;
    margin-top: 8px;
    min-height: 28px;
    align-items: center;
}

/* Individual dart score pills shown during a turn */
.dart-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.dart-pill.treble { color: var(--treble-color); border-color: var(--treble-color); }
.dart-pill.double { color: var(--double-color); border-color: var(--double-color); }
.dart-pill.bull   { color: var(--bull-color);   border-color: var(--bull-color); }

.checkout-hint {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-dim);
    margin-top: 6px;
    letter-spacing: 0.05em;
    min-height: 16px;
}

/* === Checkout suggestion panel (in sidebar, below player cards) === */
.checkout-panel {
    margin-top: var(--gap);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    overflow: hidden;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.checkout-panel.hidden {
    display: none;
}

.checkout-panel-heading {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    color: var(--accent);
    background: var(--bg-surface);
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
}

.checkout-routes {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.checkout-route-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    min-height: 36px;
}

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

/* Active route = the one that applies to the current game mode */
.checkout-route-row.route-active {
    background: rgba(99,102,241,0.06);
}

.checkout-route-row.route-dim {
    opacity: 0.45;
}

.checkout-route-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    width: 46px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.checkout-route-row.route-active .checkout-route-label {
    color: var(--accent);
}

.checkout-route-darts {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.checkout-dart-chip {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    letter-spacing: 0.04em;
}

.checkout-route-row.route-active .checkout-dart-chip {
    border-color: var(--accent-dim);
    color: var(--accent);
}

.checkout-arrow {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin: 0 5px;
}

.checkout-na {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
}

/* --- Board Area: Dart Input Grid --- */
#board {
    grid-area: board;
    display: flex;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
}

/* Multiplier tabs */
#multiplier-tabs {
    display: flex;
}

.tab-btn {
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.1s ease;
}

.tab-btn:active { transform: scale(0.97); }

.tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }

/* Segment grid: 4 rows × 5 columns = 20 number buttons */
#segment-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--gap);
    flex: 1;
}

.seg-btn {
    min-height: var(--btn-min);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background 0.08s ease, transform 0.08s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}

.seg-btn:active {
    transform: scale(0.94);
    background: var(--bg-hover);
}

/* Colour tinting based on active multiplier */
body[data-multiplier="1"] .seg-btn { border-color: #2a4a6a; }
body[data-multiplier="1"] .seg-btn:active { background: #1a3a5a; color: var(--single-color); }

body[data-multiplier="2"] .seg-btn { border-color: #6a1a1a; }
body[data-multiplier="2"] .seg-btn:active { background: #4a0a0a; color: var(--double-color); }

body[data-multiplier="3"] .seg-btn { border-color: #1a5a2a; }
body[data-multiplier="3"] .seg-btn:active { background: #0a3a1a; color: var(--treble-color); }

/* Bull row at the bottom of the board */
#bull-row,
.bull-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap: var(--gap);
}

.bull-btn {
    min-height: var(--btn-min);
    border-radius: var(--radius);
    border: 1px solid var(--bull-color);
    background: var(--bg-raised);
    color: var(--bull-color);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.08s ease, transform 0.08s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}

.bull-btn:active {
    transform: scale(0.94);
    background: rgba(240, 165, 0, 0.15);
}

.miss-btn {
    border-color: var(--text-dim);
    color: var(--text-dim);
}

.miss-btn:active {
    background: var(--bg-hover);
}

/* --- Status Bar --- */
#status-bar {
    grid-area: status;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    height: 36px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#status-message {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

#status-message.bust    { color: var(--bust-color); font-weight: bold; }
#status-message.success { color: var(--checkout-color); font-weight: bold; }

/* action-btn replaced by gh-btn system */

/* --- Confirm modal --- */
.confirm-box {
    max-width: 420px;
}

.confirm-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.confirm-message {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin-bottom: 24px;
    text-align: center;
}

.confirm-btn-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.confirm-btn {
    height: 48px;
    padding: 0 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.confirm-btn-cancel {
    color: var(--text-secondary);
}
.confirm-btn-cancel:hover { color: var(--text-primary); border-color: var(--text-secondary); }

.confirm-btn-danger {
    color: #c0392b;
    border-color: #6a2a2a;
}
.confirm-btn-danger:hover { background: rgba(192,57,43,0.12); }

.confirm-btn-ok {
    color: var(--accent);
    border-color: var(--accent-dim);
}
.confirm-btn-ok:hover { background: var(--accent-glow); }

/* --- Toast notifications --- */
#toast {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 24px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    white-space: nowrap;
}

#toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#toast.bust    { border-color: var(--bust-color);     color: var(--bust-color); }
#toast.success { border-color: var(--checkout-color); color: var(--checkout-color); }
#toast.info    { border-color: var(--accent);         color: var(--accent); }

/* --- Loading overlay --- */
#loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(13, 13, 13, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--accent);
    letter-spacing: 0.1em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

#loading.visible {
    opacity: 1;
    pointer-events: all;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* --- Setup Screen --- */

/* Setup content wrapper — centred column, allows natural height growth */
.setup-screen-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

#setup-title {
    text-align: center;
    margin-bottom: 28px;
}

.setup-logo {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent);
}

.setup-subtitle {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Setup sections */
.setup-section {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 640px;
}

/* Generic option button used for game type, checkout rule, player count */
.setup-option-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.option-btn {
    min-width: 80px;
    height: 58px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.1s ease;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.option-btn .option-hint {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-top: 2px;
    font-weight: 500;
}

.option-btn:active { transform: scale(0.95); }

.option-btn.selected {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 12px var(--accent-glow);
}

.option-btn.selected .option-hint { color: var(--accent-dim); }

.option-btn.disabled,
.option-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* Keep count-btn as an alias — just uses option-btn now */
.count-btn { min-width: 70px; }

/* Paired Sets + Legs section — two columns side by side */
.setup-section-paired {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 100%;
    max-width: 640px;
    text-align: center;
    margin-bottom: 20px;
}

.paired-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

/* Left col gets a right margin to space it from the right col */
.paired-col:first-child {
    margin-right: 10px;
}

/* Compact option buttons for the paired layout — narrower/shorter */
.option-btn-compact {
    min-width: 0;
    height: 48px;
    font-size: 1rem;
    padding: 0 8px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

/* Stack option buttons vertically within each column */
.setup-option-col {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

#setup-names-section {
    margin-bottom: 28px;
    width: 100%;
    max-width: 640px;
}

#setup-names-grid {
    display: grid;
    gap: var(--gap-lg);
}

.name-slot {
    display: flex;
    flex-direction: column;
}

/* Toggle row: NEW / EXISTING */
.slot-toggle-row {
    display: flex;
    margin-bottom: 2px;
}

.slot-toggle-btn {
    flex: 1;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.1s ease;
}

.slot-toggle-btn.active {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.slot-toggle-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Existing player dropdown */
.name-select {
    height: 52px;
    padding: 0 14px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    outline: none;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* Dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888880' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.name-select:focus  { border-color: var(--accent); }
.name-select.error  { border-color: var(--danger); }

.name-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
}

.name-input {
    height: 52px;
    padding: 0 14px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.15s ease;
    width: 100%;
    -webkit-appearance: none;
}

.name-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}

.name-input.error {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.3);
}

.name-input::placeholder { color: var(--text-dim); }

.start-btn {
    height: 58px;
    padding: 0 48px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-lg);
    color: #000;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.1s ease;
    text-transform: uppercase;
}

.start-btn:active { transform: scale(0.97); }

.start-btn:disabled {
    background: var(--bg-raised);
    color: var(--text-dim);
    cursor: not-allowed;
}

/* --- Portrait fallback warning --- */
@media (orientation: portrait) {
    #app::before {
        content: "ROTATE TO LANDSCAPE";
        position: fixed;
        top: 0;
    right: 0;
    bottom: 0;
    left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-primary);
        font-family: var(--font-mono);
        font-size: 1.2rem;
        color: var(--accent);
        letter-spacing: 0.15em;
        z-index: 999;
    }
}

/* =============================================================
   Modal overlay — used for leg-end interstitial and congrats
   ============================================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-box {
    background: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 32px 40px;
    text-align: center;
    box-shadow: 0 0 40px var(--accent-glow), 0 8px 32px rgba(0,0,0,0.6);
    animation: modal-slide-in 0.25s ease;
    min-width: 320px;
    max-width: 480px;
    width: 90vw;
}

@keyframes modal-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.modal-trophy {
    font-size: 3rem;
    margin-bottom: 8px;
    animation: trophy-pop 0.4s ease 0.2s both;
}

@keyframes trophy-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.modal-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.modal-winner {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.modal-subtitle {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.modal-score-grid {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.modal-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-score-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    min-width: 100px;
    text-align: right;
}

.modal-score-sets {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    min-width: 60px;
    text-align: left;
}

.modal-score-legs {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 70px;
    text-align: left;
}

/* Sets / legs tally on player cards during the game */
.player-tally {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-top: 4px;
}

.player-card.active .player-tally {
    color: var(--accent-dim);
}

/* =============================================================
   CPU slot on setup screen
   ============================================================= */

.cpu-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    padding: 16px;
    min-height: 110px;
}

.cpu-badge {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
}

.cpu-desc {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-align: center;
}

/* =============================================================
   Difficulty picker modal
   ============================================================= */

.difficulty-box {
    max-width: 560px;
}

.difficulty-grid {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.difficulty-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.difficulty-card:hover,
.difficulty-card:active {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.diff-icon {
    grid-row: 1 / 3;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.diff-label {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}

.diff-desc {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin-top: 2px;
}

/* Updated CPU slot showing difficulty name */
.cpu-difficulty {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

.cpu-change-btn {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text-dim);
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s;
}

.cpu-change-btn:hover { color: var(--accent); border-color: var(--accent); }

/* =============================================================
   Stats entry button (setup screen)
   ============================================================= */

.stats-entry-btn {
    margin-top: 8px;
    width: 100%;
    max-width: 480px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.stats-entry-btn:hover { border-color: var(--accent); color: var(--accent); }

/* =============================================================
   Stats player picker modal
   ============================================================= */

.stats-picker-box { max-width: 400px; }

.stats-picker-list {
    display: flex;
    flex-direction: column;
    margin: 16px 0 12px;
    max-height: 55vh;
    overflow-y: auto;
}

.stats-picker-btn {
    width: 100%;
    height: 52px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.stats-picker-btn:hover { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }

.stats-cancel-btn {
    width: 100%;
    height: 40px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    cursor: pointer;
}
.stats-cancel-btn:hover { color: var(--text-secondary); }

/* =============================================================
   Stats screen
   ============================================================= */

.stats-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.stats-back-btn {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--accent);
    background: none;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
}
.stats-back-btn:hover { background: var(--accent-glow); }

.stats-header-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
}

/* Filter bar */
/* Scrollable content */
.stats-content {
    flex: 1;
    overflow: hidden;        /* columns handle their own scroll */
    padding: 0;
    display: flex;
    flex-direction: column;
}

.stats-loading,
.stats-error {
    text-align: center;
    padding: 48px 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--text-dim);
}

/* Stat cards */
.stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    overflow: hidden;
}

.stat-card-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    color: var(--accent);
    background: var(--bg-surface);
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stat-row:last-child { border-bottom: none; }

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.stat-sub {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    font-weight: 400;
}


/* iOS 12 flex gap polyfill (gap replaced with > * + * margins) */
#sidebar > * + * {
    margin-top: 8px;
}
.player-darts > * + * {
    margin-left: 6px;
}
#board > * + * {
    margin-top: 8px;
}
#multiplier-tabs > * + * {
    margin-left: 8px;
}
/* removed */
.setup-option-row > * + * {
    margin-left: 8px;
}
.name-slot > * + * {
    margin-top: 6px;
}
.slot-toggle-row > * + * {
    margin-left: 4px;
}
.modal-score-grid > * + * {
    margin-top: 8px;
}
.modal-score-row > * + * {
    margin-left: 12px;
}
.cpu-slot > * + * {
    margin-top: 6px;
}
.difficulty-grid > * + * {
    margin-top: 10px;
}
.stats-picker-list > * + * {
    margin-top: 8px;
}
.stats-header > * + * {
    margin-left: 16px;
}
.stats-content > * + * {
    margin-top: 12px;
}
/* iOS 12 flex gap polyfill for new groups */
/* removed orphan */
.confirm-btn-row > * + * { margin-left: 12px; }

/* =============================================================
   Stats screen — AI Analysis button
   ============================================================= */

.stats-ai-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius);
    border: 1px solid #4a3a6a;
    background: var(--bg-raised);
    color: #a78bfa;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    white-space: nowrap;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
.stats-ai-btn:hover {
    border-color: #a78bfa;
    background: rgba(167,139,250,0.1);
}

/* =============================================================
   Analysis screen layout
   ============================================================= */

.analysis-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 32px;
}

.analysis-loading,
.analysis-error {
    text-align: center;
    padding: 48px 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--text-dim);
}

/* Two-column grid: metrics left, AI right */
.analysis-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    min-height: 100%;
}

.analysis-panel {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    overflow: hidden;
}

.analysis-panel:first-child {
    margin-right: 12px;
}

.analysis-panel-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    color: #a78bfa;
    background: var(--bg-surface);
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}

/* =============================================================
   Metrics panel
   ============================================================= */

.metrics-content {
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    -webkit-overflow-scrolling: touch;
}

.metrics-sample-note {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.metrics-card {
    border-bottom: 1px solid var(--border);
}

.metrics-card:last-child {
    border-bottom: none;
}

.metrics-card-title {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    color: var(--accent);
    padding: 6px 14px 4px;
    background: rgba(255,255,255,0.02);
}

.metrics-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 5px 14px;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.metrics-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.metrics-value {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* =============================================================
   AI panel
   ============================================================= */

.analysis-style-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 10px 14px 0;
}

.analysis-style-btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.analysis-style-btn.active {
    border-color: #a78bfa;
    color: #a78bfa;
    background: rgba(167,139,250,0.1);
}

/* Skill level selector */
.analysis-skill-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 8px 14px 0;
}

.analysis-skill-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    margin-bottom: 5px;
}

.analysis-skill-btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.analysis-skill-btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.analysis-skill-btn.active {
    border-color: #34d399;
    color: #34d399;
    background: rgba(52,211,153,0.1);
}

/* iOS 12 gap polyfill */
.analysis-skill-btns > * + * { margin-left: 6px; }

.analysis-generate-btn {
    display: block;
    width: calc(100% - 28px);
    margin: 10px 14px;
    height: 42px;
    border-radius: var(--radius-lg);
    border: 1px solid #a78bfa;
    background: rgba(167,139,250,0.12);
    color: #a78bfa;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.analysis-generate-btn:hover {
    background: rgba(167,139,250,0.2);
}

.analysis-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.analysis-response {
    margin: 0 14px 14px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--text-secondary);
    min-height: 120px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-break: break-word;
}

.analysis-response.streaming {
    border-color: #4a3a6a;
    color: var(--text-primary);
}

.analysis-response.done {
    border-color: var(--border);
    color: var(--text-primary);
    /* Switch from pre-wrap to normal flow once markdown is rendered */
    white-space: normal;
}

.analysis-response.error {
    border-color: #6a2a2a;
    color: #c0392b;
}

/* Markdown rendered elements inside .analysis-response */
.analysis-response .ai-heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: 0.06em;
    margin: 10px 0 4px;
    line-height: 1.2;
}
.analysis-response h3.ai-heading { font-size: 0.95rem; }
.analysis-response h4.ai-heading { font-size: 0.85rem; }
.analysis-response h5.ai-heading { font-size: 0.78rem; }

.analysis-response .ai-para {
    margin: 0 0 6px;
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.analysis-response .ai-list {
    margin: 4px 0 8px 16px;
    padding: 0;
}

.analysis-response .ai-list li {
    font-size: 0.72rem;
    line-height: 1.65;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.analysis-response .ai-list li strong {
    color: #a78bfa;
}

.analysis-response .ai-spacer {
    height: 6px;
}

.analysis-response .ai-hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 10px 0;
}

.analysis-response .ai-code {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    background: rgba(167,139,250,0.1);
    color: #a78bfa;
    padding: 1px 5px;
    border-radius: 3px;
}

.tip-number {
    color: #a78bfa;
    font-weight: 700;
}

/* iOS 12 gap polyfill for analysis panels */
.analysis-style-row > * + * { margin-left: 8px; }


/* Trend chart card */
/* =========================================================
   PRACTICE MODE
   ========================================================= */

/* Practice as a game-type button — dashed border signals it's an action not a selection */
.practice-gametype-btn {
    border-style: dashed !important;
    color: var(--text-secondary) !important;
}

.practice-gametype-btn:active {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-glow) !important;
}

/* Back button on practice setup */
.practice-back-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-align: center;
}

/* ---- Practice game screen layout ---- */

body.mode-practice #app {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Header bar: name | timer | end button */
#practice-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 10px var(--gap);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.practice-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

.practice-timer {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
    min-width: 60px;
    text-align: center;
}

/* Timer sits inside gh-match-info in the header — override the small subtitle size */
.practice-timer-inline {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   BASEBALL — two-column layout matching 501 / Shanghai / Killer
   ═══════════════════════════════════════════════════════════════ */

body.mode-baseball #app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board";
    width: 100vw;
    height: 100vh;
    gap: 0;
}

/* ── Sidebar ── */
#bbmp-sidebar {
    grid-area: sidebar;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--gap);
}

/* Scoreboard inside sidebar */
.bbmp-scoreboard {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
}

.bbmp-sb-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid var(--border);
    min-height: 30px;
}

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

.bbmp-sb-row.bbmp-sb-active {
    background: var(--accent-glow);
}

.bbmp-sb-head {
    background: var(--bg-surface);
}

.bbmp-sb-name {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    width: 54px;
    min-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 4px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
}

.bbmp-sb-active .bbmp-sb-name {
    color: var(--accent);
    font-weight: 700;
}

.bbmp-sb-cell {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 20px;
    padding: 3px 1px;
}

.bbmp-sb-inn-head {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: var(--text-dim);
    font-weight: 400;
}

.bbmp-sb-cell-current {
    color: var(--double-color, #e67e22);
    font-weight: 700;
}

.bbmp-sb-total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 26px;
    border-left: 1px solid var(--border);
}

.bbmp-sb-total-head {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 26px;
    border-left: 1px solid var(--border);
}

/* Outs row — sits below scoreboard in sidebar */
.bbmp-outs-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.bbmp-outs-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin-right: 2px;
}

/* ── Board (right column) ── */
.bbmp-board {
    grid-area: board;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
    gap: var(--gap);
}

/* Status banner */
.bbmp-status-banner {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: center;
}

/* Dart pills */
.bbmp-pills {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    min-height: 32px;
    padding: 2px 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

/* Multiplier tabs */
.bbmp-tabs {
    display: -webkit-box;
    display: flex;
    gap: var(--gap);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.bbmp-tabs .tab-btn {
    -webkit-box-flex: 1;
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.bbmp-tabs .tab-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.bbmp-tabs .tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.bbmp-tabs .tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.bbmp-tabs .tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }
.bbmp-tabs .tab-btn:disabled { opacity: 0.35; cursor: default; }

/* Segment grid fills remaining space */
.bbmp-board #segment-grid {
    -webkit-box-flex: 1;
    flex: 1;
}

/* Footer hint */
.bbmp-footer {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* Result screen */
.bbmp-result-scorecard {
    width: 100%;
    overflow-x: auto;
    margin: 0 auto 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.bbmp-result-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

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

.bbmp-result-head {
    background: var(--bg-raised);
    font-size: 0.58rem;
    color: var(--text-dim);
}

.bbmp-result-winner {
    background: rgba(39,174,96,0.08);
}

.bbmp-result-name {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    min-width: 64px;
    padding: 4px 6px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.bbmp-result-cell {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    -webkit-flex: 1;
    flex: 1;
    min-width: 22px;
    padding: 4px 1px;
}

.bbmp-result-total {
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--accent);
    border-left: 1px solid var(--border);
    min-width: 32px;
}

.bbmp-hs-wrap {
    margin: 0 auto 12px;
    text-align: center;
}

.bbmp-hs-line {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--treble-color);
    padding: 3px 0;
}

/* ── Race to 1000 ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   RACE TO 1000 — two-column layout with SVG progress rings
   ═══════════════════════════════════════════════════════════════ */

body.mode-race1000 #app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board";
    width: 100vw;
    height: 100vh;
    gap: 0;
}

/* ── Sidebar ── */
#r1k-sidebar {
    grid-area: sidebar;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--gap);
}

/* Player card */
.r1k-player-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 14px 8px;
    background: var(--bg-raised);
    text-align: center;
    -webkit-transition: border-color 0.15s, background 0.15s;
    transition: border-color 0.15s, background 0.15s;
}

.r1k-active {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow);
}

.r1k-player-name {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.r1k-active .r1k-player-name {
    color: var(--accent);
}

/* SVG ring */
.r1k-ring-svg {
    display: block;
    width: 120px;
    height: 120px;
    margin: 4px auto;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.r1k-ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.07);
    stroke-width: 8;
}

/* Arc colour: green for leader, red for trailing */
.r1k-ring-leader .r1k-ring-arc {
    fill: none;
    stroke: #4ade80;
    stroke-width: 8;
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
    transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
}

.r1k-ring-trailing .r1k-ring-arc {
    fill: none;
    stroke: #f87171;
    stroke-width: 8;
    stroke-linecap: round;
    -webkit-transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
    transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
}

/* Dim inactive cards slightly */
.r1k-player-card:not(.r1k-active) .r1k-ring-arc {
    opacity: 0.55;
}

/* Active leader: bright green glow */
.r1k-active.r1k-ring-leader .r1k-ring-arc {
    stroke: #22c55e;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(34,197,94,0.6));
}

/* Active trailing: bright red glow */
.r1k-active.r1k-ring-trailing .r1k-ring-arc {
    stroke: #ef4444;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(239,68,68,0.5));
}

/* Score text inside the ring */
.r1k-ring-text {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 400;
    fill: var(--text-primary);
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: -0.02em;
}

.r1k-active .r1k-ring-text {
    fill: #ffffff;
}

/* Turn delta "+X" shown below ring during active turn */
.r1k-player-sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    min-height: 18px;
    text-align: center;
    color: var(--text-dim);
    margin-top: 2px;
}

.r1k-sub-scoring {
    color: #4ade80;
    font-weight: 700;
}

/* "NEEDS N" hint */
.r1k-player-need {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    text-align: center;
    margin-top: 2px;
}

/* ── Board (right column) ── */
.r1k-seg-board {
    grid-area: board;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
    gap: var(--gap);
}

/* Status banner */
.r1k-status-banner {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: center;
}

/* Dart pills */
.r1k-pills {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    min-height: 32px;
    padding: 2px 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

/* Multiplier tabs */
.r1k-tabs {
    display: -webkit-box;
    display: flex;
    gap: var(--gap);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.r1k-tabs .tab-btn {
    -webkit-box-flex: 1;
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.r1k-tabs .tab-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.r1k-tabs .tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.r1k-tabs .tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.r1k-tabs .tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }
.r1k-tabs .tab-btn:disabled { opacity: 0.35; cursor: default; }

/* Segment grid fills remaining space */
.r1k-seg-board #segment-grid {
    -webkit-box-flex: 1;
    flex: 1;
}

/* Footer hint */
.r1k-footer {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* Result table */
.r1k-result-table {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.r1k-result-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

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

.r1k-result-head {
    background: var(--bg-raised);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-dim);
}

.r1k-result-winner { background: rgba(39,174,96,0.1); }

.r1k-result-name {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    -webkit-flex: 1;
    flex: 1;
    color: var(--text-primary);
}

.r1k-result-score {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 50px;
    text-align: right;
}

/* ── Bermuda Triangle ───────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   BERMUDA TRIANGLE — two-column layout matching other game modes
   ═══════════════════════════════════════════════════════════════ */

body.mode-bermuda #app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board";
    width: 100vw;
    height: 100vh;
    gap: 0;
}

/* ── Sidebar ── */
#bm-sidebar {
    grid-area: sidebar;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--gap);
}

/* Player card */
.bm-player-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 14px 8px;
    background: var(--bg-raised);
    text-align: center;
    -webkit-transition: border-color 0.15s, background 0.15s;
    transition: border-color 0.15s, background 0.15s;
}

.bm-active {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow);
}

.bm-player-name {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bm-active .bm-player-name {
    color: var(--accent);
}

/* Large score */
.bm-player-score {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.bm-active .bm-player-score {
    color: #ffffff;
}

/* Turn delta "+X" or "—" */
.bm-player-sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    min-height: 18px;
    text-align: center;
    color: var(--text-dim);
}

.bm-sub-scoring { color: #4ade80; font-weight: 700; }
.bm-sub-miss    { color: #f87171; font-weight: 700; }

/* ── Board (right column) ── */
.bm-seg-board {
    grid-area: board;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
    gap: var(--gap);
}

/* Status banner */
.bm-status-banner {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: center;
}

/* Round progress strip — horizontal row of 13 pips */
.bm-round-strip {
    display: -webkit-box;
    display: flex;
    gap: 4px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bm-round-pip {
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    padding: 4px 2px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-dim);
    white-space: nowrap;
    text-align: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.bm-round-done {
    background: rgba(39,174,96,0.15);
    border-color: #27ae60;
    color: #27ae60;
}

.bm-round-current {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: 700;
}

/* Dart pills */
.bm-pills {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    min-height: 32px;
    padding: 2px 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

/* Multiplier tabs */
.bm-tabs {
    display: -webkit-box;
    display: flex;
    gap: var(--gap);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.bm-tabs .tab-btn {
    -webkit-box-flex: 1;
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.bm-tabs .tab-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.bm-tabs .tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.bm-tabs .tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.bm-tabs .tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }
.bm-tabs .tab-btn:disabled { opacity: 0.35; cursor: default; }

/* Segment grid fills remaining space */
.bm-seg-board #segment-grid {
    -webkit-box-flex: 1;
    flex: 1;
}

/* Board highlights (unchanged) */
.seg-btn.bm-double-highlight {
    border-color: var(--double-color, #e67e22);
    color: var(--double-color, #e67e22);
    background: rgba(230,126,34,0.08);
}

.seg-btn.bm-triple-highlight {
    border-color: var(--treble-color, #e74c3c);
    color: var(--treble-color, #e74c3c);
    background: rgba(231,76,60,0.08);
}

/* Footer hint */
.bm-footer {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* Result table */
.bm-result-table {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.bm-result-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

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

.bm-result-head {
    background: var(--bg-raised);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-dim);
}

.bm-result-winner { background: rgba(39,174,96,0.1); }

.bm-result-name {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    -webkit-flex: 1;
    flex: 1;
    color: var(--text-primary);
}

.bm-result-score {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 50px;
    text-align: right;
}

/* ── Nine Lives ─────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   NINE LIVES — two-column layout matching 501 / Shanghai / Killer
   ═══════════════════════════════════════════════════════════════ */

body.mode-nine-lives #app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board";
    width: 100vw;
    height: 100vh;
    gap: 0;
}

/* ── Sidebar ── */
#nl-sidebar {
    grid-area: sidebar;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--gap);
}

/* Player card */
.nl-player-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--bg-raised);
    text-align: center;
    -webkit-transition: border-color 0.15s, background 0.15s;
    transition: border-color 0.15s, background 0.15s;
}

.nl-active {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.nl-eliminated {
    opacity: 0.35;
}

.nl-player-name {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.nl-active .nl-player-name {
    color: var(--accent);
}

/* Current target number — large and prominent */
.nl-player-target {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--double-color, #e67e22);
    line-height: 1;
    margin-bottom: 8px;
}

.nl-active .nl-player-target {
    color: var(--accent);
}

/* Nine lives pips — 3×3 grid layout */
.nl-lives {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    -webkit-box-pack: center;
    justify-content: center;
}

.nl-life-pip {
    font-size: 2rem;
    line-height: 1.1;
    text-align: center;
    display: block;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.nl-life-pip-on {
    /* cat emoji — no extra styling needed */
}

.nl-life-pip:not(.nl-life-pip-on) {
    opacity: 0.55;
}

/* ── Board (right column) ── */
.nl-seg-board {
    grid-area: board;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
    gap: var(--gap);
}

/* Status banner */
.nl-status-banner {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: center;
}

/* Dart pills */
.nl-pills {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    min-height: 32px;
    padding: 2px 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

/* Multiplier tabs */
.nl-tabs {
    display: -webkit-box;
    display: flex;
    gap: var(--gap);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.nl-tabs .tab-btn {
    -webkit-box-flex: 1;
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.nl-tabs .tab-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.nl-tabs .tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.nl-tabs .tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.nl-tabs .tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }
.nl-tabs .tab-btn:disabled { opacity: 0.35; cursor: default; }

/* Segment grid fills remaining space */
.nl-seg-board #segment-grid {
    -webkit-box-flex: 1;
    flex: 1;
}

/* Footer hint */
.nl-footer {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* Result table */
.nl-result-table {
    width: 100%;
    max-width: 340px;
    margin: 0 auto 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.nl-result-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

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

.nl-result-head {
    background: var(--bg-raised);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-dim);
}

.nl-result-winner {
    background: rgba(39,174,96,0.1);
}

.nl-result-name {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    -webkit-flex: 1;
    flex: 1;
    color: var(--text-primary);
}

.nl-result-target {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--double-color, #e67e22);
    min-width: 44px;
    text-align: center;
}

.nl-result-lives {
    font-family: var(--font-display);
    font-size: 1.0rem;
    font-weight: 700;
    color: #e74c3c;
    min-width: 32px;
    text-align: center;
}

/* ── Killer Darts ───────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KILLER — two-column layout matching 501 / Shanghai style
   ═══════════════════════════════════════════════════════════════ */

body.mode-killer #app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board";
    width: 100vw;
    height: 100vh;
    gap: 0;
}

/* ── Sidebar ── */
#killer-sidebar {
    grid-area: sidebar;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--gap);
}

/* Player card */
.killer-player-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--bg-raised);
    text-align: center;
    -webkit-transition: border-color 0.15s, background 0.15s;
    transition: border-color 0.15s, background 0.15s;
}

.killer-active {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.killer-eliminated {
    opacity: 0.35;
}

.killer-player-name {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.killer-active .killer-player-name {
    color: var(--accent);
}

.killer-player-number {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--double-color, #e67e22);
    line-height: 1;
    margin-bottom: 6px;
}

.killer-active .killer-player-number {
    color: var(--accent);
}

/* Hits pips row */
.killer-hits {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
    min-height: 20px;
}

.killer-hit-pip {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--text-dim);
    background: transparent;
    display: inline-block;
}

.killer-hit-pip-on {
    background: var(--double-color, #e67e22);
    border-color: var(--double-color, #e67e22);
}

.killer-badge {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    color: #e74c3c;
    letter-spacing: 0.05em;
}

/* Lives pips row */
.killer-lives {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.killer-life-pip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--text-dim);
    background: transparent;
    display: inline-block;
}

.killer-life-pip-on {
    background: #27ae60;
    border-color: #27ae60;
}

/* ── Board (right column) ── */
.killer-seg-board {
    grid-area: board;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
    gap: var(--gap);
}

/* Status banner — shows current player + target */
.killer-status-banner {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: center;
}

/* Current-turn dart pills */
.killer-pills {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    min-height: 32px;
    padding: 2px 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

/* Multiplier tabs — match 501 style */
.killer-tabs {
    display: -webkit-box;
    display: flex;
    gap: var(--gap);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.killer-tabs .tab-btn {
    -webkit-box-flex: 1;
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.killer-tabs .tab-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.killer-tabs .tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.killer-tabs .tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.killer-tabs .tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }
.killer-tabs .tab-btn:disabled { opacity: 0.35; cursor: default; }

/* Segment grid — reuse #segment-grid styles, scoped to killer board */
.killer-seg-board #segment-grid {
    -webkit-box-flex: 1;
    flex: 1;
}

/* Highlight opponent assigned numbers on the grid */
.seg-btn.killer-assigned-highlight {
    border-color: #8e44ad;
    color: #d7bde2;
    background: rgba(142,68,173,0.1);
}

/* Footer hint */
.killer-footer {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* Result table */
.killer-result-table {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.killer-result-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

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

.killer-result-head {
    background: var(--bg-raised);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-dim);
}

.killer-result-winner {
    background: rgba(39,174,96,0.1);
}

.killer-result-name {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    -webkit-flex: 1;
    flex: 1;
    color: var(--text-primary);
}

.killer-result-num {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--double-color, #e67e22);
    min-width: 24px;
    text-align: center;
}

.killer-result-status {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    min-width: 80px;
    color: var(--text-secondary);
}

.killer-result-lives {
    font-family: var(--font-display);
    font-size: 1.0rem;
    font-weight: 700;
    color: #27ae60;
    min-width: 24px;
    text-align: center;
}

/* ── Warm Up Routine ────────────────────────────────────────────────── */
.wu-score-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 24px;
    padding: 6px 8px 2px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.wu-stat-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 64px;
}

.wu-stat-label {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
}

.wu-stat-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

.wu-target {
    color: var(--double-color, #e67e22);
    font-size: 2.0rem;
}

.wu-hs {
    color: var(--treble-color);
}

/* Compass progress strip */
.wu-compass-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.wu-compass-pip {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 44px;
    padding: 4px 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    gap: 2px;
}

.wu-pip-done {
    background: rgba(39,174,96,0.15);
    border-color: #27ae60;
    opacity: 0.7;
}

.wu-pip-current {
    background: rgba(230,126,34,0.15);
    border-color: var(--double-color, #e67e22);
}

.wu-pip-pending {
    background: var(--bg-raised);
    opacity: 0.5;
}

.wu-pip-dir {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.wu-pip-seg {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.wu-pip-current .wu-pip-dir,
.wu-pip-current .wu-pip-seg {
    color: var(--double-color, #e67e22);
}

/* Status bar */
.wu-status {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-align: center;
    padding: 2px 8px 4px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Neighbour highlight on segment grid */
.seg-btn.wu-neighbour-highlight {
    border-color: #7f8c8d;
    color: var(--text-secondary);
    background: rgba(127,140,141,0.12);
}

/* Summary scorecard */
.wu-summary-scorecard {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.wu-summary-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

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

.wu-summary-dir {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--double-color, #e67e22);
    min-width: 20px;
}

.wu-summary-seg {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    -webkit-flex: 1;
    flex: 1;
}

.wu-summary-pts {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
}

/* ── Baseball Darts ────────────────────────────────────────────────── */
.bb-board {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 4px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.bb-stat-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 54px;
}

.bb-stat-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin-bottom: 2px;
}

.bb-stat-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.bb-stat-value.bb-target {
    color: var(--double-color, #e67e22);
    font-size: 2.0rem;
}

.bb-stat-value.bb-runs {
    color: var(--treble-color);
}

.bb-outs-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 5px;
    margin-top: 4px;
}

.bb-out-pip {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--text-dim);
    background: transparent;
    display: inline-block;
}

.bb-out-pip.bb-out-pip-on {
    background: var(--bust-color);
    border-color: var(--bust-color);
}

/* Inning-by-inning scoring strip */
.bb-inning-strip {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 3px;
    padding: 2px 10px 4px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

.bb-inning-cell {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-raised);
    padding: 2px 3px;
}

.bb-inning-cell.bb-inning-cell-current {
    border-color: var(--double-color, #e67e22);
    background: rgba(230, 126, 34, 0.1);
}

.bb-inning-cell-num {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
}

.bb-inning-cell-score {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

/* Status bar */
.bb-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-align: center;
    padding: 2px 8px 4px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* Summary scorecard */
.bb-summary-scorecard {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.bb-summary-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 5px 16px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

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

.bb-summary-row.bb-summary-header {
    background: var(--bg-raised);
    color: var(--text-dim);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
}

/* ── Bob's 27 ──────────────────────────────────────────────────────── */
.b27-score-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 32px;
    padding: 12px 16px 6px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.b27-score-label,
.b27-target-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 2px;
}

.b27-score-value {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    text-align: center;
    min-width: 80px;
}

.b27-target-value {
    font-family: var(--font-display);
    font-size: 2.0rem;
    font-weight: 700;
    color: var(--double-color, #e67e22);
    line-height: 1;
    text-align: center;
    min-width: 80px;
}

.b27-progress-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 12px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.b27-pip {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    line-height: 22px;
    text-align: center;
    color: var(--text-dim);
    background: var(--bg-raised);
}

.b27-pip-done {
    background: var(--treble-color);
    border-color: var(--treble-color);
    color: #000;
}

.b27-pip-current {
    background: var(--double-color, #e67e22);
    border-color: var(--double-color, #e67e22);
    color: #fff;
    font-weight: 700;
}

/* ── 121 Checkouts ──────────────────────────────────────────────────── */
.c121-score-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 16px;
    padding: 10px 16px 4px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.c121-score-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 60px;
}

.c121-score-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin-bottom: 2px;
}

.c121-score-value {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.c121-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-align: center;
    padding: 2px 8px 6px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.c121-status.c121-bust {
    color: var(--bust-color);
    font-weight: 700;
}

.c121-status.c121-success {
    color: var(--treble-color);
    font-weight: 700;
}

/* ── 121 dart picker sub-panel ──────────────────────────────────────── */
.target-121-subtitle {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 8px 4px 12px;
    letter-spacing: 0.04em;
}


.practice-timer.timer-warning {
    color: var(--bust-color);
    -webkit-animation: timerPulse 1s ease infinite;
    animation: timerPulse 1s ease infinite;
}

@-webkit-keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}
@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* practice header btns now use gh-btn system */

/* Stats strip */
.practice-strip {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding: 8px var(--gap);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.practice-stat {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.practice-stat-value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.practice-stat-label {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    margin-top: 2px;
}

/* Dart pills row */
.practice-pills {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 6px var(--gap);
    min-height: 36px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-align-self: stretch;
    align-self: stretch;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* iOS 12 gap polyfill — no gap property support */
.practice-pills > * { margin: 3px 6px 3px 0; }

.dart-pill {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.dart-pill.pill-miss {
    color: var(--text-dim);
    border-color: var(--border);
}

.dart-pill.pill-hot {
    border-color: var(--accent-dim);
    color: var(--accent);
}

#practice-board {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}

/* Summary screen */
.practice-summary {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--gap);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.practice-summary-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 10px 6px;
    border-right: 1px solid var(--border);
    gap: 4px;
}

.practice-summary-row:last-child {
    border-right: none;
}

.practice-summary-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.10em;
    color: var(--text-dim);
    text-align: center;
}

.practice-summary-value {
    font-family: var(--font-display);
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-align: center;
}

/* Practice heatmap container */
.practice-heatmap {
    width: 100%;
    margin: 0 0 var(--gap-lg);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.practice-heatmap svg {
    border-radius: 50%;
}

/* =========================================================
   TARGET PRACTICE
   ========================================================= */

/* Setup screen — mode badge */
.practice-target-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    background: var(--accent-glow);
    border: 1px solid var(--accent-dim);
    border-radius: 20px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}
.practice-target-badge.hidden { display: none; }

/* Target highlight on segment buttons */
.seg-btn.target-highlight {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-glow) !important;
    box-shadow: 0 0 8px rgba(240,165,0,0.3);
    -webkit-animation: target-pulse 2s ease-in-out infinite;
    animation: target-pulse 2s ease-in-out infinite;
}
@-webkit-keyframes target-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(240,165,0,0.25); }
    50%       { box-shadow: 0 0 14px rgba(240,165,0,0.6); }
}
@keyframes target-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(240,165,0,0.25); }
    50%       { box-shadow: 0 0 14px rgba(240,165,0,0.6); }
}

/* Target stat in strip */
.practice-stat-target .practice-stat-value {
    color: var(--accent);
    font-size: 0.85rem;
}

/* Target modal */
.target-modal-box {
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    gap: var(--gap);
}

.target-cat-bar,
.target-segcat-bar {
    display: -webkit-box;
    display: flex;
    gap: var(--gap);
}

.target-cat-btn,
.target-segcat-btn {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.target-cat-btn.active,
.target-segcat-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}

.target-panel {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    gap: var(--gap);
}

/* Single segment grid */
.target-seg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.target-seg-btn {
    padding: 10px 4px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: center;
}
.target-seg-btn:active {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

/* Group target cards */
.target-group-card {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.target-group-card:active {
    border-color: var(--accent);
    background: var(--accent-glow);
}
.target-group-label {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
}
.target-group-desc {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

/* Around the Clock completion modal */
.clock-complete-box {
    text-align: center;
    gap: var(--gap-lg);
    max-width: 340px;
}

.clock-complete-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 4px;
}

.clock-complete-stats {
    display: -webkit-box;
    display: flex;
    gap: var(--gap-lg);
    justify-content: center;
    margin: 8px 0;
}

.clock-complete-stat {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 100px;
}

.clock-stat-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.clock-stat-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
}

/* =========================================================
   SESSION HISTORY & SCORECARD
   ========================================================= */

/* History card */
.history-card {
    padding: 0;
    overflow: visible;
}

.history-card-title {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
}

.history-loading-inline {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.history-list {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
}

.history-empty {
    padding: 16px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-align: center;
}

.history-row {
    display: grid;
    grid-template-columns: 80px 54px 52px 1fr 44px 36px 16px;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
    -webkit-transition: background 0.1s;
    transition: background 0.1s;
}

.history-row:last-child { border-bottom: none; }
.history-row:active     { background: var(--bg-raised); }

.history-date   { color: var(--text-secondary); }
.history-game   { color: var(--text-dim); font-size: 0.62rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-opp    { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-avg    { color: var(--accent); text-align: right; }
.history-darts  { color: var(--text-dim); text-align: right; }
.history-chevron { color: var(--text-dim); text-align: right; }

.result-win      { color: var(--checkout-color); font-weight: 700; }
.result-loss     { color: var(--bust-color); }
.result-practice { color: var(--accent-dim); }
.result-neutral  { color: var(--text-dim); }

.history-more-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.history-more-btn:active { color: var(--accent); }

/* ── Scorecard modal ── */
.scorecard-box {
    width: 95%;
    max-width: 680px;
    max-height: 85vh;
    overflow-y: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.scorecard-box .modal-title {
    padding: 16px 16px 4px;
}

.sc-meta {
    padding: 0 16px 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
}

.sc-loading {
    padding: 24px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    text-align: center;
}

.sc-leg-header {
    padding: 10px 16px 6px;
    background: var(--bg-raised);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.sc-col-header,
.sc-turn-row {
    display: grid;
    grid-template-columns: 24px repeat(var(--sc-players, 2), 1fr);
    gap: 0;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.sc-col-header {
    color: var(--text-secondary);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    background: var(--bg-surface);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sc-turn-num {
    color: var(--text-dim);
    font-size: 0.65rem;
    padding-top: 2px;
}

.sc-player-col {
    display: -webkit-box;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 4px;
    border-radius: 3px;
    flex-wrap: wrap;
}

.sc-focus {
    background: rgba(240,165,0,0.06);
}

.sc-darts {
    display: -webkit-box;
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    flex: 1;
}

.sc-dart {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.dart-checkout {
    color: var(--checkout-color);
    font-weight: 700;
}

.sc-turn-score {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.78rem;
    min-width: 24px;
    text-align: right;
}

.sc-remaining {
    color: var(--text-dim);
    font-size: 0.68rem;
    min-width: 28px;
    text-align: right;
}

.sc-bust .sc-turn-score,
.sc-bust .sc-remaining { color: var(--bust-color); }

.sc-checkout .sc-turn-score,
.sc-checkout .sc-remaining { color: var(--checkout-color); }

/* Practice summary modal */
.scorecard-practice-stats {
    display: -webkit-box;
    display: flex;
    gap: var(--gap-lg);
    justify-content: center;
    padding: 16px;
}

.sc-pstat {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 24px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sc-pval {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.sc-plbl {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
}

/* =========================================================
   30-DAY DAILY AVERAGE TREND CHART
   ========================================================= */

.daily-trend-card {
    padding: 0;
    overflow: hidden;
}

.daily-trend-wrap {
    padding: 4px 8px 8px;
}

.daily-trend-svg {
    border-radius: 4px;
    display: block;
    width: 100%;
}

/* Generic scorecard summary table */
.sc-summary-table {
    padding: 8px 16px 4px;
}
.sc-summary-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.82rem;
}
.sc-summary-row.sc-focus { background: rgba(167,139,250,0.08); }
.sc-summary-name  { -webkit-box-flex: 1; flex: 1; font-weight: 600; color: var(--text-primary); }
.sc-summary-score { color: var(--accent-green); font-family: var(--font-mono); min-width: 56px; text-align: right; }
.sc-summary-extra { color: var(--text-secondary); font-size: 0.75rem; min-width: 80px; text-align: right; }

/* Shanghai instant-win badge */
.sc-shanghai-badge {
    display: inline-block;
    background: var(--accent-gold, #f59e0b);
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Totals row in baseball scorecard */
.sc-totals-row {
    border-top: 1px solid rgba(255,255,255,0.15);
    font-weight: 700;
}

/* Close btn inside scorecard */
.scorecard-box .stats-cancel-btn {
    margin: 12px 16px 16px;
    width: calc(100% - 32px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* =========================================================
   CRICKET GAME MODE
   ========================================================= */

/* ═══════════════════════════════════════════════════════════════
   CRICKET — two-column layout matching 501 / Shanghai / etc.
   ═══════════════════════════════════════════════════════════════ */

body.mode-cricket {
    overflow: hidden;
    height: 100%;
}

body.mode-cricket #app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board";
    width: 100vw;
    height: 100vh;
}

/* ── Header ── */
.cricket-header {
    grid-area: header;
    flex-shrink: 0;
}

/* ── Sidebar (scoreboard) ── */
#cricket-sidebar {
    grid-area: sidebar;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scoreboard table */
.cricket-board {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1;
    overflow-y: auto;
}

.cricket-row {
    display: -webkit-box;
    display: flex;
    border-bottom: 1px solid var(--border);
}

.cricket-row-header {
    background: var(--bg-raised);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 2px solid var(--border);
}

.cricket-row-closed {
    opacity: 0.38;
}

.cricket-cell {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 8px 4px;
    border-right: 1px solid var(--border);
}
.cricket-cell:last-child { border-right: none; }

.cricket-num-col {
    width: 56px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-raised);
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 3px;
}

.cricket-num-label {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cricket-num-badge {
    font-family: var(--font-mono);
    font-size: 0.48rem;
    letter-spacing: 0.05em;
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1.4;
}

.badge-open {
    background: rgba(240,165,0,0.15);
    color: var(--accent);
    border: 1px solid rgba(240,165,0,0.3);
}

.badge-closed {
    background: rgba(255,255,255,0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.badge-none { background: none; border: none; }

.cricket-player-header {
    -webkit-box-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

.cricket-active-player {
    background: rgba(240,165,0,0.08) !important;
    border-bottom: 2px solid var(--accent);
}

.cricket-player-name {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    text-align: center;
}

.cricket-active-player .cricket-player-name { color: var(--accent); }

.cricket-player-score {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    line-height: 1;
}

.cricket-marks-cell {
    -webkit-box-flex: 1;
    flex: 1;
}

.cricket-marks {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

.cricket-mark {
    font-size: 1.3rem;
    line-height: 1;
}

.cricket-mark-slash  { color: var(--text-secondary); }
.cricket-mark-x      { color: var(--text-primary); font-weight: 700; }
.cricket-mark-closed {
    color: var(--accent);
    font-size: 1.5rem;
    -webkit-animation: closed-pop 0.3s ease-out;
    animation: closed-pop 0.3s ease-out;
}

@-webkit-keyframes closed-pop {
    0%   { -webkit-transform: scale(0.5); opacity: 0; }
    70%  { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1);   opacity: 1; }
}
@keyframes closed-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1);   opacity: 1; }
}

/* ── Board (right column) ── */
.cricket-seg-board {
    grid-area: board;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
    gap: var(--gap);
}

/* Status banner */
.cricket-status-banner {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: center;
}

/* Dart pills */
.cricket-pills {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    min-height: 32px;
    padding: 2px 0;
    -webkit-box-align: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow-x: auto;
}

/* Multiplier tabs */
.cricket-tabs {
    display: -webkit-box;
    display: flex;
    gap: var(--gap);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.cricket-tabs .tab-btn {
    -webkit-box-flex: 1;
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.cricket-tabs .tab-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.cricket-tabs .tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.cricket-tabs .tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.cricket-tabs .tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }
.cricket-tabs .tab-btn:disabled { opacity: 0.35; cursor: default; }

/* Segment grid fills remaining space */
.cricket-seg-board #cricket-seg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--gap);
    -webkit-box-flex: 1;
    flex: 1;
}

/* Footer hint */
.cricket-footer {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* Cricket target numbers (15-20, outer bull, bull) — purple highlight */
.cricket-seg-board .seg-btn.cricket-target {
    border-color: var(--accent);
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.10);
}
body[data-multiplier="1"] .cricket-seg-board .seg-btn.cricket-target { border-color: var(--accent); }
body[data-multiplier="2"] .cricket-seg-board .seg-btn.cricket-target { border-color: var(--accent); }
body[data-multiplier="3"] .cricket-seg-board .seg-btn.cricket-target { border-color: var(--accent); }
.cricket-seg-board .seg-btn.cricket-target:active  { background: rgba(124, 58, 237, 0.25); color: #c4b5fd; }
.cricket-seg-board .bull-btn.cricket-target {
    border-color: var(--accent);
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.10);
}
.cricket-seg-board .bull-btn.cricket-target:active { background: rgba(124, 58, 237, 0.25); color: #c4b5fd; }

/* Cricket setup button style */
.cricket-gametype-btn {
    border-style: dashed !important;
}

/* ── Win modal ── */
.cricket-win-box {
    text-align: center;
    gap: var(--gap-lg);
    max-width: 360px;
}
.cricket-win-icon {
    font-size: 3rem;
    line-height: 1;
}
.cricket-win-scores {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    width: 100%;
}
.cricket-win-score-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-raised);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.cricket-win-winner {
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}


/* ═══════════════════════════════════════════════════════════════
   SHANGHAI — two-column layout matching 501 style
   ═══════════════════════════════════════════════════════════════ */

body.mode-shanghai #app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar board";
    width: 100vw;
    height: 100vh;
    gap: 0;
}

.sh-header { grid-area: header; }

/* ── Sidebar ── */
#sh-sidebar {
    grid-area: sidebar;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: var(--gap);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--gap);
}

/* Score card per player */
.sh-score-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    background: var(--bg-raised);
    text-align: center;
}

.sh-score-card.sh-active-player {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.sh-card-name {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.sh-score-card.sh-active-player .sh-card-name {
    color: var(--accent);
}

.sh-card-total {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.sh-score-card.sh-active-player .sh-card-total {
    color: var(--accent);
}

.sh-card-pills {
    display: -webkit-box;
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 22px;
}

/* ── Scoreboard table (in sidebar below cards) ── */
.sh-scoreboard {
    display: -webkit-box;
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.sh-player-col {
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--border);
}
.sh-player-col:last-child { border-right: none; }

.sh-player-col.sh-active-player .sh-player-header {
    background: var(--accent-glow);
    border-bottom-color: var(--accent);
}

.sh-player-header {
    padding: 5px 6px;
    border-bottom: 2px solid var(--border);
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 1;
}

.sh-player-name {
    font-family: var(--font-display);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-round-row {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-align: center;
    padding: 3px 4px;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
    color: var(--text-dim);
    min-height: 22px;
    line-height: 1.4;
}

.sh-round-row.sh-round-done { color: var(--text-secondary); }
.sh-round-row.sh-round-active { color: var(--accent); font-weight: 700; }
.sh-round-row.sh-round-shanghai {
    color: var(--color-checkout, #2ecc71);
    font-weight: 700;
    background: rgba(46,204,113,0.08);
}

/* ── Board (right column) ── */
#sh-board {
    grid-area: board;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: var(--gap);
    overflow: hidden;
    gap: var(--gap);
}

/* ── Target banner ── */
.sh-target-banner {
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-shrink: 0;
}

.sh-banner-round {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--text-dim);
}

.sh-banner-target {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-align: center;
    -webkit-box-flex: 1;
    flex: 1;
}

.sh-banner-player {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-align: right;
}

/* ── Current-turn dart pills ── */
.sh-pills {
    display: -webkit-box;
    display: flex;
    gap: 6px;
    padding: 4px 0;
    min-height: 32px;
    align-items: center;
    flex-shrink: 0;
    overflow-x: auto;
}

/* ── Multiplier tabs — reuse 501 #multiplier-tabs styling ── */
.sh-tabs {
    display: -webkit-box;
    display: flex;
    flex-shrink: 0;
    gap: var(--gap);
}

.sh-tabs .tab-btn {
    -webkit-box-flex: 1;
    flex: 1;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.sh-tabs .tab-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.sh-tabs .tab-btn.active-single { background: var(--single-color); color: #fff; border-color: var(--single-color); }
.sh-tabs .tab-btn.active-double { background: var(--double-color); color: #fff; border-color: var(--double-color); }
.sh-tabs .tab-btn.active-treble { background: var(--treble-color); color: #fff; border-color: var(--treble-color); }
.sh-tabs .tab-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Segment grid — same as 501 #segment-grid ── */
.sh-seg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--gap);
    flex: 1;
}

.sh-seg-btn {
    min-height: var(--btn-min);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.4rem;
    cursor: pointer;
    -webkit-transition: background 0.08s ease, -webkit-transform 0.08s ease;
    transition: background 0.08s ease, transform 0.08s ease;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
}

.sh-seg-btn:active { -webkit-transform: scale(0.94); transform: scale(0.94); background: var(--bg-hover); }
.sh-seg-btn:disabled { opacity: 0.3; cursor: default; }

/* Multiplier colour tinting — same system as 501 */
body[data-multiplier="1"] .sh-seg-btn { border-color: #2a4a6a; }
body[data-multiplier="1"] .sh-seg-btn:active { background: #1a3a5a; color: var(--single-color); }
body[data-multiplier="2"] .sh-seg-btn { border-color: #6a1a1a; }
body[data-multiplier="2"] .sh-seg-btn:active { background: #4a0a0a; color: var(--double-color); }
body[data-multiplier="3"] .sh-seg-btn { border-color: #1a5a2a; }
body[data-multiplier="3"] .sh-seg-btn:active { background: #0a3a1a; color: var(--treble-color); }

/* Target number highlighted */
.sh-seg-btn.sh-seg-target {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
    -webkit-box-shadow: 0 0 0 1px var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* ── Bull + Miss row — same as 501 #bull-row ── */
.sh-bull-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap: var(--gap);
    flex-shrink: 0;
}

.sh-bull-btn, .sh-outer-btn {
    min-height: var(--btn-min);
    border-radius: var(--radius);
    border: 1px solid var(--bull-color);
    background: var(--bg-raised);
    color: var(--bull-color);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    -webkit-transition: background 0.08s ease, -webkit-transform 0.08s ease;
    transition: background 0.08s ease, transform 0.08s ease;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
}

.sh-bull-btn.sh-seg-target,
.sh-outer-btn.sh-seg-target {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
    -webkit-box-shadow: 0 0 0 1px var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.sh-miss-btn {
    min-height: var(--btn-min);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    -webkit-transition: background 0.08s ease, -webkit-transform 0.08s ease;
    transition: background 0.08s ease, transform 0.08s ease;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Status bar ── */
.sh-status-bar {
    flex-shrink: 0;
    text-align: center;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* ── Result modal ── */
.sh-result-box {
    text-align: center;
}

.sh-result-icon {
    font-size: 3rem;
    margin-bottom: 8px;
}

.sh-result-scores {
    margin: 16px 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    gap: 6px;
}

.sh-result-score-row {
    display: -webkit-box;
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg-raised);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sh-result-score-row.sh-result-winner {
    background: var(--accent-glow);
    color: var(--accent);
    font-weight: 700;
    border: 1px solid var(--accent);
}

/* Practice summary modal — widen to fit heatmap+legend side by side */
.practice-summary-modal-box {
    max-width: 620px;
    width: 92vw;
}

.practice-heatmap-wrap {
    margin-top: 12px;
}

.practice-heatmap-loading {
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 12px 0;
}

/* =========================================================
   RULES BUTTON & MODAL
   ========================================================= */

/* Rules button — purple style matching AI analysis */
.rules-btn {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    padding: 0 12px;
    height: 32px;
    border-radius: var(--radius);
    border: 1px solid #4a3a6a;
    background: var(--bg-raised);
    color: #a78bfa;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -webkit-transition: border-color 0.15s, background 0.15s;
    transition: border-color 0.15s, background 0.15s;
}

.rules-btn:active {
    border-color: #a78bfa;
    background: rgba(167,139,250,0.12);
}

.setup-rules-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 44px;
    margin: 0 auto 10px;
    padding: 0 24px;
    background: transparent;
    border: 1px solid #4a3a6a;
    border-radius: var(--radius-lg);
    color: #a78bfa;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    cursor: pointer;
    -webkit-transition: border-color 0.15s, background 0.15s;
    transition: border-color 0.15s, background 0.15s;
    text-transform: uppercase;
}

.setup-rules-btn:active {
    border-color: #a78bfa;
    background: rgba(167,139,250,0.12);
}

/* Overlay — same base as other modals but purple tint */
.rules-overlay {
    background: rgba(10, 6, 20, 0.88);
}

/* Modal box */
.rules-box {
    max-width: 480px;
    width: 92vw;
    max-height: 82vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid #4a3a6a;
    background: #0f0a1a;
}

/* Title bar */
.rules-title {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: #a78bfa;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #2a1f3d;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

/* Scrollable body */
.rules-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
    flex: 1;
    -webkit-box-flex: 1;
}

/* Individual section */
.rules-section {
    margin-bottom: 20px;
}

.rules-section:last-child {
    margin-bottom: 0;
}

.rules-heading {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    color: #a78bfa;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.rules-text {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

/* Close button */
.rules-close-btn {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    padding: 14px;
    border: none;
    border-top: 1px solid #2a1f3d;
    background: rgba(167,139,250,0.08);
    color: #a78bfa;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -webkit-transition: background 0.15s;
    transition: background 0.15s;
}

.rules-close-btn:active {
    background: rgba(167,139,250,0.18);
}

/* =========================================================
   HOME SCREEN
   ========================================================= */

.home-screen-inner {
    justify-content: center;
    gap: var(--gap-lg);
}

.home-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 560px;
}

/* Practice tile — centred alone on the bottom row */
.home-tile-centred {
    grid-column: 2;
}

.home-tile {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    min-height: 80px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    -webkit-transition: border-color 0.15s, background 0.15s;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}

.home-tile:active {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.home-tile-icon {
    font-size: 2rem;
    line-height: 1;
}

.home-tile-label {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

.home-tile-sub {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
}

.home-stats-btn {
    max-width: 480px;
    width: 100%;
}

/* ── Match setup back button ── */
.setup-title-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 4px;
}

.setup-back-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1.2rem;
    padding: 6px 14px;
    cursor: pointer;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    line-height: 1;
    -webkit-transition: border-color 0.15s, color 0.15s;
    transition: border-color 0.15s, color 0.15s;
}

.setup-back-btn:active {
    border-color: var(--accent);
    color: var(--accent);
}

.setup-back-link {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 10px 20px;
    cursor: pointer;
    width: auto;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: border-color 0.15s, color 0.15s;
    transition: border-color 0.15s, color 0.15s;
}
.setup-back-link:active {
    border-color: var(--accent);
    color: var(--accent);
}

.setup-title-row #setup-title {
    text-align: left;
}

/* =========================================================
   STATS TWO-COLUMN LAYOUT
   ========================================================= */

/* ── Full-width stats banner ── */
.stats-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px 10px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.stats-banner-col {
    min-width: 0;
}

/* Tighter rows inside the banner */
.stats-banner-col .stat-card-title {
    padding: 4px 10px;
    font-size: 0.58rem;
}

.stats-banner-col .stat-row {
    padding: 3px 10px;
}

.stats-banner-col .stat-label {
    font-size: 0.65rem;
}

.stats-banner-col .stat-value {
    font-size: 0.78rem;
}

/* ── Two-column scrollable section (history | heatmap+graph) ── */
.stats-two-col {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.stats-col {
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.stats-col-left {
    border-right: 1px solid var(--border);
}

.stats-col-right {
}

/* kept for any legacy references */
.condensed-stats-card { padding: 0; }
.condensed-stats-scroll { overflow: visible; }

.condensed-group-title {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    color: var(--accent);
    background: var(--bg-surface);
    padding: 6px 12px 5px;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
.condensed-stats-card .condensed-group-title:first-child {
    border-top: none;
}

.condensed-stats-card .stat-row {
    padding: 5px 12px;
}

.condensed-stats-card .stat-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.condensed-stats-card .stat-value {
    font-size: 0.78rem;
}

.stat-row-highlight .stat-value {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
}

/* history/trend cards inside left column — no extra margin */
.stats-col-left .history-card,
.stats-col-left .trend-card {
    margin: 0;
}

/* iOS 12 flex gap polyfill for stats columns */
.stats-col > * + * {
    margin-top: 12px;
}


/* =========================================================
   STATS — HEATMAP CARD
   ========================================================= */

.heatmap-card {
    padding: 0;
    overflow: hidden;
}

.heatmap-wrap {
    padding: 4px 8px 8px;
}

.heatmap-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px;
    -webkit-box-align: center;
    align-items: center;
}

/* Left: legend — centred in its half */
.heatmap-legend {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    width: 100%;
}

/* Right: SVG board — centred in its half */
.heatmap-svg-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
}

.heatmap-svg-wrap svg {
    display: block;
    width: 300px;
    height: 300px;
    max-width: 100%;
}

/* Legend items */
.heatmap-legend-item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.heatmap-legend-text {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.heatmap-legend-text strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

/* Gradient bar */
.heatmap-gradient-bar-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}

.heatmap-gradient-bar {
    -webkit-box-flex: 1;
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right,
        #0d0d0d 0%,
        #4a1060 25%,
        #c0392b 50%,
        #c8a068 75%,
        #2ecc71 100%
    );
    border: 1px solid rgba(255,255,255,0.1);
}

.heatmap-gradient-lbl {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.heatmap-legend-title {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.heatmap-legend-item {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.heatmap-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}