/* FOOTYUP · burger drawer (mobile fullscreen nav) + final polish */

/* hamburger button (only visible on mobile) */
.burger-btn {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--bone-faint);
  color: var(--bone);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.burger-btn span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--bone);
  transition: transform 0.25s, opacity 0.2s;
}
.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Signin: text on desktop, icon-only on mobile (≤700px rule below). */
.fu-header .signin .signin-icon { display: none; }

/* The inline header — logo + 8 nav links + 6-item right cluster — needs a
   ~1451px minimum width to lay out without clipping the Sign-in button off
   the right edge. Collapse the inline nav into the burger drawer at ≤1500px:
   the ~50px headroom above the 1451px minimum absorbs OS scrollbar width
   (15-17px on Windows/Linux) and sub-pixel font-rendering variance. The
   drawer's fixed positioning and the scroll-perf culling stay scoped to
   ≤900px below — those are genuinely phone/tablet concerns. */
@media (max-width: 1500px) {
  .burger-btn { display: inline-flex; }
  /* hide the regular inline links — replaced by drawer */
  .fu-header .links { display: none; }
  /* With .links removed from the grid only two items remain (logo + actions).
     Drop the empty middle track so the action cluster hugs the right edge —
     the 3-col `auto 1fr auto` would otherwise park it in the 1fr column. */
  .fu-header { grid-template-columns: 1fr auto; }
}

@media (max-width: 900px) {
  /* keep search hidden on mobile (in drawer instead) */
  .fu-header .search-trigger { display: none; }

  /* `position: sticky` is finicky on iOS Safari — it depends on no ancestor
     forming a scroll container, momentum scroll can drop frames mid-stick,
     and flex parents complicate the resolution of the scroll context.
     `position: fixed` is unconditional. We compensate the popped-out header
     height with padding on `.app` so the first section doesn't slide under
     it. Header height ≈ 64px (44px button + 2×10px padding ≈ 64; the iOS
     safe-area-inset-top adds on top via env()). */
  .fu-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .app {
    /* keeps hero/content visible — fixed header floats over otherwise. */
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
  }
  /* Hero is `min-height: 100vh`; with the .app top-pad we'd push 64px past
     the fold and force a tiny extra scroll. Subtract the header from hero
     so it fits the visible viewport below the fixed header. */
  .hero {
    min-height: calc(100vh - 64px - env(safe-area-inset-top, 0px));
    min-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
  }
}

/* iPhone-sized: keep logo + Sign in + badged actions + burger.
   Theme + profile move to the drawer; signin gets a compact treatment so
   it fits beside the icon cluster without pushing the burger off-screen. */
@media (max-width: 700px) {
  .fu-header { grid-template-columns: 1fr auto; gap: 10px; }
  /* Push the action cluster nearer the edge — keep a small inset (and the
     notch safe-area) so it never touches the bezel. */
  .fu-header { padding-right: max(10px, env(safe-area-inset-right)); }
  .fu-header .right { gap: 6px; }
  .fu-header .right > .fu-iconbtn[title="Theme"],
  .fu-header .right > .fu-iconbtn[title="Profile"] { display: none; }
  .fu-iconbtn { width: 40px; height: 40px; }
  .burger-btn { width: 40px; height: 40px; }
  /* Compact icon-only signin on mobile: pip + login glyph in a 40-square
     button matching the icon buttons next to it. */
  .fu-header .signin {
    padding: 0;
    width: 40px; height: 40px;
    gap: 0;
    justify-content: center;
  }
  .fu-header .signin .pip { display: none; }
  .fu-header .signin .signin-text { display: none; }
  .fu-header .signin .signin-icon { display: inline-flex; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE SCROLL PERFORMANCE
   iOS Safari composites the entire viewport on every scroll frame, so any
   sticky `backdrop-filter` or infinite ring animation translates into
   dropped frames. None of these effects are essential — the header already
   has a near-opaque background, the spinning rings are decorative, the
   ticker is a flourish. Cull them on phone widths.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Sticky header: drop the blur. Background is already 88% opaque, so the
     visual delta is negligible; the perf delta on iOS is enormous. */
  .fu-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ink);
  }

  /* Decorative dashed-ring rotations on seal/medallion ornaments. Visible
     on apply/checkout/cancel/cart-empty/auth-success surfaces. They run at
     `transform: rotate()` infinitely — paused on mobile to free the GPU
     for scroll compositing. */
  .apply-done .seal::after,
  .checkout-success .seal::after,
  .cancel-seal::after,
  .fu-success .seal::after,
  .fu-cart-empty .frame::after,
  .contact-card .map-pin .ring,
  .nf-pitch .ball { animation: none !important; }

  /* Hero ticker marquee — visual flourish; on mobile it competes with
     scroll for GPU time. Freeze it. */
  .tagstrip-inner { animation: none !important; }

  /* Pulsing status dots on every game card — opacity-only, but still
     triggers a composite per frame. Drop on mobile. */
  .gc .gc-status .dot { animation: none !important; }

  /* Tap-only devices don't get :hover, but the transitions still resolve
     on tap → repaint mid-scroll. Disable hover transitions where touch
     is the only input. */
  @media (hover: none) {
    .gc,
    .stat-cards .card,
    .day-cell,
    .fu-iconbtn { transition: none; }
  }
}

/* Honor explicit user preference, all viewports. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE VERTICAL RHYTHM
   Sections were padded ~64-80px top/bottom on mobile, which adds up to
   ~200px of empty space between consecutive sections (e.g. the hero CTA
   strip and the "This Week" eyebrow). Cut all major section paddings to
   a tighter rhythm and trim the hero's bottom breathing-room.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero {
    /* was clamp(70, 10vh, 130) — bottom strip floated way above the next
       section. Pull it in to a tight constant. */
    padding-bottom: clamp(16px, 3vh, 32px);
  }

  .section,
  .section.tight,
  .home-games,
  .feature-split,
  .cta-banner,
  .home-faq,
  .apply-page,
  .advisors-section,
  .press-section,
  .pp-section,
  .standings-page > section,
  .reports-page > section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Section heads also had a fat 56px gap to the content below. */
  .section-head { margin-bottom: 28px; }
}

@media (max-width: 480px) {
  .section,
  .section.tight,
  .home-games,
  .feature-split,
  .cta-banner,
  .home-faq,
  .apply-page,
  .advisors-section,
  .press-section,
  .pp-section,
  .standings-page > section,
  .reports-page > section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .section-head { margin-bottom: 20px; }

  /* ── Mobile nav drawer: full-bleed + tighter type at phone tier ── */
  .mnav-drawer { width: 100vw; border-left: 0; }
  .mnav-section { padding: 10px 20px 4px; font-size: 9px; letter-spacing: 0.18em; }
  .mnav-link { font-size: 22px; line-height: 1; padding: 16px 24px; }
  .mnav-card {
    margin: 12px 20px;
    padding: 12px;
    gap: 10px;
  }
  .mnav-card .info .name { font-size: 13px; }
  .mnav-card .info .tier { font-size: 9px; }
  /* Stack action buttons one-per-row; swap right-border for bottom-border so
     the hairline grid stays intact when the 2-col grid collapses to 1-col. */
  .mnav-tools { grid-template-columns: 1fr; }
  .mnav-tools button {
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: 0.16em;
    border-right: 0;
    border-bottom: 1px solid var(--bone-faint);
  }
  .mnav-tools button:last-child { border-bottom: 0; }
}

/* ════════════════════════════════════════════════════════════
   COMPACT PLAYER PROFILE (/players/:id)
   The hero was reserving a 180×240 portrait, 40px back-btn margin,
   and clamp(56,14vw,96) name typography — together they took the
   entire mobile viewport before any stat card was reachable. Trim
   everything proportionally, keep all info.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .pp-hero { padding: 20px var(--pad-x) 28px; }
  .pp-hero .back-btn { margin-bottom: 16px; font-size: 10px; }
  .pp-watermark { font-size: clamp(140px, 38vw, 240px); top: 2%; }
  .pp-id-row { gap: 14px; }
  .pp-portrait { width: 100px; height: 130px; }
  .pp-portrait .ini { font-size: 48px; }
  .pp-portrait .frame { inset: -6px; }
  .pp-id-text { gap: 10px; }
  .pp-eyebrow { font-size: 9px; letter-spacing: 0.18em; gap: 8px; }
  .pp-flag { font-size: 14px; }
  .pp-name { font-size: clamp(36px, 11vw, 56px); line-height: 0.92; }
  .pp-tags { gap: 4px; }
  .pp-tags .fu-chip { font-size: 9px; padding: 4px 8px; }
  .pp-section { padding: 24px var(--pad-x); }
  .pp-section-head { gap: 6px; margin-bottom: 14px; }
  .pp-form-chart { height: 100px; }
}

/* ════════════════════════════════════════════════════════════
   COMPACT PODIUM (top-3 player cards on /standings)
   The cards reserved ~380px min-height with huge rank numerals and
   wide 40/32 padding — fine on desktop, way too tall on phones where
   you scroll past three cards before reaching the table. Tighten
   everything: padding, rank/name typography, seal badge, and stats
   row — no information removed.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .podium { padding: 32px var(--pad-x); }
  .podium .slot {
    padding: 20px 20px;
    gap: 10px;
    min-height: 0;
  }
  .podium .slot .rank { font-size: 56px; line-height: 0.9; }
  .podium .slot .name { font-size: 20px; line-height: 1; }
  .podium .slot .meta { gap: 14px; font-size: 9px; letter-spacing: 0.14em; }
  .podium .slot .meta .n { font-size: 18px; margin-bottom: 2px; }
  .podium .slot .seal {
    top: 16px; right: 16px;
    width: 40px; height: 40px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER
   ════════════════════════════════════════════════════════════ */
.mnav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 12, 0.78);
  backdrop-filter: blur(14px);
  z-index: 105;
  animation: nmFadeIn 0.2s ease;
}
[data-theme="light"] .mnav-overlay { background: rgba(244, 241, 235, 0.82); }

.mnav-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  z-index: 106;
  background: var(--ink);
  border-left: 1px solid var(--bone-faint);
  display: flex;
  flex-direction: column;
  animation: nmSlideIn 0.32s cubic-bezier(.2,.7,.3,1);
  overflow: hidden;
}
.mnav-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--bone-faint);
  display: flex; align-items: center; justify-content: space-between;
}
.mnav-head .wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.mnav-head .wordmark .dot { color: var(--accent); }

.mnav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mnav-section {
  padding: 14px 24px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.mnav-link {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 24px;
  border-top: 1px solid var(--bone-faint);
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, color 0.18s;
}
.mnav-link:hover { background: var(--surface-hover); }
.mnav-link.active { color: var(--accent); }
.mnav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  background: var(--accent);
}
.mnav-link .num {
  font-family: 'JetBrains Mono';
  font-size: 11px;
  font-weight: 600;
  color: var(--bone-dim);
  letter-spacing: 0.04em;
}
.mnav-link.active .num { color: var(--accent); }
.mnav-link .pill {
  background: var(--accent);
  color: var(--accent-text);
  padding: 2px 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mnav-link.italic { font-style: italic; }
.mnav-link .lab {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.mnav-card {
  margin: 16px 24px;
  padding: 16px;
  border: 1px solid var(--bone-faint);
  display: flex;
  align-items: center;
  gap: 14px;
}
.mnav-card .av {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--accent), #7C6CFF);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  color: var(--accent-text);
}
.mnav-card .info { flex: 1; min-width: 0; }
.mnav-card .info .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mnav-card .info .tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}

.mnav-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bone-faint);
}
.mnav-tools button {
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--bone-faint);
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.mnav-tools button:last-child { border-right: 0; }
.mnav-tools button:hover { background: var(--surface-hover); }

.mnav-foot {
  padding: 18px 24px;
  border-top: 1px solid var(--bone-faint);
  display: flex;
  align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.mnav-foot a { color: var(--bone-dim); }

/* ════════════════════════════════════════════════════════════
   STANDINGS filters — grid-aligned: label · equal-width buttons
   Each filter is one grid row: tiny label on the left, group of
   buttons spans the rest with `flex: 1` so siblings within a group
   land at identical widths and columns visually align row-to-row.
   ════════════════════════════════════════════════════════════ */
/* ─────── Standings — toolbar meta (right side) ─────── */
.standings-toolbar-meta {
  margin-left: auto;
  display: flex; align-items: center;
  gap: 16px;
}
.standings-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.standings-count b {
  color: var(--bone);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.standings-count em {
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: none;
}
.clear-filters {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--bone-faint);
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.clear-filters:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* reserve the button's space when no filters are active — keeps the count
   (and everything below) from jumping the moment a filter is applied. */
.clear-filters.is-hidden { visibility: hidden; pointer-events: none; }

/* ─────── Standings — inline filter strip ─────── */
.standings-filters {
  position: sticky; top: 137px;
  z-index: 29;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  padding: 18px var(--pad-x);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--bone-faint);
}
.filter-group {
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 0 28px;
}
.filter-group:first-child { padding-left: 0; }
.filter-group:last-child { padding-right: 0; }
.filter-group:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 8px; bottom: 4px;
  width: 1px;
  background: var(--bone-faint);
}
.filter-group-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: 1;
}
.filter-group-label::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.filter-chips {
  display: inline-flex;
  border: 1px solid var(--bone-faint);
  align-self: flex-start;
}
.filter-chips button {
  position: relative;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--bone-faint);
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.filter-chips button:last-child { border-right: 0; }
.filter-chips button:hover { color: var(--bone); }
.filter-chips button.on {
  background: var(--bone);
  color: var(--ink);
}
.filter-chips button.on::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--accent);
}

/* mobile-only "Filters" toggle — hidden on desktop (all filters always shown) */
.filters-toggle { display: none; }

/* Narrower viewports: drop dividers, let rows wrap with breathing room. */
@media (max-width: 1200px) {
  .standings-filters { gap: 16px 0; padding: 14px var(--pad-x); }
  .filter-group { padding: 0 20px; }
  .filter-group:not(:last-child)::after { display: none; }
}
@media (max-width: 700px) {
  /* don't pin the panel — let it scroll away so it can't hog the screen */
  .standings-filters { padding: 12px var(--pad-x); position: static; gap: 12px 0; }
  .filter-group { padding: 0; width: 100%; }
  .filter-chips { width: 100%; }
  /* collapse Format/Venue/League behind the toggle; Period stays visible */
  .filters-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 14px; background: transparent;
    border: 1px solid var(--bone-faint); color: var(--bone-dim);
    font-family: var(--font-display); font-weight: 700; font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
  }
  .filters-toggle .filters-count {
    font-style: normal; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-grid; place-items: center;
    background: var(--accent); color: var(--ink); font-size: 10px; letter-spacing: 0;
  }
  .filters-toggle .filters-caret { margin-left: auto; transition: transform 0.2s; }
  .filters-toggle .filters-caret.up { transform: rotate(180deg); }
  .standings-filters:not(.filters-open) .filter-secondary { display: none; }
  .filter-chips button {
    flex: 1;
    padding: 9px 6px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .standings-toolbar-meta { gap: 10px; }
  .standings-count { font-size: 9.5px; letter-spacing: 0.16em; }
  .standings-count b, .standings-count em { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   VERY-SMALL PHONE TIER (≤360px)
   Further padding/type trims where the 480px tier is still too
   tight at 360px. No grid restructuring beyond what 480px did.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  :root { --pad-x: 16px; }

  /* Section rhythm: pull in another notch below the 480px (32px) tier. */
  .section,
  .section.tight,
  .home-games,
  .feature-split,
  .cta-banner,
  .home-faq,
  .apply-page,
  .advisors-section,
  .press-section,
  .pp-section,
  .standings-page > section,
  .reports-page > section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* Podium top-3 cards: trim padding + rank/name type so all three fit
     above the fold on the smallest phones. */
  .podium .slot { padding: 16px 12px; gap: 8px; }
  .podium .slot .rank { font-size: 48px; line-height: 0.85; }
  .podium .slot .name { font-size: 18px; }

  /* Standings filter chips: shrink so a group fits one row without overflow. */
  .standings-filters { padding: 10px var(--pad-x); gap: 12px 0; }
  .filter-chips button {
    padding: 8px 4px;
    font-size: 9px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}