/* GridTwist 2048 — responsive scaling layer (AGENTS.md WA-2: adaptation layer, engine untouched).
 *
 * The engine lays out at a FIXED design size (500px board + heading on desktop, 280px at the
 * <=520px breakpoint) and never reacts to the window — the GamePix review: "use a responsive
 * game resolution that adapts to different screen sizes. Currently, the game window does not
 * adjust its resolution properly."
 *
 * This layer keeps the engine's pixel-exact internal geometry (tile positions are CSS
 * translate classes tied to the fixed cell size) and scales the WHOLE .container to fit the
 * actual window on both axes:
 *
 *   js/responsive.js measures .container at its natural (unscaled) layout size, computes
 *   scale = min(availW / w, availH / h), and applies transform: scale(s) about the viewport
 *   center, so the game grows on big windows and shrinks on small ones without ever
 *   overflowing, scrolling, or leaving dead space.
 *
 * Everything below is overrides only — no engine rule is edited.
 */

/* The engine gives body an 80px (desktop) / 20px (mobile) margin and 20px side padding on
   mobile. The scale layer owns the outer spacing now: one small uniform gutter that the
   fitting math in js/responsive.js accounts for exactly.

   overflow: hidden on the document is deliberate: the fit math always lands the game inside
   the viewport, but the webfont swap reflows the heading ~1 frame AFTER the first fit, and
   without this a scrollbar would flash (and reflow innerWidth -> refit -> oscillate) during
   that window. js/responsive.js re-fits on fonts.ready and via ResizeObserver, so the settled
   state always fits; hidden scrollbars just make the transition clean. */
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  margin: 12px 0;
  padding: 0;
}

/* The container is pinned to the viewport center and scaled about that center.
   The translate(-50%, -50%) default is the no-JS fallback (natural size, centered);
   js/responsive.js appends scale(s) to the same transform, keeping the center fixed.
   No will-change on purpose: pinning a compositing layer can lock rasterization at
   the wrong scale and blur text after a resize. */
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

/* The engine sizes the title from 8vw of the WINDOW while the <=520px design is only 280px
   wide, so on phones the long title wraps to two lines inside that narrow box. Cap it from
   the same viewport signal but at a size that stays on one line in the 280px design. */
@media screen and (max-width: 520px) {
  h1.title {
    font-size: clamp(27px, 6.5vw, 34px);
  }
}