/* Centering: flex-body + width:100% (no margin/padding on
       app-container, since that padding moves onto .header instead — see
       below). Shared .app-container base (max-width/background/
       border-radius/box-shadow) lives in shared.css. */
    body {
        display: flex;
        justify-content: center;
    }
    .app-container {
        width: 100%;
    }

    /* No padding on .app-container (see above) — this page puts it on
       .header itself instead, and drops the border-bottom/margin-bottom
       shared.css's .header otherwise has, since the divider lives on
       .results::before further down (see its own comment) — same clamp()
       as .total-row's own padding-top and .results' own padding-bottom, so
       the gap above and below every divider on this page matches. */
    .header {
        border-bottom: none;
        margin-bottom: 0;
        padding: clamp(12px, 4vw, 20px);
        padding-bottom: clamp(10px, 3vw, 16px);
        /* Drop shared.css's flex-wrap:wrap (meant for the multi-item table/
           multiplayer headers). This header's only in-flow child is
           .title-block (settings gear is absolute), and column-wrap here
           stretches .title-block to a fixed tall height — leaving dead space
           above the red divider once the ddl row collapses to one line. */
        flex-wrap: nowrap;
    }
    .settings-dropdown {
        top: clamp(12px, 4vw, 20px);
        right: clamp(12px, 4vw, 20px);
    }

    /* The header ddl row (Ruleset/You Are/Winner) now uses the shared
       responsive .hdr-grid layout in shared.css (added via .hdr-container/
       .hdr-grid on the markup), the same one visual uses. */
    @media (min-width: 650px) {
        .title-block { flex: 1 1 auto; }
    }

    .meta-inputs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        font-size: 14px;
        font-weight: bold;
    }

    .meta-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .meta-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .meta-item span {
        white-space: nowrap;
    }
    /* Same specificity as .hidden-element but declared later, so without
       this the plain display:flex above would win the cascade tie and the
       row would stay visible even with hidden-element applied (see the
       identical fix on .summary-row below). */
    .meta-item.hidden-element {
        display: none;
    }

    @media (min-width: 480px) {
        .meta-inputs { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
    }

    .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;
        padding: 0 clamp(10px, 3vw, 16px);
        margin-top: 8px;
    }

    /* Hand picker */
    .hand-picker-area {
        padding: clamp(10px, 3vw, 16px);
    }

    /* Overrides on top of shared.css's .hand-section-head base (padding/
       font-size differ, plus the sticky-header freeze effect this page
       relies on — depends on .hand-section NOT having overflow:hidden,
       see shared.css's own comment there). */
    .hand-section-head {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 8px;
        position: sticky;
        top: var(--results-height, 0px);
        z-index: 5;
    }
    .hand-section-head.open {
        border-radius: 8px 8px 0 0;
    }

    .hand-row {
        padding: 6px 12px;
        font-size: 14px;
    }

    .qty-btn {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f8f8;
        border: none;
        font-size: 18px;
        font-weight: bold;
        color: #555;
        cursor: pointer;
        padding: 0;
    }
    .qty-btn:active { background: #ddd; }
    .qty-num {
        width: 28px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #222;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        line-height: 34px;
    }
    .qty-num.has-val { color: #b32424; }

    /* Checkbox styling itself now lives on the unscoped input[type="checkbox"]
       rule above — every checkbox on the page matches it, so .picker-label
       only needs its own layout. */
    .picker-label {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        cursor: pointer;
    }

    .winner-only-section { display: none; }
    .hand-picker-area.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-picker-area.is-winner .winner-only-row { display: flex; }

    /* Results sub-header */
    .results {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        padding: clamp(10px, 3vw, 16px);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    /* Inset by the same amount as .total-row's own border, instead of
       spanning the full card width — matches .total-row's width rather
       than the other way around. */
    .results::before {
        content: '';
        position: absolute;
        left: clamp(10px, 3vw, 16px);
        right: clamp(10px, 3vw, 16px);
        top: 0;
        border-top: 2px solid #b32424;
    }
    .results::after {
        content: '';
        position: absolute;
        left: clamp(10px, 3vw, 16px);
        right: clamp(10px, 3vw, 16px);
        bottom: 0;
        border-bottom: 2px solid #b32424;
    }

    /* Points/Doubles totals now sit below the Point Total as two columns,
       styled like visual's scoring-details column titles (gray uppercase,
       em-dash before the value) rather than the old boxed .summary-val.
       The red middle divider moved from .total-row's top onto .summary-row's
       top (the total row is now first), keeping the same three-line look. */
    .summary-row {
        display: flex;
        gap: 16px;
        border-top: 2px solid #b32424;
        padding-top: clamp(10px, 3vw, 16px);
    }
    /* Same specificity as .hidden-element but declared later, so without
       this the plain display:flex above would win the cascade tie and the
       row would stay visible even with hidden-element applied. */
    .summary-row.hidden-element {
        display: none;
    }
    .summary-total-col { flex: 1; min-width: 0; }
    .summary-total-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #888;
    }

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

    /* flex-wrap: with the mismatch badge now living here alongside Limit/
       East/Below-min, up to 2 status-badges can show at once on top of the
       label/number/stat-count — wraps to its own line on narrow widths
       instead of overflowing the card or squeezing the Clear button. */
    .point-total {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 10px;
    }
    .point-total-label {
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        color: #b32424;
        letter-spacing: 0.3px;
    }
    .point-total strong { font-size: 24px; color: #222; }
    .point-total strong.capped { color: #b32424; }
    .point-total strong.below-min-faan { color: #b36b00; }

    /* limit-badge now uses the shared .status-badge system (base + .show in
       shared.css, red background via shared's .limit-badge rule) — same as
       east-badge/below-min-badge and visual's badges. Its old page-local
       styling lived here. */