/*
 * ============================================================================
 * ROAD2RADIANT — MOBILE DASHBOARD · PHASE 3, STEP 1
 * Player identity, rank card, core statistics, and section spacing
 * ----------------------------------------------------------------------------
 * Loaded after mobile.css. Every rule is scoped to `body.profile-loaded` and
 * lives inside a phone-width media query, so the desktop dashboard and the
 * homepage are untouched.
 *
 * Scope:
 * - Player identity: smaller avatar, tighter identity stack, safer long-ID and
 *   long-title wrapping, compact skill-bracket pill.
 * - Rank card: 16px padding and tighter row/column rhythm. The existing
 *   mobile.css centring rules for the current and peak rank are preserved.
 * - Rank scale: 40px rank icons inside a 48px pressure ring, 16px rank names
 *   and RR, 17px Level/Region. Current-before-peak hierarchy is unchanged.
 * - Hover telemetry layers (#pressure-hud-tooltip, #player-title-tooltip) are
 *   re-anchored and width-capped so neither can widen the document.
 * - Core statistics: 16px padding, denser grid gaps, a wrapping header, and
 *   one-line labels with tabular numerals. No metric, label, or value is
 *   hidden or renamed.
 * - Section spacing: 16px card padding and 12px inter-section gaps where the
 *   markup previously combined p-6/p-5/mb-4/mb-8/mt-6 values.
 *
 * Out of scope (later steps): match history, Tactical Network dock, AI FAB,
 * scoreboard modal, fingerprint canvas, ascension row reflow, permission
 * locks. Nothing here targets .data-locked, .lock-overlay-element,
 * .help-trigger, #ai-lock-popup, or #bracket-locked-tag.
 *
 * Breakpoints:
 * - <= 767px : phones.
 * - <= 374px : very narrow phones (tighter gaps only).
 * ============================================================================
 */

@media (max-width: 767px) {
    /* ------------------------------------------------------------------------
       PLAYER IDENTITY
       The audit measured a 100px avatar, a 24px top gap, a 12px stack gap, and
       a 32px bottom gap. The fixed navigation clearance on #home-main is left
       exactly as-is; only the internal identity rhythm is tightened.
    ------------------------------------------------------------------------ */
    body.profile-loaded #dw-header .profile-card-circle {
        width: 80px;
        height: 80px;
    }

    body.profile-loaded #dw-header > .text-center > .flex.flex-col.items-center.gap-3 {
        gap: 8px;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    /* Long Riot IDs wrap inside the column instead of overflowing the card. */
    body.profile-loaded #display-riot-id {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
        text-align: center;
    }

    /* Claimed-profile state. The container used to be `absolute right-0 top-0`
       inside the header block, so the Claim pill landed on top of the centred
       identity stack. On phones it joins the flow instead; the rule only
       applies while JS has not marked the container hidden, so the existing
       show/hide behaviour is untouched. */
    body.profile-loaded #claim-container:not(.hidden) {
        position: static;
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
    }

    body.profile-loaded #player-title-container {
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 4px;
    }

    body.profile-loaded #player-tactical-title {
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: center;
        line-height: 1.25;
    }

    /* The bracket pill may wrap its label/value/lock cluster on narrow phones. */
    body.profile-loaded #skill-bracket-container {
        max-width: 100%;
        margin-top: 4px;
        padding: 6px 10px;
        gap: 6px;
        row-gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ------------------------------------------------------------------------
       RANK CARD
       16px padding replaces p-6; the row gap tightens from 16px to 12px while
       the existing mobile.css centring rules keep the two rank blocks centred.
    ------------------------------------------------------------------------ */
    body.profile-loaded #api-data-feed {
        padding: 16px;
        margin-bottom: 12px;
    }

    body.profile-loaded #api-data-feed > div {
        column-gap: 12px;
        row-gap: 10px;
    }

    body.profile-loaded #current-rank-block {
        gap: 10px;
    }

    body.profile-loaded #peak-rank-block {
        gap: 8px;
    }

    /* Level and Region occupy equal grid tracks. A zero minimum prevents the
       old 48px cell floor from overflowing those tracks at 320px. */
    body.profile-loaded #api-data-feed > div > div.text-center {
        min-width: 0;
    }

    /* ------------------------------------------------------------------------
       RANK SCALE AND OVERFLOW CONTAINMENT
       Two 48px icons inside a 56px ring consumed a third of a 358px card.
       40px inside 48px restores breathing room, and the type steps down one
       notch without any value, label, or hierarchy changing.
    ------------------------------------------------------------------------ */
    body.profile-loaded #rank-pressure-container {
        width: 48px;
        height: 48px;
    }

    body.profile-loaded #rank-icon {
        width: 40px;
        height: 40px;
    }

    body.profile-loaded #peak-icon {
        width: 40px;
        height: 40px;
        /* The two rank blocks centre icon-and-text groups of different widths.
           Correct only the peak icon's visual position; its flex footprint,
           text, and the current rank block remain exactly where they were. */
        transform: translateX(-4px);
    }

    body.profile-loaded #api-rank,
    body.profile-loaded #api-peak {
        font-size: 16px;
    }

    body.profile-loaded #api-level,
    body.profile-loaded #api-region,
    body.profile-loaded #api-leaderboard {
        font-size: 17px;
    }

    /* ------------------------------------------------------------------------
       HOVER TELEMETRY LAYERS
       Both are `opacity-0` + `group-hover` + `pointer-events-none`, so a touch
       screen can never reveal them — but their desktop anchors still inflated
       the document scroll width: the pressure panel started at `left: 100%`
       and ran 300px further right, and the title panel sized itself with an
       uncapped `max-content`. Each is re-anchored and width-capped against the
       viewport instead of being removed, so no legend or requirement text is
       lost and nothing is hidden.
    ------------------------------------------------------------------------ */
    body.profile-loaded #pressure-hud-tooltip {
        position: fixed;
        top: 8px;
        right: 8px;
        bottom: auto;
        left: auto;
        width: min(260px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        margin-left: 0;
        transform: none;
    }

    body.profile-loaded #player-title-tooltip {
        left: 50%;
        right: auto;
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 40px);
        transform: translateX(-50%);
        white-space: normal;
    }

    /* ------------------------------------------------------------------------
       CORE STATISTICS
       Still three columns. Only density, wrapping, and numeric alignment
       change; every metric node and its text stays in place for
       executeStatAnalysis() to read.
    ------------------------------------------------------------------------ */
    body.profile-loaded #performance-dashboard {
        padding: 16px;
        margin-bottom: 12px;
    }

    body.profile-loaded #performance-dashboard > div:first-child {
        flex-wrap: wrap;
        gap: 2px 10px;
        margin-bottom: 12px;
    }

    body.profile-loaded #performance-dashboard > div.grid {
        column-gap: 8px;
        row-gap: 14px;
    }

    body.profile-loaded #performance-dashboard > div.grid > div {
        padding: 0 2px;
    }

    body.profile-loaded #performance-dashboard > div.grid > div > p:first-child {
        margin-bottom: 2px;
        line-height: 1.15;
        white-space: nowrap;
    }

    body.profile-loaded #perf-kd,
    body.profile-loaded #perf-wr,
    body.profile-loaded #perf-hs,
    body.profile-loaded #perf-kast,
    body.profile-loaded #perf-adr,
    body.profile-loaded #perf-delta {
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    /* ------------------------------------------------------------------------
       HEADER CARDS BENEATH THE METRICS
       Best Map keeps its 100px minimum height with slightly tighter padding;
       the two-up card grid collapses to a 12px stack gap on phones.
    ------------------------------------------------------------------------ */
    body.profile-loaded #best-map-container {
        padding: 12px 16px;
    }

    body.profile-loaded #dw-header > .grid {
        gap: 12px;
        margin-bottom: 16px;
    }

    body.profile-loaded #tactical-dossier-panel {
        margin-bottom: 16px;
    }

    body.profile-loaded #tactical-dossier-panel .dossier-card {
        padding: 16px;
    }

    /* ------------------------------------------------------------------------
       ADVANCED SECTION CARDS
       Padding only. No grid definition, chart height, canvas size, or section
       order is touched.
    ------------------------------------------------------------------------ */
    body.profile-loaded #entry-impact-container,
    body.profile-loaded #clutch-probability-container,
    body.profile-loaded #role-benchmarking-container,
    body.profile-loaded #economic-bleed-container,
    body.profile-loaded #udc-container,
    body.profile-loaded #trade-mechanics-container,
    body.profile-loaded #comp-container,
    body.profile-loaded #evolution-timeline-container,
    body.profile-loaded #performance-timelapse-container,
    body.profile-loaded #sidearm-eco-dashboard,
    body.profile-loaded #performance-impact-matrix-container,
    body.profile-loaded #rank-ascension-simulator {
        padding: 16px;
    }

    /* ------------------------------------------------------------------------
       SECTION RHYTHM
       Each wrapper already carried mb-4 (16px). It becomes 12px; stacked or
       duplicated margins (mb-8 inside a wrapper, mt-6, mt-2) collapse instead
       of adding to the gap.
    ------------------------------------------------------------------------ */
    body.profile-loaded #dw-entry,
    body.profile-loaded #dw-clutch,
    body.profile-loaded #dw-progression,
    body.profile-loaded #dw-evolution,
    body.profile-loaded #dw-timelapse,
    body.profile-loaded #dw-role,
    body.profile-loaded #dw-eco,
    body.profile-loaded #dw-bleed,
    body.profile-loaded #dw-udc,
    body.profile-loaded #dw-trades,
    body.profile-loaded #dw-comp,
    body.profile-loaded #dw-matrix {
        margin-bottom: 12px;
    }

    body.profile-loaded #entry-impact-container {
        margin-bottom: 0;
    }

    body.profile-loaded #economic-bleed-container {
        margin-top: 0;
    }

    body.profile-loaded #dw-evolution,
    body.profile-loaded #dw-timelapse {
        margin-top: 0;
    }
}

@media (max-width: 374px) {
    /* Very narrow phones: tighten gaps only. Card padding stays at 16px. */
    body.profile-loaded #dw-header > .text-center > .flex.flex-col.items-center.gap-3 {
        gap: 6px;
    }

    body.profile-loaded #display-riot-id {
        font-size: 18px;
    }

    /* Both lines tighten: the second one carries three cells, so the column
       gap has to shrink with the row gap to stay inside a 320px viewport. */
    body.profile-loaded #api-data-feed > div {
        column-gap: 8px;
        row-gap: 8px;
    }

    body.profile-loaded #performance-dashboard > div.grid {
        column-gap: 6px;
    }
}