/* ============================================
   Layout — Screen containers, grid systems,
   tablet scaling, media queries.
   Pure CSS — no JS transforms.
   ============================================ */

/* === Global Reset === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    height: 100dvh;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

/* === Setup Screen === */
.setup-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-xl);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: var(--app-wallpaper, url('../assets/background.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: var(--z-overlay);
    -webkit-overflow-scrolling: touch;
}

.setup-screen::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Theme-driven scrim over the background photo (light themes need a
       light scrim, not the old hardcoded black). */
    background: var(--bg-image-overlay, rgba(0, 0, 0, 0.75));
    z-index: 0;
}

.setup-screen .setup-card {
    max-width: 640px;
    width: 100%;
    margin: var(--space-xl) 0;
    margin-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 20px));
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-base);
    /* Lifts the card off a busy wallpaper without hiding it. */
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55),
                0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* Tablets/desktops have width to spare — a wider card means more game
   cards per row and far less scrolling to reach Start Game. Panels stay
   in a single vertical stack at every size. */
@media (min-width: 860px) {
    .setup-screen .setup-card {
        max-width: 860px;
        padding: var(--space-3xl);
    }
}

/* === Game Screen === */
.game-screen {
    display: none;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

/* === Score Header === */
.score-header {
    display: grid;
    grid-template-columns: 1fr var(--cricket-center-col) 1fr;
    align-items: stretch;
    background: var(--color-bg);
    flex-shrink: 0;
    min-height: 0;
}

/* 1-player: player on left, center, empty right (away hidden) */
.score-header.one-player {
    grid-template-columns: 1fr var(--cricket-center-col) 1fr;
}

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

/* 3-player: 1 | 2 | Round | 3 (P3 wider since alone on right) */
.score-header.three-player {
    grid-template-columns: 1fr 1fr var(--cricket-center-col) 2fr;
}

.score-header.three-player .player-header.home { order: 1; }
.score-header.three-player .player-header.away { order: 2; }
.score-header.three-player .center-logo { order: 3; }
.score-header.three-player .player-header.player3 { order: 4; }

/* 4-player: 1 | 2 | Round | 3 | 4 */
.score-header.four-player {
    grid-template-columns: 1fr 1fr var(--cricket-center-col) 1fr 1fr;
}

.score-header.four-player .player-header.home { order: 1; }
.score-header.four-player .player-header.away { order: 2; }
.score-header.four-player .center-logo { order: 3; }
.score-header.four-player .player-header.player3 { order: 4; }
.score-header.four-player .player-header.player4 { order: 5; }

/* Minnesota header — match wider center column for button grid */
.score-header.minnesota.one-player,
.score-header.minnesota.two-player {
    grid-template-columns: 1fr var(--minnesota-center-col) 1fr;
}
.score-header.minnesota.three-player {
    grid-template-columns: 1fr 1fr var(--minnesota-center-col) 2fr;
}
.score-header.minnesota.four-player {
    grid-template-columns: 1fr 1fr var(--minnesota-center-col) 1fr 1fr;
}

/* === Player Header === */
.player-header {
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    transition: background-color var(--transition-normal), opacity var(--transition-normal);
    min-width: 0;
    overflow: hidden;
    /* Lets multi-player scores use cqi units so the font is bounded by
       its real grid column, not only by the full viewport width. */
    container-type: inline-size;
}

.player-header.active {
    background: var(--color-active-player);
    color: var(--color-on-primary);
}

.player-header.inactive {
    background: var(--color-inactive-player);
    opacity: 0.7;
}

.player-name {
    font-size: calc(var(--font-xl) * var(--ui-scale));
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

.thrower-name {
    font-size: calc(var(--font-md) * var(--ui-scale));
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    line-height: 1.1;
}

.thrower-name.active {
    color: var(--color-primary-light, var(--color-primary));
}

.score-display-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.score-big {
    font-size: calc(var(--font-score) * var(--ui-scale));
    font-weight: 900;
    background: var(--color-score-bg);
    color: var(--color-score-text);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    min-width: clamp(80px, 16vw, 170px);
    text-align: center;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
    font-variant-numeric: tabular-nums;
}

.avg-small {
    font-size: var(--font-sm);
    color: var(--color-text-muted);
}

/* Hide duplicate MPR (second copy was for side-by-side layout, now stacked).
   The live-score delta chip now sits last, so match the trailing MPR by
   position relative to it as well. */
.score-display-header .avg-small:last-child,
.score-display-header .score-delta ~ .avg-small {
    display: none;
}

/* === Live turn preview (X01 dart-by-dart entry) ===
   While digits are being typed the active player's score shows where the
   turn would land. Nothing is committed until ENTER, so the box is tinted
   with the "pending" accent to make that obvious. */
.score-big.score-preview {
    background: color-mix(in srgb, var(--color-pending) 42%, var(--color-score-bg));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-pending) 75%, transparent),
                0 2px 10px rgba(0, 0, 0, 0.35);
}

.score-big.score-preview-bust {
    background: color-mix(in srgb, var(--color-danger) 55%, var(--color-score-bg));
    box-shadow: 0 0 0 2px var(--color-danger), 0 2px 10px rgba(0, 0, 0, 0.35);
    letter-spacing: 0;
}

.score-delta {
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-pending) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-pending) 60%, transparent);
    color: var(--color-pending);
    font-size: calc(var(--font-sm) * var(--ui-scale));
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.score-delta:empty {
    display: none;
}

.score-delta.bust {
    background: color-mix(in srgb, var(--color-danger) 22%, transparent);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* 3-4 player headers: two score boxes share a side, so the full-size
   score font (14vw) overflows and the numbers run together. Shrink the
   score box and name to fit the narrower columns, and add a hairline
   gap between adjacent headers so the boxes stay visually separate. */
.score-header.three-player,
.score-header.four-player {
    column-gap: 2px;
}

.score-header.three-player .player-header,
.score-header.four-player .player-header {
    padding-inline: clamp(2px, 0.8vw, var(--space-sm));
}

.score-header.three-player .player-name,
.score-header.four-player .player-name {
    font-size: clamp(0.75rem, calc(2.2vw * var(--ui-scale)), 1.25rem);
}

.score-header.three-player .score-big,
.score-header.four-player .score-big {
    /* Fallback first; supported browsers then cap against 34% of the
       actual player column. That keeps four-digit future X01 scores and
       max UI scale inside narrow 3/4-player headers. */
    font-size: clamp(1.2rem, calc(5vw * var(--ui-scale)), 4rem);
    font-size: clamp(1.2rem, min(calc(6vw * var(--ui-scale)), 34cqi), 4.5rem);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--space-xs) var(--space-sm);
    box-sizing: border-box;
    overflow: hidden;
}

.score-header.three-player .score-delta,
.score-header.four-player .score-delta {
    font-size: clamp(0.6rem, min(calc(2.4vw * var(--ui-scale)), 13cqi), 0.95rem);
    padding: 0 6px;
    max-width: 100%;
    overflow: hidden;
}

/* === Center Logo / Round Badge === */
.center-logo {
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    min-width: clamp(50px, 8vw, 80px);
}

.end-game-btn {
    background: none;
    border: 2px solid var(--color-border-light);
    color: var(--color-text);
    font-size: var(--font-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: var(--space-xs);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-width: 60px;
    min-height: 36px;
}

.round-badge {
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: calc(var(--font-2xl) * var(--ui-scale));
    font-weight: bold;
    width: calc(clamp(50px, 8vw, 75px) * var(--ui-scale));
    height: calc(clamp(50px, 8vw, 75px) * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.version-text {
    font-size: clamp(0.4rem, 1vw, 0.55rem);
    color: var(--color-text-dim);
    margin-top: 2px;
}

/* === Cricket Main Area === */
/* Stretch grid to fill available height for all cricket variants — rows
   distribute remaining space so there's no dead band at the bottom. */
.cricket-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-xs) 0 var(--space-lg) 0;
    scrollbar-width: thin;
    scrollbar-color: #444 var(--color-surface);
    display: flex;
    flex-direction: column;
}

.cricket-main #cricketGrid {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cricket-main .cricket-row {
    flex: 1 1 0;
}

/* Minnesota: remove bottom padding so the last (BED) row is never clipped. */
.cricket-main.minnesota-layout {
    padding-bottom: 0;
}

/* === X01 Main Area === */
.x01-main {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    overflow: hidden;
}

.x01-main.three-player {
    grid-template-columns: 1fr 1fr auto 2fr;
}

.x01-main.four-player {
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
}

/* === Bottom Controls === */
.bottom-controls {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-bg);
    flex-shrink: 0;
}

.controls-area {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    background: var(--color-bg);
    flex-shrink: 0;
    min-height: 40dvh;
}

/* === Bottom Bar (Chicago) === */
.bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    flex-shrink: 0;
}

/* ============================================
   Media Queries — Tablet Scaling
   Default: iPad Mini portrait (744 x 1133)
   ============================================ */

/* Large tablets portrait (iPad Pro 12.9": 1024x1366) */
@media (min-height: 1200px) {
    .score-big {
        font-size: clamp(5rem, 13vw, 9rem);
    }

    .round-badge {
        width: 50px;
        height: 50px;
        font-size: var(--font-xl);
    }
}

/* Landscape mode — scores still need to read at 10-15 feet.
   Prefer dvh so the number tracks screen height. */
@media (orientation: landscape) {
    .score-big {
        font-size: clamp(2.8rem, 11dvh, 5.5rem);
    }

    .player-header {
        padding: var(--space-xs) var(--space-sm);
    }

    .round-badge {
        width: 30px;
        height: 30px;
        font-size: var(--font-md);
    }
}

/* Small tablet landscape (iPad Mini landscape: 1133x744) */
@media (orientation: landscape) and (max-height: 800px) {
    .score-big {
        font-size: clamp(2.4rem, 10dvh, 4.5rem);
    }

    .bottom-controls,
    .controls-area {
        padding: var(--space-xs);
    }
}

/* Compact phones still support 3/4-player games. Tighten the fixed center
   lane and header chrome while preserving a readable 19px score floor. */
@media (max-width: 600px) {
    :root {
        --cricket-center-col: clamp(104px, 26vw, 150px);
        --minnesota-center-col: clamp(118px, 29vw, 165px);
    }

    .score-header.three-player,
    .score-header.four-player {
        column-gap: 1px;
    }

    .score-header.three-player .player-header,
    .score-header.four-player .player-header {
        padding: 2px;
    }

    .score-header.three-player .score-big,
    .score-header.four-player .score-big {
        padding: 2px;
        border-radius: var(--radius-sm);
    }

    .center-logo {
        padding: 2px;
    }

    .end-game-btn {
        min-width: 48px;
        min-height: 30px;
        padding: 3px 5px;
        font-size: 0.75rem;
    }

    .round-badge {
        width: 36px;
        height: 36px;
        font-size: var(--font-md);
    }
}