/* ── Compact layout (≤1200px) ─────────────────────────────────────────────
   Replaces an earlier two-part approach (phone-only hamburger nav below
   768px, then a "freeze at the full 1240px desktop layout and scroll
   horizontally" hack for 769–1200px). That hack forced a min-width on
   <body> on every resize tick, which is expensive to recompute live and
   made the whole browser feel laggy while dragging the window — and its
   hardcoded per-breakpoint column counts (main.css's own 860/900/1024/
   1200px rules, colliding with this file's) meant cards rendered wrong
   right at certain in-between widths.

   New approach: ONE mechanism, applied continuously across the whole
   ≤1200px range instead of at a few fixed breakpoints —
     1. Hamburger nav, same at every compact width (no separate "tablet"
        nav state) — nothing to swap or collide.
     2. Card grids (.featured-grid/.mini-grid/.players-grid/etc.) use CSS
        auto-fit/auto-fill with a minmax() floor instead of a fixed column
        count. The browser adds or drops a column smoothly as the window
        resizes — no discrete jump, so no boundary width where two rules
        fight and a card renders half-sized or overlapping.
   Above 1200px nothing here applies — main.css's own layout already looks
   right unaided (its widest breakpoint is 1200px), so full-screen sizes
   are completely untouched, same guarantee as before.

   A second block below (≤768px, true phone width) layers the finer detail
   — smaller text, tighter padding, stacked headers — that only makes
   sense once things are genuinely cramped, on top of this one.
   ────────────────────────────────────────────────────────────────────── */

.nav-hamburger, .nav-scrim { display: none; }

@media (max-width: 1200px) {

    /* ── Navbar → hamburger menu ─────────────────────────────────────────
       main.css gives .navbar z-index:100 unconditionally; combined with
       position:relative that creates a stacking context, so nav-links'
       own z-index:200 only counts *inside* it — the scrim (190), which
       sits outside the navbar in the DOM, would beat the whole navbar and
       swallow every tap on the open menu. Raising the navbar's z-index
       above the scrim's fixes it. */
    .navbar { position: relative; z-index: 220; color: var(--text); }
    .gold-body .navbar, .auth-body .navbar { color: #121212; }
    .tournament-badge { display: none; }   /* reclaim space next to the hamburger */

    .nav-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 210;
    }
    .nav-hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        color: inherit;
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .navbar.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .navbar.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
    .navbar.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .nav-links {
        position: fixed;
        top: 68px;   /* main.css's default (non-auth) navbar height */
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #121212;
        border-bottom: 1px solid #2a2a2a;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        z-index: 200;
        padding: 6px 0;
    }
    /* auth-body's navbar is 52px tall at every width (main.css base rule,
       not a breakpoint), so this applies across the whole compact range. */
    .auth-body .nav-links { top: 52px; max-height: calc(100vh - 52px); }
    .navbar.nav-open .nav-links {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
    .nav-links a, .nav-links .wallet-balance {
        color: #f0f0f0 !important;
        width: 100%;
        padding: 14px 20px;
        font-size: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        box-sizing: border-box;
    }
    .nav-links .wallet-balance { color: #39ff8a !important; font-weight: 700; }
    .nav-links a.btn, .nav-links a.nav-btn { border-radius: 0; background: transparent !important; text-align: left; }
    .nav-links a.nav-logout { color: #ff6b6b !important; }

    /* Dark scrim behind the open menu, closes it on tap-outside (market.js). */
    .nav-scrim {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 190;
    }
    .navbar.nav-open ~ .nav-scrim { display: block; }

    /* ── Fluid card grids — auto-fit/auto-fill instead of a fixed column
       count, so the layout scales continuously with width. ─────────────── */
    /* 240px let 3 narrow columns appear well before the card had enough
       room for its own header (icon + flip-table title) — the flap wrapping
       fix keeps that from overflowing, but 3-across at ~250px/card is still
       a cramped, wrapped-title mess compared to just giving it more room.
       320px keeps this at 2 columns across nearly the whole compact range
       (3 columns only reappears within ~80px of the 1200px ceiling, where a
       card is already close to its 405px desktop width anyway) — each card
       gets meaningfully more space, so the title fits on one line at most
       widths instead of needing to wrap at all. */
    .featured-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
    .featured-card { transform: none !important; } /* the cursor-tracked 3D lift is pointer-only; neutralise any stuck transform on touch */
    .mini-grid > .mini-card { flex: 1 1 200px; }
    .players-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
    .holdings-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
    .dividend-breakdown { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
    .trade-grid, .info-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

    /* ── Data tables / filter chips — safe to let scroll horizontally at
       any compact width, cheap (local to the element, not the page). ──── */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .club-filter-wrap { overflow-x: auto; }

    /* ── Card internals scale WITH the card, not just the card box ────────
       The auto-fit grids above resize the card itself, but everything
       inside (title, price, sparkline, timeframe buttons, trade button)
       was still fixed desktop-sized CSS — fine at the one width the cards
       were designed for, broken (overflowing/overlapping/squashed) at
       every other width the grid can now produce. container-type turns
       each card into its own query context, so cqw ("1% of THIS card's
       own width") scales every child continuously with it — proportional
       shrink, same relative position, regardless of how many columns the
       grid decided to use at any given viewport width. Values below are
       each child's actual size ÷ its card's natural desktop width (e.g.
       featured-card ≈ 405px, mini-card ≈ 301px), so at desktop width
       (i.e. the widest a card gets even at 1200px, hitting the clamp max)
       they land back on the exact original sizes. */
    .featured-card { container-type: inline-size; }
    .mini-card { container-type: inline-size; }

    .featured-card    { padding: clamp(10px, 4.4cqw, 18px); gap: clamp(6px, 3cqw, 12px); }
    /* No flex-wrap here on purpose — .feat-flap already has its own wrap
       (word-by-word) and min-width:0/flex:1 to take whatever space is left
       next to the icon. If .feat-header itself were also allowed to wrap,
       the icon (fixed-size) would be the thing that gets pushed to its own
       line before the flap-row runs out of room, separating the icon from
       even the first word — the icon needs to stay in the same row as the
       title's first line always.
       align-items: flex-start (not main.css's default center) for the same
       reason — .feat-header is genuinely one flex line even when the title
       wraps to two (nowrap confirmed structurally), but center vertically
       centers the icon against the flap-row's FULL two-line height, so it
       visually floats between the two words instead of sitting with the
       first one. flex-start pins it to the top, i.e. the title's first
       line, which is what "shares the top line with the icon" means. */
    .feat-header      { padding: clamp(6px, 2.5cqw, 10px) clamp(8px, 3.5cqw, 14px); gap: clamp(6px, 2.5cqw, 10px); align-items: flex-start; }
    .feat-icon        { font-size: clamp(16px, 5.5cqw, 24px); }
    .feat-label       { font-size: clamp(9px, 2.8cqw, 12px); }
    /* The title is actually a "flip table" — .feat-flap (flap-row) with one
       fixed 26px .flap-cell per letter, built by JS. Fixed-width cells and
       width:fit-content meant the row never shrank with the card, so a
       longer label ("Biggest Gainers") stayed at its full ~440px intrinsic
       width and spilled out past the card edge once the card itself got
       smaller than that. min-width:0 lets it actually shrink inside the
       flex row (flex items ignore width/clamp on children and keep their
       content size otherwise); cqw-scaled cells shrink it with the card
       like everything else; flex-wrap is a hard backstop so even a label
       that still doesn't fit on one line wraps instead of overflowing. */
    .feat-flap {
        --flap-gap: clamp(2px, 1.2cqw, 4px);
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: 100%;
        flex-wrap: wrap;
        row-gap: 3px;
        margin-bottom: 0;
    }
    .feat-flap .flap-cell {
        width: clamp(12px, 5.5cqw, 26px);
        height: clamp(16px, 7cqw, 33px);
        min-width: 0;
        font-size: clamp(9px, 4cqw, 19px);
    }
    .feat-flap .flap-cell--space { width: clamp(6px, 2.2cqw, 12px); }
    .feat-body        { gap: clamp(6px, 3cqw, 12px); }
    .feat-top-name    { font-size: clamp(14px, 4.9cqw, 20px); margin-top: clamp(12px, 6cqw, 25px); transform: translateY(clamp(-10px, -2.5cqw, -4px)); }
    .feat-top-price   { font-size: clamp(15px, 5.4cqw, 22px); }
    .feat-top-change  { font-size: clamp(10px, 3cqw, 12px); }
    /* .feat-right/.feat-spark were the one spot still using unbounded cqw —
       fine at the widths this was tested at, but a lone featured card can
       stretch quite wide when auto-fit only fits one per row (e.g. ~500–900px
       at some viewport widths), and with no ceiling that widened .feat-right
       past its 220px desktop size and blew the sparkline up correspondingly
       — the same class of bug the mini-card fix already avoided by clamping
       every dimension both ways. Same treatment here: every cqw value below
       is now bounded so it can only ever shrink from the desktop value, never
       exceed it, regardless of how wide the grid makes a single card. */
    .feat-right       { width: clamp(90px, 52cqw, 220px); gap: clamp(3px, 1.5cqw, 6px); }
    .feat-spark       { height: clamp(60px, 43cqw, 176px); top: clamp(6px, 3cqw, 12px); left: clamp(-6px, -2.7cqw, -2px); }
    .feat-bottom-row, .feat-tf-row { gap: clamp(3px, 2cqw, 8px); }
    .feat-tf          { font-size: clamp(8px, 2.5cqw, 10px); padding: clamp(1px, 0.5cqw, 2px) clamp(4px, 2cqw, 8px); }
    .feat-trade-btn   { font-size: clamp(10px, 3cqw, 12px); padding: clamp(4px, 1.7cqw, 7px); }
    .feat-expand-btn  { font-size: clamp(9px, 2.7cqw, 11px); padding: clamp(4px, 1.5cqw, 6px); }
    .expand-arrow     { font-size: clamp(10px, 3cqw, 12px); }
    /* Below this, the 52%-wide sparkline column no longer leaves the text
       enough room to stay legible — drop it and let the price block take
       the full card instead of squashing everything together. */
    @container (max-width: 200px) {
        .feat-right { display: none; }
        .feat-body { justify-content: flex-start; }
    }

    .mini-card        { padding: clamp(10px, 6cqw, 20px); gap: clamp(6px, 4cqw, 15px); }
    .mini-badge       { font-size: clamp(7px, 2.5cqw, 8px); padding: clamp(1px, 0.4cqw, 1px) clamp(3px, 1.5cqw, 5px); }
    .mini-name        { font-size: clamp(13px, 6cqw, 20px); }
    .mini-price       { font-size: clamp(12px, 5.5cqw, 18px); }
    .mini-change      { font-size: clamp(10px, 4cqw, 13px); }
    .mini-right       { gap: clamp(4px, 2.5cqw, 8px); }
    .mini-spark {
        width: clamp(50px, 38cqw, 114px);
        height: clamp(38px, 29.5cqw, 89px);
        left: clamp(-20px, -6.6cqw, -6px);
    }
    .mini-card[data-etf-id] .mini-spark { left: 0; }
    .mini-tf-row      { gap: clamp(2px, 1cqw, 3px); }
    .mini-tf          { font-size: clamp(7px, 3cqw, 9px); padding: clamp(1px, 0.7cqw, 2px) clamp(3px, 2cqw, 6px); }
    .mini-trade-btn   { font-size: clamp(9px, 3.7cqw, 11px); padding: clamp(4px, 2cqw, 6px); }
    /* Same progressive-disclosure fallback as the featured card. */
    @container (max-width: 150px) {
        .mini-right { display: none; }
        .mini-body { justify-content: flex-start; }
    }

    /* ── Landing page ──────────────────────────────────────────────────────
       .stats-bar's "clubs tape + trademark notice rolling behind a solid
       gold shield" design (main.css) depends on the shield having wide open
       margins on both sides to roll content through — it's `width:60%` of
       the bar, capped at 820px, so at desktop widths that leaves hundreds
       of spare px per side for the tape/notice to actually show in. Below
       roughly 1200px there isn't enough margin left for either to be
       legible (a single club crest peeking out, disclaimer text squeezed
       into a sliver) — it doesn't degrade, it just breaks. Removing it
       entirely at compact widths (rather than trying to redesign a
       percentage-of-a-shrinking-bar layout to scale down) is simpler and
       matches what was asked for. */
    .landing-body .stats-bar { display: none; }

    /* The interactive hex floor (.hex-canvas) is a continuous-render-loop
       canvas — cursor-proximity lift, ambient pulses, ~60fps — genuinely
       expensive, which is presumably why main.css already disables it
       below 860/720px. Given the Market page is separately laggy on phone,
       reintroducing that render loop on mobile here would be the wrong
       direction. Instead: a static, tiled hex-outline pattern (pure CSS
       background-image, no JS, no per-frame cost) sits behind the hero
       text at every compact width — hexes stay visually present without
       the interactivity or its cost. Extends the existing hide-canvas
       behavior up to the same 1200px boundary everything else in this file
       uses, instead of the old 860/720px cutoffs, for one consistent
       compact-width treatment. */
    .landing-body .hex-canvas { display: none; }
    .landing-body .hero-scrim { display: none; }
    .landing-body .hero--hex {
        background-color: #000;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23FDBD01' stroke-opacity='0.16' stroke-width='1.5'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23FDBD01' stroke-opacity='0.16' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: repeat;
    }
}

/* ── Phone-only fine detail (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {

    body { font-size: 13px; }
    .container { padding: 14px 12px 40px; }

    .navbar { padding: 0 14px; height: 56px; }
    .nav-links { top: 56px; max-height: calc(100vh - 56px); }
    .nav-brand-name { font-size: 14px; }

    /* ── Market / ETF header ─────────────────────────────────────────────── */
    .market-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .market-header h1 { font-size: 20px; }
    .market-stats { width: 100%; gap: 10px; }
    .market-stat { flex: 1; padding: 10px; }
    .stat-num { font-size: 15px; }

    /* ── Filters / search / tabs ─────────────────────────────────────────── */
    .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .filter-group { width: 100%; }
    .search-input { width: 100%; }
    .club-filter-wrap { width: 100%; }
    .club-tabs { flex-wrap: nowrap; }

    /* ── Featured / mini cards — sizing is fully handled by the cqw-based
       scaling above (continuous with the card's own width at every
       compact width, phone included), nothing further needed here. ────── */
    .feat-tf-row { flex-wrap: wrap; }
    .feat-expanded { position: static; width: 100%; margin-top: 10px; box-shadow: none; }
    .mini-grid { gap: 10px; }

    /* ── Data tables ──────────────────────────────────────────────────────── */
    .data-table { font-size: 11px; min-width: 480px; }
    .data-table th, .data-table td { padding: 8px 6px; white-space: nowrap; }

    /* ── Player / ETF detail ─────────────────────────────────────────────── */
    .detail-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .detail-price-block { text-align: left; width: 100%; }
    .detail-big-price { font-size: 30px; }
    .detail-title { gap: 10px; }
    .trade-tabs { width: 100%; }
    .stock-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .basket-row { flex-wrap: wrap; gap: 6px; padding: 10px 0; }
    .club-badge-detail { width: 22px; height: 22px; }

    /* ── Portfolio ────────────────────────────────────────────────────────── */
    .summary-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
    .summary-card { padding: 12px; }
    .summary-val { font-size: 16px; }
    .chart-card { padding: 14px; }

    /* ── Info page — flap headings shrink further than the page's own
       already-reduced size, so a longer heading ("Buying & Selling") fits a
       375px-wide screen without wrapping mid-word. ─────────────────────── */
    .flap-cell { width: 18px; height: 24px; font-size: 13px; min-width: 12px; }
    .info-card, .auth-card { padding: 14px 16px; }

    /* ── Auth pages (login / register) ───────────────────────────────────── */
    .auth-page { padding: 28px 14px 48px; }
    .auth-headline { font-size: 38px; margin-bottom: 22px; }
    .auth-cols { grid-template-columns: 1fr; }
    .auth-card { box-shadow: 0 0 20px rgba(253,189,1,0.20); }
    .auth-card--form { padding: 18px 16px 20px; }

    /* ── Transaction overlay / flash messages ────────────────────────────── */
    .tx-box { width: calc(100% - 40px); padding: 24px 18px; }
    .tx-title { font-size: 19px; }
    .flash-messages { padding: 0 16px; }

    /* ── Landing page — tuck a bit more into the 480/860/900px rules main.css
       already ships; only what's genuinely still cramped at phone widths. ── */
    .hero-title { font-size: 30px; }
    .hero-subtitle { font-size: 14px; }
    .hiw-grid { grid-template-columns: 1fr; }
    .stats-bar-item { padding: 0 16px; }
    .landing-cta h2, .how-it-works h2 { font-size: 24px; }
}