/* ==========================================================================
   Responsive rules layered on style.css
   ========================================================================== */

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
}

/* ---- navbar: collapse the desktop menu into the slide-in drawer ---- */
@media (max-width: 980px) {
  .modern-nav-menu { display: none; }
  .modern-mobile-toggle { display: inline-flex; }
  .modern-nav-actions { margin-left: auto; }
}
/* Between the full-width stat box and the point where it stacks, the clock is
   the widest thing in the row: tighten its columns rather than let the three
   cells squeeze it into a wrap. */
@media (max-width: 900px) {
  .hs-cell { padding: 18px 16px 17px; }
  .st-clock { gap: 6px; }
  .st-unit { min-width: 46px; }
}

@media (max-width: 760px) {
  .modern-navbar-container { padding: 0 16px; }
  .container { padding: 0 16px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* .grid-4 is only ever the stat-tile row. One column turns four short tiles
     into a screen and a half of scrolling before any real content; two keeps
     the whole row above the fold. The stat row drops to three tiles on a board
     that has no league, and wants the same treatment. */
  .grid-4, .stat-row.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile { padding: 14px 14px 13px; }

  .hero { padding-block: 48px 32px; }
  .hero .lead { font-size: .98rem; margin-bottom: 24px; }
  /* The bar stays one row — it just sheds what it can spare. The keyboard hint
     goes first (there is no keyboard), then the submit label, leaving the icon
     button. 16px on the input is what stops iOS zooming in on focus. */
  .hero-search { gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; }
  .hero-search .hs-ic { font-size: 20px; }
  .hero-search input { font-size: 16px; padding: 12px 0; }
  .hs-kbd { display: none; }
  .hs-go { padding: 0 16px; }

  .section { padding-block: 22px; }
  .page-head { margin-bottom: 20px; }

  /* 16px inputs — anything smaller makes iOS zoom the viewport on focus and
     never zoom back out. The hero and global-search boxes already did this
     one-off; this covers the leaderboard filter, compare and widget fields. */
  input, select, textarea { font-size: 16px; }

  .profile-head, .profile-hero { gap: 16px; }
  .ph-rank { width: 60px; height: 60px; }
  .ph-rank .rank-ic { width: 58px; height: 58px; }
  .ph-avatar, .avatar { width: 58px; height: 58px; font-size: 1.5rem; border-radius: 15px; }
  .ph-actions { width: 100%; }
  .ph-actions .btn { flex: 1; justify-content: center; }

  .stat-card .value, .st-v { font-size: 1.45rem; }
  .stat-row { margin-top: 18px; }

  .lb-filters { gap: 10px; }
  .lb-field, .lb-field .sel-btn { min-width: 0; width: 100%; }
  .lb-field { flex: 1 1 100%; }
  .lb-platforms { width: 100%; }
  .plat-btn { flex: 1; }
  .lb-controls { gap: 10px; }
  .lb-search { max-width: none; }

  .footer-top { grid-template-columns: 1fr; gap: 28px; padding: 34px 16px 28px; }
  .footer-brand p { max-width: none; }
  .footer-bottom > div { padding: 14px 16px; }
  .footer-grid { flex-direction: column; }

  .compare-form { gap: 8px; }
  .cf-vs { width: 100%; text-align: center; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-mid { display: none; }

  .season-nav { flex-direction: column; }
  .season-nav .btn { width: 100%; }

  /* The stat box closes the hero and stacks straight into the first card
     below, so it carries a little of the separation itself. Three cells side
     by side would squeeze the clock, so the counters drop under it and share
     a row — and the divider turns horizontal, still short of the edges. */
  .hero-stats { margin: 20px auto 6px; max-width: 520px; grid-template-columns: 1fr 1fr; }
  .hero-stats .season-timer { grid-column: 1 / -1; }
  .hs-cell + .hs-cell::before { display: none; }
  /* The countdown now spans the card, so its separator is the horizontal one —
     drawn on the clock cell itself so it runs the full width, still inset from
     the card's sides. */
  .hero-stats .season-timer::after {
    content: ''; position: absolute; left: 14%; right: 14%; bottom: 0;
    height: 1px; background: var(--line);
  }
  /* The two counters still sit side by side, so they keep a vertical rule. */
  .hs-stat + .hs-stat::before {
    display: block; left: 0; right: auto; top: 18%; bottom: 18%;
    width: 1px; height: auto;
  }

  /* Tap targets. Anything a thumb has to hit gets closer to the 44px floor —
     these are all comfortably clickable with a mouse but fiddly on glass. */
  .btn-sm { min-height: 38px; }
  .plat-btn { min-height: 38px; }
  .mv-nav-btn { width: 40px; height: 40px; }
  .modern-mobile-toggle { width: 40px; height: 40px; }
}

@media (max-width: 440px) {
  .hs-go { padding: 0; width: 42px; }
  .hs-go .material-icons { margin-left: 0; }
  .hs-go-label { display: none; }
  .container { padding: 0 13px; }
  .panel, .card { padding: 17px; }
  .top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-chip-grid { grid-template-columns: 1fr; }
  .hs-cell { padding: 16px 15px 14px; }
  .st-n, .hs-n { font-size: 1.7rem; }
  .st-sep { font-size: 1.45rem; }
  .st-unit { min-width: 45px; }
}

/* ---- profile charts: card chrome + dialogs ---- */
@media (max-width: 760px) {
  .chart-card { padding: 14px 14px 8px; }
  .chart-card-head { gap: 10px; }
  .cc-actions { width: 100%; justify-content: space-between; }
  /* The range picker keeps all six windows: it scrolls sideways rather than
     wrapping, so the row stays one control instead of two ragged lines. */
  .cc-ranges { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
  .cc-ranges::-webkit-scrollbar { display: none; }
  .cc-range { padding: 5px 9px; }
  .chartz-hint { display: none; }

  .tf-modal { padding: 10px; }
  .tf-modal-panel { padding: 14px 14px 16px; max-height: 94vh; }
  .tf-modal-tools { width: 100%; }
  /* …unless closing is the only tool. A row that exists to hold a range picker
     needs the width; a lone close button given a line of its own just reads as
     a stray control, so it stays up beside the title. */
  .tf-modal-tools:has(> :only-child) { width: auto; }
  .ev-side { flex-direction: column; align-items: flex-end; gap: 1px; }
}

/* ---- global search: search bar ---- */
@media (max-width: 760px) {
  .gs-searchwrap { margin-top: 14px; }
  /* The bar wraps onto two rows: the input takes a full row of its own, then the
     filter toggle and the Search button share the row below it. */
  .gs-box { flex-wrap: wrap; padding: 8px; gap: 8px; }
  .gs-box .gs-ic { display: none; }                 /* decorative — the placeholder already says "Search…" */
  .gs-box input { flex: 1 1 100%; order: -1; padding: 12px; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .gs-filter-toggle { flex: none; width: auto; height: 44px; padding: 0 16px; gap: 6px; }
  .gs-filter-toggle .material-icons { font-size: 20px; }
  .gs-go { flex: 1; min-height: 44px; }

  .gs-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; margin-top: 14px; }
  .gs-tabs::-webkit-scrollbar { display: none; }
  .gs-tab { flex: none; }


}

/* ---- global search: filters become a full-screen sheet on phones ---- */
@media (max-width: 620px) {
  .gs-pop {
    position: fixed; inset: 0; z-index: 1300;
    width: 100%; max-width: none;
    border: 0; border-radius: 0; padding: 0;
    display: flex; flex-direction: column;
    transform: translateY(100%); transform-origin: bottom center;
    transition: transform .24s ease, opacity .24s ease, visibility .24s ease;
  }
  .gs-pop.is-open { transform: translateY(0); }
  .gs-pop-head { flex: none; padding: 16px; border-bottom: 1px solid var(--line); }
  .gs-pop-title { font-size: 1.05rem; }
  .gs-pop-close { display: grid; }
  .gs-pop-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 20px; padding: 18px 16px; }
  .gs-pop-foot {
    display: block; flex: none; padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--surface-color);
  }
  .gs-pop-done { width: 100%; min-height: 46px; }

  .gs-frow-split { flex-direction: column; }
  .gs-frow-split .gs-frow:not(:first-child) { flex: 1 1 auto; }

  /* Lock the page behind the sheet so only the filter list scrolls. */
  body.gs-filters-open { overflow: hidden; }
}

/* ---- widget builder ---- */
@media (max-width: 760px) {
  .wb-grid { grid-template-columns: 1fr; }
  .wb-panel { padding: 4px 15px 16px; }
  .wb-out { padding: 4px 15px 15px; }
  .wb-stage { min-height: 150px; padding: 18px 14px; }
  .wb-choices { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .wb-outpane .btn { width: 100%; }
  .wb-row .btn { flex: 1 1 auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}