/* ═══════════════════════════════════════════════════════════════════════════
   Public standings on phones.

   Studio tokens (rank size, row height, capsule pills, points chips) are
   built for broadcast/desktop. On a phone they inflate rows, shrink the
   team column, and detach the Points cell into a floating box.

   This file loads AFTER bracket-kit.css + bracket-color.css so these
   density rules win. Desktop / PNG cards are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    .bk-scope .group-table,
    .bk-scope .cross-cumulative-table {
        --bk-rank: 22px;
        --bk-rank-col: 28px;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 2px !important;
    }

    /* ── Equal type scale: rank = name = Booyah = Kills = Points ── */
    body.bk-scope .group-table thead th,
    body.bk-scope .group-table tbody td,
    body.bk-scope .cross-cumulative-table thead th,
    body.bk-scope .cross-cumulative-table tbody td,
    body[data-theme-preset].bk-scope .group-table thead th,
    body[data-theme-preset].bk-scope .group-table tbody td,
    body[data-theme-preset].bk-scope .group-table .rank-number,
    body[data-theme-preset].bk-scope .group-table .team-name,
    body[data-theme-preset].bk-scope .group-table .team-name-link,
    body[data-theme-preset].bk-scope .group-table--pr tbody td:last-child {
        font-size: 0.75rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0.02em !important;
    }

    body.bk-scope .group-table thead th,
    body.bk-scope .cross-cumulative-table thead th {
        font-size: 0.58rem !important;
        letter-spacing: 0.04em !important;
        padding: 0.18rem 0.16rem !important;
        font-weight: 700 !important;
    }

    /* ── Short rows — beat rowheight / density / theme padding ── */
    body.bk-scope .group-table tbody td,
    body.bk-scope .cross-cumulative-table tbody td,
    body.bk-scope[data-bk-rowheight] .group-table tbody td,
    body.bk-scope[data-bk-rowheight] .cross-cumulative-table tbody td,
    body[data-sb-density] .group-table td,
    body[data-sb-density] .group-table thead th,
    body[data-sb-density] .cross-cumulative-table tbody td,
    body[data-sb-density] .cross-cumulative-table thead th {
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
        padding-left: 0.28rem !important;
        padding-right: 0.28rem !important;
    }

    body.bk-scope[data-bk-rowgap] .group-table,
    body.bk-scope[data-bk-rowgap] .cross-cumulative-table {
        border-collapse: separate !important;
        border-spacing: 0 2px !important;
    }

    /* ── Rank badge = logo size (22px). Beat lg/xl studio tokens. ── */
    body.bk-scope[data-bk-ranksize] .group-table .rank-number .rank-badge,
    body.bk-scope[data-bk-ranksize] .cross-cumulative-table .col-pos .rank-badge,
    body.bk-scope .group-table .rank-number .rank-badge,
    body.bk-scope .cross-cumulative-table .col-pos .rank-badge {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        font-size: 0.72rem !important;
        line-height: 22px !important;
    }

    body.bk-scope[data-bk-ranksize] .group-table thead th:nth-child(1),
    body.bk-scope[data-bk-ranksize] .group-table td.rank-number,
    body.bk-scope .group-table thead th:nth-child(1),
    body.bk-scope .group-table td.rank-number,
    body.bk-scope .cross-cumulative-table .col-pos {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 32px !important;
    }

    body[data-theme-preset].bk-scope .group-table .rank-number {
        font-size: 0.75rem !important;
        background: none !important;
        min-width: 0 !important;
    }

    /* Medal extras (laurel/star) steal horizontal space on a 22px badge. */
    body.bk-scope[data-bk-rankmedal] .group-table tbody tr .rank-number .rank-badge::before,
    body.bk-scope[data-bk-rankmedal] .group-table tbody tr .rank-number .rank-badge::after {
        display: none !important;
        content: none !important;
    }

    /* ── Logo = flag = rank ── */
    body.bk-scope[data-bk-logosize] .group-table .team-avatar,
    body.bk-scope[data-bk-logosize] .cross-cum-logo,
    body.bk-scope .group-table .team-avatar,
    body.bk-scope .cross-cum-logo {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        flex-shrink: 0;
        box-shadow: none !important;
    }

    body.bk-scope .group-table .team-flag,
    body.bk-scope .cross-cum-flag {
        width: 22px !important;
        height: 22px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 0;
        object-fit: cover;
    }

    body.bk-scope .group-table .team-cell,
    body.bk-scope .cross-cum-team {
        gap: 0.35rem !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    /* Give the name the leftover row — ellipsis only if it still overflows. */
    body.bk-scope .group-table .team-name,
    body.bk-scope .group-table .team-name-link,
    body.bk-scope .cross-cum-name {
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide Δ — it costs a column phones cannot spare. */
    body.bk-scope .group-table:not(.group-table--pr) thead th:nth-child(2),
    body.bk-scope .group-table:not(.group-table--pr) tbody td:nth-child(2) {
        display: none !important;
    }

    /* Equal stat columns so the team name gets the rest of the row. */
    body.bk-scope .group-table:not(.group-table--pr) thead th:nth-child(4),
    body.bk-scope .group-table:not(.group-table--pr) thead th:nth-child(5),
    body.bk-scope .group-table:not(.group-table--pr) thead th:nth-child(6),
    body.bk-scope .group-table:not(.group-table--pr) tbody td:nth-child(4),
    body.bk-scope .group-table:not(.group-table--pr) tbody td:nth-child(5),
    body.bk-scope .group-table:not(.group-table--pr) tbody td:nth-child(6) {
        width: 52px !important;
        min-width: 48px !important;
        max-width: 56px !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
    }

    /* ── Flatten the floating Points chip so it sits in the row ──
       Studio paints td:last-child as inline-block + extra pad/bg, which
       reads as a second pill stuck to the right edge. */
    body.bk-scope[data-bk-pointsshape] .group-table tbody tr td:last-child,
    body.bk-scope[data-ck-pointswash] .group-table tbody td:last-child {
        display: table-cell !important;
        padding: 0.2rem 0.28rem !important;
        box-shadow: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        min-height: 0 !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
    }

    body.bk-scope[data-bk-pointsshape] .cross-cumulative-table tbody td.col-num strong {
        display: inline !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
    }

    body.bk-scope[data-bk-rowshape="capsule"] .group-table tbody tr td:last-child,
    body.bk-scope[data-bk-rowshape="card"] .group-table tbody tr td:last-child,
    body.bk-scope[data-bk-rowshape="floating"] .group-table tbody tr td:last-child {
        background: rgba(255,255,255,0.05) !important;
        box-shadow: none !important;
    }

    body.bk-scope[data-bk-rowshape="capsule"] .group-table tbody tr td:last-child {
        border-radius: 0 999px 999px 0 !important;
    }

    /* Keep qualify / elim skins continuous across the whole pill. */
    body[data-theme-preset].bk-scope .group-table tbody tr.advancing-row td:last-child {
        background: linear-gradient(90deg,
            color-mix(in srgb, #22c55e 30%, transparent) 0%,
            color-mix(in srgb, var(--tc-accent, var(--theme-accent, #22c55e)) 25%, transparent) 100%) !important;
        box-shadow: inset 0 0 0 1px rgba(34,197,94,0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    }

    body[data-theme-preset].bk-scope .group-table tbody tr.redzone-row td:last-child {
        background: linear-gradient(90deg, rgba(255,31,31,0.22) 0%, transparent 100%) !important;
        box-shadow: none !important;
    }

    body.bk-scope .group-table tbody tr.advancing-row,
    body.bk-scope .group-table tbody tr.redzone-row {
        box-shadow: none !important;
    }

    body.bk-scope .group-table .roster-btn {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.55rem !important;
        margin-left: 0.08rem !important;
    }
}

@media (max-width: 400px) {
    body.bk-scope .group-table .team-flag,
    body.bk-scope .cross-cum-flag {
        display: none !important;
    }

    body.bk-scope .group-table:not(.group-table--pr) thead th:nth-child(4),
    body.bk-scope .group-table:not(.group-table--pr) thead th:nth-child(5),
    body.bk-scope .group-table:not(.group-table--pr) thead th:nth-child(6),
    body.bk-scope .group-table:not(.group-table--pr) tbody td:nth-child(4),
    body.bk-scope .group-table:not(.group-table--pr) tbody td:nth-child(5),
    body.bk-scope .group-table:not(.group-table--pr) tbody td:nth-child(6) {
        width: 42px !important;
        min-width: 40px !important;
        max-width: 46px !important;
        padding-left: 0.12rem !important;
        padding-right: 0.12rem !important;
    }

    body.bk-scope .group-table tbody td,
    body.bk-scope[data-bk-rowheight] .group-table tbody td {
        padding-top: 0.16rem !important;
        padding-bottom: 0.16rem !important;
    }
}