/* Shared touch controls. Keep their size independent of game-specific compact rules. */
.scoring-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.2vmin, 16px);
    width: 100%;
}
.scoring-controls .scoring-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: clamp(64px, 7dvh, 88px);
    padding: 12px 16px;
    border: 2px solid #64748b;
    border-radius: 12px;
    background: #243247;
    color: #fff;
    font-size: clamp(1.125rem, 2vmin, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
    touch-action: manipulation;
    cursor: pointer;
}
.scoring-controls .scoring-control i { font-size: 1.3em; }
.scoring-controls .scoring-control-miss { background: #b91c1c; border-color: #f87171; }
.scoring-controls .scoring-control-destructive { color: #fecaca; border-color: #b66b78; }
.scoring-controls .scoring-control:hover:not(:disabled) { filter: brightness(1.2); }
.scoring-controls .scoring-control:active:not(:disabled) { transform: translateY(1px); }
.scoring-controls .scoring-control:focus-visible { outline: 3px solid #fef08a; outline-offset: 3px; }
.scoring-controls .scoring-control:disabled { opacity: .4; cursor: not-allowed; }

/* A single viewport budget leaves space for the header, tabs, special actions and grid. */
.tablet-game-scoring {
    --tablet-gap: clamp(10px, 1.2vmin, 20px);
    --tablet-target-size: min(100%, calc(100dvh - 410px));
}
.tablet-game-scoring .game-active-content:not(.game-active-content-completed) {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 3rem;
    padding-bottom: 0;
    overflow-x: hidden;
}
.tablet-game-scoring :is(.std-scoring, .wvs-shell, .darts-sv, .ttt-scoring,
    .connectwar-scoring-container, .pairs-scoring-container, .axeman-scoring) {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    gap: var(--tablet-gap);
}
.tablet-game-scoring :is(.std-controls, .wvs-controls, .darts-sv-controls, .ttt-controls,
    .cw-controls-row, .game-controls-row, .axeman-controls, .bs-controls) {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}
.tablet-game-scoring .game-controls { margin: 0; padding: 0; }
.tablet-game-scoring :is(.tablet-game-input, .axeman-phase-section) { order: 2; }
.tablet-game-scoring :is(.ttt-controls, .game-controls, .axeman-controls) { order: 3; }
.tablet-game-scoring :is(.ttt-scoreboard, .connectwar-scoring-scoreboard, .pairs-scoreboard, .axeman-scoreboard) { order: 4; }
.tablet-game-scoring :is(.std-scoreboard-panel, .wvs-scoreboard, .darts-sv-scoreboard-panel) {
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: clamp(10px, 1.2vmin, 20px);
}
.tablet-game-scoring :is(.std-buttons-panel, .wvs-target-panel, .darts-sv-buttons-panel) {
    min-width: 0;
    padding: 12px;
}
.tablet-game-scoring :is(.its-board-shell, .dts-board-shell) {
    width: var(--tablet-target-size);
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1;
}
.tablet-game-scoring :is(.its-actions, .dts-actions):empty { display: none; }
.tablet-game-scoring .has-special-miss { --tablet-target-size: min(100%, calc(100dvh - 700px)); }
.tablet-game-scoring :is(.std-score-tab, .darts-sv-score-tab) { min-height: 44px; font-size: 1rem; }
.tablet-game-scoring :is(.ac-btn, .iatf-btn, .watl-btn, .archery-btn, .darts-btn) { height: clamp(48px, 6dvh, 70px); }
.tablet-game-scoring :is(.std-player-name, .wvs-player, .darts-sv-player-name) { font-size: clamp(1.2rem, 2.4vmin, 1.8rem); }
.tablet-game-scoring :is(.std-header-line, .std-info-row, .darts-sv-header-line) { flex-wrap: wrap; }
.tablet-game-scoring :is(.ttt-claim-grid, .pairs-card-grid) {
    width: min(100%, calc(100dvh - 440px));
    max-width: none;
    margin: 0 auto;
    aspect-ratio: 1;
    gap: 10px;
}
.tablet-game-scoring :is(.ttt-cell, .card-button) { min-height: 0; height: auto; aspect-ratio: 1; }
.tablet-game-scoring .pairs-card-grid { width: min(100%, calc(100dvh - 720px)); }
.tablet-game-scoring .connectwar-drop-grid { width: 100%; max-width: none; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tablet-game-scoring .drop-button { min-width: 0; aspect-ratio: auto; min-height: clamp(80px, 18dvh, 200px); }
.tablet-game-scoring :is(.ttt-hint, .cw-turn-info) { margin: 8px 0 0; }
.tablet-game-scoring :is(.connectwar-scoring-scoreboard, .ttt-scoreboard) { margin: 0; }
.tablet-game-scoring .axeman-scoreboard-grid { margin: 0; }
.tablet-game-scoring .throw-buttons-grid { width: 100%; grid-template-columns: 1fr; }
.tablet-game-scoring .axeman-throw-btn { min-height: 100px; }
.tablet-game-scoring .bs-scoring { height: auto; }
.tablet-game-scoring .bs-main-area { gap: var(--tablet-gap); }
.tablet-game-scoring .bs-grid-column { gap: var(--tablet-gap); }
.tablet-game-scoring .attack-grid { width: min(100%, calc(100dvh - 370px)); max-width: none; aspect-ratio: 1; }
.tablet-game-scoring .attack-cell { width: auto; height: auto; min-height: 0; aspect-ratio: 1; }
.tablet-game-scoring .cell-label { color: #bcd2ed; font-size: clamp(.85rem, 1.5vmin, 1.25rem); }

@media (orientation: landscape) and (min-width: 900px) {
    .tablet-game-scoring { --tablet-target-size: min(100%, calc(100dvh - 410px)); }
    .tablet-game-scoring .has-special-miss { --tablet-target-size: min(100%, calc(100dvh - 490px)); }
    .tablet-game-scoring :is(.std-scoring, .wvs-shell, .darts-sv) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas: "header header" "input scoreboard" "controls scoreboard";
        align-items: start;
    }
    .tablet-game-scoring :is(.std-player-panel, .wvs-header, .darts-sv-player-panel) { grid-area: header; }
    .tablet-game-scoring :is(.std-buttons-panel, .wvs-target-panel, .darts-sv-buttons-panel) { grid-area: input; }
    .tablet-game-scoring :is(.std-controls, .wvs-controls, .darts-sv-controls) { grid-area: controls; }
    .tablet-game-scoring :is(.std-scoreboard-panel, .wvs-scoreboard, .darts-sv-scoreboard-panel) {
        grid-area: scoreboard;
        align-self: stretch;
        max-height: calc(100dvh - 180px);
    }
    .tablet-game-scoring :is(.ttt-scoring, .connectwar-scoring-container, .pairs-scoring-container, .axeman-scoring) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "input scoreboard" "controls scoreboard";
        align-items: start;
    }
    .tablet-game-scoring .tablet-game-input { grid-area: input; min-width: 0; }
    .tablet-game-scoring :is(.ttt-scoreboard, .connectwar-scoring-scoreboard, .pairs-scoreboard, .axeman-scoreboard) { grid-area: scoreboard; }
    .tablet-game-scoring :is(.ttt-controls, .game-controls, .axeman-controls) { grid-area: controls; }
    .tablet-game-scoring :is(.ttt-error, .cw-error-bar, .pairs-error-bar, .axeman-error-bar) { grid-column: 1 / -1; }
    .tablet-game-scoring .current-turn-info { display: none; }
    .tablet-game-scoring :is(.ttt-claim-grid, .pairs-card-grid) { width: min(100%, calc(100dvh - 390px)); }
    .tablet-game-scoring .axeman-phase-section { grid-area: input; margin: 0; min-width: 0; }
    .tablet-game-scoring .axeman-scoreboard-grid { display: grid; grid-template-columns: 1fr; }
    .tablet-game-scoring .axeman-player-card { display: grid; grid-template-columns: 1fr auto; padding: 14px; gap: 8px; }
    .tablet-game-scoring .axeman-mini-figure { width: 70px; height: 90px; grid-column: 2; grid-row: 1 / span 3; }
    .tablet-game-scoring .bs-main-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .tablet-game-scoring .bs-battle-layout { flex: none; }
    .tablet-game-scoring .bs-attack-area { flex: none; }
    .tablet-game-scoring .bs-turn-indicator { margin-bottom: 10px; }
    .tablet-game-scoring .attack-grid { width: min(100%, calc(100dvh - 360px)); }
}

/* Scoped to the requested games. Inset borders leave calibration and row geometry intact. */
.tablet-game-turns { --turn-rgb: 96, 165, 250; }
.tablet-game-turns :is(.red, .Red, .team-red, .lg-sb-team-red, .std-sb-team-red, .symbol-x, .player-x, .ubs-panel.red) { --turn-rgb: 248, 113, 113; }
.tablet-game-turns :is(.yellow, .team-yellow) { --turn-rgb: 250, 204, 21; }
.tablet-game-turns :is(.blue, .Blue, .team-blue, .lg-sb-team-blue, .std-sb-team-blue, .symbol-o, .player-o, .ubs-panel.blue) { --turn-rgb: 96, 165, 250; }
.tablet-game-turns :is(.std-sb-row-active, .std-sb-watl-player.std-sb-row-active, .lg-sb-row-active,
    .ubs-panel.ubs-active, .wkl-player.current, .darts-sb-current, .darts-lg-active, .ttt-score-player.current,
    .scoring-player-row.current, .pairs-scoreboard .active, .bs-player-card.current,
    .axeman-player-card.guessing, .axeman-player-card.throwing, .axeman-word-box.axeman-active):not(.winner):not(.ubs-winner):not(.eliminated) {
    background: rgba(var(--turn-rgb), .25);
    border-color: rgb(var(--turn-rgb));
    box-shadow: inset 0 0 0 2px rgba(var(--turn-rgb), .95), 0 0 18px rgba(var(--turn-rgb), .28);
    animation: none;
}
.tablet-game-turns :is(.std-sb-indicator, .lg-sb-indicator, .wkl-current-indicator) {
    background: rgb(var(--turn-rgb));
    box-shadow: 0 0 10px 3px rgba(var(--turn-rgb), .7);
}
.tablet-game-turns .std-sb-indicator { width: 9px; height: 9px; }
.tablet-game-turns :is(.ubs-panel.ubs-active, .axeman-player-card.guessing, .axeman-player-card.throwing) { transform: none; }