/* ==========================================================================
   RESPONSIVE
   Mobile-first overrides for cases that need a genuine layout change, not
   just a size change. Ordinary fluid scaling already lives in layout.css
   via clamp()/svh/aspect-ratio, this file handles the cases that need a
   real exception.
   ========================================================================== */

/* Small / short screens: the free game needs real playable height, not a
   squeezed decorative box. On short viewports we let the embed take a
   taller, narrower shape rather than sticking to the desktop 16:10. */
   @media (max-width: 480px), (max-height: 600px) {
    .game-embed__frame-wrap {
      aspect-ratio: 3 / 4;
    }
  }
  
  @media (max-width: 480px) {
    .idea__stage { aspect-ratio: 4 / 5; }
    .idea__trigger { bottom: var(--space-2); }
  }
  
  /* Footer stacks on narrow screens rather than wrapping awkwardly */
  @media (max-width: 420px) {
    .footer__inner {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  
  /* Touch devices: hover-only affordances shouldn't be the only signal,
     since there's no hover state to trigger them in the first place. */
  @media (hover: none) {
    .btn:hover { background: var(--navy); }
    .btn--primary:hover { background: var(--orange); }
  }