:root {
    color-scheme: dark;
    --bg: #07100d;
    --panel: #101916;
    --panel-strong: #16231e;
    --line: rgba(255, 255, 255, .11);
    --text: #eef7f0;
    --muted: #91a59b;
    --green: #18a866;
    --red: #d9433e;
    --gold: #f0c66f;
    --ink: #050806;
    --play-gap: clamp(6px, 1.2vmin, 14px);
    --play-button-min: clamp(48px, 10vmin, 86px);
}

/* Modern clean theme layer, aligned with the current Dart.Jan.Software design reference. */
:root {
    color-scheme: light;
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --panel: var(--surface);
    --panel-2: var(--surface-2);
    --panel-strong: #eef4ff;
    --text: #17191d;
    --muted: #747b86;
    --line: #e2e5e9;
    --accent: #2563eb;
    --accent-soft: #eef4ff;
    --green: #2563eb;
    --success: #1f9d61;
    --red: #c93d3d;
    --gold: #b8821b;
    --ink: #ffffff;
    --shadow: 0 8px 24px rgba(20, 24, 31, .06);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111315;
    --surface: #181b1f;
    --surface-2: #20242a;
    --panel: var(--surface);
    --panel-2: var(--surface-2);
    --panel-strong: #1b2029;
    --text: #f2f4f7;
    --muted: #9aa3ad;
    --line: #2c3138;
    --accent: #6f8cff;
    --accent-soft: #202a45;
    --green: #6f8cff;
    --success: #48c78e;
    --red: #ff7878;
    --gold: #e3b760;
    --ink: #17191d;
    --shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

body {
    background: var(--bg);
    color: var(--text);
}

.dart-app {
    width: min(1180px, 100%);
    padding: 18px 20px 40px;
}

.dart-topbar,
.setup-panel,
.game-panel,
.cricket-table,
.stats-strip,
.history-panel,
.chat-panel,
.throw-panel,
.board-panel,
.match-summary {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dart-topbar {
    min-height: 64px;
    border-radius: 12px;
    padding: 0 18px;
    backdrop-filter: none;
}

.brand-mark {
    color: var(--text);
    text-decoration: none;
}

.brand-dot {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--text);
}

html[data-theme="dark"] .brand-dot {
    background: var(--text);
}

.version-badge,
.connection-pill {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--muted);
}

.connection-pill.online {
    border-color: color-mix(in srgb, var(--success) 45%, var(--line));
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--success);
}

.connection-pill.offline {
    border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
    background: color-mix(in srgb, var(--gold) 11%, var(--surface));
    color: var(--gold);
}

.top-actions a,
.top-actions button,
.theme-toggle,
.topbar-back-button,
.compact-button,
.ghost-button,
.icon-button,
.lobby-toggle button,
.setup-mode-picker button,
.selected-mode-strip,
.participant-option,
.selected-participant,
.roster-row,
.bot-profile,
.config-field,
.segmented-field.config-field,
.config-toggle-card,
.setup-section,
.offline-box,
.lobby-control,
.online-accordion,
.online-summary,
.online-content,
.online-lobby-settings,
.play-score-tile,
.play-throw-tile,
.target-callout,
.history-row,
.chat-log,
.score-card,
.summary-comparison,
.stat-metrics article {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
}

.theme-toggle:hover,
.top-actions a:hover,
.top-actions button:hover,
.online-summary:hover {
    background: var(--surface-2);
}

.mode-start {
    gap: 24px;
}

.mode-start-head {
    align-items: flex-end;
}

.mode-start-head h1,
h1 {
    font-size: clamp(1.8rem, 3.1vw, 2rem);
    letter-spacing: 0;
}

.eyebrow,
.start-section-label {
    color: var(--muted);
    letter-spacing: .12em;
}

.mode-tile-grid {
    gap: 10px;
}

.mode-tile {
    min-height: 94px;
    grid-template-columns: 46px 1fr auto;
    align-content: center;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-color: var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.mode-tile::after {
    content: "›";
    color: var(--muted);
    font-size: 18px;
}

.mode-tile:hover {
    border-color: color-mix(in srgb, var(--muted) 35%, var(--line));
    background: var(--surface-2);
    transform: translateY(-1px);
}

.mode-tile span,
.selected-mode-strip span,
.setup-mode-picker span {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: color-mix(in srgb, var(--text) 70%, var(--muted));
    font-size: .76rem;
}

.mode-tile strong {
    font-size: 1.1rem;
    letter-spacing: 0;
    line-height: 1.1;
}

.mode-tile.active {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
    box-shadow: inset 3px 0 0 var(--accent);
}

.mode-tile.active span,
.setup-mode-picker button.active span {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: var(--accent-soft);
    color: var(--accent);
}

.primary-button,
.segmented-control button.active,
.lobby-toggle button.active,
.lobby-toggle button.join-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
    box-shadow: none;
}

input,
select,
textarea,
.segmented-control,
.switch-track,
.shanghai-target-strip {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

label,
.range-field-head span,
.segmented-field,
.config-toggle-card strong,
.selected-mode-strip strong {
    color: var(--text);
}

.online-accordion {
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
}

.online-accordion > summary {
    list-style: none;
}

.online-accordion > summary::-webkit-details-marker {
    display: none;
}

.online-summary {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
}

.online-summary span:first-child {
    display: grid;
    gap: 2px;
}

.online-summary strong {
    font-size: .92rem;
}

.online-summary small {
    color: var(--muted);
}

.online-chevron {
    color: var(--muted);
    transition: transform .18s ease;
}

.online-accordion[open] .online-chevron {
    transform: rotate(180deg);
}

.online-content {
    display: grid;
    gap: 10px;
    padding: 0 10px 10px;
}

.lobby-toggle {
    background: var(--surface-2);
    border-color: var(--line);
}

.lobby-join-row {
    grid-template-columns: minmax(170px, 1.1fr) minmax(160px, 1fr) minmax(150px, auto);
}

.setup-panel,
.game-panel {
    border-radius: 14px;
}

.throw-panel,
.board-panel,
.score-card,
.setup-section {
    border-radius: 12px;
}

.compact-dart-pad button,
.cricket-pad button,
.shanghai-throw-pad button,
.dart-board-sector {
    border-color: var(--line);
}

@media (max-width: 620px) {
    .dart-app {
        padding: 10px;
    }

    .dart-topbar {
        padding: 10px 12px;
        align-items: flex-start;
    }

    .mode-tile {
        grid-template-columns: 40px 1fr auto;
    }

    .mode-tile span {
        width: 40px;
        height: 40px;
    }

    .lobby-join-row {
        grid-template-columns: 1fr;
    }
}

/* Final guard: keep the reference play layout after older device-specific scoring overrides. */
.dart-app:has(.playing-grid) .playing-grid .game-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: auto !important;
}

.dart-app:has(.playing-grid) .playing-grid .game-panel > .match-header {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.45fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-heading,
.dart-app:has(.playing-grid) .playing-grid .play-score-tile,
.dart-app:has(.playing-grid) .playing-grid .play-throw-tile {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-score-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    grid-template-rows: auto !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-score-row {
    min-height: 114px !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-surface:not(.cricket-play-surface) {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: visible !important;
}

.dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(88px, 1fr) !important;
    gap: 10px !important;
    height: auto !important;
}

.dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
.dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
    grid-column: span 2 !important;
}

@media (max-width: 860px) {
    .dart-app:has(.playing-grid) .playing-grid .game-panel > .match-header {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 620px) {
    .dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(62px, 1fr) !important;
    }

    .dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button {
        grid-column: span 2 !important;
    }

    .dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 3 !important;
    }
}

/* Final guard: keep the reference play layout after older device-specific scoring overrides. */
.dart-app:has(.playing-grid) .playing-grid .game-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: auto !important;
}

.dart-app:has(.playing-grid) .playing-grid .game-panel > .match-header {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.45fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-heading,
.dart-app:has(.playing-grid) .playing-grid .play-score-tile,
.dart-app:has(.playing-grid) .playing-grid .play-throw-tile {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-score-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    grid-template-rows: auto !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-score-row {
    min-height: 114px !important;
}

.dart-app:has(.playing-grid) .playing-grid .play-surface:not(.cricket-play-surface) {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: visible !important;
}

.dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(88px, 1fr) !important;
    gap: 10px !important;
    height: auto !important;
}

.dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
.dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
    grid-column: span 2 !important;
}

@media (max-width: 860px) {
    .dart-app:has(.playing-grid) .playing-grid .game-panel > .match-header {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 620px) {
    .dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(62px, 1fr) !important;
    }

    .dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button {
        grid-column: span 2 !important;
    }

    .dart-app:has(.playing-grid) .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 3 !important;
    }
}

/* Reference play layout: scorecards, current throw, history, pad, actions. */
.dart-app:has(.playing-grid) {
    --play-page-bg: #07101a;
    --play-card-bg: rgba(18, 27, 38, .88);
    --play-card-bg-strong: rgba(20, 31, 44, .94);
    --play-card-border: rgba(135, 160, 190, .18);
    --play-cyan: #49f1cf;
    --play-purple: #d568ff;
    --play-yellow: #ffd85f;
    --play-text: #f4f7fb;
    --play-muted: #98a7bb;
    background:
        radial-gradient(circle at 18% 0%, rgba(73, 241, 207, .12), transparent 31%),
        radial-gradient(circle at 85% 8%, rgba(122, 95, 255, .15), transparent 30%),
        var(--play-page-bg);
}

.dart-app:has(.playing-grid) .game-panel {
    border-color: var(--play-card-border);
    background: linear-gradient(180deg, rgba(11, 18, 28, .96), rgba(8, 13, 20, .98));
    color: var(--play-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 44px rgba(0, 0, 0, .34);
}

.dart-app:has(.playing-grid) .match-header {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.45fr);
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
    border: 0;
}

.dart-app:has(.playing-grid) .play-heading,
.dart-app:has(.playing-grid) .play-score-tile,
.dart-app:has(.playing-grid) .play-throw-tile,
.dart-app:has(.playing-grid) .play-history-panel,
.dart-app:has(.playing-grid) .play-action-bar,
.dart-app:has(.playing-grid) .jaeger-role-card,
.dart-app:has(.playing-grid) .jaeger-phase-card {
    border: 1px solid var(--play-card-border);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--play-card-bg), rgba(14, 22, 33, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.dart-app:has(.playing-grid) .play-heading {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 154px;
    padding: 20px 20px 20px 92px;
}

.dart-app:has(.playing-grid) .play-heading::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 22px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid rgba(244, 247, 251, .85);
    background:
        radial-gradient(circle, #f4f7fb 0 4px, transparent 5px),
        conic-gradient(from 0deg, #49f1cf 0 10deg, #111923 10deg 20deg, #f4f7fb 20deg 30deg, #111923 30deg 40deg, #49f1cf 40deg 50deg, #111923 50deg 60deg, #f4f7fb 60deg 70deg, #111923 70deg 80deg, #49f1cf 80deg 90deg, #111923 90deg 100deg, #f4f7fb 100deg 110deg, #111923 110deg 120deg, #49f1cf 120deg 130deg, #111923 130deg 140deg, #f4f7fb 140deg 150deg, #111923 150deg 160deg, #49f1cf 160deg 170deg, #111923 170deg 180deg, #f4f7fb 180deg 190deg, #111923 190deg 200deg, #49f1cf 200deg 210deg, #111923 210deg 220deg, #f4f7fb 220deg 230deg, #111923 230deg 240deg, #49f1cf 240deg 250deg, #111923 250deg 260deg, #f4f7fb 260deg 270deg, #111923 270deg 280deg, #49f1cf 280deg 290deg, #111923 290deg 300deg, #f4f7fb 300deg 310deg, #111923 310deg 320deg, #49f1cf 320deg 330deg, #111923 330deg 340deg, #f4f7fb 340deg 350deg, #111923 350deg 360deg);
}

.dart-app:has(.playing-grid) .play-heading .eyebrow,
.dart-app:has(.playing-grid) .play-score-tile .eyebrow,
.dart-app:has(.playing-grid) .play-throw-head .eyebrow {
    color: var(--play-muted);
    font-size: .78rem;
    letter-spacing: .11em;
}

.dart-app:has(.playing-grid) .play-heading h2 {
    margin: 4px 0 8px;
    color: var(--play-text);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: .98;
}

.dart-app:has(.playing-grid) .game-clock {
    color: var(--play-muted);
    font-weight: 700;
}

.dart-app:has(.playing-grid) .play-score-tile {
    padding: 18px;
}

.dart-app:has(.playing-grid) .play-score-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.dart-app:has(.playing-grid) .play-score-row {
    position: relative;
    min-height: 114px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 14px 18px 36px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--player-color) 46%, var(--play-card-border));
    border-left-width: 1px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--player-color) 16%, rgba(14, 20, 32, .9));
}

.dart-app:has(.playing-grid) .play-score-row.active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-color) 70%, transparent), inset 0 0 42px color-mix(in srgb, var(--player-color) 14%, transparent);
}

.dart-app:has(.playing-grid) .play-score-row span {
    color: var(--play-text);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    font-weight: 800;
}

.dart-app:has(.playing-grid) .play-score-row strong {
    color: var(--player-color);
    font-size: clamp(3rem, 7vw, 5.3rem);
    font-weight: 950;
    line-height: .88;
}

.dart-app:has(.playing-grid) .play-score-row i {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
}

.dart-app:has(.playing-grid) .play-score-row i::before {
    content: "";
    display: block;
    width: var(--score-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--player-color);
}

.dart-app:has(.playing-grid) .play-throw-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .48fr);
    padding: 20px 24px;
}

.dart-app:has(.playing-grid) .play-throw-head strong {
    color: var(--play-yellow);
    font-size: clamp(2.6rem, 5vw, 4.3rem);
}

.dart-app:has(.playing-grid) .play-throw-review {
    padding-left: 24px;
    border-left: 1px solid var(--play-card-border);
}

.dart-app:has(.playing-grid) .play-throw-review strong {
    color: var(--play-yellow);
    font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.dart-app:has(.playing-grid) .play-history-panel {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 14px 16px;
}

.dart-app:has(.playing-grid) .play-history-title,
.dart-app:has(.playing-grid) .play-history-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
}

.dart-app:has(.playing-grid) .play-history-title {
    grid-template-columns: auto auto minmax(0, 1fr);
    color: var(--play-muted);
}

.dart-app:has(.playing-grid) .play-history-row {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(135, 160, 190, .14);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
}

.dart-app:has(.playing-grid) .play-history-row span,
.dart-app:has(.playing-grid) .play-history-row em,
.dart-app:has(.playing-grid) .play-history-title small {
    color: var(--play-muted);
    font-style: normal;
}

.dart-app:has(.playing-grid) .play-history-row strong {
    color: var(--play-purple);
}

.dart-app:has(.playing-grid) .play-history-row b {
    color: var(--play-text);
}

.dart-app:has(.playing-grid) .jaeger-role-panel {
    display: none;
}

.dart-app:has(.playing-grid) .play-surface {
    margin-top: 12px;
}

.dart-app:has(.playing-grid) .compact-dart-pad {
    gap: 10px;
}

.dart-app:has(.playing-grid) .compact-dart-pad button {
    border: 1px solid rgba(135, 160, 190, .18);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(30, 42, 54, .96), rgba(22, 32, 42, .98));
    color: var(--play-text);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
}

.dart-app:has(.playing-grid) .compact-dart-pad .compact-bull-button {
    border-color: rgba(73, 241, 207, .68);
    background: linear-gradient(180deg, rgba(22, 118, 76, .95), rgba(16, 94, 67, .95));
}

.dart-app:has(.playing-grid) .compact-dart-pad .compact-miss-button {
    border-color: rgba(45, 212, 191, .76);
    background: linear-gradient(180deg, rgba(9, 91, 98, .78), rgba(13, 64, 74, .92));
}

.dart-app:has(.playing-grid) .compact-bull-button::after {
    content: "(25 Punkte)";
    display: block;
    color: rgba(244, 247, 251, .64);
    font-size: clamp(.72rem, 1.8vw, 1.05rem);
    font-weight: 500;
}

.dart-app:has(.playing-grid) .compact-miss-button:not(.compact-continue-button)::after {
    content: "(0 Punkte)";
    display: block;
    color: rgba(244, 247, 251, .64);
    font-size: clamp(.72rem, 1.8vw, 1.05rem);
    font-weight: 500;
}

.dart-app:has(.playing-grid) .play-action-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
}

.dart-app:has(.playing-grid) .play-action-button {
    min-width: 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--play-muted);
    text-align: left;
}

.dart-app:has(.playing-grid) .play-action-button span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(148, 163, 184, .12);
    color: var(--play-text);
    font-size: 1.3rem;
}

.dart-app:has(.playing-grid) .play-action-button strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .dart-app:has(.playing-grid) .match-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .dart-app:has(.playing-grid) .play-heading {
        min-height: 118px;
    }
}

@media (max-width: 620px) {
    .dart-app:has(.playing-grid) .play-heading {
        padding: 16px 16px 16px 76px;
    }

    .dart-app:has(.playing-grid) .play-heading::before {
        left: 16px;
        top: 18px;
        width: 44px;
        height: 44px;
    }

    .dart-app:has(.playing-grid) .play-score-list {
        grid-template-columns: 1fr;
    }

    .dart-app:has(.playing-grid) .play-throw-tile,
    .dart-app:has(.playing-grid) .play-action-bar {
        grid-template-columns: 1fr;
    }

    .dart-app:has(.playing-grid) .play-throw-review {
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--play-card-border);
    }

    .dart-app:has(.playing-grid) .play-history-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .dart-app:has(.playing-grid) .play-history-row em {
        grid-column: 2 / -1;
    }
}

* { box-sizing: border-box; }

html,
body,
#app {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
}

html,
body,
#app {
    min-height: 100%;
    margin: 0;
}

body {
    background: linear-gradient(140deg, #050806, var(--bg) 46%, #12140f);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select { font: inherit; }

button {
    cursor: pointer;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}
button:disabled { cursor: not-allowed; opacity: .55; }

.dart-app {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: 14px 14px max(14px, env(safe-area-inset-bottom));
    overflow-x: hidden;
}

.playing-grid {
    --play-panel-offset: calc(28px + env(safe-area-inset-bottom));
}

.dart-topbar,
.setup-panel,
.game-panel,
.cricket-table {
    border: 1px solid var(--line);
    background: rgba(12, 20, 17, .9);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.dart-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(16px);
}

.topbar-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-back-button {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    color: var(--text);
    font-size: .86rem;
    font-weight: 800;
    white-space: nowrap;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.version-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(238, 247, 240, .18);
    border-radius: 999px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand-block {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.top-actions a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    color: var(--text);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
}

.brand-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: conic-gradient(from 45deg, var(--green), var(--red), #f7f7ee, var(--green));
}

.install-note,
.eyebrow,
.muted,
.score-name span,
.mini-stats,
small,
.turn-facts,
.dart-row span { color: var(--muted); }

.install-note {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connection-pill {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
}

.connection-pill.online {
    border-color: rgba(24, 168, 102, .55);
    background: rgba(24, 168, 102, .16);
    color: #a7f3d0;
}

.connection-pill.offline {
    border-color: rgba(240, 198, 111, .5);
    background: rgba(240, 198, 111, .13);
    color: #fde68a;
}

.eyebrow {
    margin: 0 0 8px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
    margin-bottom: 12px;
    font-size: 2rem;
    line-height: 1.05;
}

h2 { margin-bottom: 8px; font-size: 1.45rem; }
h3 { margin-bottom: 10px; font-size: 1rem; }

.app-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.start-grid {
    max-width: 980px;
    margin-inline: auto;
    grid-template-columns: 1fr;
}

.playing-grid {
    grid-template-columns: 1fr;
}

.setup-panel,
.game-panel {
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
    position: relative;
}

.start-grid .game-panel {
    order: 1;
}

.start-grid .setup-panel {
    order: 2;
}

.mode-start {
    display: grid;
    gap: 14px;
}

.mode-start-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.mode-start-head h1 {
    margin-bottom: 0;
}

.mode-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mode-tile {
    position: relative;
    min-height: 148px;
    display: grid;
    align-content: space-between;
    justify-items: start;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: #0d1713;
    color: var(--text);
    text-align: left;
    box-shadow: inset 0 0 0 1px transparent;
}

.mode-tile span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(24, 168, 102, .14);
    color: var(--green);
    font-size: .86rem;
    font-weight: 900;
}

.mode-tile strong {
    font-size: clamp(1.65rem, 4vw, 3rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.mode-tile.active {
    border-color: var(--green);
    background: #12241d;
    box-shadow: inset 0 0 0 1px rgba(24, 168, 102, .5);
}

.start-section-label {
    margin: 0;
    color: #ffffff;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.offline-section-label {
    margin-top: 4px;
}

.lobby-control {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(13, 23, 19, .86);
}

.lobby-toggle {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0a120f;
}

.lobby-toggle button {
    min-width: 0;
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
}

.lobby-toggle button.active {
    background: var(--text);
    color: var(--ink);
}

.lobby-toggle button.join-active {
    background: var(--green);
    color: #f8fff9;
}

.lobby-join-row {
    display: grid;
    gap: 8px;
    align-items: end;
}

.lobby-join-row {
    grid-template-columns: minmax(170px, 1.1fr) minmax(160px, 1fr) minmax(150px, auto);
}

.lobby-join-label {
    min-height: 44px;
    border: 1px solid var(--green);
    border-radius: 8px;
    background: rgba(24, 168, 102, .16);
    color: #d7e5dd;
    font-weight: 900;
}

.form-error {
    margin: 0;
    color: #ff9b9b;
    font-size: .92rem;
    font-weight: 750;
}

.online-lobby-settings {
    border-color: rgba(24, 168, 102, .34);
    background: rgba(10, 18, 15, .78);
}

.setup-heading-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.setup-heading-row h1 {
    margin-bottom: 0;
}

.selected-mode-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0d1713;
}

.selected-mode-button {
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.selected-mode-button:hover,
.selected-mode-button:focus-visible {
    border-color: var(--green);
    outline: none;
}

.selected-mode-strip span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(24, 168, 102, .14);
    color: var(--green);
    font-size: .8rem;
    font-weight: 900;
}

.selected-mode-strip strong {
    min-width: 0;
    color: #d7e5dd;
    font-size: .92rem;
    overflow-wrap: anywhere;
}

.setup-mode-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.setup-mode-picker button {
    min-width: 0;
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0d1713;
    color: var(--text);
    text-align: left;
}

.setup-mode-picker button.active {
    border-color: var(--green);
    background: #12241d;
}

.setup-mode-picker span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(24, 168, 102, .14);
    color: var(--green);
    font-size: .76rem;
    font-weight: 900;
}

.setup-mode-picker strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-row,
.button-row,
.match-actions {
    display: flex;
    gap: 10px;
}

label {
    display: grid;
    gap: 7px;
    color: #c8d9cf;
    font-size: .9rem;
}

.config-field,
.segmented-field.config-field,
.config-toggle-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(238, 247, 240, .12);
    border-radius: 8px;
    background: rgba(5, 12, 9, .72);
    color: #e5f2e9;
    font-weight: 850;
}

input,
select {
    min-height: 44px;
    width: 100%;
    border: 1px solid rgba(238, 247, 240, .16);
    border-radius: 8px;
    background: #07100c;
    color: var(--text);
    padding: 0 12px;
}

.toggle-row,
.icon-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-toggle { align-self: end; min-height: 44px; }
.config-toggle-card {
    min-height: 100%;
    justify-content: space-between;
    align-self: stretch;
}

.config-toggle-card strong {
    color: var(--text);
}

.toggle-row input,
.icon-toggle input { width: auto; min-height: 0; }

.setup-section {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(238, 247, 240, .14);
    border-radius: 8px;
    background: rgba(13, 23, 19, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.match-settings {
    grid-template-columns: minmax(120px, .64fr) repeat(2, minmax(170px, 1fr));
    align-items: stretch;
}

.mode-rule-section {
    grid-template-columns: 1fr;
}

.range-config-field {
    display: grid;
    gap: 10px;
}

.range-field-head,
.shanghai-target-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.range-field-head span {
    color: #c8d9cf;
}

.range-field-head strong {
    color: var(--text);
}

.range-config-field input[type="range"] {
    min-height: 34px;
    padding: 0;
    accent-color: var(--green);
}

.shanghai-target-strip {
    min-height: 34px;
    padding: 4px;
    border: 1px solid rgba(238, 247, 240, .12);
    border-radius: 8px;
    background: #07100c;
}

.shanghai-target-strip span,
.shanghai-target-strip strong {
    min-width: 34px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.shanghai-target-strip strong {
    background: rgba(24, 168, 102, .2);
    color: #f8fff9;
}

.compact-settings {
    display: grid;
    grid-template-columns: minmax(100px, .8fr) minmax(100px, .8fr) minmax(150px, 1fr);
    align-items: end;
    gap: 10px;
}

.segmented-field {
    display: grid;
    gap: 7px;
    color: #c8d9cf;
    font-size: .9rem;
}

.segmented-control {
    min-height: 44px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(238, 247, 240, .16);
    border-radius: 8px;
    background: #07100c;
}

.segmented-control button {
    min-width: 0;
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
}

.segmented-control button.active {
    background: var(--green);
    color: #f8fff9;
    box-shadow: 0 0 0 1px rgba(248, 255, 249, .08), 0 8px 18px rgba(24, 168, 102, .2);
}

.switch-field {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c8d9cf;
}

.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-track {
    position: relative;
    width: 52px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid rgba(238, 247, 240, .16);
    border-radius: 999px;
    background: #07100c;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .14s ease, background .14s ease;
}

.switch-field input:checked + .switch-track {
    border-color: rgba(24, 168, 102, .55);
    background: rgba(24, 168, 102, .2);
}

.switch-field input:checked + .switch-track::after {
    transform: translateX(22px);
    background: var(--green);
}

.section-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.section-title .eyebrow {
    margin: 0;
}

.section-title span,
.bot-profile span,
.participant-option small,
.selected-participant span {
    color: var(--muted);
    font-size: .82rem;
}

.setup-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0a120f;
}

.setup-tabs button {
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
}

.setup-tabs button.active {
    background: var(--green);
    color: #f8fff9;
}

.secondary-tabs {
    margin-top: 10px;
}

.input-mode-section {
    display: grid;
    gap: 8px;
}

.setup-input-switch {
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0a120f;
}

.join-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
}

.roster-list,
.bot-profile-grid,
.dual-list-column {
    display: grid;
    gap: 8px;
}

.roster-tab {
    display: grid;
    gap: 10px;
}

.roster-tab-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #d7e5dd;
    font-size: .9rem;
}

.roster-note {
    margin: 2px 0 0;
    font-size: .86rem;
}

.roster-row,
.add-player-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 8px;
    align-items: center;
}

.add-player-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bot-profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bot-profile,
.participant-option,
.selected-participant {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0a120f;
}

.bot-profile {
    display: grid;
    gap: 4px;
    padding: 10px;
}

.dual-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: start;
}

.dual-list-column > strong {
    color: #d7e5dd;
    font-size: .9rem;
}

.participant-option {
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 9px 10px;
    color: var(--text);
    text-align: left;
}

.participant-option.selected {
    border-color: rgba(24, 168, 102, .44);
    background: rgba(24, 168, 102, .1);
}

.selected-participant {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 44px;
    gap: 8px;
    align-items: center;
    padding: 8px;
}

.selected-participant.without-team {
    grid-template-columns: minmax(0, 1fr) 44px;
}

.selected-participant-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-participant-main > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.selected-participant strong,
.participant-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.player-list {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.player-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 78px 64px 88px;
    gap: 8px;
    align-items: center;
}

.player-color-input {
    min-height: 44px;
    padding: 4px;
}

.primary-button,
.ghost-button,
.compact-button,
.miss-button,
.menu-action-button {
    min-height: 44px;
    border-radius: 8px;
    padding: 0 16px;
    color: var(--text);
    font-weight: 800;
}

.primary-button {
    width: 100%;
    border: 0;
    background: linear-gradient(135deg, var(--green), #0f7e4b);
}

.ghost-button,
.compact-button,
.miss-button,
.menu-action-button {
    border: 1px solid var(--line);
    background: #0d1713;
}

.topbar-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.compact-button {
    min-width: 44px;
    min-height: 38px;
    padding: 0 12px;
}

.menu-trigger {
    font-size: 1.35rem;
    line-height: 1;
}

.match-menu-trigger {
    flex: 0 0 auto;
    justify-self: end;
}

.match-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.undo-trigger {
    font-size: 1.25rem;
    line-height: 1;
}

.side-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    height: 100dvh;
    overflow: hidden;
    background: rgba(2, 6, 4, .58);
    backdrop-filter: blur(3px);
}

.side-menu {
    width: min(360px, calc(100vw - 34px));
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid var(--line);
    background: rgba(12, 20, 17, .98);
    box-shadow: -24px 0 70px rgba(0, 0, 0, .42);
    animation: slide-menu-in .18s ease-out;
}

.side-menu-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.side-menu-head h2 {
    margin: 0;
}

.side-menu-actions {
    display: grid;
    gap: 10px;
}

.menu-input-switch {
    justify-content: space-between;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.menu-input-switch-text {
    min-width: 0;
    display: grid;
    gap: 2px;
    flex: 1;
}

.menu-input-switch-text strong,
.menu-input-switch-text small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-input-switch-text small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.menu-action-button {
    width: 100%;
    text-align: left;
}

.danger-menu-button {
    min-height: 48px;
    width: 100%;
    border: 1px solid rgba(217, 67, 62, .55);
    border-radius: 8px;
    background: rgba(217, 67, 62, .14);
    color: #ffd8d5;
    padding: 0 16px;
    font-weight: 900;
    text-align: left;
}

.danger-menu-button:hover:not(:disabled) {
    border-color: rgba(217, 67, 62, .8);
    background: rgba(217, 67, 62, .22);
}

@keyframes slide-menu-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.offline-box,
.checkout-box,
.bot-status,
.turn-review {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(240, 198, 111, .24);
    border-radius: 8px;
    background: rgba(240, 198, 111, .08);
}

.bot-status {
    display: grid;
    gap: 4px;
}

.bot-status span {
    color: var(--muted);
    font-size: .9rem;
}

.empty-state {
    min-height: 520px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.match-header {
    display: grid;
    grid-template-columns: minmax(160px, .82fr) minmax(220px, 1fr) minmax(220px, .9fr) auto;
    gap: var(--play-gap);
    align-items: stretch;
    margin-bottom: var(--play-gap);
}

.match-header:has(.play-target-tile):has(.match-header-actions .compact-button) {
    grid-template-columns: minmax(160px, .78fr) minmax(180px, .82fr) minmax(220px, .9fr) minmax(220px, .86fr) auto;
}

.match-header > div {
    min-width: 0;
}

.play-heading {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
}

.play-clock {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.play-target-tile,
.play-score-tile,
.play-throw-tile {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.play-target-tile {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 10px 8px;
    text-align: center;
}

.play-target-tile strong {
    color: var(--gold);
    font-size: 2.2rem;
    font-weight: 900;
    line-height: .9;
}

.play-score-tile {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.play-score-list {
    display: grid;
    gap: 5px;
}

.play-score-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-left: 3px solid var(--player-color, var(--green));
    border-radius: 6px;
    min-height: 28px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, .16);
}

.play-score-row.active {
    background: color-mix(in srgb, var(--player-color, var(--green)) 22%, rgba(0, 0, 0, .16));
}

.play-score-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: .82rem;
}

.play-score-row strong {
    color: var(--text);
    font-size: .98rem;
    line-height: 1;
}

.play-throw-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.play-throw-head {
    display: grid;
    gap: 3px;
}

.play-throw-head strong {
    color: var(--gold);
    font-size: 2.55rem;
    font-weight: 900;
    line-height: .9;
}

.play-throw-head span,
.play-last-turn,
.play-throw-review span {
    min-width: 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.play-throw-review {
    min-width: 0;
    display: grid;
    gap: 3px;
    min-height: 42px;
    align-content: center;
}

.play-throw-review span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.play-throw-review strong {
    color: var(--gold);
    font-size: 1.45rem;
    line-height: 1;
    white-space: nowrap;
}

.jaeger-role-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .95fr) minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.jaeger-role-card,
.jaeger-phase-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 12px;
}

.jaeger-role-card {
    display: grid;
    gap: 4px;
    border-left: 4px solid var(--muted);
}

.jaeger-role-card.active.collector {
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

.jaeger-role-card.active.hunter {
    border-left-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, var(--surface-2));
}

.jaeger-role-card span,
.jaeger-phase-card span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jaeger-role-card strong,
.jaeger-phase-card strong {
    min-width: 0;
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jaeger-role-card small,
.jaeger-phase-card small {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.25;
}

.jaeger-phase-card {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    text-align: center;
    background: var(--surface);
}

.jaeger-phase-card strong {
    color: var(--accent);
    font-size: 1.45rem;
}

@media (max-width: 720px) {
    .jaeger-role-panel {
        grid-template-columns: 1fr;
    }

    .jaeger-phase-card {
        order: -1;
    }
}

.score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 10px;
}

.match-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.match-summary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.match-summary-actions .primary-button,
.match-summary-actions .ghost-button {
    width: 100%;
    justify-content: center;
}

.score-card {
    min-height: 184px;
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel), #0a100d);
}

.score-card.active {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px rgba(24, 168, 102, .42), 0 0 20px rgba(24, 168, 102, .16);
}

.score-card.winner { border-color: var(--gold); }

.score-name {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.score-name strong,
.score-name span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.remaining {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: .9;
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    font-size: .78rem;
}

.mini-stats span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mini-stat {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
}

.mini-stat span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.mini-stat strong {
    min-width: 0;
    color: var(--text);
    font-size: .95rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.play-surface {
    display: grid;
    grid-template-columns: minmax(330px, 1.1fr) minmax(280px, .9fr);
    gap: var(--play-gap);
    align-items: stretch;
    margin-top: 0;
    min-height: 0;
}

.cricket-play-surface {
    grid-template-columns: 1fr;
}

.x01-play-surface {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.x01-board-column {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.current-rest {
    display: block;
    margin-top: 4px;
    color: var(--gold);
    font-size: 1.15rem;
    line-height: 1.1;
}

.x01-board-column .match-header {
    margin-bottom: 0;
}

.x01-header-turn-review {
    flex: 1 1 360px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 58px;
    margin: 0;
}

.x01-board-column .dart-board-wrap {
    width: min(100%, 68vh, 620px);
}

.x01-checkout-box {
    width: min(100%, 62vh, 560px);
    justify-self: center;
    margin-top: 0;
}

.x01-current-score {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel-strong), rgba(12, 20, 17, .96));
}

.x01-score-head {
    display: grid;
    gap: 5px;
}

.x01-score-head strong {
    display: block;
    color: var(--gold);
    font-size: 4rem;
    font-weight: 900;
    line-height: .9;
}

.x01-current-meta {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: .86rem;
}

.last-turn-snippet {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.last-turn-snippet strong {
    min-width: 0;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.last-turn-snippet span {
    min-width: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.x01-current-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.x01-turn-review {
    display: grid;
    gap: 10px;
    margin-top: 0;
    padding: 10px;
}

.x01-turn-review p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.3;
}

.x01-turn-review > strong {
    color: var(--gold);
    font-size: 2.4rem;
    line-height: .95;
}

.x01-finish-targets {
    width: min(100%, 68vh, 620px);
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.x01-finish-button {
    min-height: 42px;
    min-width: 62px;
    padding: 0 16px;
    border: 1px solid rgba(240, 198, 111, .72);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(240, 198, 111, .98), rgba(180, 126, 42, .96));
    color: #211706;
    font-weight: 950;
    font-size: 1rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px rgba(0, 0, 0, .2);
}

.target-callout {
    width: min(100%, 68vh, 620px);
    justify-self: center;
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line));
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(240, 198, 111, .16), transparent 66%),
        rgba(255, 255, 255, .035);
}

.target-callout strong {
    color: var(--gold);
    font-size: clamp(1.45rem, 4vw, 2.25rem);
    line-height: 1;
}

.target-callout span {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.3;
}

.x01-end-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.x01-end-actions .primary-button,
.x01-end-actions .ghost-button {
    width: 100%;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
}

.x01-player-scores {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.x01-player-score {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    border-left: 4px solid var(--player-color, var(--green));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--player-color, var(--green)) 18%, transparent), transparent 55%),
        rgba(255, 255, 255, .035);
}

.x01-player-score.active {
    border-color: color-mix(in srgb, var(--player-color, var(--green)) 72%, var(--line));
    border-left-color: var(--player-color, var(--green));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--player-color, var(--green)) 42%, transparent),
        0 10px 28px color-mix(in srgb, var(--player-color, var(--green)) 15%, transparent);
}

.x01-player-score span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.x01-player-score strong {
    color: var(--player-color, var(--gold));
    font-size: 1.9rem;
    line-height: 1;
}

.board-panel {
    display: grid;
    gap: var(--play-gap);
    align-items: stretch;
    justify-items: stretch;
    min-width: 0;
    min-height: 0;
}

.dart-board-wrap {
    width: min(100%, 74vh, 680px);
    display: grid;
    gap: var(--play-gap);
    position: relative;
}

.dart-board {
    width: 100%;
    aspect-ratio: 1;
    filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .48));
    touch-action: manipulation;
}

.board-catch { fill: #080908; stroke: #202620; stroke-width: 5; }
.board-field { stroke: #101010; stroke-width: .9; transition: filter .12s ease, opacity .12s ease; }
.board-field:hover,
.bull-outer:hover,
.bull-inner:hover { filter: brightness(1.35); }
.single-light { fill: #eee8d8; }
.single-dark { fill: #171717; }
.ring-green { fill: var(--green); }
.ring-red { fill: var(--red); }
.bull-outer { fill: var(--green); stroke: #0b0f0c; stroke-width: 1; }
.bull-inner { fill: var(--red); stroke: #0b0f0c; stroke-width: 1; }
.dart-board text {
    fill: #f8faf6;
    font-size: 10px;
    font-weight: 900;
    pointer-events: none;
}

.miss-button { width: 100%; }

.miss-continue-button {
    border-color: rgba(45, 212, 191, .58);
    background: linear-gradient(135deg, var(--green), #0f7e4b);
    color: #f7fffb;
}

.compact-dart-pad {
    display: none;
}

.input-mode-buttons .compact-dart-pad {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.input-mode-buttons .compact-dart-pad button {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 74px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    overflow: hidden;
    touch-action: manipulation;
}

.input-mode-buttons .compact-dart-pad button > span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
}

.input-mode-buttons .compact-dart-pad button:hover:not(:disabled),
.input-mode-buttons .compact-dart-pad button:focus-visible {
    border-color: rgba(45, 212, 191, .58);
    background: rgba(45, 212, 191, .16);
    outline: none;
}

.input-mode-buttons .compact-dart-pad .compact-bull-button {
    grid-column: span 2;
    background: rgba(24, 168, 102, .22);
}

.input-mode-buttons .compact-dart-pad .compact-miss-button {
    grid-column: span 3;
    background: rgba(217, 67, 62, .18);
}

.input-mode-buttons .compact-dart-pad .compact-continue-button {
    border-color: rgba(45, 212, 191, .62);
    background: linear-gradient(135deg, var(--green), #0f7e4b);
    color: #f7fffb;
}

.play-surface:has(.shanghai-throw-pad) {
    grid-template-columns: 1fr;
}

.board-panel:has(.shanghai-throw-pad) {
    justify-items: center;
}

.shanghai-throw-pad {
    width: min(100%, 760px);
    display: grid;
    gap: 12px;
}

.shanghai-target-hero {
    min-height: clamp(190px, 33vh, 300px);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 229, 142, .34);
    border-radius: 8px;
    background: radial-gradient(circle at 50% 28%, rgba(242, 184, 75, .18), rgba(255, 255, 255, .045) 46%, rgba(0, 0, 0, .16));
}

.shanghai-target-hero strong {
    color: var(--gold);
    font-size: clamp(7rem, 24vw, 13rem);
    font-weight: 950;
    line-height: .78;
}

.shanghai-segment-grid,
.shanghai-bull-grid {
    display: grid;
    gap: 8px;
}

.shanghai-segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.shanghai-segment-button,
.shanghai-miss-button {
    position: relative;
    min-width: 0;
    min-height: 86px;
    display: grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    color: var(--text);
    font-size: clamp(1.05rem, 3vw, 1.45rem);
    font-weight: 950;
    line-height: 1;
    overflow: hidden;
    touch-action: manipulation;
}

.shanghai-segment-button small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.shanghai-segment-button:hover:not(:disabled),
.shanghai-segment-button:focus-visible,
.shanghai-miss-button:hover:not(:disabled),
.shanghai-miss-button:focus-visible {
    border-color: rgba(45, 212, 191, .58);
    background: rgba(45, 212, 191, .16);
    outline: none;
}

.shanghai-segment-button:disabled,
.shanghai-miss-button:disabled {
    opacity: .52;
}

.shanghai-miss-button {
    width: 100%;
    background: rgba(217, 67, 62, .18);
}

.shanghai-continue-button {
    border-color: rgba(45, 212, 191, .62);
    background: linear-gradient(135deg, var(--green), #0f7e4b);
    color: #f7fffb;
}

.shanghai-celebration {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    pointer-events: none;
    overflow: hidden;
}

.shanghai-celebration strong {
    padding: 12px 18px;
    border: 1px solid rgba(255, 229, 142, .62);
    border-radius: 8px;
    background: rgba(10, 16, 13, .88);
    color: var(--gold);
    font-size: clamp(2.8rem, 12vw, 7rem);
    font-weight: 950;
    line-height: .9;
    text-transform: uppercase;
    animation: shanghai-title-pop 1.8s ease both;
}

.shanghai-celebration span {
    position: absolute;
    bottom: -24px;
    left: calc((var(--i) + 1) * 5.2%);
    width: 10px;
    height: 18px;
    border-radius: 2px;
    background: hsl(calc(var(--i) * 31deg), 82%, 58%);
    animation: shanghai-confetti-up 1.75s cubic-bezier(.18, .68, .25, 1) both;
    animation-delay: calc(var(--i) * 34ms);
}

@keyframes shanghai-confetti-up {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    100% {
        transform: translate3d(calc((var(--i) - 8) * 9px), -92vh, 0) rotate(620deg);
        opacity: 0;
    }
}

@keyframes shanghai-title-pop {
    0% {
        transform: scale(.86);
        opacity: 0;
    }

    18%, 72% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.06);
        opacity: 0;
    }
}

.hit-picker-backdrop {
    position: absolute;
    inset: 0 0 48px;
    z-index: 5;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(5, 8, 7, .56);
    backdrop-filter: blur(2px);
}

.hit-picker {
    width: min(88%, 280px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #111815;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .48);
}

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

.hit-picker-title {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.hit-picker button {
    min-height: 54px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 900;
}

.cricket-pad {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(78px, .75fr) repeat(6, minmax(66px, 1fr)) minmax(78px, .85fr);
    gap: var(--play-gap);
    align-items: stretch;
    overflow: hidden;
    padding-bottom: 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.cricket-pad.disabled .cricket-hit-button:not(.cricket-continue-button),
.cricket-continue-button:disabled {
    opacity: .62;
}

.cricket-player-tile,
.cricket-score-tile,
.cricket-hit-button {
    min-height: 124px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #202926;
    color: var(--text);
}

.cricket-player-tile {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 12px;
    text-align: center;
}

.player-avatar {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--player-color, #243026);
    color: #f4f7f1;
    font-size: .76rem;
    font-weight: 900;
}

.cricket-player-tile strong {
    display: block;
    font-size: 1.25rem;
}

.cricket-player-tile span,
.cricket-score-tile > span,
.cricket-score-row span {
    color: var(--muted);
    font-size: .82rem;
}

.cricket-score-tile {
    min-height: max(124px, calc(var(--player-count, 1) * 28px + 46px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 8px;
    padding: 12px;
}

.cricket-score-list {
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(var(--player-count), minmax(0, 1fr));
    gap: 4px;
}

.cricket-score-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    border-left: 3px solid var(--player-color);
    border-radius: 6px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, .16);
}

.cricket-score-row.active {
    background: color-mix(in srgb, var(--player-color) 22%, rgba(0, 0, 0, .16));
}

.cricket-score-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cricket-score-row strong {
    color: var(--text);
    font-size: .98rem;
    line-height: 1;
}

.cricket-hit-column {
    min-width: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(var(--play-button-min), 1fr));
    gap: 0;
}

.bull-column {
    grid-template-rows: repeat(2, minmax(calc(var(--play-button-min) * 1.5), 1fr));
}

.cricket-hit-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: var(--play-button-min);
    padding: 10px;
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
    touch-action: manipulation;
}

.cricket-hit-button.is-closed {
    background: #252b2a;
    color: rgba(244, 247, 241, .56);
    border-color: rgba(255, 255, 255, .1);
}

.cricket-hit-button.is-closed .cricket-player-progress {
    filter: grayscale(1) saturate(.2);
    opacity: .36;
}

.cricket-hit-button.is-closed .cricket-hit-label {
    color: rgba(244, 247, 241, .62);
    text-shadow: none;
}

.cricket-hit-label {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.cricket-field-progress {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(var(--player-count), minmax(0, 1fr));
    pointer-events: none;
}

.cricket-player-progress {
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(
        to top,
        var(--player-color) 0 var(--fill),
        transparent var(--fill) 100%
    );
}

.cricket-player-progress:first-child {
    border-left: 0;
}

.cricket-hit-column .cricket-hit-button {
    min-height: var(--play-button-min);
    border-radius: 0;
    border-bottom-width: 0;
}

.cricket-hit-column .cricket-hit-button:first-child {
    border-radius: 8px 8px 0 0;
}

.cricket-hit-column .cricket-hit-button:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom-width: 1px;
}

.bull-column .cricket-hit-button {
    min-height: calc(var(--play-button-min) * 1.5);
}

.bull-column .cricket-player-progress {
    background: linear-gradient(
        to bottom,
        var(--player-color) 0 var(--fill),
        transparent var(--fill) 100%
    );
}

.cricket-hit-button:not(:disabled):active {
    transform: translateY(1px);
    filter: brightness(1.18);
}

.cricket-out-button {
    min-width: 0;
    font-size: 1.7rem;
}

.cricket-continue-button {
    min-width: 0;
    min-height: calc(var(--play-button-min) * 3);
    border-color: rgba(45, 212, 191, .62);
    background: linear-gradient(135deg, var(--green), #0f7e4b);
    color: #f7fffb;
    font-size: 1.45rem;
}

.cricket-continue-button:not(:disabled) {
    opacity: 1;
}

.hit-dots {
    position: absolute;
    z-index: 3;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
}

.hit-dot {
    width: 16px;
    height: 14px;
    border-radius: 50%;
    background: var(--player-color, #4d8dff);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 0 12px rgba(255, 255, 255, .35);
    color: #f8fbff;
    display: grid;
    place-items: center;
    font-size: .48rem;
    font-weight: 900;
    line-height: 1;
}

.hit-dot-single {
    border-radius: 50%;
}

.hit-dot-double {
    border-radius: 4px;
    background: #f2b84b;
    color: #22160a;
}

.hit-dot-triple {
    border-radius: 4px;
    background: #4d8dff;
}

.hit-dot-miss {
    border-radius: 4px;
    background: rgba(217, 67, 62, .9);
}

.finish-markers {
    position: absolute;
    right: 6px;
    bottom: 5px;
    z-index: 2;
    display: flex;
    gap: 3px;
    max-width: calc(100% - 12px);
    pointer-events: none;
    overflow: visible;
}

.compact-dart-pad button > .finish-markers {
    display: flex;
    overflow: visible;
}

.finish-marker {
    min-width: 22px;
    max-width: 44px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 1px solid rgba(255, 229, 142, .9);
    border-radius: 4px;
    background: #f2b84b;
    color: #211706;
    font-size: .62rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.turn-panel {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel-strong), rgba(12, 20, 17, .96));
}

.awaiting-turn-confirm {
    padding-bottom: 58px;
}

.turn-continue-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-height: 34px;
    width: auto;
    padding: 0 14px;
    justify-content: center;
    font-size: .86rem;
}

.turn-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.turn-top h3 {
    margin: 0;
    font-size: 1.15rem;
}

.turn-top strong {
    color: var(--gold);
    font-size: 3.2rem;
    line-height: 1;
}

.turn-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .9rem;
}

.turn-facts span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    background: rgba(0, 0, 0, .14);
}

.dart-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dart-row {
    display: grid;
    grid-template-rows: auto minmax(24px, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 104px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, .18);
}

.dart-row.pending { opacity: .7; }
.dart-row strong {
    align-self: center;
    color: var(--text);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.dart-row span:last-child {
    color: var(--gold);
    font-weight: 900;
}

.cricket-table {
    margin-top: 12px;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: none;
    max-width: 100%;
}

.cricket-head,
.cricket-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) repeat(7, minmax(62px, .45fr)) minmax(70px, .45fr);
    gap: 1px;
    min-width: 680px;
}

.cricket-head span,
.cricket-row span,
.cricket-row strong {
    min-width: 0;
    padding: 10px;
    background: rgba(255, 255, 255, .035);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cricket-row.active strong:first-child { color: var(--green); }
.marks {
    text-align: center;
    font-weight: 800;
}

.marks.closed {
    color: var(--gold);
    font-size: 1.1rem;
}

.history-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) 58px minmax(150px, 1.5fr);
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.history-row strong { color: var(--gold); }

.history-player,
.history-detail,
.history-darts {
    min-width: 0;
}

.history-player,
.history-detail span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-detail {
    display: grid;
    gap: 3px;
}

.history-darts {
    color: var(--text);
    font-weight: 800;
    white-space: nowrap;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.stats-grid article {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.stats-grid strong {
    color: var(--green);
    font-size: 2rem;
}

.mini-trend {
    display: grid;
    grid-template-columns: repeat(12, minmax(4px, 1fr));
    align-items: end;
    min-height: 44px;
    gap: 4px;
    margin-top: 6px;
}

.mini-trend i {
    display: block;
    min-height: 4px;
    height: calc((var(--value, 0) / 120) * 44px);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--green), rgba(50, 211, 132, .35));
}

.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    background: rgba(2, 6, 4, .64);
    backdrop-filter: blur(4px);
}

.game-dialog {
    width: min(720px, 100%);
    max-height: min(76vh, 720px);
    overflow: auto;
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: rgba(12, 20, 17, .98);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
}

.dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.dialog-head h2 {
    margin: 0;
}

.history-list {
    display: grid;
}

.guide-content {
    display: grid;
    gap: 14px;
}

.guide-content p,
.guide-content ul {
    margin: 0;
}

.guide-content ul {
    padding-left: 20px;
}

.guide-content li + li {
    margin-top: 6px;
}

.guide-content h3 {
    margin: 0 0 6px;
    font-size: .92rem;
    color: var(--gold);
}

.guide-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.guide-section-grid section,
.guide-content > section {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.killer-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.killer-status-card {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--player-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
}

.killer-status-card.active {
    border-color: color-mix(in srgb, var(--player-color) 80%, var(--line));
    border-left-color: var(--player-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--player-color) 38%, transparent);
}

.killer-status-card.out {
    opacity: .48;
    filter: grayscale(.6);
}

.killer-status-card span,
.killer-status-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.killer-status-card span,
.killer-status-card small {
    color: var(--muted);
}

.killer-status-card strong {
    color: var(--gold);
    font-size: 2rem;
    line-height: .95;
}

.killer-guide {
    gap: 12px;
}

.killer-guide > p {
    color: var(--muted);
    line-height: 1.45;
}

.killer-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.killer-guide-grid section,
.killer-guide-rule {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(240, 198, 111, .22);
    border-radius: 8px;
    background: rgba(240, 198, 111, .07);
}

.killer-guide-grid section > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: #10130f;
    font-weight: 900;
}

.killer-guide-rule {
    border-color: rgba(45, 212, 191, .2);
    background: rgba(45, 212, 191, .06);
}

.killer-guide-rule strong {
    color: var(--green);
}

#blazor-error-ui { display: none; }

@media (max-width: 1080px) {
    .app-grid,
    .play-surface {
        grid-template-columns: 1fr;
    }

    .playing-grid {
        margin-top: 8px;
    }

    .playing-topbar {
        display: none;
    }

    .setup-panel {
        order: 2;
    }

    .board-panel {
        justify-items: center;
    }

    .dart-board-wrap {
        width: min(100%, 82vw, 720px);
    }

    .x01-play-surface {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .x01-board-column {
        gap: 8px;
    }

    .x01-board-column .dart-board-wrap,
    .x01-checkout-box {
        width: min(100%, 76vw, 680px);
    }

    .x01-board-column .dart-board-wrap {
        grid-template-columns: 1fr;
        align-items: center;
    }

    .x01-board-column .dart-board {
        align-self: center;
    }

    .x01-board-column .miss-button {
        display: block;
    }

    .x01-current-score {
        gap: 8px;
        padding: 10px;
    }

    .x01-score-head strong {
        font-size: 3.2rem;
    }

    .x01-player-scores {
        gap: 6px;
    }

    .x01-player-score {
        min-height: 48px;
        padding: 8px 10px;
    }

    .x01-player-score strong {
        font-size: 1.55rem;
    }
}

@media (orientation: landscape) and (max-height: 820px) {
    .dart-app {
        min-height: 100dvh;
    }

    .playing-grid {
        min-height: calc(100dvh - var(--play-panel-offset));
    }

    .playing-grid .game-panel {
        min-height: calc(100dvh - var(--play-panel-offset));
    }

    .play-surface:not(.cricket-play-surface),
    .x01-play-surface {
        min-height: 0;
    }

    .play-surface:not(.cricket-play-surface) .board-panel,
    .x01-board-column .board-panel {
        align-self: start;
    }

    .play-surface:not(.cricket-play-surface) .dart-board-wrap,
    .x01-board-column .dart-board-wrap {
        --landscape-board-size: min(100%, calc(100dvh - 174px), 680px);
        width: var(--landscape-board-size);
        max-width: var(--landscape-board-size);
        justify-self: center;
    }
}

@media (max-width: 1080px) and (max-height: 620px) {
    .dart-app {
        padding: 6px;
    }

    .playing-grid {
        margin-top: 0;
    }

    .game-panel {
        min-height: calc(100dvh - 12px);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        align-content: stretch;
        padding: 10px;
    }

    .match-summary {
        gap: 8px;
        margin-bottom: 0;
    }

    .match-summary > .match-header {
        min-height: 0;
    }

    .match-summary-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .match-summary-actions .primary-button,
    .match-summary-actions .ghost-button {
        min-height: 44px;
        padding: 0 12px;
    }

    .match-summary .score-grid {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .match-summary .score-card {
        min-height: 136px;
        gap: 5px;
        padding: 9px 10px;
    }

    .match-summary .score-name {
        gap: 6px;
    }

    .match-summary .remaining {
        font-size: 2.55rem;
    }

    .match-summary .mini-stats {
        gap: 4px 6px;
        font-size: .71rem;
    }

    .match-summary .cricket-table {
        margin-top: 0;
        overflow-x: visible;
    }

    .match-summary .cricket-head,
    .match-summary .cricket-row {
        grid-template-columns: minmax(72px, 1.1fr) repeat(7, minmax(34px, .45fr)) minmax(46px, .55fr);
        min-width: 0;
        font-size: .76rem;
    }

    .match-summary .cricket-head span,
    .match-summary .cricket-row span,
    .match-summary .cricket-row strong {
        padding: 6px 4px;
        text-align: center;
    }

    .match-summary .cricket-head span:first-child,
    .match-summary .cricket-row strong:first-child {
        text-align: left;
    }

    .game-panel > .match-header {
        min-height: 0;
        margin-bottom: 0;
        padding-right: 0;
        pointer-events: none;
    }

    .x01-board-column .match-header,
    .game-panel > .match-header {
        --compact-header-action-width: clamp(64px, calc((100vw - 48px) / 10), 88px);
        display: grid;
        grid-template-columns: minmax(150px, .72fr) minmax(240px, 1.1fr) minmax(220px, 1fr);
        align-items: stretch;
        gap: 6px;
    }

    .x01-board-column .match-header:has(.match-header-actions .compact-button),
    .game-panel > .match-header:has(.match-header-actions .compact-button) {
        grid-template-columns: minmax(150px, .72fr) minmax(240px, 1.1fr) minmax(220px, 1fr) var(--compact-header-action-width);
    }

    .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(132px, .58fr) var(--compact-header-action-width) minmax(180px, .86fr) minmax(200px, 1fr);
    }

    .game-panel > .match-header:has(.play-target-tile):has(.match-header-actions .compact-button) {
        grid-template-columns: minmax(132px, .58fr) var(--compact-header-action-width) minmax(180px, .86fr) minmax(200px, 1fr) var(--compact-header-action-width);
    }

    .play-heading {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .play-heading h2 {
        font-size: 1.2rem;
    }

    .play-score-tile,
    .play-throw-tile {
        padding: 7px 8px;
    }

    .play-target-tile {
        grid-column: 2;
        grid-row: 1;
        padding: 7px 6px;
    }

    .play-target-tile strong {
        font-size: 2rem;
    }

    .play-score-tile {
        grid-column: 2;
        grid-row: 1;
        gap: 4px;
    }

    .game-panel > .match-header:has(.play-target-tile) .play-score-tile {
        grid-column: 3;
    }

    .play-score-list {
        gap: 3px;
    }

    .play-score-row {
        padding: 3px 6px;
    }

    .play-throw-tile {
        grid-column: 3;
        grid-row: 1;
        gap: 7px;
    }

    .game-panel > .match-header:has(.play-target-tile) .play-throw-tile {
        grid-column: 4;
    }

    .play-throw-head strong {
        font-size: 2rem;
    }

    .play-throw-review strong {
        font-size: 1.25rem;
    }

    .game-panel > .match-header .match-header-actions:not(:has(.compact-button)),
    .x01-board-column .match-header .match-header-actions:not(:has(.compact-button)) {
        display: none;
    }

    .game-panel > .match-header .match-header-actions {
        position: static;
        grid-column: 4;
        grid-row: 1;
        z-index: 4;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        align-self: stretch;
        gap: 6px;
        pointer-events: auto;
    }

    .game-panel > .match-header:has(.play-target-tile) .match-header-actions {
        grid-column: 5;
    }

    .x01-board-column .match-header .match-header-actions {
        position: static;
        grid-column: 4;
        grid-row: 1;
        z-index: 4;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        align-self: stretch;
        gap: 6px;
        pointer-events: auto;
    }

    .game-panel > .match-header .match-header-actions .match-menu-trigger,
    .x01-board-column .match-header .match-header-actions .match-menu-trigger {
        order: 1;
    }

    .game-panel > .match-header .match-header-actions .undo-trigger,
    .x01-board-column .match-header .match-header-actions .undo-trigger {
        order: 2;
    }

    .game-panel > .match-header .match-header-actions .compact-button,
    .x01-board-column .match-header .match-header-actions .compact-button {
        width: 100%;
        height: 100%;
        min-width: var(--compact-header-action-width);
        min-height: 0;
        padding: 0;
        font-size: 1.15rem;
    }

    .current-rest {
        margin-top: 2px;
        font-size: 1rem;
    }

    .x01-play-surface {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
        min-height: 0;
        height: 100%;
    }

    .play-surface {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr);
        gap: 8px;
        margin-top: 0;
        min-height: 0;
        height: 100%;
    }

    .play-surface:not(.cricket-play-surface) {
        grid-template-columns: 1fr;
    }

    .cricket-play-surface {
        grid-template-columns: 1fr;
    }

    .cricket-pad {
        grid-template-columns: minmax(68px, .85fr) repeat(6, minmax(64px, 1fr)) minmax(82px, 1fr) minmax(120px, 2fr);
        overflow-x: visible;
        gap: 8px;
    }

    .cricket-player-tile {
        grid-column: 1 / span 4;
        min-height: 74px;
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        text-align: left;
    }

    .cricket-score-tile {
        grid-column: 5 / -1;
        min-height: max(74px, calc(var(--player-count, 1) * 26px + 42px));
        min-width: 0;
    }

    .cricket-out-button {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        min-height: 172px;
    }

    .cricket-number-column {
        grid-column: var(--cricket-column);
        grid-row: 2;
    }

    .bull-column {
        grid-column: 8;
        grid-row: 2;
        grid-template-rows: repeat(2, minmax(84px, 1fr));
    }

    .cricket-continue-button {
        grid-column: 9;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        min-height: 172px;
    }

    .cricket-hit-column {
        min-width: 0;
        grid-template-rows: repeat(3, minmax(56px, 1fr));
    }

    .cricket-hit-button,
    .cricket-hit-column .cricket-hit-button,
    .bull-column .cricket-hit-button {
        min-width: 0;
        min-height: 56px;
        font-size: 1.65rem;
    }

    .x01-board-column {
        gap: 6px;
        grid-template-rows: auto auto minmax(0, 1fr);
        align-content: stretch;
        min-height: 0;
        height: 100%;
    }

    .x01-board-column .board-panel,
    .x01-board-column .dart-board-wrap,
    .board-panel .dart-board-wrap,
    .play-surface:not(.cricket-play-surface) .dart-board-wrap {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .x01-board-column .board-panel {
        grid-row: 3;
        align-self: stretch;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        justify-items: stretch;
    }

    .board-panel {
        min-height: 0;
        height: 100%;
    }

    .x01-board-column .dart-board-wrap {
        grid-template-columns: 1fr;
        align-self: stretch;
        min-height: 100%;
    }

    .dart-board-wrap {
        grid-template-columns: 1fr;
        width: 100%;
        min-height: 0;
        height: 100%;
        gap: 8px;
        align-items: stretch;
    }

    .input-mode-buttons .dart-board,
    .input-mode-buttons .miss-button {
        display: none;
    }

    .x01-board-column .input-mode-buttons .miss-button {
        display: none;
    }

    .input-mode-board {
        height: auto;
        align-self: center;
        justify-self: center;
    }

    .input-mode-board .dart-board {
        display: block;
    }

    .input-mode-board .miss-button {
        display: block;
    }

    .compact-dart-pad {
        --compact-pad-row-height: minmax(48px, 1fr);
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-auto-rows: var(--compact-pad-row-height);
        gap: 6px;
        aspect-ratio: auto;
        width: 100%;
        min-height: 0;
        height: 100%;
    }

    .compact-dart-pad button {
        position: relative;
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 48px;
        padding: 0 6px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, .055);
        color: var(--text);
        font-size: 1.08rem;
        font-weight: 900;
        line-height: 1;
        overflow: hidden;
        touch-action: manipulation;
    }

    .compact-dart-pad button > span {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-align: center;
        text-overflow: clip;
    }

    .compact-dart-pad .hit-dots {
        top: 5px;
        left: 5px;
    }

    .compact-dart-pad .hit-dot {
        width: 15px;
        height: 13px;
        font-size: .44rem;
    }

    .compact-dart-pad .finish-markers {
        right: 4px;
        bottom: 4px;
    }

    .compact-dart-pad .finish-marker {
        min-width: 20px;
        height: 16px;
        padding: 0 4px;
        font-size: .55rem;
    }

    .compact-dart-pad button:hover:not(:disabled),
    .compact-dart-pad button:focus-visible {
        border-color: rgba(45, 212, 191, .58);
        background: rgba(45, 212, 191, .16);
        outline: none;
    }

    .compact-dart-pad .compact-bull-button {
        grid-column: span 5;
        background: rgba(24, 168, 102, .22);
    }

    .compact-dart-pad .compact-miss-button {
        grid-column: span 5;
        background: rgba(217, 67, 62, .18);
    }

    .dart-board-wrap .compact-dart-pad {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .dart-board-wrap .compact-dart-pad .compact-bull-button,
    .dart-board-wrap .compact-dart-pad .compact-miss-button {
        grid-column: span 5;
    }

    .compact-dart-pad .compact-continue-button {
        border-color: rgba(45, 212, 191, .62);
        background: linear-gradient(135deg, var(--green), #0f7e4b);
        color: #f7fffb;
    }

    .hit-picker-backdrop {
        inset: 0;
    }

    .x01-current-score {
        align-content: start;
        gap: 7px;
        padding: 9px;
    }

    .x01-score-head strong {
        font-size: 2.75rem;
    }

    .x01-current-meta,
    .x01-turn-review p,
    .last-turn-snippet strong,
    .last-turn-snippet span {
        font-size: .78rem;
    }

    .last-turn-snippet {
        padding: 7px;
    }

    .x01-turn-review {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 0;
        padding: 7px 9px;
    }

    .x01-turn-review > strong {
        font-size: 1.65rem;
    }

    .x01-finish-targets {
        width: 100%;
        gap: 6px;
    }

    .target-callout {
        width: 100%;
        padding: 9px 10px;
    }

    .target-callout strong {
        font-size: 1.55rem;
    }

    .x01-finish-button {
        min-height: 34px;
        min-width: 52px;
        padding: 0 12px;
        font-size: .92rem;
    }

    .x01-player-scores {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    }

    .x01-player-score {
        min-height: 42px;
        padding: 6px 8px;
    }

    .x01-player-score strong {
        font-size: 1.35rem;
    }

    .turn-panel {
        display: none;
        grid-template-columns: minmax(150px, .75fr) minmax(190px, 1fr);
        gap: 8px;
        align-items: start;
        padding: 10px;
    }

    .turn-panel .turn-top,
    .turn-panel .dart-list,
    .turn-panel .bot-status,
    .turn-panel .turn-review,
    .turn-panel .checkout-box {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    .input-mode-buttons .dart-board,
    .input-mode-buttons .miss-button {
        display: none;
    }

    .x01-board-column .input-mode-buttons .miss-button {
        display: none;
    }

    .input-mode-board {
        width: min(100%, 62vh, 620px);
        height: auto;
        justify-self: center;
    }

    .input-mode-board .dart-board {
        display: block;
    }

    .input-mode-board .miss-button {
        display: block;
    }

    .board-panel .dart-board-wrap,
    .play-surface:not(.cricket-play-surface) .dart-board-wrap,
    .x01-board-column .dart-board-wrap {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .compact-dart-pad {
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-auto-rows: minmax(48px, auto);
        gap: 6px;
        width: 100%;
    }

    .compact-dart-pad button {
        position: relative;
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 48px;
        padding: 0 6px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, .055);
        color: var(--text);
        font-size: clamp(.95rem, 2.7vw, 1.1rem);
        font-weight: 900;
        line-height: 1;
        overflow: hidden;
        touch-action: manipulation;
    }

    .compact-dart-pad button > span {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-align: center;
        text-overflow: clip;
    }

    .compact-dart-pad .compact-bull-button,
    .compact-dart-pad .compact-miss-button {
        grid-column: span 5;
    }

    .compact-dart-pad .compact-bull-button {
        background: rgba(24, 168, 102, .22);
    }

    .compact-dart-pad .compact-miss-button {
        background: rgba(217, 67, 62, .18);
    }

    .compact-dart-pad .compact-continue-button {
        border-color: rgba(45, 212, 191, .62);
        background: linear-gradient(135deg, var(--green), #0f7e4b);
        color: #f7fffb;
    }

    .cricket-pad {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        overflow-x: visible;
        gap: 8px;
    }

    .cricket-player-tile {
        grid-column: span 5;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        text-align: left;
        min-height: 92px;
    }

    .cricket-score-tile {
        grid-column: span 3;
        min-height: max(92px, calc(var(--player-count, 1) * 28px + 46px));
        min-width: 0;
    }

    .cricket-out-button {
        min-width: 0;
    }

    .cricket-hit-column {
        min-width: 0;
        grid-template-rows: repeat(3, minmax(72px, 1fr));
    }

    .bull-column {
        grid-template-rows: repeat(2, minmax(112px, 1fr));
    }

    .cricket-continue-button {
        min-height: 232px;
    }

    .cricket-hit-button,
    .cricket-hit-column .cricket-hit-button,
    .bull-column .cricket-hit-button {
        min-width: 0;
        font-size: 1.85rem;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
    .playing-grid .game-panel {
        padding: 10px;
    }

    .cricket-pad {
        grid-template-columns: minmax(68px, .85fr) repeat(6, minmax(64px, 1fr)) minmax(82px, 1fr) minmax(120px, 1.6fr);
        overflow-x: visible;
        gap: 6px;
    }

    .cricket-player-tile {
        grid-column: 1 / span 4;
        min-height: 68px;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        text-align: left;
    }

    .cricket-score-tile {
        grid-column: 5 / -1;
        min-height: max(68px, calc(var(--player-count, 1) * 24px + 38px));
        min-width: 0;
        padding: 10px;
    }

    .cricket-out-button {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        min-height: 154px;
    }

    .cricket-number-column {
        grid-column: var(--cricket-column);
        grid-row: 2;
        grid-template-rows: repeat(3, minmax(50px, 1fr));
    }

    .bull-column {
        grid-column: 8;
        grid-row: 2;
        grid-template-rows: repeat(2, minmax(75px, 1fr));
    }

    .cricket-continue-button {
        grid-column: 9;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        min-height: 154px;
    }

    .cricket-hit-button,
    .cricket-hit-column .cricket-hit-button,
    .bull-column .cricket-hit-button {
        min-width: 0;
        min-height: 50px;
        padding: 6px;
        font-size: clamp(1rem, 3.1vw, 1.45rem);
    }

    .cricket-out-button,
    .cricket-continue-button {
        font-size: clamp(.95rem, 2.7vw, 1.2rem);
    }

    .player-avatar {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 900px) and (max-height: 620px) {
    .cricket-pad {
        grid-template-columns: minmax(68px, .85fr) repeat(6, minmax(64px, 1fr)) minmax(82px, 1fr) minmax(120px, 2fr);
    }

    .cricket-player-tile {
        grid-column: 1 / span 4;
        min-height: 74px;
    }

    .cricket-score-tile {
        grid-column: 5 / -1;
        min-height: max(74px, calc(var(--player-count, 1) * 26px + 42px));
    }

    .cricket-out-button {
        grid-column: 1;
        grid-row: 2;
        min-height: 172px;
    }

    .cricket-number-column {
        grid-row: 2;
    }

    .bull-column {
        grid-column: 8;
        grid-row: 2;
        grid-template-rows: repeat(2, minmax(84px, 1fr));
    }

    .cricket-continue-button {
        grid-column: 9;
        grid-row: 2;
        min-height: 172px;
    }
}

@media (max-width: 620px) {
    .dart-app { padding: 8px 8px max(84px, env(safe-area-inset-bottom)); }

    .match-header,
    .settings-row,
    .match-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .match-settings,
    .compact-settings,
    .dual-list,
    .bot-profile-grid,
    .selected-participant {
        grid-template-columns: 1fr;
    }

    .selected-participant {
        align-items: stretch;
    }

    .add-player-row {
        grid-template-columns: 1fr;
    }

    .dart-topbar {
        position: static;
        gap: 8px;
        padding: 10px 12px;
    }

    .game-panel .match-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 8px;
    }

    .x01-board-column .match-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 8px;
    }

    .game-panel .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(62px, .38fr) minmax(0, 1fr) auto;
    }

    .play-heading {
        grid-column: 1 / 3;
        grid-row: 1;
        min-width: 0;
    }

    .play-heading h2 {
        font-size: 1.35rem;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .game-panel .match-header .match-header-actions,
    .x01-board-column .match-header .match-header-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }

    .play-score-tile {
        grid-column: 1;
        grid-row: 2;
        padding: 8px;
        gap: 5px;
    }

    .play-target-tile {
        grid-column: 1;
        grid-row: 2;
        padding: 8px 6px;
    }

    .play-target-tile strong {
        font-size: 2rem;
    }

    .game-panel .match-header:has(.play-target-tile) .play-score-tile {
        grid-column: 2 / 4;
    }

    .play-throw-tile {
        grid-column: 2 / 4;
        grid-row: 2;
        grid-template-columns: auto minmax(0, 1fr);
        padding: 8px;
        gap: 7px;
    }

    .game-panel .match-header:has(.play-target-tile) .play-throw-tile {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .play-throw-head strong {
        font-size: 2rem;
    }

    .play-throw-review {
        min-height: 38px;
    }

    .play-throw-review strong {
        font-size: 1.2rem;
    }

    .brand-mark,
    .install-note {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-block {
        gap: 3px;
    }

    .mode-start-head {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }

    .mode-tile-grid {
        gap: 8px;
    }

    .mode-tile {
        min-height: 128px;
        padding: 14px;
    }

    .mode-tile strong {
        font-size: clamp(1.32rem, 9vw, 2.2rem);
    }

    .topbar-actions {
        gap: 6px;
    }

    .compact-button {
        min-width: 38px;
        min-height: 34px;
        padding: 0 10px;
        font-size: .84rem;
    }

    .player-editor,
    .mini-stats,
    .history-row,
    .guide-section-grid,
    .killer-guide-grid,
    .match-summary-actions {
        grid-template-columns: 1fr;
    }

    .setup-panel,
    .game-panel {
        padding: 12px;
    }

    .remaining { font-size: 2.6rem; }
    .turn-top strong { font-size: 2.6rem; }
    .x01-play-surface {
        grid-template-columns: 1fr;
    }

    .x01-player-scores {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .x01-current-score {
        order: 2;
    }

    .x01-player-scores {
        order: 3;
    }

    .x01-score-head strong {
        font-size: 3rem;
    }

    .dart-board-wrap {
        width: min(100%, 96vw, 560px);
        gap: 8px;
    }

    .x01-board-column .dart-board-wrap,
    .x01-checkout-box {
        width: min(100%, 96vw, 560px);
    }

    .x01-board-column .dart-board-wrap {
        grid-template-columns: 1fr;
    }

    .x01-board-column .input-mode-buttons .miss-button {
        display: none;
    }

    .x01-board-column .input-mode-board .miss-button {
        display: block;
    }

    .cricket-table {
        overflow-x: visible;
    }

    .cricket-head,
    .cricket-row {
        grid-template-columns: minmax(70px, 1.2fr) repeat(7, minmax(28px, .55fr)) minmax(42px, .7fr);
        min-width: 0;
        font-size: .82rem;
    }

    .cricket-head span,
    .cricket-row span,
    .cricket-row strong {
        padding: 9px 5px;
        text-align: center;
    }

    .cricket-head span:first-child,
    .cricket-row strong:first-child {
        text-align: left;
    }

    .cricket-pad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: visible;
        gap: 8px;
    }

    .cricket-player-tile {
        grid-column: span 3;
        min-height: 112px;
    }

    .cricket-score-tile,
    .cricket-out-button {
        grid-column: span 1;
        min-width: 0;
    }

    .cricket-score-tile {
        min-height: max(112px, calc(var(--player-count, 1) * 28px + 46px));
    }

    .cricket-out-button {
        min-height: 112px;
    }

    .cricket-hit-column {
        min-width: 0;
        grid-template-rows: repeat(3, minmax(62px, 1fr));
    }

    .bull-column {
        grid-column: span 1;
        grid-template-rows: repeat(2, minmax(95px, 1fr));
    }

    .cricket-continue-button {
        grid-column: 1 / -1;
        min-height: 88px;
    }

    .cricket-hit-button,
    .cricket-hit-column .cricket-hit-button,
    .bull-column .cricket-hit-button {
        min-width: 0;
        min-height: 62px;
        padding: 8px;
        font-size: 1.7rem;
    }

    .cricket-hit-column .cricket-hit-button:first-child {
        font-size: 1.85rem;
    }

    .cricket-out-button {
        font-size: 1.65rem;
    }

    .cricket-score-row strong {
        font-size: .95rem;
    }

    .player-avatar {
        width: 58px;
        height: 58px;
        font-size: .68rem;
    }
}

@media (max-width: 430px) {
    .mode-tile {
        min-height: 116px;
        padding: 12px;
    }

    .mode-tile span {
        width: 34px;
        height: 34px;
        font-size: .76rem;
    }

    .score-grid {
        grid-template-columns: 1fr;
    }

    .cricket-head,
    .cricket-row {
        grid-template-columns: minmax(58px, 1.15fr) repeat(7, minmax(24px, .5fr)) minmax(36px, .65fr);
        font-size: .74rem;
    }

    .cricket-head span,
    .cricket-row span,
    .cricket-row strong {
        padding: 8px 3px;
    }

    .cricket-pad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cricket-player-tile {
        grid-column: span 3;
        grid-template-columns: 52px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
        min-height: 84px;
    }

    .cricket-score-tile,
    .cricket-out-button {
        min-height: 84px;
    }

    .cricket-score-tile {
        min-height: max(84px, calc(var(--player-count, 1) * 26px + 42px));
    }

    .cricket-hit-button,
    .cricket-hit-column .cricket-hit-button,
    .bull-column .cricket-hit-button {
        min-height: 58px;
        font-size: 1.45rem;
    }

    .bull-column {
        grid-column: span 1;
        grid-template-rows: repeat(2, minmax(89px, 1fr));
    }

    .cricket-continue-button {
        grid-column: 1 / -1;
        min-height: 82px;
    }
}

@media (max-width: 620px) and (max-height: 620px) {
    .x01-board-column .input-mode-buttons .miss-button {
        display: none;
    }

    .x01-board-column .input-mode-board .miss-button {
        display: block;
    }

    .cricket-pad {
        grid-template-columns: minmax(0, .85fr) repeat(6, minmax(0, 1fr)) minmax(0, 1fr) minmax(0, 1.25fr);
        gap: 6px;
    }

    .cricket-player-tile {
        grid-column: 1 / span 4;
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 68px;
    }

    .cricket-score-tile {
        grid-column: 5 / -1;
        min-height: max(68px, calc(var(--player-count, 1) * 24px + 38px));
        padding: 10px;
    }

    .cricket-out-button {
        grid-column: 1;
        grid-row: 2;
        min-height: 154px;
    }

    .cricket-number-column {
        grid-column: var(--cricket-column);
        grid-row: 2;
        grid-template-rows: repeat(3, minmax(50px, 1fr));
    }

    .bull-column {
        grid-column: 8;
        grid-row: 2;
        grid-template-rows: repeat(2, minmax(75px, 1fr));
    }

    .cricket-continue-button {
        grid-column: 9;
        grid-row: 2;
        width: 100%;
        min-height: 154px;
    }

    .cricket-hit-button,
    .cricket-hit-column .cricket-hit-button,
    .bull-column .cricket-hit-button {
        min-width: 0;
        min-height: 50px;
        padding: 6px;
        font-size: clamp(1rem, 3.7vw, 1.45rem);
    }

    .cricket-out-button,
    .cricket-continue-button {
        font-size: clamp(.95rem, 3vw, 1.2rem);
    }

    .player-avatar {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 620px) {
    .lobby-toggle,
    .lobby-join-row {
        grid-template-columns: 1fr;
    }

    .setup-mode-picker {
        grid-template-columns: 1fr;
    }

    .lobby-toggle button.active {
        min-height: 48px;
    }

    .join-row {
        grid-template-columns: 1fr;
    }

    .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .compact-dart-pad .compact-bull-button,
    .compact-dart-pad .compact-miss-button {
        grid-column: span 5;
    }

    .cricket-play-surface {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .cricket-pad {
        width: max(100%, 640px);
        grid-template-columns: minmax(56px, .75fr) repeat(6, minmax(54px, 1fr)) minmax(66px, .92fr) minmax(96px, 1.25fr);
        overflow-x: visible;
        gap: 6px;
    }

    .cricket-player-tile {
        grid-column: 1 / span 4;
        min-height: 64px;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        text-align: left;
        padding: 8px;
    }

    .cricket-score-tile {
        grid-column: 5 / -1;
        min-height: max(64px, calc(var(--player-count, 1) * 23px + 36px));
        padding: 8px;
    }

    .cricket-out-button {
        grid-column: 1;
        grid-row: 2;
        min-height: 144px;
    }

    .cricket-number-column {
        grid-column: var(--cricket-column);
        grid-row: 2;
        grid-template-rows: repeat(3, minmax(46px, 1fr));
    }

    .bull-column {
        grid-column: 8;
        grid-row: 2;
        grid-template-rows: repeat(2, minmax(69px, 1fr));
    }

    .cricket-continue-button {
        grid-column: 9;
        grid-row: 2;
        width: 100%;
        min-height: 144px;
    }

    .cricket-hit-button,
    .cricket-hit-column .cricket-hit-button,
    .bull-column .cricket-hit-button {
        min-width: 0;
        min-height: 46px;
        padding: 6px;
        font-size: clamp(.95rem, 4vw, 1.35rem);
    }

    .cricket-out-button,
    .cricket-continue-button {
        font-size: clamp(.9rem, 3.6vw, 1.1rem);
    }

    .player-avatar {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 620px) and (orientation: portrait) {
    .dart-app {
        min-height: 100dvh;
        padding: 8px;
    }

    .playing-grid,
    .playing-grid .game-panel {
        min-height: calc(100dvh - 16px);
    }

    .playing-grid {
        margin-top: 0;
    }

    .playing-grid .game-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        padding: 10px;
    }

    .game-panel > .match-header {
        gap: 7px;
    }

    .play-heading h2 {
        font-size: 1.22rem;
    }

    .play-score-tile,
    .play-throw-tile {
        padding: 7px;
    }

    .play-score-row {
        padding: 3px 6px;
    }

    .play-throw-head strong {
        font-size: 1.9rem;
    }

    .play-surface:not(.cricket-play-surface) {
        display: grid;
        grid-template-rows: auto auto;
        gap: 8px;
        align-content: start;
        min-height: 0;
        height: 100%;
    }

    .board-panel,
    .dart-board-wrap {
        min-height: 0;
    }

    .input-mode-buttons .compact-dart-pad,
    .dart-board-wrap .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: minmax(50px, 1fr);
        gap: 6px;
        height: 100%;
    }

    .input-mode-buttons .compact-dart-pad button,
    .compact-dart-pad button {
        min-height: 50px;
        padding: 0 5px;
        font-size: 1.08rem;
    }

    .input-mode-buttons .compact-dart-pad .compact-bull-button {
        grid-column: span 2;
    }

    .input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 3;
    }

    .dart-board-wrap .compact-dart-pad .compact-bull-button {
        grid-column: span 2;
    }

    .dart-board-wrap .compact-dart-pad .compact-miss-button {
        grid-column: span 3;
    }

    .turn-panel {
        display: grid;
        gap: 5px;
        padding: 7px;
    }

    .turn-top strong {
        font-size: 1.95rem;
    }

    .dart-list {
        gap: 6px;
    }

    .dart-row {
        min-height: 58px;
        gap: 3px;
        padding: 6px;
    }
}

@media (orientation: landscape) and (min-height: 621px) and (max-width: 1080px) {
    .dart-app {
        padding: 8px;
    }

    .playing-grid {
        margin-top: 0;
    }

    .playing-grid .game-panel {
        min-height: calc(100dvh - 16px);
        padding: 16px;
    }

    .play-surface:not(.cricket-play-surface) {
        grid-template-columns: minmax(0, .9fr) minmax(280px, .72fr);
        gap: 14px;
        align-items: start;
        min-height: 0;
        height: auto;
    }

    .board-panel,
    .dart-board-wrap {
        width: 100%;
        max-width: 100%;
    }

    .turn-panel {
        display: grid;
        align-self: start;
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    .dart-app {
        min-height: 100dvh;
        padding: 6px;
    }

    .playing-grid,
    .playing-grid .game-panel {
        min-height: calc(100dvh - 12px);
    }

    .playing-grid .game-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        padding: 10px;
    }

    .x01-board-column .match-header,
    .game-panel > .match-header {
        --compact-header-action-width: clamp(44px, 7vw, 58px);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, .58fr) minmax(0, 1fr) minmax(0, .86fr) var(--compact-header-action-width);
        gap: 6px;
    }

    .x01-board-column .match-header:has(.match-header-actions .compact-button),
    .game-panel > .match-header:has(.match-header-actions .compact-button) {
        grid-template-columns: minmax(0, .58fr) minmax(0, 1fr) minmax(0, .86fr) var(--compact-header-action-width);
    }

    .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(0, .5fr) minmax(44px, .32fr) minmax(0, .9fr) minmax(0, .82fr) var(--compact-header-action-width);
    }

    .game-panel > .match-header:has(.play-target-tile):has(.match-header-actions .compact-button) {
        grid-template-columns: minmax(0, .5fr) minmax(44px, .32fr) minmax(0, .9fr) minmax(0, .82fr) var(--compact-header-action-width);
    }

    .play-heading h2 {
        font-size: 1.12rem;
        line-height: 1.08;
    }

    .eyebrow {
        margin-bottom: 4px;
        font-size: .66rem;
    }

    .play-score-tile,
    .play-throw-tile,
    .play-target-tile {
        padding: 6px 7px;
    }

    .play-score-row {
        padding: 2px 5px;
    }

    .play-score-row span {
        font-size: .75rem;
    }

    .play-throw-head strong,
    .play-target-tile strong {
        font-size: 1.75rem;
    }

    .play-throw-head span,
    .play-throw-review span {
        font-size: .72rem;
    }

    .play-throw-review {
        min-height: 0;
    }

    .game-panel > .match-header .match-header-actions .compact-button,
    .x01-board-column .match-header .match-header-actions .compact-button {
        min-width: var(--compact-header-action-width);
        min-height: 0;
        font-size: 1rem;
    }

    .play-surface:not(.cricket-play-surface) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        grid-template-columns: minmax(0, 1fr) minmax(132px, .34fr);
        gap: 8px;
        min-height: 0;
        height: 100%;
    }

    .board-panel,
    .dart-board-wrap {
        min-height: 0;
        height: 100%;
    }

    .input-mode-buttons .compact-dart-pad,
    .dart-board-wrap .compact-dart-pad {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-auto-rows: minmax(40px, 1fr);
        gap: 5px;
        width: 100%;
        height: 100%;
    }

    .input-mode-buttons .compact-dart-pad button,
    .compact-dart-pad button {
        min-height: 40px;
        padding: 0 4px;
        font-size: clamp(.78rem, 2.7vw, 1rem);
    }

    .input-mode-buttons .compact-dart-pad .compact-bull-button,
    .input-mode-buttons .compact-dart-pad .compact-miss-button,
    .dart-board-wrap .compact-dart-pad .compact-bull-button,
    .dart-board-wrap .compact-dart-pad .compact-miss-button {
        grid-column: span 5;
    }

    .turn-panel {
        display: grid;
        align-self: stretch;
        gap: 6px;
        padding: 8px;
    }

    .turn-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    .turn-top h3 {
        font-size: .98rem;
    }

    .turn-top strong {
        font-size: 2rem;
    }

    .dart-list {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .dart-row {
        min-height: 0;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-rows: 1fr;
        gap: 5px;
        padding: 6px;
    }

    .dart-row span,
    .dart-row strong {
        font-size: .8rem;
    }
}

/* Spielansichten: Header bleibt Informationsbereich, darunter skaliert nur die Eingabefläche. */
.playing-grid .game-panel {
    min-width: 0;
}

.playing-grid .game-panel > .match-header {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.playing-grid .play-surface,
.playing-grid .cricket-play-surface,
.playing-grid .board-panel,
.playing-grid .dart-board-wrap,
.playing-grid .compact-dart-pad,
.playing-grid .cricket-pad {
    min-width: 0;
    max-width: 100%;
}

.playing-grid .cricket-play-surface {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    overflow: hidden;
}

.playing-grid .cricket-pad {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(64px, .75fr) repeat(6, minmax(52px, 1fr)) minmax(64px, .85fr) minmax(82px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--play-gap);
    overflow: hidden;
}

.playing-grid .cricket-out-button {
    grid-column: 1;
    grid-row: 1;
    min-height: calc(var(--play-button-min) * 3);
}

.playing-grid .cricket-number-column {
    grid-column: var(--cricket-column);
    grid-row: 1;
    grid-template-rows: repeat(3, minmax(var(--play-button-min), 1fr));
}

.playing-grid .bull-column {
    grid-column: 8;
    grid-row: 1;
    grid-template-rows: repeat(2, minmax(calc(var(--play-button-min) * 1.5), 1fr));
}

.playing-grid .cricket-continue-button {
    grid-column: 9;
    grid-row: 1;
    width: 100%;
    min-height: calc(var(--play-button-min) * 3);
}

@media (max-width: 620px) and (orientation: portrait) {
    .playing-grid .cricket-play-surface {
        height: auto;
        overflow: visible;
    }

    .playing-grid .cricket-pad {
        height: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 5px;
    }

    .playing-grid .cricket-out-button {
        grid-column: span 1;
        grid-row: auto;
        min-height: 76px;
    }

    .playing-grid .cricket-number-column {
        grid-column: span 1;
        grid-row: auto;
        grid-template-rows: repeat(3, minmax(54px, 1fr));
    }

    .playing-grid .bull-column {
        grid-column: span 1;
        grid-row: auto;
        grid-template-rows: repeat(2, minmax(82px, 1fr));
    }

    .playing-grid .cricket-continue-button {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 68px;
    }

    .playing-grid .cricket-hit-button,
    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        min-height: 54px;
        padding: 6px;
        font-size: 1.28rem;
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    .playing-grid .cricket-play-surface {
        height: 100%;
        overflow: hidden;
    }

    .playing-grid .cricket-pad {
        height: 100%;
        grid-template-columns: minmax(44px, .62fr) repeat(6, minmax(44px, 1fr)) minmax(54px, .82fr) minmax(72px, 1fr);
        gap: 4px;
    }

    .playing-grid .cricket-out-button,
    .playing-grid .cricket-continue-button {
        min-height: 0;
    }

    .playing-grid .cricket-number-column {
        grid-template-rows: repeat(3, minmax(24px, 1fr));
    }

    .playing-grid .bull-column {
        grid-template-rows: repeat(2, minmax(36px, 1fr));
    }

    .playing-grid .cricket-hit-button,
    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        min-height: 24px;
        padding: 3px;
        font-size: .92rem;
    }
}

@media (max-width: 1080px) {
    html,
    body,
    #app {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .dart-app {
        width: 100%;
        max-width: 100vw;
        overflow-x: clip;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }

    .playing-grid,
    .playing-grid .game-panel,
    .game-panel > .match-header,
    .play-surface,
    .board-panel,
    .dart-board-wrap,
    .turn-panel,
    .play-heading,
    .play-score-tile,
    .play-throw-tile,
    .play-target-tile {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 620px) and (orientation: portrait) {
    .dart-app:has(.playing-grid) {
        height: auto;
        min-height: 100dvh;
        padding-top: max(6px, env(safe-area-inset-top));
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    .playing-grid,
    .playing-grid .game-panel {
        height: auto;
        min-height: 0;
    }

    .playing-grid .game-panel {
        grid-template-rows: auto auto;
        gap: 6px;
        padding: 8px;
        overflow: visible;
    }

    .game-panel > .match-header {
        margin-bottom: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: stretch;
        gap: 6px;
    }

    .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(52px, .28fr) minmax(0, 1fr) auto;
    }

    .play-heading {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    .game-panel > .match-header:has(.play-target-tile) .play-heading {
        grid-column: 1 / 3;
    }

    .game-panel > .match-header .match-header-actions {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        display: grid;
        grid-template-columns: repeat(2, 38px);
        gap: 6px;
    }

    .game-panel > .match-header:has(.play-target-tile) .match-header-actions {
        grid-column: 3;
    }

    .play-heading h2 {
        font-size: clamp(1.02rem, 4.9vw, 1.22rem);
        line-height: 1.05;
    }

    .eyebrow {
        margin-bottom: 2px;
        font-size: .62rem;
        line-height: 1.05;
    }

    .game-panel > .match-header .compact-button {
        width: 38px;
        min-width: 38px;
        min-height: 34px;
        padding: 0;
    }

    .play-score-tile {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 8px;
        gap: 6px;
    }

    .play-target-tile {
        grid-column: 1;
        grid-row: 2;
        padding: 6px 4px;
    }

    .game-panel > .match-header:has(.play-target-tile) .play-score-tile {
        grid-column: 2 / 4;
    }

    .play-throw-tile,
    .game-panel > .match-header:has(.play-target-tile) .play-throw-tile {
        grid-column: 1 / -1;
        grid-row: 3;
        padding: 6px;
        gap: 6px;
    }

    .play-score-list {
        gap: 5px;
    }

    .play-score-row {
        min-height: 26px;
        padding: 5px 7px;
    }

    .play-score-row span,
    .play-throw-head span,
    .play-throw-review span {
        font-size: .68rem;
        line-height: 1.1;
    }

    .play-score-row strong {
        font-size: .86rem;
    }

    .play-throw-head strong,
    .play-target-tile strong {
        font-size: 1.55rem;
    }

    .play-throw-review {
        min-height: 0;
    }

    .play-throw-review strong {
        font-size: 1.05rem;
    }

    .play-surface:not(.cricket-play-surface) {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-rows: auto auto;
        gap: 6px;
        margin-top: 0;
        overflow: visible;
    }

    .board-panel {
        height: auto;
        min-height: 0;
        align-self: start;
        align-items: start;
        gap: 8px;
    }

    .dart-board-wrap {
        height: auto;
        min-height: 0;
        align-self: start;
        gap: 6px;
    }

    .input-mode-buttons .compact-dart-pad,
    .dart-board-wrap .compact-dart-pad,
    .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: 47px;
        gap: 4px;
        height: auto;
        min-height: 0;
    }

    .input-mode-buttons .compact-dart-pad button,
    .compact-dart-pad button {
        min-height: 47px;
        padding: 0 4px;
        font-size: clamp(.86rem, 3.8vw, 1rem);
    }

    .input-mode-buttons .compact-dart-pad .compact-bull-button,
    .dart-board-wrap .compact-dart-pad .compact-bull-button {
        grid-column: span 2;
    }

    .input-mode-buttons .compact-dart-pad .compact-miss-button,
    .dart-board-wrap .compact-dart-pad .compact-miss-button {
        grid-column: span 3;
    }

    .turn-panel {
        align-self: end;
        display: grid;
        gap: 4px;
        padding: 6px;
    }

    .turn-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    .turn-top h3 {
        margin-bottom: 0;
        font-size: .88rem;
        line-height: 1.05;
    }

    .turn-top strong {
        font-size: 1.6rem;
    }

    .dart-list {
        gap: 4px;
    }

    .dart-row {
        min-height: 32px;
        grid-template-columns: 42px minmax(0, 1fr) 28px;
        gap: 4px;
        padding: 4px 5px;
    }

    .dart-row span,
    .dart-row strong {
        font-size: .72rem;
        line-height: 1;
    }

    .dart-row strong {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
    }

}

@media (orientation: landscape) and (max-height: 620px) {
    .dart-app:has(.playing-grid) {
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    }

    .playing-grid,
    .playing-grid .game-panel {
        height: calc(100dvh - max(4px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom)));
        min-height: 0;
    }

    .playing-grid .game-panel {
        grid-template-rows: auto minmax(0, 1fr);
        gap: 5px;
        padding: 6px;
        overflow: clip;
    }

    .game-panel > .match-header {
        --compact-header-action-width: clamp(34px, 6vw, 44px);
        display: grid;
        grid-template-columns: minmax(86px, .72fr) minmax(0, 1fr) minmax(112px, .86fr) var(--compact-header-action-width);
        align-items: stretch;
        gap: 4px;
        margin-bottom: 0;
    }

    .game-panel > .match-header:has(.play-target-tile),
    .game-panel > .match-header:has(.play-target-tile):has(.match-header-actions .compact-button) {
        grid-template-columns: minmax(78px, .58fr) minmax(40px, .28fr) minmax(0, .84fr) minmax(104px, .78fr) var(--compact-header-action-width);
    }

    .play-heading {
        grid-column: 1;
        grid-row: 1;
    }

    .play-target-tile {
        grid-column: 2;
        grid-row: 1;
    }

    .play-score-tile {
        grid-column: 2;
        grid-row: 1;
    }

    .game-panel > .match-header:has(.play-target-tile) .play-score-tile {
        grid-column: 3;
    }

    .play-throw-tile {
        grid-column: 3;
        grid-row: 1;
    }

    .game-panel > .match-header:has(.play-target-tile) .play-throw-tile {
        grid-column: 4;
    }

    .game-panel > .match-header .match-header-actions {
        grid-column: 4;
        grid-row: 1;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .game-panel > .match-header:has(.play-target-tile) .match-header-actions {
        grid-column: 5;
    }

    .game-panel > .match-header .match-header-actions .compact-button {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        font-size: .9rem;
    }

    .play-heading h2 {
        font-size: clamp(.86rem, 2.6vw, 1.02rem);
        line-height: 1;
    }

    .eyebrow {
        margin-bottom: 1px;
        font-size: .56rem;
        line-height: 1;
    }

    .play-score-tile,
    .play-throw-tile,
    .play-target-tile {
        padding: 4px 5px;
    }

    .play-score-tile {
        gap: 3px;
    }

    .play-score-list {
        gap: 2px;
    }

    .play-score-row {
        padding: 1px 4px;
    }

    .play-score-row span,
    .play-throw-head span,
    .play-throw-review span {
        font-size: .6rem;
        line-height: 1.05;
    }

    .play-score-row strong {
        font-size: .76rem;
    }

    .play-throw-head strong,
    .play-target-tile strong {
        font-size: 1.35rem;
    }

    .play-throw-review strong {
        font-size: .92rem;
    }

    .play-surface:not(.cricket-play-surface) {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(104px, 18vw);
        gap: 5px;
        margin-top: 0;
        overflow: clip;
    }

    .board-panel,
    .dart-board-wrap {
        height: 100%;
        min-height: 0;
    }

    .input-mode-buttons .compact-dart-pad,
    .dart-board-wrap .compact-dart-pad,
    .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: minmax(24px, 1fr);
        gap: 3px;
        height: 100%;
        min-height: 0;
    }

    .input-mode-buttons .compact-dart-pad button,
    .compact-dart-pad button {
        min-height: 24px;
        padding: 0 3px;
        font-size: clamp(.72rem, 2.3vw, .9rem);
    }

    .input-mode-buttons .compact-dart-pad .compact-bull-button,
    .dart-board-wrap .compact-dart-pad .compact-bull-button {
        grid-column: span 2;
    }

    .input-mode-buttons .compact-dart-pad .compact-miss-button,
    .dart-board-wrap .compact-dart-pad .compact-miss-button {
        grid-column: span 3;
    }

    .turn-panel {
        display: grid;
        align-self: stretch;
        gap: 3px;
        padding: 5px;
    }

    .turn-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px;
    }

    .turn-top h3 {
        margin-bottom: 0;
        font-size: .72rem;
        line-height: 1;
    }

    .turn-top strong {
        font-size: 1.25rem;
    }

    .dart-list {
        gap: 3px;
    }

    .dart-row {
        min-height: 0;
        grid-template-columns: 32px minmax(0, 1fr) 20px;
        gap: 3px;
        padding: 3px;
    }

    .dart-row span,
    .dart-row strong {
        font-size: .58rem;
        line-height: 1;
    }
}

@media (orientation: landscape) and (min-height: 621px) and (max-width: 1080px) {
    .dart-app:has(.playing-grid) {
        width: 100vw;
        min-height: 100dvh;
        padding: 8px;
    }

    .playing-grid,
    .playing-grid .game-panel {
        min-height: calc(100dvh - 16px);
    }

    .playing-grid .game-panel {
        overflow: clip;
    }

    .play-surface:not(.cricket-play-surface) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
    }
}

@media (orientation: landscape) and (min-width: 1081px) and (max-height: 850px) {
    .dart-app:has(.playing-grid) {
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        padding: 8px;
        overflow: clip;
    }

    .dart-app:has(.playing-grid) .playing-topbar {
        display: none;
    }

    .playing-grid {
        margin-top: 0;
    }

    .playing-grid,
    .playing-grid .game-panel {
        height: calc(100dvh - 16px);
        min-height: 0;
    }

    .playing-grid .game-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: clip;
    }

    .play-surface:not(.cricket-play-surface) {
        min-height: 0;
        max-height: 100%;
    }
}

.play-surface:not(.cricket-play-surface) {
    grid-template-columns: minmax(0, 1fr);
}

.play-surface:not(.cricket-play-surface) .board-panel,
.input-mode-buttons.dart-board-wrap {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    justify-items: stretch;
}

.input-mode-buttons .compact-dart-pad,
.dart-board-wrap .compact-dart-pad {
    width: 100%;
}

.match-header-actions {
    align-content: start;
}

.match-header-actions .match-menu-trigger {
    order: 1;
}

.match-header-actions .undo-trigger {
    order: 2;
}

.game-panel > .match-header .match-header-actions,
.x01-board-column .match-header .match-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.game-panel > .match-header .match-header-actions .compact-button,
.x01-board-column .match-header .match-header-actions .compact-button {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
}

@media (max-width: 620px) and (orientation: portrait) {
    .game-panel > .match-header .match-header-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        width: clamp(104px, 36vw, 132px);
        gap: 5px;
    }

    .game-panel > .match-header .compact-button,
    .game-panel > .match-header .match-header-actions .compact-button {
        width: 100%;
        min-width: 0;
        min-height: 0;
        aspect-ratio: 1;
        font-size: clamp(1rem, 4.4vw, 1.25rem);
    }

    .input-mode-buttons .compact-dart-pad,
    .dart-board-wrap .compact-dart-pad,
    .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: auto;
        align-content: start;
        gap: clamp(4px, 1.35vw, 7px);
        width: 100%;
        height: auto;
    }

    .input-mode-buttons .compact-dart-pad button,
    .compact-dart-pad button {
        aspect-ratio: 1;
        min-height: 0;
        padding: 0;
        font-size: clamp(.95rem, 4.6vw, 1.22rem);
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    .game-panel > .match-header {
        --compact-header-action-width: clamp(48px, 14vh, 58px);
    }

    .game-panel > .match-header .match-header-actions {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
        width: var(--compact-header-action-width);
        gap: 4px;
    }

    .game-panel > .match-header .match-header-actions .compact-button {
        aspect-ratio: 1;
        width: 100%;
        min-width: 0;
        min-height: 0;
        font-size: clamp(1rem, 4.2vh, 1.2rem);
    }

    .input-mode-buttons .compact-dart-pad,
    .dart-board-wrap .compact-dart-pad,
    .compact-dart-pad {
        --compact-pad-gap: clamp(4px, 1.25vh, 7px);
        --compact-pad-cell: min(
            calc((100vw - 28px - (7 * var(--compact-pad-gap))) / 8),
            calc((100dvh - 154px - (2 * var(--compact-pad-gap))) / 3)
        );
        grid-template-columns: repeat(8, var(--compact-pad-cell));
        grid-auto-rows: var(--compact-pad-cell);
        justify-content: center;
        align-content: center;
        gap: var(--compact-pad-gap);
        height: 100%;
    }

    .input-mode-buttons .compact-dart-pad button,
    .compact-dart-pad button {
        aspect-ratio: 1;
        min-height: 0;
        padding: 0;
        font-size: clamp(.8rem, 3.5vh, 1.05rem);
    }

    .input-mode-buttons .compact-dart-pad .compact-bull-button,
    .input-mode-buttons .compact-dart-pad .compact-miss-button,
    .dart-board-wrap .compact-dart-pad .compact-bull-button,
    .dart-board-wrap .compact-dart-pad .compact-miss-button {
        grid-column: span 1;
    }
}

/* Final play-layout guardrail. Keep this at the end so older responsive overrides cannot shrink the input area again. */
@media (max-width: 1080px) {
    .dart-app:has(.playing-grid) {
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        max-width: 100vw;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        overflow: clip;
    }

    .dart-app:has(.playing-grid) .playing-topbar {
        display: none;
    }

    .playing-grid,
    .playing-grid .game-panel {
        height: 100%;
        min-height: 0;
        margin-top: 0;
    }

    .playing-grid .game-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: var(--play-gap);
        overflow: clip;
    }

    .playing-grid .play-surface,
    .playing-grid .board-panel,
    .playing-grid .dart-board-wrap.input-mode-buttons,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad,
    .playing-grid .cricket-play-surface,
    .playing-grid .cricket-play-surface .board-panel,
    .playing-grid .cricket-pad {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        overflow: clip;
    }
}

@media (max-width: 620px) and (orientation: portrait) {
    .playing-grid .cricket-play-surface {
        align-items: stretch;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(0, 1fr));
        align-content: stretch;
        justify-content: stretch;
        gap: clamp(5px, 1.45vw, 8px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        aspect-ratio: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        font-size: clamp(1.05rem, 6.2vw, 1.75rem);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button {
        grid-column: span 2;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 3;
    }

    .playing-grid .cricket-pad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows:
            repeat(2, minmax(clamp(152px, 28dvh, 214px), 1fr))
            minmax(clamp(72px, 10dvh, 92px), .55fr);
        grid-auto-rows: auto;
        align-content: stretch;
        gap: clamp(4px, 1.25vw, 7px);
    }

    .playing-grid .cricket-out-button,
    .playing-grid .cricket-continue-button,
    .playing-grid .cricket-number-column,
    .playing-grid .bull-column {
        grid-column: span 1;
        grid-row: auto;
    }

    .playing-grid .cricket-continue-button {
        grid-column: 1 / -1;
    }

    .playing-grid .cricket-number-column {
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .playing-grid .bull-column {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .playing-grid .cricket-hit-button,
    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: clamp(4px, 1.2vw, 7px);
        font-size: clamp(1.05rem, 5.2vw, 1.55rem);
    }

    .playing-grid .cricket-out-button {
        font-size: 1.2rem;
    }
}

@media (min-width: 421px) and (max-width: 620px) and (orientation: portrait) {
    .playing-grid .cricket-pad {
        grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(clamp(70px, 9dvh, 84px), auto);
        align-content: stretch;
    }

    .playing-grid .cricket-continue-button {
        min-height: 0;
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    .dart-app:has(.playing-grid) {
        padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    }

    .playing-grid .game-panel {
        gap: clamp(4px, 1.15vh, 7px);
        padding: clamp(4px, 1.4vh, 7px);
    }

    .game-panel > .match-header {
        min-height: clamp(54px, 21vh, 82px);
        max-height: clamp(54px, 21vh, 82px);
        margin-bottom: 0;
    }

    .playing-grid .play-surface:not(.cricket-play-surface) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        align-content: stretch;
        justify-content: stretch;
        gap: clamp(4px, 1.35vh, 7px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 1;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        aspect-ratio: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        font-size: clamp(.95rem, 6.2vh, 1.55rem);
    }

    .playing-grid .cricket-pad {
        grid-template-columns: minmax(0, .85fr) repeat(6, minmax(0, 1fr)) minmax(0, .9fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: clamp(4px, 1.3vh, 7px);
    }

    .playing-grid .cricket-number-column {
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .playing-grid .bull-column {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .playing-grid .cricket-hit-button,
    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: clamp(3px, 1.15vh, 7px);
        font-size: clamp(.9rem, 5.2vh, 1.5rem);
    }
}

@media (orientation: landscape) and (min-height: 621px) and (max-width: 1080px) {
    .playing-grid .game-panel {
        padding: clamp(8px, 1.5vw, 12px);
    }

    .playing-grid .play-surface:not(.cricket-play-surface) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        align-content: stretch;
        justify-content: stretch;
        gap: clamp(6px, 1vw, 10px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 2;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        aspect-ratio: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        font-size: clamp(1.15rem, 3.8vw, 2rem);
    }
}

@media (min-width: 621px) and (max-width: 760px) and (min-height: 621px) {
    .playing-grid .cricket-pad {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr) minmax(clamp(76px, 10dvh, 92px), .32fr);
        grid-auto-flow: row;
        gap: clamp(6px, 1vw, 9px);
    }

    .playing-grid .cricket-number-column {
        grid-column: auto;
        grid-row: auto;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .playing-grid .bull-column {
        grid-column: 7;
        grid-row: 1;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .playing-grid .cricket-out-button {
        grid-column: 1 / span 2;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-height: 0;
        font-size: 1.2rem;
    }

    .playing-grid .cricket-continue-button {
        grid-column: 3 / -1;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .playing-grid .cricket-hit-button,
    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: clamp(5px, 1vw, 8px);
        font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    }
}

@media (min-width: 1081px) {
    .dart-app:has(.playing-grid) {
        height: 100dvh;
        max-width: 100vw;
        padding: 12px;
        overflow: clip;
    }

    .playing-grid {
        height: calc(100dvh - 108px);
        min-height: 0;
        margin-top: 10px;
    }

    .playing-grid .game-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        overflow: clip;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: 100%;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(8px, .8vw, 14px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 1;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        aspect-ratio: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        font-size: clamp(1.35rem, 2.2vw, 2.35rem);
    }
}

/* Device-capture fix: final orientation rules for the active scoring layout. */
@media (max-width: 1080px) {
    .dart-app:has(.playing-grid) {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        max-width: 100vw;
        padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        overflow: hidden;
    }

    .dart-app:has(.playing-grid) .playing-topbar {
        display: none;
    }

    .playing-grid,
    .playing-grid .game-panel,
    .playing-grid .play-surface,
    .playing-grid .board-panel,
    .playing-grid .dart-board-wrap.input-mode-buttons,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
    }

    .playing-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0;
    }

    .playing-grid .game-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    .playing-grid .play-surface:not(.cricket-play-surface),
    .playing-grid .dart-board-wrap.input-mode-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-self: stretch;
        align-items: stretch;
        justify-self: stretch;
        justify-items: stretch;
        overflow: hidden;
    }

    .playing-grid .board-panel:not(:has(.x01-finish-targets)):not(:has(.target-callout)) {
        grid-template-rows: minmax(0, 1fr);
    }

    .playing-grid .board-panel:has(.x01-finish-targets),
    .playing-grid .board-panel:has(.target-callout) {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        display: grid;
        align-content: stretch;
        justify-content: stretch;
        overflow: hidden;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        aspect-ratio: auto;
    }
}

@media (max-width: 620px) and (orientation: portrait) {
    .playing-grid .game-panel {
        grid-template-rows: minmax(max-content, auto) minmax(0, 1fr);
        gap: clamp(6px, 1.5vw, 9px);
        padding: clamp(8px, 2vw, 10px);
    }

    .playing-grid .game-panel > .match-header {
        max-height: none;
        overflow: visible;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(0, 1fr));
        gap: clamp(5px, 1.4vw, 8px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button {
        grid-column: span 2;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 3;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        font-size: clamp(1.25rem, 7vw, 2rem);
    }
}

@media (min-width: 621px) and (max-width: 1080px) and (orientation: portrait) {
    .playing-grid .game-panel {
        grid-template-rows: minmax(max-content, auto) minmax(0, 1fr);
        gap: clamp(8px, 1.2vw, 12px);
        padding: clamp(10px, 1.6vw, 14px);
    }

    .playing-grid .game-panel > .match-header {
        max-height: none;
        overflow: visible;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: clamp(7px, 1vw, 12px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 2;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        font-size: clamp(1.55rem, 4.8vw, 2.45rem);
    }
}

@media (orientation: landscape) and (max-height: 620px) {
    .dart-app:has(.playing-grid) {
        padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    }

    .playing-grid .game-panel {
        grid-template-rows: clamp(78px, 24dvh, 112px) minmax(0, 1fr);
        gap: clamp(4px, 1.2vh, 7px);
        padding: clamp(4px, 1.25vh, 7px);
    }

    .playing-grid .game-panel > .match-header {
        --compact-header-action-width: clamp(42px, 11vh, 56px);
        display: grid;
        grid-template-columns: minmax(88px, .72fr) minmax(0, 1.28fr) minmax(116px, 1fr) var(--compact-header-action-width);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(4px, 1.2vh, 7px);
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none;
        margin-bottom: 0;
        overflow: hidden;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(84px, .64fr) minmax(48px, .35fr) minmax(0, 1.12fr) minmax(110px, .9fr) var(--compact-header-action-width);
    }

    .playing-grid .play-heading,
    .playing-grid .play-target-tile,
    .playing-grid .play-score-tile,
    .playing-grid .play-throw-tile,
    .playing-grid .game-panel > .match-header .match-header-actions {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .playing-grid .play-heading {
        align-content: center;
    }

    .playing-grid .play-heading h2 {
        font-size: clamp(.92rem, 3.2vh, 1.28rem);
        line-height: 1.02;
    }

    .playing-grid .eyebrow {
        margin-bottom: 2px;
        font-size: clamp(.52rem, 1.95vh, .68rem);
        line-height: 1;
    }

    .playing-grid .play-score-tile,
    .playing-grid .play-throw-tile,
    .playing-grid .play-target-tile {
        padding: clamp(4px, 1.25vh, 7px);
    }

    .playing-grid .play-score-list {
        height: 100%;
        min-height: 0;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: clamp(2px, .8vh, 4px);
    }

    .playing-grid .play-score-row {
        min-height: 0;
        padding: 1px 5px;
    }

    .playing-grid .play-score-row span,
    .playing-grid .play-throw-head span,
    .playing-grid .play-throw-review span {
        font-size: clamp(.58rem, 2.15vh, .76rem);
        line-height: 1.05;
    }

    .playing-grid .play-score-row strong {
        font-size: clamp(.72rem, 2.7vh, .92rem);
    }

    .playing-grid .play-throw-head strong,
    .playing-grid .play-target-tile strong {
        font-size: clamp(1.25rem, 8vh, 2rem);
    }

    .playing-grid .play-throw-review strong {
        font-size: clamp(.82rem, 3vh, 1.1rem);
    }

    .playing-grid .game-panel > .match-header .match-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        width: var(--compact-header-action-width);
        gap: clamp(4px, 1.15vh, 6px);
    }

    .playing-grid .game-panel > .match-header .match-header-actions .compact-button {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        aspect-ratio: auto;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(4px, 1.25vh, 7px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 1;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        font-size: clamp(1.05rem, 7vh, 2rem);
    }
}

/* Cricket scoring layout: one action button, no unused vertical space. */
@media (max-width: 1080px) {
    .playing-grid .cricket-play-surface,
    .playing-grid .cricket-play-surface .board-panel,
    .playing-grid .cricket-pad {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        overflow: clip;
    }

    .playing-grid .cricket-play-surface,
    .playing-grid .cricket-play-surface .board-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
    }

    .playing-grid .cricket-pad {
        display: grid;
        align-content: stretch;
        justify-content: stretch;
        gap: clamp(5px, 1vw, 9px);
    }

    .playing-grid .cricket-number-column {
        grid-column: auto;
        grid-row: auto;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .playing-grid .bull-column {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .playing-grid .cricket-out-button,
    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: clamp(4px, 1vw, 8px);
    }

    .playing-grid .cricket-out-button.cricket-continue-button {
        border-color: rgba(45, 212, 191, .62);
        background: linear-gradient(135deg, var(--green), #0f7e4b);
        color: #f7fffb;
        font-size: clamp(1.15rem, 4vw, 1.6rem);
    }
}

@media (max-width: 620px) and (orientation: portrait) {
    .playing-grid .cricket-pad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(clamp(70px, 9dvh, 84px), .34fr);
    }

    .playing-grid .bull-column {
        grid-column: 3 / -1;
        grid-row: 2;
    }

    .playing-grid .cricket-out-button {
        grid-column: 1 / -1;
        grid-row: 3;
        font-size: 1.2rem;
    }

    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        font-size: clamp(1.05rem, 5.2vw, 1.55rem);
    }
}

@media (min-width: 621px) and (max-width: 1080px) {
    .playing-grid .cricket-pad {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr) minmax(clamp(72px, 9dvh, 92px), .28fr);
    }

    .playing-grid .bull-column {
        grid-column: 7;
        grid-row: 1;
    }

    .playing-grid .cricket-out-button {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: clamp(1.15rem, 2.8vw, 1.7rem);
    }

    .playing-grid .cricket-hit-column .cricket-hit-button,
    .playing-grid .bull-column .cricket-hit-button {
        font-size: clamp(1.15rem, 2.8vw, 1.75rem);
    }
}

/* Match-end screen: the result view may be taller than the mobile viewport. */
.dart-app:has(.summary-panel) {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

.dart-app:has(.summary-panel) .playing-grid,
.dart-app:has(.summary-panel) .playing-grid .summary-panel {
    height: auto;
    min-height: 0;
}

.playing-grid .summary-panel {
    overflow: visible;
}

.summary-panel {
    display: block;
}

.summary-panel .match-summary {
    margin-bottom: 0;
}

.summary-comparison {
    --summary-player-count: 2;
    min-width: 0;
    display: grid;
    gap: 1px;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--line) 72%, transparent);
}

.summary-comparison-head,
.summary-comparison-row {
    min-width: max(100%, calc(92px + (var(--summary-player-count) * 104px)));
    display: grid;
    grid-template-columns: minmax(88px, .78fr) repeat(var(--summary-player-count), minmax(96px, 1fr));
    align-items: stretch;
}

.summary-comparison-head > *,
.summary-comparison-row > * {
    min-width: 0;
    display: grid;
    align-items: center;
    padding: 9px 10px;
    overflow-wrap: anywhere;
}

/* Shanghai scoring viewport guardrails. */
.playing-grid .play-surface:has(.shanghai-throw-pad),
.playing-grid .play-surface:has(.shanghai-throw-pad) .board-panel,
.playing-grid .board-panel:has(.shanghai-throw-pad),
.playing-grid .shanghai-throw-pad {
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

.playing-grid .play-surface:has(.shanghai-throw-pad),
.playing-grid .play-surface:has(.shanghai-throw-pad) .board-panel,
.playing-grid .board-panel:has(.shanghai-throw-pad) {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    overflow: clip;
}

.playing-grid .shanghai-throw-pad {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(64px, .28fr) minmax(64px, .28fr);
    gap: clamp(6px, 1.2vmin, 12px);
    overflow: clip;
}

.playing-grid .shanghai-throw-pad:has(.shanghai-bull-grid) {
    grid-template-rows: minmax(0, 1fr) minmax(54px, .22fr) minmax(54px, .22fr) minmax(54px, .22fr);
}

.playing-grid .shanghai-target-hero,
.playing-grid .shanghai-segment-button,
.playing-grid .shanghai-miss-button {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.playing-grid .shanghai-target-hero {
    align-self: stretch;
}

.playing-grid .shanghai-segment-grid,
.playing-grid .shanghai-bull-grid {
    min-height: 0;
    gap: clamp(6px, 1.2vmin, 12px);
}

.playing-grid .shanghai-segment-button,
.playing-grid .shanghai-miss-button {
    padding: 0 clamp(7px, 1.2vmin, 12px);
    font-size: clamp(1.05rem, 2.8vmin, 1.65rem);
}

.playing-grid .shanghai-target-hero strong {
    font-size: clamp(5.6rem, 18vmin, 12rem);
}

.playing-grid .shanghai-continue-button .hit-dots {
    position: static;
    justify-content: center;
    margin-top: 8px;
}

@media (min-width: 1081px) and (max-height: 760px) {
    .dart-app:has(.playing-grid) {
        height: 100dvh;
        max-width: 100vw;
        padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        overflow: clip;
    }

    .dart-app:has(.playing-grid) .playing-topbar {
        display: none;
    }

    .playing-grid {
        height: 100%;
        margin-top: 0;
    }

    .playing-grid .game-panel {
        grid-template-rows: clamp(96px, 21dvh, 154px) minmax(0, 1fr);
        gap: clamp(6px, 1.15vh, 10px);
        padding: clamp(8px, 1.4vh, 12px);
    }

    .playing-grid .game-panel > .match-header {
        --compact-header-action-width: clamp(48px, 9vh, 66px);
        display: grid;
        grid-template-columns: minmax(150px, .74fr) minmax(0, 1.05fr) minmax(190px, .92fr) var(--compact-header-action-width);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(6px, 1.1vh, 10px);
        height: 100%;
        min-height: 0;
        margin-bottom: 0;
        overflow: hidden;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(150px, .76fr) minmax(90px, .34fr) minmax(0, 1.05fr) minmax(190px, .9fr) var(--compact-header-action-width);
    }

    .playing-grid .game-panel > .match-header .match-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        width: var(--compact-header-action-width);
        height: 100%;
        gap: clamp(5px, 1vh, 8px);
        overflow: hidden;
    }

    .playing-grid .game-panel > .match-header .match-header-actions .compact-button {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        aspect-ratio: auto;
    }

    .playing-grid .play-heading,
    .playing-grid .play-target-tile,
    .playing-grid .play-score-tile,
    .playing-grid .play-throw-tile {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .playing-grid .play-heading {
        align-content: center;
    }

    .playing-grid .play-heading h2 {
        font-size: clamp(1.15rem, 3.4vh, 1.65rem);
        line-height: 1.02;
    }

    .playing-grid .play-score-tile,
    .playing-grid .play-throw-tile,
    .playing-grid .play-target-tile {
        padding: clamp(7px, 1.2vh, 10px);
    }

    .playing-grid .play-score-list {
        height: 100%;
        min-height: 0;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .playing-grid .play-score-row {
        min-height: 0;
    }

    .playing-grid .play-throw-head strong,
    .playing-grid .play-target-tile strong {
        font-size: clamp(1.65rem, 6.4vh, 2.55rem);
    }

    .playing-grid .play-throw-review strong {
        font-size: clamp(1rem, 3.2vh, 1.35rem);
    }
}

@media (min-width: 621px) and (max-width: 1080px) and (orientation: portrait) {
    .playing-grid .shanghai-throw-pad {
        grid-template-rows: minmax(0, 1fr) minmax(96px, .25fr) minmax(80px, .2fr);
    }

    .playing-grid .shanghai-segment-button,
    .playing-grid .shanghai-miss-button {
        font-size: clamp(1.3rem, 3.2vw, 1.9rem);
    }
}

@media (orientation: landscape) and (max-height: 760px) {
    .playing-grid .shanghai-throw-pad {
        grid-template-rows: minmax(0, 1fr) minmax(58px, .3fr) minmax(58px, .3fr);
    }

    .playing-grid .shanghai-target-hero strong {
        font-size: clamp(5rem, 24vh, 10rem);
    }

    .playing-grid .shanghai-segment-button,
    .playing-grid .shanghai-miss-button {
        font-size: clamp(1rem, 4.5vh, 1.55rem);
    }
}

.summary-comparison-head {
    background: rgba(24, 168, 102, .14);
}

.summary-comparison-head span,
.summary-comparison-head strong,
.summary-comparison-row span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.summary-comparison-head strong {
    color: var(--text);
    text-transform: none;
}

.summary-comparison-row {
    background: rgba(255, 255, 255, .032);
}

.summary-comparison-row:nth-child(odd) {
    background: rgba(255, 255, 255, .048);
}

.summary-comparison-row strong {
    color: var(--text);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.05;
}

.summary-panel .score-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: stretch;
}

.summary-panel .score-card {
    min-height: 0;
    gap: 12px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 55%),
        linear-gradient(180deg, var(--panel), #0a100d);
}

.summary-panel .score-card .mini-stats {
    display: none;
}

.summary-panel .score-name {
    align-items: start;
}

.summary-panel .score-name strong {
    font-size: 1.12rem;
    line-height: 1.1;
}

.summary-panel .score-name span {
    color: color-mix(in srgb, var(--text) 70%, var(--muted));
    font-size: .86rem;
}

.summary-panel .remaining {
    color: var(--text);
    font-size: clamp(3.2rem, 13vw, 4.4rem);
    letter-spacing: 0;
}

.summary-panel .mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 1rem;
}

.summary-panel .mini-stat {
    min-height: 58px;
}

.summary-panel .score-card.winner .mini-stat {
    border-color: rgba(240, 198, 111, .16);
    background: rgba(240, 198, 111, .055);
}

@media (max-width: 620px) {
    .dart-app:has(.summary-panel) {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .dart-app:has(.summary-panel) .playing-grid {
        display: block;
    }

    .summary-panel {
        padding: 12px;
    }

    .summary-panel .match-summary {
        gap: 12px;
    }

    .summary-panel .match-summary > .match-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .summary-panel .match-summary-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .summary-panel .score-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .summary-panel .score-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
    }

    .summary-panel .score-name {
        display: grid;
        gap: 3px;
    }

    .summary-panel .score-name strong {
        font-size: .95rem;
    }

    .summary-panel .score-name span {
        font-size: .72rem;
    }

    .summary-panel .remaining {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .summary-panel .mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .summary-panel .mini-stat {
        min-height: 54px;
        padding: 8px 9px;
    }
}

/* Active X01 mobile scoring fix: keep checkout hints compact so the throw pad remains usable. */
@media (max-width: 620px) and (orientation: portrait) {
    .playing-grid .play-surface:not(.cricket-play-surface) {
        grid-template-rows: auto minmax(0, 1fr);
        gap: clamp(5px, 1.35vw, 7px);
        overflow: hidden;
    }

    .playing-grid .board-panel {
        grid-template-rows: auto minmax(0, 1fr);
        gap: clamp(5px, 1.35vw, 7px);
        overflow: hidden;
    }

    .playing-grid .x01-finish-targets {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(4px, 1.2vw, 6px);
    }

    .playing-grid .x01-finish-button {
        min-width: 0;
        min-height: clamp(38px, 8.6vw, 44px);
        height: clamp(38px, 8.6vw, 44px);
        padding: 0 clamp(6px, 1.6vw, 10px);
        font-size: clamp(.9rem, 3.8vw, 1.05rem);
        line-height: 1;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons {
        min-height: 0;
        overflow: hidden;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(42px, 1fr));
        gap: clamp(5px, 1.35vw, 7px);
        min-height: 0;
        overflow: hidden;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        min-height: 42px;
        font-size: clamp(1.35rem, 6.7vw, 1.9rem);
    }
}

/* 2026-08 responsive scoring fix:
   keep the in-game action buttons at the proven tablet size and let the score pad consume the remaining play area. */
@media (max-width: 1080px) {
    .playing-grid .game-panel {
        --match-action-size: 58px;
    }

    .playing-grid .game-panel > .match-header .match-header-actions,
    .playing-grid .x01-board-column .match-header .match-header-actions {
        width: var(--match-action-size);
        min-width: var(--match-action-size);
        display: grid;
        grid-template-columns: var(--match-action-size);
        grid-template-rows: repeat(2, var(--match-action-size));
        gap: clamp(5px, 1vw, 8px);
        align-content: start;
        align-self: stretch;
    }

    .playing-grid .game-panel > .match-header .match-header-actions .compact-button,
    .playing-grid .x01-board-column .match-header .match-header-actions .compact-button {
        width: var(--match-action-size);
        height: var(--match-action-size);
        min-width: var(--match-action-size);
        min-height: var(--match-action-size);
        aspect-ratio: 1;
        padding: 0;
        font-size: 1.2rem;
        line-height: 1;
    }

    .playing-grid .board-panel {
        display: grid;
        align-items: stretch;
        justify-items: stretch;
        overflow: hidden;
    }

    .playing-grid .board-panel:not(:has(.x01-finish-targets)):not(:has(.target-callout)) {
        grid-template-rows: minmax(0, 1fr);
    }

    .playing-grid .board-panel:has(.x01-finish-targets),
    .playing-grid .board-panel:has(.target-callout) {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons {
        align-self: stretch;
        justify-self: stretch;
        height: 100%;
        min-height: 0;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        height: 100%;
        min-height: 0;
        align-content: stretch;
        justify-content: stretch;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        min-height: 0;
    }
}

@media (min-width: 621px) and (max-width: 700px) and (orientation: portrait) {
    .playing-grid .game-panel {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .playing-grid .game-panel > .match-header {
        display: grid;
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) var(--match-action-size);
        grid-template-rows: auto auto;
        gap: clamp(6px, 1vw, 8px);
        align-items: stretch;
        overflow: visible;
    }

    .playing-grid .play-heading {
        grid-column: 1;
        grid-row: 1;
        overflow: visible;
    }

    .playing-grid .play-heading h2 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .playing-grid .play-clock {
        white-space: normal;
    }

    .playing-grid .play-score-tile {
        grid-column: 2;
        grid-row: 1;
    }

    .playing-grid .play-throw-tile {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(58px, .34fr) minmax(0, 1fr) var(--match-action-size);
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-heading {
        grid-column: 1 / 3;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-target-tile {
        grid-column: 1;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-score-tile {
        grid-column: 2;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-throw-tile {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .playing-grid .game-panel > .match-header .match-header-actions,
    .playing-grid .game-panel > .match-header:has(.play-target-tile) .match-header-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .match-header-actions {
        grid-row: 1;
    }
}

@media (max-width: 620px) and (orientation: portrait) {
    .playing-grid .game-panel > .match-header {
        grid-template-columns: minmax(0, 1fr) var(--match-action-size);
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(56px, .34fr) minmax(0, 1fr) var(--match-action-size);
    }

    .playing-grid .game-panel > .match-header .match-header-actions {
        grid-column: 2;
        grid-row: 1 / 3;
        width: var(--match-action-size);
        grid-template-columns: var(--match-action-size);
        grid-template-rows: repeat(2, var(--match-action-size));
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .match-header-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .playing-grid .play-heading {
        grid-column: 1;
        grid-row: 1;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-heading {
        grid-column: 1 / 3;
    }

    .playing-grid .play-score-tile {
        grid-column: 1;
        grid-row: 2;
    }

    .playing-grid .play-throw-tile {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-target-tile {
        grid-column: 1;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-score-tile {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-throw-tile {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button {
        grid-column: span 2;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 3;
    }
}

/* Compact portrait header: keep actions high and let throw summary close the row gap. */
@media (min-width: 521px) and (max-width: 620px) and (orientation: portrait) {
    .playing-grid .game-panel {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .playing-grid .game-panel > .match-header {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) var(--match-action-size);
        grid-template-rows: auto auto;
    }

    .playing-grid .play-heading {
        grid-column: 1;
        grid-row: 1;
    }

    .playing-grid .play-score-tile {
        grid-column: 2;
        grid-row: 1;
    }

    .playing-grid .play-throw-tile {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header .match-header-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) {
        grid-template-columns: minmax(58px, .34fr) minmax(0, 1fr) var(--match-action-size);
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-heading {
        grid-column: 1 / 3;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-target-tile {
        grid-column: 1;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-score-tile {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .play-throw-tile {
        grid-column: 1 / 4;
        grid-row: 3;
    }

    .playing-grid .game-panel > .match-header:has(.play-target-tile) .match-header-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .playing-grid .play-surface:not(.cricket-play-surface),
    .playing-grid .dart-board-wrap.input-mode-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        align-self: stretch;
        align-items: stretch;
        overflow: hidden;
    }

    .playing-grid .board-panel:not(:has(.x01-finish-targets)):not(:has(.target-callout)) {
        grid-template-rows: minmax(0, 1fr);
    }

    .playing-grid .board-panel:has(.x01-finish-targets),
    .playing-grid .board-panel:has(.target-callout) {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        height: 100%;
        min-height: 0;
        gap: clamp(5px, 1.35vw, 8px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 2;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        font-size: clamp(1.45rem, 6.7vw, 2.15rem);
    }
}

/* Narrow portrait scorer: trade columns for height so the touch targets use the viewport. */
@media (max-width: 520px) and (orientation: portrait) {
    .playing-grid .game-panel {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .playing-grid .game-panel > .match-header {
        grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) var(--match-action-size);
        grid-template-rows: auto auto auto;
    }

    .playing-grid .play-heading {
        grid-column: 1 / -1;
        grid-row: 1;
        overflow: visible;
    }

    .playing-grid .play-heading h2 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .playing-grid .play-clock {
        white-space: normal;
    }

    .playing-grid .play-score-tile {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .playing-grid .play-throw-tile {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .playing-grid .game-panel > .match-header .match-header-actions {
        grid-column: 3;
        grid-row: 2;
    }

    .playing-grid .play-surface:not(.cricket-play-surface),
    .playing-grid .dart-board-wrap.input-mode-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        align-self: stretch;
        align-items: stretch;
        overflow: hidden;
    }

    .playing-grid .board-panel:not(:has(.x01-finish-targets)):not(:has(.target-callout)) {
        grid-template-rows: minmax(0, 1fr);
    }

    .playing-grid .board-panel:has(.x01-finish-targets),
    .playing-grid .board-panel:has(.target-callout) {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        height: 100%;
        min-height: 0;
        gap: clamp(5px, 1.5vw, 8px);
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-bull-button,
    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad .compact-miss-button {
        grid-column: span 2;
    }

    .playing-grid .dart-board-wrap.input-mode-buttons .compact-dart-pad button {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        font-size: clamp(1.45rem, 8vw, 2.15rem);
    }
}

/* Final theme overrides: loaded after the legacy responsive rules. */
:root {
    color-scheme: light;
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f8f9fb;
    --panel: var(--surface);
    --panel-2: var(--surface-2);
    --panel-strong: #eef4ff;
    --text: #17191d;
    --muted: #747b86;
    --line: #e2e5e9;
    --accent: #2563eb;
    --accent-soft: #eef4ff;
    --green: #2563eb;
    --success: #1f9d61;
    --red: #c93d3d;
    --gold: #b8821b;
    --ink: #ffffff;
    --shadow: 0 8px 24px rgba(20, 24, 31, .06);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111315;
    --surface: #181b1f;
    --surface-2: #20242a;
    --panel: var(--surface);
    --panel-2: var(--surface-2);
    --panel-strong: #1b2029;
    --text: #f2f4f7;
    --muted: #9aa3ad;
    --line: #2c3138;
    --accent: #6f8cff;
    --accent-soft: #202a45;
    --green: #6f8cff;
    --success: #48c78e;
    --red: #ff7878;
    --gold: #e3b760;
    --ink: #17191d;
    --shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

body {
    background: var(--bg);
    color: var(--text);
}

.dart-app {
    width: min(1180px, 100%);
    padding: 18px 20px 40px;
}

.dart-topbar,
.setup-panel,
.game-panel,
.cricket-table,
.stats-strip,
.history-panel,
.chat-panel,
.throw-panel,
.board-panel,
.match-summary,
.score-card,
.setup-section,
.config-field,
.segmented-field.config-field,
.config-toggle-card,
.offline-box,
.online-lobby-settings,
.play-score-tile,
.play-throw-tile,
.target-callout,
.history-row,
.chat-log,
.summary-comparison,
.stat-metrics article {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

.dart-topbar {
    min-height: 64px;
    border-radius: 12px;
    padding: 0 18px;
    backdrop-filter: none;
}

.brand-mark {
    color: var(--text);
    text-decoration: none;
}

.brand-dot {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--text);
}

.version-badge,
.connection-pill {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--muted);
}

.connection-pill.online {
    border-color: color-mix(in srgb, var(--success) 45%, var(--line));
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--success);
}

.top-actions a,
.top-actions button,
.theme-toggle,
.topbar-back-button,
.compact-button,
.ghost-button,
.icon-button,
.participant-option,
.selected-participant,
.roster-row,
.bot-profile,
.selected-mode-strip,
.setup-mode-picker button,
.lobby-control,
.online-accordion,
.online-summary,
.online-content {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 16px;
}

.theme-toggle:hover,
.top-actions a:hover,
.top-actions button:hover,
.online-summary:hover {
    background: var(--surface-2);
}

.mode-start {
    gap: 24px;
}

.mode-tile-grid {
    gap: 10px;
}

.mode-tile {
    min-height: 94px;
    grid-template-columns: 46px 1fr auto;
    align-content: center;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-color: var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
}

.mode-tile::after {
    content: "›";
    color: var(--muted);
    font-size: 18px;
}

.mode-tile:hover {
    border-color: color-mix(in srgb, var(--muted) 35%, var(--line));
    background: var(--surface-2);
    transform: translateY(-1px);
}

.mode-tile span,
.selected-mode-strip span,
.setup-mode-picker span {
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: color-mix(in srgb, var(--text) 70%, var(--muted));
    font-size: .76rem;
}

.mode-tile strong {
    font-size: 1.1rem;
    letter-spacing: 0;
    line-height: 1.1;
}

.mode-tile.active {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
    box-shadow: inset 3px 0 0 var(--accent);
}

.mode-tile.active span,
.setup-mode-picker button.active span {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: var(--accent-soft);
    color: var(--accent);
}

.primary-button,
.segmented-control button.active,
.lobby-toggle button.active,
.lobby-toggle button.join-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
    box-shadow: none;
}

input,
select,
textarea,
.segmented-control,
.switch-track,
.shanghai-target-strip,
.lobby-toggle {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

label,
.range-field-head span,
.segmented-field,
.config-toggle-card strong,
.selected-mode-strip strong {
    color: var(--text);
}

.eyebrow,
.start-section-label,
.muted,
small,
.install-note,
.mini-stats,
.dart-row span {
    color: var(--muted);
}

.online-accordion {
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
}

.online-accordion > summary {
    list-style: none;
}

.online-accordion > summary::-webkit-details-marker {
    display: none;
}

.online-summary {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
}

.online-summary span:first-child,
.online-content {
    display: grid;
    gap: 10px;
}

.online-summary small {
    color: var(--muted);
}

.online-chevron {
    color: var(--muted);
    transition: transform .18s ease;
}

.online-accordion[open] .online-chevron {
    transform: rotate(180deg);
}

.online-content {
    padding: 0 10px 10px;
}

.setup-panel,
.game-panel,
.throw-panel,
.board-panel,
.score-card,
.setup-section {
    border-radius: 12px;
}

@media (max-width: 620px) {
    .dart-app {
        padding: 10px;
    }

    .dart-topbar {
        padding: 10px 12px;
        align-items: flex-start;
    }

    .mode-tile {
        grid-template-columns: 40px 1fr auto;
    }

    .mode-tile span {
        width: 40px;
        height: 40px;
    }

    .lobby-join-row {
        grid-template-columns: 1fr;
    }
}