/* Fixed max width + auto side margins: as the window narrows, the side
       margins shrink first (since they're just the leftover space around a
       centered 1100px box); the content itself only starts shrinking once
       the window is narrower than 1100px plus this minimum gutter. Shared
       .app-container base (max-width/background/border-radius/box-shadow)
       lives in shared.css; this page's own centering mechanism + padding
       stay here. */
    .app-container {
        margin: 0 auto;
        padding: clamp(12px, 4vw, 20px);
    }

    .winner-discard-fields {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 14px;
        font-weight: bold;
    }

    /* Every field inside the settings dropdown stays live-editable
       mid-series (there's no Ruleset row — that's locked for the series
       and shown instead via the header's title-ruleset-subtitle) — see
       renderSettingsPanel()/handleSettingChange() in game.js. Chrome
       itself (gear button, dropdown box, checkboxes, selects) is shared —
       see shared.css. */

    /* Per-seat header cards (always visible) */
    /* Compact chip grid: 2 columns even on phones, so all 4 players fit in
       roughly the space one full-size card used to take, and the hand
       selector below doesn't need much scrolling to reach. */
    .scores-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 8px;
    }

    .seat-scorer {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        cursor: pointer;
        transition: box-shadow 0.15s;
    }
    .seat-scorer.active-edit {
        box-shadow: 0 0 0 3px #185fa5;
    }

    .seat-scorer-head {
        background: #b32424;
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-size: 12px;
        padding: 6px 8px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 2px 6px;
    }
    .seat-tag {
        font-size: 9px;
        font-weight: 700;
        opacity: 0.9;
        white-space: nowrap;
    }
    .player-tag {
        font-size: 10px;
        font-weight: 700;
        opacity: 0.7;
    }

    .seat-body {
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: right;
    }

    .seat-total-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }

    .seat-badge-stack {
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: flex-start;
        text-align: left;
    }

    .seat-total-right {
        text-align: right;
    }
    .seat-total-line {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        gap: 6px;
    }
    .seat-total-right strong { font-size: 20px; color: #222; }
    .seat-total-right strong.capped { color: #b32424; }
    .seat-total-right strong.below-min-faan { color: #b36b00; }

    .seat-mini-line-row {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        gap: 6px;
    }
    .seat-mini-line {
        font-size: 11px;
        color: #999;
        white-space: nowrap;
    }
    /* Round total the winner actually receives (sum of every payer's
       share) — shown alongside the faan/tai subtitle since the big total
       above is the hand's own base value, not what changes hands. */
    .seat-total-received {
        font-size: 13px;
        font-weight: 500;
        color: #3b6d11;
        white-space: nowrap;
    }

    /* Single-winner-hand rulesets (Hong Kong): cards for the winner and
       whoever's paying (discarder, or all three on a self-draw), built with
       the same .seat-scorer shell as Chinese Classical's seat cards — just
       not tappable, and with a neutral gray header instead of red for
       non-winner payers. */
    .seat-scorer.no-tap { cursor: default; }
    .seat-scorer-head.non-winner-head { background: #6b6b6b; }
    .seat-total-right strong.neg-amount { color: #b32424; }

    .tap-hint {
        font-size: 12px;
        color: #888;
        text-align: center;
        margin: 0 0 14px;
    }

    .select-winner-hint {
        font-size: 14px;
        font-weight: bold;
        color: #b32424;
        text-align: center;
        margin: 0 0 16px;
    }

    .series-bar {
        margin: 0 0 14px;
        padding: 8px 10px;
        background: #f7f2ea;
        border: 1px solid #ddd0b8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hand-counter-label {
        font-size: 12px;
        font-weight: 700;
        color: #6b5a3a;
        text-align: center;
    }
    .hand-counter-label.series-complete {
        font-size: 18px;
    }

    .section-divider {
        border: none;
        border-bottom: 2px solid #b32424;
        margin: 16px 0;
    }

    /* Generic collapsible body — pairs with a .hand-panel-title header
       (toggleSection toggles both), used for Payout Breakdown and History.
       Base display:none/.open{display:block} is shared.css — just this
       page's extra padding on top of it. */
    .collapsible-body {
        padding: 8px 10px;
    }

    .history-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    .history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }
    .history-table th {
        text-align: left;
        padding: 6px 8px;
        font-weight: 700;
        color: #888;
        background: #f2f2f2;
        white-space: nowrap;
    }
    .history-table th.history-net-col,
    .history-table td.history-net-col {
        text-align: right;
    }
    .history-table td {
        padding: 6px 8px;
        border-top: 1px solid #eee;
    }
    .history-table td.pos-val { color: #1a7a33; }
    .history-table td.neg-val { color: #b32424; }

    /* Mobile: the 8-column history table is unreadable at phone width, so
       swap it for one card per hand using the same Game Total look for the
       per-player net row. */
    .history-mobile-cards { display: none; }
    .history-mobile-card {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    .history-mobile-card-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 4px;
    }
    .history-mobile-card-hand {
        font-weight: bold;
        font-size: 13px;
        color: #333;
    }
    .history-mobile-card-round {
        font-size: 11px;
        color: #888;
    }
    .history-mobile-card-meta {
        font-size: 11px;
        color: #888;
        margin-bottom: 8px;
    }
    .history-mobile-card-row {
        display: flex;
        justify-content: space-around;
        gap: 6px;
    }
    .history-mobile-card-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }
    .history-mobile-card-seat {
        font-size: 10px;
        text-transform: uppercase;
        color: #888;
    }
    .history-mobile-card-val {
        font-size: 16px;
        font-weight: 800;
        color: #222;
    }
    .history-mobile-card-val.pos-val { color: #1a7a33; }
    .history-mobile-card-val.neg-val { color: #b32424; }

    /* Shared hand-selection panel */
    .hand-panel-wrapper {
        margin-bottom: 16px;
    }
    .hand-panel-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #b32424;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #b32424;
        cursor: pointer;
        user-select: none;
    }
    .hand-panel-title #hand-panel-seat-label { color: #222; }

    /* Sections always stack in a single vertical list — letting them flow
       into side-by-side masonry columns (as this used to do) interacted
       unpredictably with the item grid inside each section, flipping
       between column counts at arbitrary widths. Item-column count below
       is instead driven by its own deliberate breakpoints. */
    .hand-panel {
        columns: 1;
        column-width: auto;
    }

    .picker-label {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        cursor: pointer;
    }
    /* .hand-panel-title stays page-specific (see above); this extra
       selector just wires its chevron rotation into the shared
       .section-chevron rule. */
    .hand-panel-title.open .section-chevron {
        transform: rotate(180deg);
    }

    /* .hand-name gets ellipsis-truncation here (unlike shared.css's plain
       flex:1;min-width:0 base) since this page's rows can run long. */
    .hand-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 8px;
    }

    .winner-only-section { display: none; }
    .hand-panel.is-winner .winner-only-section { display: block; }

    /* Row-level equivalent of the above, for a type:'limit' item living
       inside an otherwise non-winnerOnly section (Singaporean's Three/Four
       Great Scholars/Blessings, inline within Winds & Dragons) — same
       show/hide pair, just scoped to one .hand-row instead of the whole
       section. .hand-row's own base display is flex (shared.css). */
    .winner-only-row { display: none; }
    .hand-panel.is-winner .winner-only-row { display: flex; }

    /* Cells that are always 0 because this ruleset has no loser-vs-loser
       settlement (see hasLoserSettlement) — greyed out so the winner's
       row/column still stands out instead of the grid reading as a wall
       of zeros. */
    td.irrelevant-cell {
        color: #ccc !important;
        background: #fafafa;
    }
    .mobile-tile.irrelevant-cell {
        opacity: 0.4;
    }

    /* 1 row of 4 whenever there's room; only collapse to 2x2 (see the
       narrow-width override below) once that would otherwise squish the
       button labels or force uneven wrapping. */
    .action-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    /* 4 buttons in one row need more like 600px+ to avoid squishing —
       below that, drop to 2x2 instead of letting the row wrap unevenly. */
    @media (max-width: 600px) {
        .action-bar { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px) {
        .action-bar .btn { padding: 0 12px; }
    }

    /* The history table's 8 columns need real width to keep every header on
       one line without shrinking its padding — switch to cards well before
       that padding would have to give, rather than at the narrower 560px
       breakpoint used above for the payout matrix. */
    @media (max-width: 650px) {
        .history-table-wrap { display: none; }
        .history-mobile-cards { display: block; }
    }

    /* Desktop overrides */
    @media (min-width: 650px) {
        .scores-container { grid-template-columns: 1fr 1fr; }
        .header { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 24px 32px; }
        .title-block { flex: 1 1 auto; }
        .winner-discard-fields { flex-direction: row; gap: 24px; }
    }

    /* Wide screens: all four seat headers in one row (3-column hand-section
       grid at this same breakpoint is shared.css). */
    @media (min-width: 1000px) {
        .scores-container { grid-template-columns: repeat(4, 1fr); }
        /* Discard-win Hong Kong hands only ever render 2 cards (winner +
           discarder) — keep them the same width a card would have in the
           normal 4-up grid, just centered as a pair instead of stretching
           to fill the row. */
        .scores-container.two-card-grid {
            display: flex;
            justify-content: center;
        }
        .scores-container.two-card-grid > .seat-scorer { flex: 0 0 calc(25% - 6px); }
    }