/*
 * ============================================================================
 * ROAD2RADIANT — MOBILE DASHBOARD · MATCH HISTORY
 * Three-group match card: identity · performance · map
 * ----------------------------------------------------------------------------
 * Loaded after mobileDashboardTabs.css. Every rule is scoped to
 * `body.profile-loaded #dw-history` and lives inside a phone-width media query,
 * so the desktop card layout, the homepage, every other dashboard section, and
 * the desktop six-track grid are untouched.
 *
 * Desktop reference (styles.css):
 *   .match-overlay { grid-template-columns: 70px 80px 140px 1fr 120px 180px; }
 * That is about 590px of fixed tracks inside `.match-card { overflow: hidden }`,
 * so on phones the result, round score and map splash were clipped.
 *
 * Mobile layout — the same six children are re-placed, never cloned, moved, or
 * re-rendered. The map splash no longer owns a row: it is lifted out of the
 * grid as an absolutely positioned artwork layer across the right half of the
 * card, and the two text groups keep the full width on top of it:
 *
 *   +-------+------------------+-------------------+
 *   |       | VICTORY          |  rank icon  +18   |  group 1 / group 2
 *   | agent | 13:11            |                   |
 *   |       | KDA 13/10/5      |  MVP  R-RATING    |
 *   |       | Score 4,512      |                   |
 *   +-------+------------------+-------------------+
 *              ...map artwork behind the right half, left edge fading...
 *
 * Because the artwork is out of flow it contributes no row, no gap and no
 * height, so the card is shorter than the earlier banded version rather than
 * taller. Nothing is hidden: every metric, badge, and the scoreboard click target are
 * unchanged. No `opacity: 0`, no truncation, no nested scrolling, and no
 * overflow redeclaration — `.match-card` keeps the clipping declared once in
 * styles.css.
 *
 * Breakpoints:
 * - <= 767px : phones.
 * - <= 374px : very narrow phones (320 / 360).
 * ============================================================================
 */

@media (max-width: 767px) {
    /* The card keeps its rounded corners, border, background, overflow and
       onclick handler; only the overlay's own grid and stacking change. */
    body.profile-loaded #dw-history .match-overlay {
        /* Containing block for the artwork layer below. Its padding box is the
           card's content box, so `inset: 0` reaches the card's clip edges. */
        position: relative;
        grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "agent result rr"
            "agent kda    badges";
        column-gap: 8px;
        row-gap: 6px;
        min-height: 0;
        padding: 10px;
    }

    /* --- PAINT ORDER ------------------------------------------------------ */

    /* The text groups are painted above the artwork. This is a stacking
       declaration only: it changes no size, spacing, or flow. The map layer is
       excluded so it stays the bottom-most layer. */
    body.profile-loaded #dw-history .match-overlay > :not(.map-splash-container) {
        position: relative;
        z-index: 1;
    }

    /* --- GROUP 1 · MATCH IDENTITY ---------------------------------------- */

    /* Agent portrait: fixed but small enough for a 320px phone, and the only
       element that spans both text rows. */
    body.profile-loaded #dw-history .agent-thumb {
        grid-area: agent;
        align-self: center;
        width: 46px;
        height: 46px;
        margin-left: 0;
        border-radius: 8px;
    }

    /* Result: VICTORY / DEFEAT / TRAINING SESSION and the round score stay the
       first thing read. */
    body.profile-loaded #dw-history .result-block {
        grid-area: result;
        align-self: center;
        min-width: 0;
        text-align: left;
    }

    body.profile-loaded #dw-history .result-status {
        font-size: 15px;
        font-style: italic;
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: 0.06em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.profile-loaded #dw-history .result-score {
        margin-top: 2px;
        font-size: 14px;
        letter-spacing: 0.04em;
    }

    /* KDA and total score. */
    body.profile-loaded #dw-history .kda-block {
        grid-area: kda;
        align-self: center;
        min-width: 0;
        padding-left: 0;
    }

    body.profile-loaded #dw-history .kda-text {
        font-size: 13px;
        letter-spacing: 0;
        line-height: 1.15;
        white-space: nowrap;
    }

    body.profile-loaded #dw-history .score-text {
        font-size: 10px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* --- GROUP 2 · PERFORMANCE ------------------------------------------- */

    /* RR indicator: the rank icon and the RR gain stay side by side and are
       centred, as one group, inside the right-hand artwork area. `justify-
       content` is the only mechanism used — the pair is the flex line, so
       centring it centres the group and keeps the two parts together.

       The pair also carries its own contrast plate. It sits directly on the
       map splash, whose luminance swings from a bright Breeze sky to a dark
       Bind interior, so a pale rank glyph or a dark red `-18` could disappear
       into the artwork. A near-black backing with an 8px radius and a hairline
       black border keeps the same legibility on every map, bright or dark.
       Opacity is deliberately mid-range (~60%): 72% read as a solid black
       chip over bright artwork, while 45% let too much of a busy splash
       through, so the plate settles between the two — it darkens whatever is
       behind it without flattening the map, and the hairline edge does the
       work of defining the shape.
       Compact padding keeps it a label rather than a button.

       `justify-self` / `align-self` size the plate to its content instead of
       the whole grid cell: the cell is shared with the KDA block, and a
       stretched plate would read as a bar. Both axes stay centred in the cell,
       so the group keeps its current position and the card keeps its size. */
    body.profile-loaded #dw-history .rr-indicator {
        grid-area: rr;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        align-self: center;
        gap: 4px;
        padding: 2px 6px;
        border: 1px solid rgba(0, 0, 0, 0.85);
        border-radius: 8px;
        background-color: rgba(3, 10, 15, 0.60);
        min-width: 0;
        text-align: left;
    }

    body.profile-loaded #dw-history .rr-indicator > div {
        width: 24px;
        height: 24px;
        margin: 0;
        flex: 0 0 auto;
    }

    body.profile-loaded #dw-history .rank-mini {
        width: 22px;
        height: 22px;
        margin: 0;
    }

    body.profile-loaded #dw-history .rr-value {
        margin-top: 0;
        font-size: 13px;
        white-space: nowrap;
    }

    /* MVP / R-Rating badges: owned by the right-hand track (`badges`), centred
       inside it and never moved over the player information. That track starts
       where the KDA column ends, so the badge sits in the map artwork area and
       cannot reach the KDA or the RR indicator, which keeps its own row above.
       A two-badge cluster (MVP + R-Rating) wraps inside the track instead of
       widening it, so the column budget is unchanged. */
    body.profile-loaded #dw-history .mvp-block {
        grid-area: badges;
        align-self: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        min-width: 0;
    }

    /* A translucent dark base under the badge tints keeps the labels legible
       now that the artwork behind them is bright again. The cyan base tint is
       re-applied on top, so the R-Rating keeps its cyan appearance. */
    body.profile-loaded #dw-history .mvp-badge {
        max-width: 100%;
        background-color: rgba(3, 10, 15, 0.62);
    }

    body.profile-loaded #dw-history .r-rating-badge {
        width: auto;
        max-width: 100%;
        white-space: normal;
        background-color: rgba(3, 10, 15, 0.72);
        background-image: linear-gradient(rgba(0, 242, 255, 0.14), rgba(0, 242, 255, 0.14));
    }

    /* --- ARTWORK LAYER · right half, behind the text ---------------------- */

    /* The splash leaves the grid entirely: `position: absolute` contributes no
       row, no gap and no height, so the card cannot grow to hold it. Because
       the containing block is the overlay's padding box the layer reaches the
       card's clip edges, and `.match-card`'s own `overflow: hidden` rounds the
       two right-hand corners for free.
       `to left` puts the gradient's 0% at the right edge, so the artwork is
       solid on the right and dissolves across its left edge into the card.
       The solid stop has to stay well past the midpoint: the earlier fade
       started at 0% and was fully transparent by 92%, so the mask alone
       removed about half the artwork's alpha everywhere and left a grey wash
       instead of a recognizable map. Solid to 58% keeps the right of the card
       readable as a map and still spends the remaining 42% of the layer on the
       left-edge dissolve. */
    body.profile-loaded #dw-history .map-splash-container {
        position: absolute;
        inset: 0 0 0 auto;
        width: 52%;
        height: auto;
        min-height: 0;
        border-radius: 0;
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0) 100%);
    }

    /* `cover` crops instead of stretching. Three separate multipliers used to
       dim this image at once — `opacity: 0.45`, `brightness(0.75)` and the
       near-full-width mask above — for a combined ~0.17 of the original
       luminance, which is why the map read as black. Opacity is now the only
       strong dimmer (0.82) and brightness lifts rather than crushes, so the
       artwork lands at roughly 0.87 of source over an opaque card. Contrast
       for the metrics on top comes from their own dark backings below, not
       from smothering the picture, and the left column never meets the image
       at all because the mask resolves to zero there. */
    body.profile-loaded #dw-history .map-splash-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
        opacity: 0.82;
        filter: brightness(1.06) saturate(1.18);
    }

    /* Touch devices keep the brightness feedback but must not scale the card
       into the clipped viewport edge. */
    body.profile-loaded #dw-history .match-card:hover {
        transform: none;
    }
}

@media (max-width: 374px) {
    /* 320px phones: shrink only the fixed track and the display type. Nothing
       is removed, and the artwork keeps its proportional 52% layer. */
    body.profile-loaded #dw-history .match-overlay {
        grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 6px;
        padding: 8px;
    }

    body.profile-loaded #dw-history .agent-thumb {
        width: 42px;
        height: 42px;
    }

    body.profile-loaded #dw-history .result-status {
        font-size: 14px;
    }

    body.profile-loaded #dw-history .result-score {
        font-size: 13px;
    }

    /* One step smaller than the phone tier's 13px, so the narrowest supported
       card keeps the K/D/A numbers inside the flexible middle track. The KDA
       label (10px `score-text`) stays smaller than the value, as on every other
       width, and the formatting itself is untouched. */
    body.profile-loaded #dw-history .kda-text {
        font-size: 12px;
    }
}