/* Breakpoints: 320, 375, 768, 1024, 1440, 4K/ultrawide */

@media (max-width: 767px) {
  .topbar { padding: 8px 12px; gap: 10px; }
  .controls { gap: 6px; }
  .control-pill span:first-child, .toggle-pill span > span { display: none; }
  .content { padding: 16px 12px 60px; }
  .info-grid { grid-template-columns: 1fr; }
  .panel { grid-column: span 1; }
  .tournament-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }

  /* Less horizontal room on phones, so the stage goes taller/narrower and
     the rig starts a bit bigger — still smaller than the old edge-to-edge
     hero, but the sign stays comfortably readable without a tap. */
  .hero-figure { aspect-ratio: 4 / 5; max-height: 78vh; }
  .hero-rig { width: clamp(190px, 58%, 320px); transform: translate(-50%, 2%) scale(0.92); }
  .hero-rig.approach { transform: translate(-50%, -8%) scale(1.04); }
}

@media (max-width: 480px) {
  .tournament-grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .info-grid { grid-template-columns: repeat(6, 1fr); }
  .panel { grid-column: span 3; }
  .panel-wide { grid-column: span 6; }
  .tournament-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .tournament-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1440px) {
  .content { max-width: 1320px; }
  .tournament-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Ultrawide monitors: keep hero from stretching too tall/wide */
@media (min-aspect-ratio: 21/9) {
  .hero-card { max-width: 1100px; margin: 0 auto; }
}

/* 4K */
@media (min-width: 2560px) {
  .content { max-width: 1600px; }
  body { font-size: 18px; }
}

/* Compact mode toggle (user preference, applied via body attribute).
   Auto-enabled on phones by default (see Settings.resolvedCompact in
   settings.js) — the smaller floors below aren't just cosmetic padding
   trims, they're what guarantees the DD:HH:MM:SS row fits on one line
   without wrapping at typical phone widths.
   Two real-device-only gotchas made this fail even though it looked fine
   in desktop/headless testing, both fixed alongside these floors:
   1. .clock-part/.clock-sep used to allow flex-shrink, so instead of
      wrapping when the row didn't fit, flexbox crushed the *last* item
      (seconds) down toward zero width rather than moving it to a new
      line — see flex: 0 0 auto on both in the rules above them.
   2. Mobile browsers auto-boost small text for readability, silently
      overriding these clamp() floors on a real phone in a way no
      desktop/headless test will ever reproduce — see text-size-adjust
      on the html rule near the top of this file. */
[data-compact="true"] .panel { padding: 14px; }
[data-compact="true"] .info-grid { gap: 10px; }
[data-compact="true"] .content { padding-top: 14px; }
[data-compact="true"] .clock-label { display: none; }
[data-compact="true"] .flip-card {
  font-size: clamp(10px, 6.8cqw, 42px);
  padding: clamp(1px, 0.6cqw, 5px) clamp(1px, 0.8cqw, 7px);
}
[data-compact="true"] .clock-sep {
  font-size: clamp(7px, 5.2cqw, 34px);
  padding-bottom: clamp(2px, 2.1cqw, 12px);
}
[data-compact="true"] .digital-clock { gap: clamp(1px, 1.3cqw, 10px); }
[data-compact="true"] .countdown-shell { gap: clamp(1px, 0.4cqw, 4px); }
/* Extra vertical breathing room, in case the clock row still ever wraps
   to two lines on some real device — shrink the two least essential
   overlay rows so a wrap doesn't get clipped by .hero-overlay's fixed
   height + overflow:hidden (see that rule for why it can't just grow). */
[data-compact="true"] .eyebrow { font-size: clamp(6px, 0.9vw, 9px) !important; }
[data-compact="true"] .progress-text { font-size: clamp(4px, 1.1cqw, 8px); }

/* Ultra-wide toggle (user preference — forces a wider max width) */
[data-ultra="true"] .content { max-width: 1800px; }