/* ==========================================================================
   GenioBuzz — Responsive refinements
   Base styles are mobile-first and fluid; this file handles the few
   places layout direction (not just scale) needs to change.
   ========================================================================== */

/* Extra-small phones: tighten side padding */
@media (max-width: 359px) {
  .container { padding-inline: var(--space-4); }
  .choice-btn { min-width: 90px; min-height: 90px; }
}

/* Small phones -> large phones */
@media (min-width: 480px) {
  .board-grid { width: min(360px, 70vw); }
}

/* Tablets */
@media (min-width: 768px) {
  section { padding-block: var(--space-8); }
  .hero { padding-top: var(--space-8); }
}

/* Small laptops */
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-6); }
}

/* Large desktop: cap line-length growth on copy blocks */
@media (min-width: 1440px) {
  .tool-main p, .tool-main li { max-width: 72ch; }
}

/* Landscape phones with limited height: shrink hero so game stays reachable without scrolling past ads */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: var(--space-4); }
  section { padding-block: var(--space-5); }
}