/* ProDrafter mobile layer — loaded LAST, and every rule lives behind a max-width media query, so
   desktop rendering is untouched by construction. The desktop sheets already carry scattered
   breakpoints (builder stack, feast ring, debrief grids, pointer-coarse targets); this file fills
   what they miss on a real phone (~375–430px): the nav strip, the tier-list table, and panel
   density. One normalizer sits outside a query: iOS's text-size-adjust, which has no effect on
   desktop browsers. */

html { -webkit-text-size-adjust: 100%; }

/* ===== ≤720px — the two structural overflows ==================================================== */
@media (max-width: 720px) {
  /* Top nav: six links + the auth chip can't fit a phone row. The nav becomes one horizontally
     scrollable strip (scrollbar hidden; items never shrink or wrap) INSTEAD of wrapping to a second
     row — the bar must keep its fixed --topbar-h, because every sticky offset in the app (tier-list
     header, deck panel) is anchored to it. */
  .topbar { gap: var(--s3); }
  .topnav { min-width: 0; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding: 4px 0; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav > * { flex: 0 0 auto; white-space: nowrap; }
  /* The current-page underline sits at -8px on desktop; inside a scroll box that would be clipped
     (overflow-x:auto forces overflow-y:auto too), so it tucks in under the label. */
  .topnav a[aria-current="page"]::after { bottom: -3px; }

  /* Tier list: the row grid's fixed tracks total ~560px before the name column — wider than any
     phone. The TABLE scrolls sideways; the page never does. Column-hiding is not an option here:
     the predicted variant's header classes are sequential while body cells keep semantic ones, so
     display:none on a column class desyncs the two. */
  .tl-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tl-row, .tl-group { min-width: 680px; }
  .tl-h { position: static; }   /* sticky can't survive inside a horizontal scroller */
  /* The taxonomy panel stacks ABOVE the table at ≤900 — at full width its card art is taller than
     the viewport. Capped and centered, it reads as a preview instead of a wall. */
  .tl-panel .tl-art { max-width: 200px; margin-left: auto; margin-right: auto; }
}

/* ===== ≤560px — density: panel padding sized for a phone, not a desk =========================== */
@media (max-width: 560px) {
  .hero { padding: var(--s6) 0 var(--s5); }
  .panel, .launch-panel { padding: var(--s4); }
  .gate-panel { padding: var(--s5) var(--s4); }
  .deck-stack-panel { padding: var(--s3); }

  /* The draft HUD's location line ("HOB · Pack 2 · Pick 7") may exceed the row — wrap, don't push. */
  .draft-hud .where { white-space: normal; }

  /* Swiss standings: five columns of 10px-padded cells overflow — tighten, and let the table breathe
     inside its panel. */
  .standings-tbl th, .standings-tbl td { padding: 8px 6px; }

  .hall-totals { flex-wrap: wrap; gap: var(--s4); }
  .db-locked-title { white-space: normal; }

  /* The tip jar clears the iPhone home indicator. */
  .tipjar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ===== ≤480px — fine grain: grids whose fixed first tracks crowd a small phone ================= */
@media (max-width: 480px) {
  /* Three 120px standout tiles + gaps beat a 375px viewport — wrap to 2+1, still centered. */
  .topcards { flex-wrap: wrap; }

  /* Grade-reveal component rows: the 150px label track leaves the bar nothing — narrow it and let
     long labels wrap on their own line-height. */
  .comp { grid-template-columns: 96px 1fr 44px; gap: var(--s2); }

  /* You-vs-champion: keep the side-by-side comparison (stacking kills the "versus" read), just
     slimmer boxes. */
  .vs { gap: var(--s2); }
  .vs .side { padding: var(--s4) var(--s2); }

  /* The bracket's Skip floats over the hero at desktop widths; on a phone it takes its own line. */
  .tourney .skip-btn { position: static; display: block; margin: 0 auto var(--s3); }

  .seed-input { width: 100%; }
  .tl-controls { flex-wrap: wrap; }
  .tl-controls input { flex: 1 1 160px; min-width: 0; }

  /* Admin inspector cards: minmax(360px) overflows a 375px viewport's padding — single column. */
  .admin-grid { grid-template-columns: 1fr; }
}