/*
 * ============================================================================
 * ROAD2RADIANT — MOBILE SCOREBOARD MODAL
 * Structural fit for the competitive and deathmatch scoreboards
 * ----------------------------------------------------------------------------
 * Loaded last, immediately after mobileTacticalNetwork.css. Every rule lives
 * inside the phone tier, so the desktop scoreboard is untouched.
 *
 * THE PROBLEM, IN SOURCE
 * The rows in scoreboard.js are flex containers holding fixed-width clusters:
 *
 *   competitive  .sb-id     w-[220px] shrink-0
 *                .sb-stats  w-[180px]  +  gap-6  (48px)
 *                .sb-mvp    flex-grow  in between
 *                -> ~448px minimum inside a 256px content box at 320px
 *
 *   deathmatch   .sb-id     w-[220px] shrink-0
 *                .sb-dm-stats  w-14 + w-16 + w-16 + gap-6 twice -> ~280px
 *                -> ~500px minimum, plus a 128px (gap-16) header pair
 *
 * `#scoreboard-content` is `overflow-y: auto`, which per the CSS overflow
 * rules computes `overflow-x: auto` on the other axis, so any descendant wider
 * than the box produced a sideways scrollbar.
 *
 * THE FIX
 * The fixed widths are neutralised (width: auto; min-width: 0) and each row
 * becomes a small grid that reflows the same children. Nothing is hidden,
 * clipped, or scrolled horizontally: every field — placement, agent, rank,
 * name, Score, K/D, KDA, MVP — keeps its node and its text. No
 * `overflow-x: hidden` is used anywhere; the content genuinely fits.
 *
 * The competitive row reads left-to-right in a fixed three-column order:
 * identity and score, then the MVP badge, then KDA right-aligned. The score
 * is moved into the left column by dissolving its cluster with
 * `display: contents`, so the markup is untouched.
 *
 * Width budget at 320px:
 *   viewport 320 - modal padding 16 = 304 content panel
 *   304 - #scoreboard-content padding 24 = 280 usable
 *   280 - row padding 16 = 264 for the row's own tracks
 *   competitive: 264 - 64 (MVP) - 58 (KDA) - 12 (2 gaps) = 130 for identity
 *   deathmatch : 264 - 26 (place) - 6 (gap) = 232 for 56 + 64 + 64 + 20 -> fits
 * ============================================================================
 */

@media (max-width: 767px) {
    /* ------------------------------------------------------------------------
       MODAL FRAME
       Sensible side margins instead of the desktop 16px, and a content box
       that can never be pushed wider than the panel.
    ------------------------------------------------------------------------ */
    #scoreboard-modal {
        padding: 8px;
    }

    #scoreboard-modal > .relative {
        min-width: 0;
        max-width: 100%;
    }

    #scoreboard-content {
        padding: 12px;
        min-width: 0;
    }

    /* ------------------------------------------------------------------------
       HEADER STRIP
       The map line and the close button share one row; the label may wrap
       rather than push the panel wider.
    ------------------------------------------------------------------------ */
    #scoreboard-modal .sb-head {
        padding: 12px;
        gap: 8px;
    }

    #scoreboard-modal .sb-map-info {
        min-width: 0;
    }

    /* ------------------------------------------------------------------------
       SHARED FIXED-WIDTH NEUTRALISATION
       These two clusters carried w-[220px] / w-[180px] plus shrink-0. They
       become content-sized so the grid, not the markup, decides the width.
    ------------------------------------------------------------------------ */
    #scoreboard-content .sb-id,
    #scoreboard-content .sb-stats {
        width: auto;
        min-width: 0;
    }

    #scoreboard-content .sb-id {
        gap: 6px;
    }

    #scoreboard-content .sb-stats {
        gap: 10px;
    }

    /* ------------------------------------------------------------------------
       SHARED ROW FRAME
       Both row kinds start from this grid; the deathmatch row below overrides
       the tracks and the competitive row adds a third one.
    ------------------------------------------------------------------------ */
    #scoreboard-content .sb-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        padding: 8px;
        min-width: 0;
    }

    /* Placement for the shared frame. Competitive rows override all three
       immediately below; deathmatch rows keep them and then override `.sb-id`
       and `.sb-dm-stats` with their own rules, exactly as before. */
    #scoreboard-content .sb-row .sb-id {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    #scoreboard-content .sb-row .sb-stats {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
    }

    #scoreboard-content .sb-row .sb-mvp {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
        min-width: 0;
    }

    /* ------------------------------------------------------------------------
       COMPETITIVE ROW
       A stable three-column reading order that holds on every row, whether or
       not an MVP badge is present:

         col 1  agent · rank · name  on line 1, score on line 2
         col 2  MVP badge, centred across both lines
         col 3  KDA, right-aligned across both lines

       The shared frame above supplies `display: grid` and the fallback tracks;
       this rule replaces the tracks for competitive rows only, so every
       deathmatch row keeps exactly the treatment it already had.
    ------------------------------------------------------------------------ */
    #scoreboard-content .sb-row:not(.sb-dm-row) {
        grid-template-columns: minmax(0, 1fr) 64px 58px;
        column-gap: 6px;
        row-gap: 2px;
    }

    #scoreboard-content .sb-row:not(.sb-dm-row) .sb-id {
        grid-column: 1;
        grid-row: 1;
    }

    /* The identity line is a nowrap flex row, so its name must be allowed to
       shrink below its content width for `truncate` to take effect. */
    #scoreboard-content .sb-row:not(.sb-dm-row) .sb-id > p {
        min-width: 0;
    }

    /* Dissolving the stat cluster turns its two children into grid items of the
       row itself. That is what lets Score move to the left column and KDA to the
       right without moving, cloning, or rewriting a single node. */
    #scoreboard-content .sb-row:not(.sb-dm-row) .sb-stats {
        display: contents;
    }

    /* Score — left column, second line. The 68px offset is the identity indent
       (32px agent + 6px gap + 24px rank + 6px gap) so it lines up with the
       name rather than with the agent portrait. */
    #scoreboard-content .sb-row:not(.sb-dm-row) .sb-stats > :first-child {
        grid-column: 1;
        grid-row: 2;
        width: auto;
        min-width: 0;
        padding-left: 68px;
        text-align: left;
    }

    /* KDA — right column, right-aligned, centred across both lines. */
    #scoreboard-content .sb-row:not(.sb-dm-row) .sb-stats > :last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
        width: auto;
        min-width: 0;
        text-align: right;
    }

    /* MVP — the centre column, always reserved, so a row without a badge holds
       the same three column positions as its neighbours. */
    #scoreboard-content .sb-row:not(.sb-dm-row) .sb-mvp {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-content: center;
        min-width: 0;
    }

    /* The badge is 9px with 5px inline padding. It must never widen the centre
       track, so a long label wraps between its two words instead. */
    #scoreboard-content .sb-row:not(.sb-dm-row) .sb-mvp .mvp-badge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.1;
    }

    /* ------------------------------------------------------------------------
       DEATHMATCH ROW
       The placement number keeps its own column and spans both lines; the
       identity and the stat cluster each take one full line beneath it.
    ------------------------------------------------------------------------ */
    #scoreboard-content .sb-dm-row {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: center;
        column-gap: 6px;
        row-gap: 2px;
        padding: 8px;
        min-width: 0;
    }

    #scoreboard-content .sb-dm-row > div:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    #scoreboard-content .sb-dm-row .sb-id {
        grid-column: 2;
        grid-row: 1;
    }

    #scoreboard-content .sb-dm-row .sb-dm-stats {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
    }

    /* ------------------------------------------------------------------------
       DEATHMATCH HEADER
       Two 64px gaps (gap-16) plus three blocks could not fit on one line, and
       an `auto 1fr auto` split gives the middle stats pair only ~95px against
       the ~116px it needs, so K/D + SCORE would collide with DATE/DURATION.
       Placement and the date/meta block share the first line, and the stats
       pair takes the full width on its own line beneath them.
    ------------------------------------------------------------------------ */
    #scoreboard-content .sb-dm-header-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 8px;
        row-gap: 8px;
        padding-left: 0;
        padding-right: 0;
    }

    #scoreboard-content .sb-dm-header-row .sb-dm-header-meta {
        grid-column: 1;
        grid-row: 1;
    }

    #scoreboard-content .sb-dm-header-row .sb-dm-header-date {
        grid-column: 3;
        grid-row: 1;
    }

    #scoreboard-content .sb-dm-header-row .sb-dm-header-stats {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    /* ------------------------------------------------------------------------
       DEATHMATCH TAB STRIP
       Three uppercase labels with gap-6 exceed a 320px line. Tracked-out
       letterforms are what overflow, so the tracking is relaxed first; the
       strip is also allowed to wrap rather than scroll.
    ------------------------------------------------------------------------ */
    #scoreboard-content .sb-tabs {
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
        padding-left: 0;
        padding-right: 0;
    }

    #scoreboard-content .sb-tabs button {
        letter-spacing: 0;
    }
}