/* ============================================
   Game-Specific Styles
   Cricket grid, X01 history, keypad, controls
   ============================================ */

/* === Cricket Grid Rows === */
.cricket-row {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(50px, 8dvh, 90px);
    padding: 0 var(--space-xs);
}

/* Player count layouts — fixed center column so Bull aligns with others */
.cricket-row.one-player {
    grid-template-columns: 1fr var(--cricket-center-col) 1fr;
}

.cricket-row.two-player {
    grid-template-columns: 1fr var(--cricket-center-col) 1fr;
}

.cricket-row.three-player {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--cricket-center-col) minmax(0, 2fr);
}

.cricket-row.four-player {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--cricket-center-col) minmax(0, 1fr) minmax(0, 1fr);
}

/* Spanish rows — slightly compact */
.cricket-row.spanish {
    min-height: clamp(42px, 6.5dvh, 75px);
}

/* Minnesota rows — use full screen height (1.95x baked in) */
/* Minnesota has 10 rows (20-15, Bull, Triples, Doubles, Bed) vs 7 for
   standard cricket. Keep min-height tight so all 10 fit within the main
   area without BED being clipped below the fold. */
.cricket-row.minnesota {
    min-height: clamp(36px, 5.5dvh, 68px);
}

/* Minnesota buttons are larger — fixed center column sized for D+num+T+gaps+padding */
.cricket-row.minnesota.one-player,
.cricket-row.minnesota.two-player {
    grid-template-columns: 1fr var(--minnesota-center-col) 1fr;
}
.cricket-row.minnesota.three-player {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--minnesota-center-col) minmax(0, 2fr);
}
.cricket-row.minnesota.four-player {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--minnesota-center-col) minmax(0, 1fr) minmax(0, 1fr);
}

/* Pad buttons so they sit inside the separator lines */
.cricket-row.minnesota .cricket-buttons {
    padding: 0 4px;
}

/* === Mark Symbols === */
.mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(clamp(58px, 10.5dvh, 100px) * var(--ui-scale));
    height: calc(clamp(58px, 10.5dvh, 100px) * var(--ui-scale));
}

.mark svg {
    width: 100%;
    height: 100%;
}

/* Boobie center dot — revealed on tap to flag a closed-in-one-turn. */
.mark.show-dot .boobie-dot {
    opacity: 1;
}

.mark.spanish {
    width: calc(clamp(34px, 5.4dvh, 62px) * var(--ui-scale));
    height: calc(clamp(34px, 5.4dvh, 62px) * var(--ui-scale));
}

.mark.minnesota {
    width: calc(clamp(36px, 5.6dvh, 68px) * var(--ui-scale));
    height: calc(clamp(36px, 5.6dvh, 68px) * var(--ui-scale));
}

/* Cricket cell — centers marks and scores */
.cricket-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
}

/* Active player column highlight — bold stripe */
/* Active player column — bold primary-color stripes down both sides of
   each cell plus a faint wash. Reads clearly across the room and ties
   visually to the active player header at the top. */
.cricket-cell.active {
    /* Themed gradient — uses a CSS color-mix when supported, falls back to
       a flat primary tint otherwise. Stops are at the same 4 positions but
       the color is theme-driven, so red/neon themes don't get a blue wash. */
    background: var(--color-primary);
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-primary) 28%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 8%, transparent) 18%,
        color-mix(in srgb, var(--color-primary) 8%, transparent) 82%,
        color-mix(in srgb, var(--color-primary) 28%, transparent) 100%
    );
    box-shadow:
        inset 6px 0 0 var(--color-primary-light),
        inset -6px 0 0 var(--color-primary-light);
}

/* With 3–4 players the header already gives a strong active-player cue.
   Per-row fills turn into stacked colored boxes and obscure enlarged chalk
   marks, so keep the multiplayer board itself clean. */
.cricket-row.three-player > .cricket-cell.active,
.cricket-row.four-player > .cricket-cell.active {
    background: transparent;
    box-shadow: none;
}

/* === Player Column Separators ===
   Borders go on player cells (fixed 1fr columns), NOT on the button
   container, so they align perfectly even when center column is auto-sized. */

/* 2-player: [P1 | buttons | P2] */
.cricket-row.two-player > .cricket-cell:first-child {
    border-right: 1px solid var(--color-border);
}
.cricket-row.two-player > .cricket-cell:last-child {
    border-left: 1px solid var(--color-border);
}

/* 3/4-player boards intentionally have no full-height column rules. At high
   UI scale those rules cut through enlarged marks and read as stray lines. */

/* Cricket buttons column */
.cricket-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Player mark containers */
.home-marks,
.away-marks,
.player3-marks,
.player4-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    min-height: 100%;
}

/* === Cricket Buttons (D / Number / T) === */
.buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.cricket-num-btn {
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    user-select: none;
    /* Two-stop themed gradient — was a three-stop band w/ hardcoded blues
       that read as a rainbow under non-blue themes. Now everything tracks
       the primary scale. */
    background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-on-primary);
    font-size: calc(clamp(1.4rem, 4.5dvh, 3rem) * var(--ui-scale));
    padding: calc(clamp(8px, 2.5dvh, 22px) * var(--ui-scale)) calc(clamp(14px, 4vw, 32px) * var(--ui-scale));
    min-width: clamp(50px, 12vw, 100px);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.cricket-num-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
}

.cricket-num-btn.dimmed {
    background: #444;
    color: var(--color-text-dim);
}

.cricket-dt-btn {
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    user-select: none;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-on-primary);
    font-size: calc(clamp(0.8rem, 2.5dvh, 1.5rem) * var(--ui-scale));
    padding: calc(clamp(4px, 1.5dvh, 14px) * var(--ui-scale)) calc(clamp(6px, 1.5vw, 14px) * var(--ui-scale));
    min-width: clamp(28px, 6vw, 50px);
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.cricket-dt-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    background: linear-gradient(180deg, var(--color-primary-dark), var(--color-primary-dark));
    filter: brightness(0.8);
}

.cricket-dt-btn.dimmed {
    background: #444;
    color: var(--color-text-dim);
}

/* Fake spacer for Bull row — same size as T button but invisible */
.cricket-dt-btn.fake-spacer {
    background: transparent;
    border: none;
    pointer-events: none;
    visibility: hidden;
}

/* Spanish buttons — ~80% of standard */
.cricket-num-btn.spanish {
    font-size: calc(clamp(1.1rem, 3.6dvh, 2.4rem) * var(--ui-scale));
    padding: calc(clamp(6px, 2dvh, 18px) * var(--ui-scale)) calc(clamp(11px, 3.2vw, 26px) * var(--ui-scale));
    min-width: clamp(40px, 10vw, 80px);
}

.cricket-dt-btn.spanish {
    font-size: calc(clamp(0.65rem, 2dvh, 1.2rem) * var(--ui-scale));
    padding: calc(clamp(3px, 1.2dvh, 11px) * var(--ui-scale)) calc(clamp(5px, 1.2vw, 11px) * var(--ui-scale));
    min-width: clamp(22px, 5vw, 40px);
}

/* Minnesota buttons — scaled to fit 10 rows in the main area on tablet. */
.cricket-num-btn.minnesota {
    font-size: calc(clamp(1.3rem, 3.4dvh, 2.2rem) * var(--ui-scale));
    padding: calc(clamp(4px, 1.2dvh, 14px) * var(--ui-scale)) calc(clamp(10px, 2.6vw, 26px) * var(--ui-scale));
    min-width: clamp(52px, 12vw, 96px);
}

.cricket-dt-btn.minnesota {
    font-size: calc(clamp(0.95rem, 2.2dvh, 1.55rem) * var(--ui-scale));
    padding: calc(clamp(3px, 1.1dvh, 12px) * var(--ui-scale)) calc(clamp(3px, 0.9vw, 10px) * var(--ui-scale));
    min-width: clamp(28px, 6vw, 46px);
}

/* === Last Turn Indicators === */
.last-turn-indicator {
    font-weight: bold;
    font-size: calc(clamp(0.95rem, 2.4dvh, 1.4rem) * var(--ui-scale));
    position: absolute;
    right: 4px;
    top: 4px;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}

.last-turn-indicator.pending-indicator {
    color: #102014;
    background: var(--color-pending);
    border: 1px solid color-mix(in srgb, var(--color-pending) 70%, white);
    min-width: 1.8em;
    text-align: center;
    z-index: 2;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.cricket-row.three-player .last-turn-indicator,
.cricket-row.four-player .last-turn-indicator {
    right: 2px;
    top: 2px;
    font-size: clamp(0.68rem, 1.6dvh, 0.95rem);
    padding: 1px 3px;
}

.last-turn-indicator.prev-turn-indicator {
    color: var(--color-prev-turn);
    font-size: calc(clamp(0.8rem, 2dvh, 1.15rem) * var(--ui-scale));
    background: rgba(0,0,0,0.45);
}

/* === Cricket Bottom Controls === */
.cricket-controls-left,
.cricket-controls-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    /* Keep UNDO/MISS anchored at the bottom so showing/hiding REDO or ENTER
       does not shift the primary button under the player's thumb. */
    justify-content: flex-end;
}

.cricket-controls-right {
    align-items: flex-end;
}

/* MISS/ENTER slot — both buttons occupy the same cell */
.miss-enter-slot {
    display: grid;
}

.miss-enter-slot > button {
    grid-row: 1;
    grid-column: 1;
}

/* Bigger ENTER and MISS buttons in cricket */
#enterBtn, #missBtn {
    font-size: calc(clamp(1.2rem, 3dvh, 1.8rem) * var(--ui-scale));
    padding: calc(clamp(12px, 2.5dvh, 24px) * var(--ui-scale)) calc(clamp(20px, 4vw, 40px) * var(--ui-scale));
    min-height: calc(clamp(48px, 7dvh, 72px) * var(--ui-scale));
}

/* Scoring action buttons: block scroll-gesture capture so taps never
   get reinterpreted as a drag. Combined with pointerdown handlers,
   these fire the instant the finger lands. */
#enterBtn, #missBtn,
#x01EnterBtn, #x01MissBtn, #x01BustBtn {
    touch-action: none;
    user-select: none;
}

.center-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.pending-text {
    color: var(--color-primary-light);
    font-size: var(--font-md);
    text-align: center;
    min-height: 1.5em;
}

.score-diff-indicator {
    text-align: center;
    font-weight: bold;
    font-size: var(--font-xl);
    min-height: 1.5em;
}

/* === X01 Score History === */
.score-history-col {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--space-xs) var(--space-sm);
    scrollbar-width: thin;
    scrollbar-color: #444 var(--color-surface);
}

.score-history-col.left {
    text-align: center;
    border-right: 1px solid var(--color-border);
}

.score-history-col.right {
    text-align: center;
    border-left: 1px solid var(--color-border);
}

.round-numbers-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xs);
    overflow-y: auto;
    scrollbar-width: none;
    min-width: 35px;
}

.round-number {
    font-size: var(--font-md);
    color: var(--color-text-dim);
    padding: var(--space-xs) var(--space-sm);
    min-height: clamp(32px, 5dvh, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.round-number.current {
    color: var(--color-primary-light);
    font-weight: bold;
}

.score-history-entry {
    font-size: calc(clamp(1.8rem, 6dvh, 2.8rem) * var(--ui-scale));
    font-weight: bold;
    padding: var(--space-xs) var(--space-sm);
    min-height: calc(clamp(36px, 6dvh, 56px) * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-history-entry.current {
    color: var(--color-primary-light);
    font-weight: bold;
}

.score-history-entry.bust {
    color: #ff4444;
    font-size: calc(clamp(1.1rem, 3.6dvh, 1.7rem) * var(--ui-scale));
    letter-spacing: 0.02em;
}

.score-history-entry.miss {
    color: var(--color-text-muted);
    font-size: calc(clamp(1.1rem, 3.6dvh, 1.7rem) * var(--ui-scale));
    letter-spacing: 0.02em;
}

/* Remaining-score entry mode (tap active player's score to toggle) */
.input-display.remaining-mode {
    border-color: var(--color-primary);
    color: var(--color-primary-light, var(--color-primary));
}

/* === X01 Controls Area === */
.checkout-suggestion {
    background: color-mix(in srgb, var(--color-primary) 25%, transparent);
    color: var(--color-primary-light);
    text-align: center;
    padding: var(--space-md);
    font-size: calc(var(--font-2xl) * var(--ui-scale));
    font-weight: bold;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
    line-height: 1.1;
}

.finish-indicator {
    text-align: center;
    font-weight: bold;
    font-size: var(--font-lg);
    padding: var(--space-xs);
    min-height: clamp(20px, 3dvh, 30px);
}

/* Input row: Undo | [Redo] | Display */
.x01-input-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    align-items: center;
}

.input-display {
    flex: 1;
    background: var(--color-surface-alt);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    font-size: calc(clamp(1.8rem, 5dvh, 3rem) * var(--ui-scale));
    font-weight: bold;
    text-align: center;
    color: var(--color-text);
    min-height: calc(clamp(48px, 7dvh, 72px) * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}

/* === Number Pad === */
.number-pad {
    display: flex;
    gap: var(--space-sm);
    flex: 1;
}

.quick-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 0 0 auto;
    width: clamp(42px, 10vw, 65px);
}

.pad-center {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
}

.x01-num-btn {
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: bold;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    background: #ccc;
    /* Fixed ink on a fixed #ccc pad — --color-text-dark flips to white in
       light themes (Arctic) and would vanish on the grey keys. */
    color: #1a1a1a;
    border: 2px solid #999;
    font-size: calc(clamp(1.1rem, 3dvh, 1.8rem) * var(--ui-scale));
    padding: calc(clamp(8px, 1.5dvh, 18px) * var(--ui-scale));
}

.x01-num-btn:active {
    opacity: 0.8;
}

.x01-quick-btn {
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: bold;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    background: var(--color-primary-dark);
    color: var(--color-on-primary);
    font-size: calc(clamp(0.75rem, 1.8dvh, 1.1rem) * var(--ui-scale));
    padding: calc(clamp(6px, 1.2dvh, 14px) * var(--ui-scale)) clamp(2px, 0.5vw, 6px);
    flex: 1;
}

.x01-quick-btn:active {
    opacity: 0.8;
}

/* X01 bottom row: MISS | BUST | ENTER */
.x01-bottom-row {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.x01-bottom-row .btn {
    flex: 1;
}

/* === Blakeout Message === */
.blakeout-message {
    font-size: var(--font-xl);
    color: var(--color-pending);
    font-weight: bold;
    margin: var(--space-lg) 0;
}

.blakeout-message span {
    font-size: var(--font-md);
}

/* === Keypad Modal (Minnesota scoring) === */
.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.keypad-display {
    font-size: var(--font-2xl);
    text-align: center;
    margin: var(--space-xl) 0;
    min-height: 60px;
}

/* === Landscape adaptations === */
@media (orientation: landscape) {
    .cricket-row {
        min-height: clamp(28px, 5dvh, 45px);
    }

    .mark {
        width: clamp(26px, 5dvh, 46px);
        height: clamp(26px, 5dvh, 46px);
    }

    .cricket-num-btn {
        font-size: clamp(0.9rem, 2.5dvh, 1.5rem);
        padding: clamp(4px, 1dvh, 10px) clamp(8px, 2vw, 16px);
    }

    .cricket-dt-btn {
        font-size: clamp(0.6rem, 1.5dvh, 1rem);
        padding: clamp(3px, 0.8dvh, 6px) clamp(4px, 1vw, 10px);
    }

    .x01-num-btn {
        padding: clamp(6px, 1.5dvh, 14px);
        font-size: clamp(1rem, 2.5dvh, 1.5rem);
    }
}

@media (orientation: landscape) and (max-height: 800px) {
    .cricket-row.spanish,
    .cricket-row.minnesota {
        min-height: clamp(24px, 4dvh, 36px);
    }

    .mark.spanish,
    .mark.minnesota {
        width: clamp(22px, 3.5dvh, 36px);
        height: clamp(22px, 3.5dvh, 36px);
    }
}

@media (max-width: 600px) {
    .cricket-row.three-player .cricket-buttons,
    .cricket-row.four-player .cricket-buttons {
        width: 100%;
        min-width: 0;
    }

    .cricket-row.three-player .cricket-num-btn,
    .cricket-row.four-player .cricket-num-btn {
        min-width: 0;
        font-size: clamp(0.9rem, calc(3.8vw * var(--ui-scale)), 1.5rem);
        padding: clamp(3px, calc(1vw * var(--ui-scale)), 6px)
                 clamp(4px, calc(1.5vw * var(--ui-scale)), 8px);
    }

    .cricket-row.three-player .cricket-dt-btn,
    .cricket-row.four-player .cricket-dt-btn {
        min-width: 0;
        font-size: clamp(0.65rem, calc(2.4vw * var(--ui-scale)), 1rem);
        padding: clamp(2px, calc(0.7vw * var(--ui-scale)), 4px)
                 clamp(2px, calc(0.8vw * var(--ui-scale)), 5px);
    }
}

/* Large tablets — more breathing room */
@media (min-height: 1200px) {
    .cricket-row {
        min-height: clamp(50px, 7dvh, 85px);
    }

    .mark {
        width: clamp(48px, 7.5dvh, 78px);
        height: clamp(48px, 7.5dvh, 78px);
    }
}

/* Multiplayer chalk marks must fit BOTH their narrow player lane and their
   row. The old width-only max let UI scale 1.1–1.5 make marks overlap rows,
   clip at column edges, and force grid tracks wider than the viewport. */
.cricket-row.three-player .mark,
.cricket-row.four-player .mark {
    --multiplayer-mark-size: clamp(38px, 5dvh, 72px);
    width: min(calc(var(--multiplayer-mark-size) * var(--ui-scale)), calc(100% - 10px));
    height: min(calc(var(--multiplayer-mark-size) * var(--ui-scale)), calc(100% - 10px));
    max-width: calc(100% - 10px);
    max-height: calc(100% - 10px);
    aspect-ratio: 1;
    flex: 0 1 auto;
}

.cricket-row.three-player .mark.spanish,
.cricket-row.four-player .mark.spanish,
.cricket-row.three-player .mark.minnesota,
.cricket-row.four-player .mark.minnesota {
    --multiplayer-mark-size: clamp(30px, 4.2dvh, 58px);
}

/* ============================================
   X01 keypad skin — "modern"
   ============================================
   The classic pad above stays the default-capable baseline. Everything in
   this block only applies when the user picks Modern in Settings, which
   sets data-x01-skin="modern" on <html> (same mechanism as data-theme).
   All colours come from theme tokens so every theme still works.
   ============================================ */

:root[data-x01-skin="modern"] .checkout-suggestion {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-primary) 34%, transparent),
        color-mix(in srgb, var(--color-primary) 15%, transparent));
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-weight: 800;
}

:root[data-x01-skin="modern"] .finish-indicator {
    font-size: var(--font-md);
    font-weight: 700;
    letter-spacing: 0.09em;
}

:root[data-x01-skin="modern"] .x01-input-row {
    align-items: stretch;
}

:root[data-x01-skin="modern"] .x01-input-row .btn {
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
}

:root[data-x01-skin="modern"] .input-display {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-bg) 55%, var(--color-surface-alt)),
        var(--color-surface-alt));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
    padding: var(--space-sm) var(--space-lg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

/* Three lanes: quick scores | keypad | quick scores. Capped and centred so
   keys stay near-square on wide tablets instead of stretching into slabs. */
:root[data-x01-skin="modern"] .number-pad {
    --x01-quick-col: clamp(46px, 10vw, 78px);
    display: grid;
    grid-template-columns: var(--x01-quick-col) minmax(0, 1fr) var(--x01-quick-col);
    gap: var(--space-sm);
    min-height: 0;
    width: 100%;
    max-width: min(100%, 620px);
    margin-inline: auto;
}

:root[data-x01-skin="modern"] .quick-col {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

:root[data-x01-skin="modern"] .pad-center {
    grid-auto-rows: 1fr;
    min-height: 0;
    min-width: 0;
}

:root[data-x01-skin="modern"] .x01-num-btn {
    /* Theme-token keys. The classic pad is fixed #ccc plastic, which had to
       hardcode its ink to survive the light Arctic theme. */
    background: linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface));
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
    font-weight: 700;
    font-size: calc(clamp(1.2rem, 3.4dvh, 2rem) * var(--ui-scale));
    font-variant-numeric: tabular-nums;
    padding: calc(clamp(6px, 1.2dvh, 14px) * var(--ui-scale));
    transition: background var(--transition-fast), transform 0.06s ease, box-shadow 0.06s ease;
}

/* × and + read as modifiers, not digits. */
:root[data-x01-skin="modern"] .x01-num-btn[data-op] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-primary) 26%, var(--color-surface-elevated)),
        color-mix(in srgb, var(--color-primary) 13%, var(--color-surface)));
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    color: var(--color-primary-light);
}

:root[data-x01-skin="modern"] .x01-num-btn:active {
    opacity: 1;
    transform: translateY(2px);
    box-shadow: none;
    background: color-mix(in srgb, var(--color-primary) 32%, var(--color-surface-elevated));
}

:root[data-x01-skin="modern"] .x01-quick-btn {
    background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 48%, transparent);
    color: var(--color-primary-light);
    border-radius: var(--radius-md);
    font-weight: 800;
    font-size: calc(clamp(0.85rem, 2dvh, 1.25rem) * var(--ui-scale));
    font-variant-numeric: tabular-nums;
    padding: calc(clamp(4px, 1dvh, 10px) * var(--ui-scale)) 2px;
    transition: background var(--transition-fast), transform 0.06s ease;
}

:root[data-x01-skin="modern"] .x01-quick-btn:active {
    opacity: 1;
    transform: translateY(1px);
    background: color-mix(in srgb, var(--color-primary) 48%, var(--color-surface));
    color: var(--color-on-primary);
}

:root[data-x01-skin="modern"] .x01-bottom-row {
    margin-top: var(--space-md);
}

:root[data-x01-skin="modern"] .x01-bottom-row .btn {
    border-radius: var(--radius-lg);
    letter-spacing: 0.08em;
}

/* History lanes: softer rules, a round rail, and receding older turns. */
:root[data-x01-skin="modern"] .score-history-col {
    scrollbar-color: var(--color-border) transparent;
}

:root[data-x01-skin="modern"] .score-history-col.left {
    border-right-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}

:root[data-x01-skin="modern"] .score-history-col.right {
    border-left-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}

:root[data-x01-skin="modern"] .round-numbers-col {
    min-width: 42px;
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

:root[data-x01-skin="modern"] .round-number {
    font-size: var(--font-sm);
    font-weight: 700;
    padding: var(--space-xs);
}

:root[data-x01-skin="modern"] .round-number.current {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    min-width: 26px;
    font-weight: 800;
}

:root[data-x01-skin="modern"] .score-history-entry {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

:root[data-x01-skin="modern"] .score-history-col > .score-history-entry:last-of-type,
:root[data-x01-skin="modern"] .score-history-col > .score-history-entry:nth-last-of-type(2) {
    color: var(--color-text);
}

:root[data-x01-skin="modern"] .score-history-entry.current {
    color: var(--color-primary-light);
}

:root[data-x01-skin="modern"] .score-history-entry.bust {
    color: var(--color-danger);
}

/* Landscape gives the pad more room than the classic 40dvh floor, which is
   what squashed the keys into wide slabs on tablets. */
@media (orientation: landscape) {
    :root[data-x01-skin="modern"] #x01Controls {
        min-height: 54dvh;
    }

    :root[data-x01-skin="modern"] .x01-num-btn {
        padding: calc(clamp(4px, 1dvh, 12px) * var(--ui-scale));
        font-size: calc(clamp(1.1rem, 3dvh, 1.8rem) * var(--ui-scale));
    }
}

/* Keep the whole control stack on one centred column so the display,
   pad and action row share an edge instead of spanning wall-to-wall. */
:root[data-x01-skin="modern"] #x01Controls > * {
    width: 100%;
    max-width: min(100%, 620px);
    margin-inline: auto;
}

/* Player header: the classic skin paints flat primary/#666 blocks. Modern
   softens them into gradients with an accent rail on the active player. */
:root[data-x01-skin="modern"] .player-header {
    position: relative;
}

:root[data-x01-skin="modern"] .player-header.active {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-active-player) 92%, #fff),
        var(--color-active-player));
}

:root[data-x01-skin="modern"] .player-header.active::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--color-primary-light, var(--color-primary));
}

:root[data-x01-skin="modern"] .player-header.inactive {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-inactive-player) 34%, var(--color-surface)),
        color-mix(in srgb, var(--color-inactive-player) 18%, var(--color-surface)));
    opacity: 0.9;
}

:root[data-x01-skin="modern"] .score-big {
    border-radius: var(--radius-lg);
    text-shadow: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

:root[data-x01-skin="modern"] .center-logo {
    background: var(--color-surface-alt);
}

:root[data-x01-skin="modern"] .round-badge {
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

:root[data-x01-skin="modern"] .end-game-btn {
    border-width: 1px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
}

/* ============================================
   Scoreboard mode — "DC"
   ============================================
   A black/red tournament-board presentation for X01 and Cricket-family
    engines. Scoping comes from app.js so unrelated target/party layouts stay untouched.
   ============================================ */

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] {
    --dc-red: #ba0014;
    --dc-red-dark: #76000f;
    --dc-yellow: #fff000;
    --dc-silver: #eeeeee;
    --dc-gray: #858585;
    --dc-border: #8b8b8b;
    background: #000;
    color: #fff;
    font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

/* Header: active name band + reversed active score, with the round on the
   narrow center rail. This remains responsive to the existing 1–4 player
   grid rather than imposing a two-player-only DOM. */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .score-header {
    background: #000;
    border-bottom: 2px solid var(--dc-silver);
    column-gap: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-header {
    padding: 4px 6px 6px;
    background: #000;
    color: var(--dc-gray);
    opacity: 1;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-name {
    min-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dc-gray);
    background: #000;
    font-family: inherit;
    font-size: calc(clamp(1.35rem, 4.1vw, 2.55rem) * var(--ui-scale));
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-header.active .player-name {
    color: #fff;
    background: linear-gradient(180deg, #c9001c, var(--dc-red-dark));
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .score-display-header {
    position: relative;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .thrower-name {
    max-width: 100%;
    color: #aaa;
    font-size: clamp(0.6rem, min(calc(2vw * var(--ui-scale)), 8cqi), 0.9rem);
    line-height: 1.05;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .thrower-name.active {
    color: var(--dc-yellow);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .score-big {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 6px;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: #000;
    box-shadow: none;
    text-shadow: none;
    font-family: inherit;
    font-size: calc(clamp(3rem, 10vw, 5.25rem) * var(--ui-scale));
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-header.active .score-big {
    color: #000;
    background: var(--dc-silver);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-header.active .score-big.score-preview {
    color: var(--dc-yellow);
    background: #000;
    box-shadow: none;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-header.active .score-big.score-preview-bust {
    color: #ff3048;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .avg-small {
    position: absolute;
    z-index: 1;
    top: 3px;
    left: 5px;
    color: var(--dc-red);
    font-size: calc(clamp(0.65rem, 1.6vw, 1rem) * var(--ui-scale));
    font-weight: 800;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .score-delta {
    position: absolute;
    z-index: 2;
    right: 5px;
    bottom: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--dc-yellow);
    background: transparent;
    font-weight: 900;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .center-logo {
    min-width: 54px;
    padding: 3px 4px;
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .end-game-btn {
    min-width: 0;
    min-height: 30px;
    margin: 0 0 3px;
    padding: 3px 6px;
    border: 1px solid var(--dc-border);
    border-radius: 4px;
    color: #fff;
    background: #111;
    font-family: inherit;
    font-size: clamp(0.65rem, 1.5vw, 0.85rem);
    font-weight: 800;
    text-transform: uppercase;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .round-badge {
    width: calc(clamp(46px, 7vw, 66px) * var(--ui-scale));
    height: calc(clamp(46px, 7vw, 66px) * var(--ui-scale));
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(180deg, #c9001c, var(--dc-red-dark));
    box-shadow: none;
    font-family: inherit;
    font-weight: 900;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .version-text {
    font-size: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .version-text::after {
    content: "DC MODE";
    color: #aaa;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* X01 score table */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-main {
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .score-history-col {
    padding-inline: var(--space-sm);
    border: 0;
    background: #000;
    scrollbar-color: var(--dc-border) #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .round-numbers-col {
    min-width: clamp(54px, 10vw, 88px);
    padding: var(--space-xs) 0;
    border-inline: 3px solid var(--dc-border);
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .round-number {
    width: 100%;
    color: #666;
    font-family: inherit;
    font-size: calc(var(--font-lg) * var(--ui-scale));
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .round-number.current {
    color: #777;
    background: transparent;
    border-radius: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .score-history-entry {
    color: #777;
    font-family: inherit;
    font-weight: 900;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .score-history-entry.current {
    color: var(--dc-yellow);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .score-history-entry.bust {
    color: #ff3048;
}

/* X01 reveal dock: the existing quick-score columns become the keypad
   gutters, while the center pad supplies the familiar silver number keys. */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] #x01Controls {
    min-height: min(43dvh, 390px);
    padding: 6px;
    border-top: 3px solid var(--dc-red);
    color: #fff;
    background: #000;
    font-family: inherit;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] #x01Controls > * {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .checkout-suggestion {
    margin-bottom: 3px;
    padding: 4px 8px;
    border: 0;
    border-radius: 0;
    color: var(--dc-yellow);
    background: #000;
    font-size: calc(var(--font-xl) * var(--ui-scale));
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .finish-indicator {
    min-height: 1.2em;
    padding: 2px;
    color: var(--dc-yellow);
    font-size: var(--font-sm);
    letter-spacing: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-input-row {
    gap: 7px;
    margin-bottom: 6px;
    align-items: stretch;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-input-row .btn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-bottom-row .btn {
    border: 2px solid var(--dc-silver);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #d3132b, var(--dc-red-dark));
    box-shadow: none;
    font-family: inherit;
    font-weight: 900;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] #undoBtnX01 {
    color: #111;
    background: linear-gradient(180deg, #fff028, #b89c00);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .input-display {
    min-height: calc(clamp(48px, 7dvh, 66px) * var(--ui-scale));
    padding: 5px 12px;
    border: 2px solid var(--dc-silver);
    border-radius: 5px;
    color: #fff;
    background: #000;
    box-shadow: none;
    font-family: inherit;
    font-weight: 500;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .input-display.remaining-mode {
    border-color: var(--dc-yellow);
    color: var(--dc-yellow);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .number-pad {
    --dc-quick-col: clamp(48px, 10vw, 66px);
    display: grid;
    grid-template-columns: var(--dc-quick-col) minmax(0, 1fr) var(--dc-quick-col);
    gap: 0;
    width: 100%;
    min-height: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .quick-col {
    width: auto;
    gap: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .pad-center {
    gap: 0;
    grid-auto-rows: 1fr;
    min-width: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-num-btn {
    min-width: 0;
    min-height: 44px;
    padding: calc(clamp(6px, 1.1dvh, 12px) * var(--ui-scale));
    border: 1px groove #777;
    border-radius: 5px;
    color: #090909;
    background: linear-gradient(180deg, #f8f8f8, #a6a6a6);
    box-shadow: none;
    font-family: inherit;
    font-size: calc(clamp(1.35rem, 3.5dvh, 2rem) * var(--ui-scale));
    font-weight: 900;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-num-btn[data-op] {
    color: #fff;
    background: linear-gradient(180deg, #4c4c4c, #060606);
    border-color: #777;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-quick-btn {
    min-width: 0;
    padding: 2px;
    border: 0;
    border-radius: 0;
    color: #bbb;
    background: #000;
    box-shadow: none;
    font-family: inherit;
    font-size: calc(clamp(0.85rem, 2dvh, 1.25rem) * var(--ui-scale));
    font-weight: 500;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-bottom-row {
    gap: 7px;
    margin-top: 6px;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] #x01BustBtn {
    background: #2b2b2b;
}

/* Standard Cricket engines: black chalkboard, central red target rail and
   yellow pending marks. Spanish/Minnesota retain their compact geometry. */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-main {
    padding: 4px 0;
    background: #000;
    scrollbar-color: var(--dc-border) #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #cricketGrid {
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-row {
    border-bottom: 1px solid #292929;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-cell {
    border-color: var(--dc-border);
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-cell.active {
    background: linear-gradient(90deg, rgba(186, 0, 20, 0.13), transparent 24%, transparent 76%, rgba(186, 0, 20, 0.13));
    box-shadow: inset 3px 0 var(--dc-red), inset -3px 0 var(--dc-red);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .mark {
    --color-primary: var(--dc-red);
    --color-pending: var(--dc-yellow);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-buttons,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .buttons-container {
    align-self: stretch;
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-buttons {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 0.7fr);
    gap: 2px;
    padding-inline: 2px;
    container-type: inline-size;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-num-btn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-dt-btn {
    min-width: 0;
    border: 1px solid var(--dc-silver);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #c9001c, var(--dc-red-dark));
    box-shadow: none;
    text-shadow: none;
    font-family: inherit;
    padding-inline: 1px;
    overflow: hidden;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-num-btn {
    font-size: min(calc(clamp(1.15rem, 4dvh, 2.6rem) * var(--ui-scale)), 30cqi);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-dt-btn {
    font-size: min(calc(clamp(0.75rem, 2.3dvh, 1.4rem) * var(--ui-scale)), 20cqi);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-num-btn.minnesota {
    font-size: min(calc(clamp(1rem, 3dvh, 2rem) * var(--ui-scale)), 18cqi);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-num-btn.dimmed,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-dt-btn.dimmed {
    color: #666;
    background: #151515;
    border-color: #444;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .cricket-dt-btn.fake-spacer {
    border: 0;
    background: transparent;
}

/* Shared Cricket reveal bar. */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .bottom-controls,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-controls,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-controls {
    border-top: 3px solid var(--dc-red);
    color: #fff;
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .pending-text,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-pending,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-pending {
    color: var(--dc-yellow);
    font-family: inherit;
    font-weight: 700;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #undoBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #doubleDownUndoBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #teamCricketUndoBtn {
    border: 2px solid var(--dc-silver);
    color: #111;
    background: linear-gradient(180deg, #fff028, #b89c00);
    box-shadow: none;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #missBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #enterBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #doubleDownMissBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #doubleDownEndTurnBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #teamCricketMissBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #teamCricketEnterBtn {
    border: 2px solid var(--dc-silver);
    color: #fff;
    background: linear-gradient(180deg, #d3132b, var(--dc-red-dark));
    box-shadow: none;
}

/* Hammer and Team Hammer use the shared target engine while remaining part
   of the Cricket scoreboard family. Other target games are left untouched. */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-game-main {
    padding: var(--space-md);
    color: #fff;
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-stage {
    color: #aaa;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-value {
    width: min(78vw, 420px);
    min-width: 0;
    padding: var(--space-md);
    border: 2px solid var(--dc-silver);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #c9001c, var(--dc-red-dark));
    box-shadow: none;
    font-family: inherit;
    letter-spacing: 0;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-hint {
    max-width: min(92%, 680px);
    color: #aaa;
    font-family: inherit;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #targetGameControls {
    min-height: 0;
    padding: 6px;
    border-top: 3px solid var(--dc-red);
    color: #fff;
    background: #000;
    font-family: inherit;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-turn-display {
    margin-bottom: 4px;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-turn-label {
    color: #aaa;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-turn-score {
    color: var(--dc-yellow);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-hit-buttons,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-bottom-row {
    gap: 4px;
    margin-bottom: 4px;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-hit-buttons .btn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .target-bottom-row .btn {
    min-width: 0;
    padding-inline: 3px;
    border: 2px solid var(--dc-silver);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #d3132b, var(--dc-red-dark));
    box-shadow: none;
    font-family: inherit;
    font-weight: 900;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #targetUndoBtn {
    color: #111;
    background: linear-gradient(180deg, #fff028, #b89c00);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #targetMissDartBtn,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] #targetClearBtn {
    background: #292929;
}

/* Double Down's dedicated Cricket progression. */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-main {
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-phase {
    color: #fff;
    background: var(--dc-red);
    padding: 4px 14px;
    border-radius: 4px;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-hint,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-player {
    color: #aaa;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-target,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-cricket-row,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-player {
    border-color: var(--dc-border);
    border-radius: 5px;
    color: #fff;
    background: #090909;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-player.active {
    border-left: 5px solid var(--dc-red);
    color: #fff;
    background: #151515;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-hit-buttons button,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-target {
    border: 1px solid var(--dc-silver);
    color: #fff;
    background: linear-gradient(180deg, #c9001c, var(--dc-red-dark));
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .double-down-marks {
    color: var(--dc-yellow);
}

/* Team Cricket/400 keeps four mark lanes but adopts the same central rail. */
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-main {
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-rules-label,
:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-center-heading {
    color: #aaa;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-member-heading {
    border-radius: 0;
    color: var(--dc-gray);
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-member-heading.active {
    color: #fff;
    background: var(--dc-red);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-row {
    border-bottom-color: #292929;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-mark-cell {
    border-color: var(--dc-border);
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-mark-cell.active {
    background: rgba(186, 0, 20, 0.13);
    box-shadow: inset 3px 0 var(--dc-red), inset -3px 0 var(--dc-red);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-mark-cell .mark {
    --color-primary: var(--dc-red);
    --color-pending: var(--dc-yellow);
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-target-buttons {
    align-self: stretch;
    border-inline: 2px solid var(--dc-border);
    background: #000;
}

:root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="cricket"] .team-cricket-target-buttons button {
    border: 1px solid var(--dc-silver);
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #c9001c, var(--dc-red-dark));
}

/* Compact devices: retain touch targets while keeping 3/4-player headers and
   long Cricket variants inside the viewport. */
@media (max-width: 600px) {
    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-header {
        padding-inline: 3px;
    }

    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .player-name {
        font-size: clamp(0.65rem, min(calc(4vw * var(--ui-scale)), 16cqi), 1.35rem);
    }

    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .score-big {
        font-size: clamp(2rem, min(calc(12vw * var(--ui-scale)), 38cqi), 3.7rem);
        padding-inline: 2px;
    }

    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family] .avg-small {
        display: none;
    }

    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] #x01Controls {
        min-height: 42dvh;
        padding: 4px;
    }

    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .number-pad {
        --dc-quick-col: clamp(42px, 11vw, 52px);
    }

    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-num-btn {
        min-height: 44px;
        border-radius: 4px;
    }

    :root[data-scoreboard-mode="dc"] #gameScreen[data-scoreboard-family="x01"] .x01-quick-btn {
        font-size: clamp(0.72rem, 3vw, 0.95rem);
    }
}