/* ==========================================================================
   EzyGamers — responsive rules (load after style.css & games.css)
   ========================================================================== */

/* Large desktop ----------------------------------------------------------- */
@media (max-width: 1400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
  .rail .gcard { width: 212px; }
  .rail .gcard--tall { width: 172px; }
}

/* Small desktop / large tablet -------------------------------------------- */
@media (max-width: 1200px) {
  .play-layout { grid-template-columns: minmax(0, 1fr); }
  .rail-col { display: none; }
  .recs-mobile { display: block; }
  .lb-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1050px) {
  .featured { grid-template-columns: 1fr; }
  .fside { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .fside .gcard__thumb { aspect-ratio: 16 / 9; }
  .fmain { min-height: 300px; }

  /* Below this the lead tile would be too narrow to earn its double width, so
     the mosaic becomes an ordinary two-up grid. */
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .mosaic > .gcard:first-child { grid-column: span 2; grid-row: auto; }
  .mosaic > .gcard .gcard__thumb { aspect-ratio: 16 / 9; flex: 0 0 auto; }
}

/* Tablet: sidebar auto-collapses to icons --------------------------------- */
@media (max-width: 980px) {
  :root { --sidebar-w: var(--sidebar-w-collapsed); }
  .nav__label { opacity: 0; height: 12px; padding: 0; overflow: hidden; }
  .nav__text { display: none; }
  .nav__item { justify-content: center; padding: 11px 0; }
  body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
  .main { padding: 18px 18px 60px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
  .rail .gcard { width: 194px; }
  .rail .gcard--tall { width: 158px; }
  .brand__tag { display: none; }
}

/* Mobile: sidebar becomes a slide-out drawer ------------------------------ */
@media (max-width: 760px) {
  :root { --header-h: 58px; }

  /* The closed drawer is slid off-canvas, and visibility:hidden takes it out
     of the tab order with it. Without that it is merely *invisible*: a
     keyboard user tabbing through the page hit sixteen links they could not
     see before reaching any content, with the focus ring parked off-screen.
     Visibility is transitioned alongside the slide so it still animates. */
  .sidebar {
    width: 262px !important;
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
    padding: 14px 12px 40px;
    transition: transform .22s var(--ease), visibility .22s var(--ease);
  }
  .sidebar .nav__label { opacity: 1; height: auto; padding: 10px 12px 6px; }
  .sidebar .nav__text { display: inline; }
  .sidebar .nav__item { justify-content: flex-start; padding: 11px 12px; }
  body.drawer-open .sidebar { transform: none; visibility: visible; }
  body.drawer-open { overflow: hidden; }

  .main, body.sidebar-collapsed .main { margin-left: 0; padding: 16px 14px 56px; }

  /* compact header: search collapses under the bar */
  .header { gap: 8px; padding: 0 10px; }
  .brand__text { display: none; }
  .header__right .icon-btn[data-hide-mobile] { display: none; }
  .search { position: static; max-width: none; }
  .search__input { height: 38px; font-size: 14px; }
  .search__results { position: fixed; top: var(--header-h); left: 8px; right: 8px; }

  .hero { padding: 30px 20px; }
  .hero__text { font-size: 14px; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rail .gcard, .rail--tall .gcard { width: 168px; }
  .rail .gcard--tall { width: 134px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .section__title { font-size: 18px; }
  .rail-btn { display: none; }

  .fside { grid-template-columns: 1fr 1fr; }
  .fmain { min-height: 230px; }
  .fslide__body { padding: 18px; }
  .fmain__nav { width: 34px; height: 34px; }

  .block { padding: 16px 14px 6px; }
  .lb-banner { padding: 18px 16px; }

  /* Height comes from the viewport rather than the width, so the game gets
     the screen the phone actually has. See the block below the media query
     for the reasoning and the measurements. */
  .stage__frame {
    aspect-ratio: auto;
    height: clamp(320px, calc(100vh - var(--header-h) - 132px), 780px);
  }
  /* One row, scrolled sideways if the buttons outrun the width. Wrapping
     cost three rows and pushed the whole bar off the bottom of the screen. */
  .stage__bar {
    padding: 9px 10px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .stage__bar::-webkit-scrollbar { display: none; }
  .stage__bar > * { flex: 0 0 auto; }
  /* The game's name is in the breadcrumb above the stage and the heading
     below it; a third copy is not worth a row of phone screen. */
  .stage__id { display: none; }
  .tool span { display: none; }
  .tool { padding: 0 11px; }
  .tool[data-keep-label] span { display: inline; }

  .footer__cols { grid-template-columns: 1fr; gap: 16px; }
  .toolbar { padding: 12px; }
}

@media (max-width: 420px) {
  .grid { gap: 10px; }
  .gcard__body { padding: 8px 9px 10px; }
  .gcard__title { font-size: 13px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* Landscape phones on the player page: give the game more height -----------
   Also undoes the viewport-height rule above: in landscape there is no spare
   height to claim, and its clamp floor would ask for more than the screen
   has. Width is the abundant axis here, so the frame goes back to an aspect
   ratio. */
@media (max-width: 900px) and (orientation: landscape) {
  /* Height, not aspect ratio - but with a floor that keeps the game playable.
     Fitting the frame to a 380px-tall screen sounded right and measured
     terribly: these games spend their height on a HUD and a control strip
     first and give the board what is left, so a 230px frame left Sudoku a
     560x4 board and Snake a 520x20 one. Below the floor the page scrolls a
     little, which is a far better trade than an unplayable board. Hiding the
     breadcrumb above buys back 57px of that scroll. */
  .stage__frame {
    aspect-ratio: auto;
    height: clamp(380px, calc(100vh - var(--header-h) - 92px), 460px);
  }
  /* Chrome was eating 47% of a 380px-tall screen. The breadcrumb is the least
     useful 57px of it while a game is running, and the header above it still
     carries Home; the game gets those pixels instead. Play page only. */
  #playRoot > .crumbs { display: none; }
}

/* Touch devices: reveal card overlays without hover ------------------------
   The preview controller already refuses to run without a fine pointer; this
   keeps the layer out of the way even if a device reports hover oddly. */
@media (hover: none) {
  .gcard__overlay { opacity: 0; }
  .gcard:active .gcard__overlay { opacity: 1; }
  .gcard__preview { display: none; }
  .gcard:hover { transform: none; box-shadow: none; }
  .gcard:hover .gcard__img { transform: none; }
  .rail-btn { display: none; }
}

/* Touch ergonomics ---------------------------------------------------------
   Controls that are comfortable with a mouse are not with a thumb. These were
   34-39px tall, below the ~44px a fingertip reliably hits. Only the height
   floor changes; nothing moves or restyles. */
@media (max-width: 900px) {
  .search__btn,
  #loginBtn,
  .filter,
  .rail-btn,
  .icon-btn,
  .tool,
  .nav__item {
    min-height: 44px;
  }
  .search__btn { min-width: 44px; }
  .btn--sm { min-height: 44px; }
  .fmain__nav { width: 44px; height: 44px; }

  /* The dot itself stays small; the transparent padding around it gives each
     one a proper hit area. Both axes - padding on the vertical only left an
     8px-wide target, which is no easier to hit than the dot was. */
  .fdot {
    padding: 18px 8px;
    width: 8px; height: 6px;
  }
  .fdot.is-active { width: 20px; }

  /* The inline empty state stacked its copy into a narrow column beside the
     button, so "Games you play show up here" wrapped four words at a time. */
  .empty--inline {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .empty--inline > div { flex: 1 1 100%; }
  .empty--inline .btn { margin: 0 !important; flex: 1 1 auto; justify-content: center; }
}

/* Motion opt-out: still art only, no lift, no crossfade -------------------- */
@media (prefers-reduced-motion: reduce) {
  .gcard__preview { display: none; }
  .gcard,
  .gcard__img,
  .gcard__overlay,
  .gcard__play,
  .gcard__preview { transition: none; }
  .gcard:hover,
  .gcard:focus-visible { transform: none; }
  .gcard:hover .gcard__img { transform: none; }
  .gcard.is-previewing .gcard__img { opacity: 1; transform: none; }
}