/**
 * @file games/v2-surface-responsive.css
 * @project KAINYNE Website
 * @description [REQ-866] Shared responsive stylesheet for every Tabletop
 *   OS v2 surface (`games/<slug>/v2/index.html`). Linked from each surface
 *   AFTER its inline `<style>` block, so its rules win the cascade at equal
 *   specificity by source order — no `!important`, no inline trimming.
 *
 *   Supersedes REQ-707's phone-only inline `@media (max-width: 480px)`
 *   block: this sheet implements RESPONSIVE REFLOW (no horizontal overflow
 *   at any width, fluid `clamp()`/`vw` sizing, vertical scroll allowed)
 *   across the four canonical device classes from
 *   `/src/responsive-viewport.js` + `/src/responsive-breakpoints.css`
 *   (REQ-543/544):
 *     - mobile-portrait   ←  `@media (max-width: 639px)`
 *     - tablet            ←  `@media (min-width: 640px) and (max-width: 1023px)`
 *     - desktop           ←  `@media (min-width: 1024px)`
 *     - mobile-landscape  ←  `@media (orientation: landscape) and (max-height: 500px)`
 *
 *   The landscape block is placed LAST so it beats the width-keyed tiers
 *   at equal specificity (mirroring the JS classifier, where the landscape
 *   rule wins). Fluid card sizing reuses the v1 WAR client's proven
 *   REQ-335 `clamp()` values.
 *
 *   NOTE: CSS custom properties cannot be referenced inside `@media`
 *   conditions per spec, so the `@media` thresholds below carry literal
 *   `px`. The `:root` `--bp-*` props are declared purely so the parity
 *   drift gate (`src/v2-surface-responsive.test.js`) can assert they match
 *   the JS BREAKPOINTS — exactly as `/src/responsive-breakpoints.css` does.
 * @module Shared/V2SurfaceResponsive
 * @requirements REQ-866
 * @hazards Styling-only; no selectors target IDs or alter markup. The
 *   `overflow-x: hidden` guard on `html, body` is a backstop — the tiered
 *   fluid sizing is designed so genuine reflow happens first and clipping
 *   rarely engages. Grid column count stays JS-controlled
 *   (`gridTemplateColumns: repeat(N,1fr)`); reflow comes from the
 *   `width: 100%` container + fluid tile sizing, not a CSS column override.
 * @notes Linked via `<link rel="stylesheet"
 *   href="/games/v2-surface-responsive.css?v=1">` by
 *   `scripts/link-v2-responsive-css.js`. Bump the `?v=N` on every edit
 *   (CLAUDE.md cache-bust rule).
 */

:root {
  /* [REQ-866] Mirror of /src/responsive-breakpoints.css canonical
     thresholds (REQ-544) — kept byte-identical to the JS BREAKPOINTS in
     /src/responsive-viewport.js by the parity drift gate. */
  --bp-mobile-max: 639px;
  --bp-tablet-max: 1023px;
  --bp-landscape-max-height: 500px;
}

/* ── Global overflow guards (no media query — every device class) ────── */

*, *::before, *::after { box-sizing: border-box; }

/* [REQ-866] Hard backstop against horizontal scroll. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  min-height: 100vh;
  min-height: 100dvh; /* [REQ-335] dvh fallback — proven in the v1 WAR client. */
}

img, svg, canvas, video { max-width: 100%; height: auto; }

/* [REQ-866] Neutralise the varying per-game `.engine-v0-root` caps
   (560–780px) with one fluid container that never exceeds the viewport. */
.engine-v0-root {
  width: 100%;
  max-width: min(780px, 100%);
  margin-inline: auto;
}

/* [REQ-335] Fluid cards replace the fixed 84×118 inline sizing so single-
   card and multi-card surfaces both fit the available width. */
.engine-v0-card {
  width: clamp(56px, 18vw, 100px);
  height: clamp(78px, 25vw, 140px);
}

.engine-v0-hand { flex-wrap: wrap; }

/* Long words / room codes / share links never force horizontal overflow. */
.engine-v0-hand-card,
.engine-v0-option,
.engine-v0-grid-tile { overflow-wrap: anywhere; }

/* ── Mobile-portrait — `@media (max-width: 639px)` ───────────────────── */

@media (max-width: 639px) {
  body { padding: 1.25rem 1rem; }
  h1 { font-size: clamp(1.6rem, 8vw, 1.9rem); }
  .engine-v0-root { max-width: 100%; }

  /* Full-width primary CTA; the ghost "How to Play" stays small + right. */
  .engine-v0-button { width: 100%; align-self: stretch; padding: 0.9rem 1rem; }
  .engine-v0-howto-button { width: auto; align-self: flex-end; }
  .engine-v0-howto-close { width: 100%; }

  /* 44px touch floor on the tappable controls. */
  .engine-v0-hand-card,
  .engine-v0-option,
  .engine-v0-grid-tile,
  .engine-v0-button { min-height: 44px; }

  /* Fluid grid: tighter gutters + a tile that shrinks with the viewport
     (column count stays JS-controlled — `repeat(N,1fr)` auto-shrinks in a
     width:100% container). */
  .engine-v0-grid { gap: 0.4rem; padding: 0.5rem; }
  .engine-v0-grid-tile {
    min-height: clamp(40px, 12vw, 64px);
    padding: 0.35rem;
    font-size: 0.7rem;
  }
  .engine-v0-hand-card { min-width: clamp(64px, 22vw, 84px); }
}

/* ── Tablet — `@media (min-width: 640px) and (max-width: 1023px)` ─────── */

@media (min-width: 640px) and (max-width: 1023px) {
  .engine-v0-root { max-width: min(720px, 100%); }
  h1 { font-size: 2.3rem; }
  .engine-v0-button { width: auto; }
  .engine-v0-grid-tile { min-height: clamp(56px, 9vw, 72px); }
}

/* ── Desktop — `@media (min-width: 1024px)` ──────────────────────────── */

@media (min-width: 1024px) {
  /* Roomier than the 560–780px inline caps now the viewport allows it. */
  .engine-v0-root { max-width: min(880px, 100%); }
  h1 { font-size: 2.6rem; }
  .engine-v0-card {
    width: clamp(84px, 8vw, 110px);
    height: clamp(118px, 11vw, 154px);
  }
}

/* ── Mobile-landscape — placed LAST so it wins at equal specificity ──── */

@media (orientation: landscape) and (max-height: 500px) {
  body { padding: 0.75rem 1rem; }
  h1 { font-size: clamp(1.3rem, 5vh, 1.7rem); }
  /* Reclaim vertical space on a short viewport. */
  .engine-v0-lede { display: none; }
  .engine-v0-button { width: auto; min-height: 40px; padding: 0.5rem 1rem; }
  /* Size cards off the SHORT axis (height) so they never exceed the band. */
  .engine-v0-card {
    width: clamp(48px, 12vh, 80px);
    height: clamp(66px, 17vh, 112px);
  }
  .engine-v0-howto-modal { max-height: 92vh; }
}

/* ── Coarse pointer — 44px touch floor regardless of width ───────────── */

@media (pointer: coarse) {
  .engine-v0-button,
  .engine-v0-option,
  .engine-v0-hand-card,
  .engine-v0-grid-tile,
  .engine-v0-howto-button,
  .engine-v0-howto-close { min-height: 44px; }
}