/* ============================================================
   ahaaa.in — responsive.css
   ------------------------------------------------------------
   📱 PHONES & TABLETS
   Rules that only apply on smaller screens, plus the
   "reduced motion" rules for people whose devices ask
   websites to calm animations down (an accessibility setting).

   The numbers (980px, 720px, 520px) are screen widths:
     980px ≈ small laptops / tablets sideways
     720px ≈ tablets upright
     520px ≈ phones

   ⚠️ MACHINERY FILE — rarely needs editing.
   ============================================================ */

/* ---------- tablets & small laptops ---------- */
@media (max-width:980px){
  .games-grid{grid-template-columns:repeat(2,1fr)}   /* 4 columns → 2 */
  .feat{grid-template-columns:1fr}                    /* featured card stacks */
  .feat-art{min-height:260px;order:-1}                /* art on top          */
}

/* ---------- tablets upright ---------- */
@media (max-width:720px){
  .nav-links{display:none}          /* menu links hide; logo + button remain */
  section{padding:68px 0}
  .hero{padding:52px 0 48px}
  .tap-hint{right:-6px;top:-20px}

  .roombar-go{padding:14px 18px 16px}
  .feat-info{padding:32px 26px}

  .steps{grid-template-columns:1fr}                   /* party steps stack */

  /* newsletter form stacks vertically */
  .news{padding:56px 22px;border-radius:32px}
  .news-form{flex-direction:column;background:none;border:none;padding:0}
  .news-form input{
    background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);
    border-radius:var(--r-full);padding:15px 22px;
  }
  .news-form .btn{justify-content:center}
}

/* ---------- phones ---------- */
@media (max-width:520px){
  .games-grid{gap:12px}
  .gcard{padding:18px}
  .gcard h3{font-size:1.12rem}
  .gicon{width:48px;height:48px;font-size:1.45rem}
  .gplayers{display:none}                 /* keep the meta row tidy */

  .seg{width:100%;justify-content:space-between}
  .seg-btn{flex:1;padding:11px 8px 13px;text-align:center}

  .hero-actions{flex-direction:column;align-items:stretch}
  .quick-btn{justify-content:center}
}

/* ---------- reduced motion (accessibility) ---------- */
/* if someone's device says "less animation please",
   we switch everything to a calm, still page.        */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  .marquee{animation:none}
  .reveal{opacity:1;transform:none}
}