/* games-web/responsive.css — shared fit layer for phone, tablet and desktop.
   Linked LAST on every page. Goal: nothing overflows the viewport, boards stay square,
   and the primary action is always reachable without scrolling.

   WHY :where() ON THE COMPONENT SIZES
   This sheet used to set `.card { width: 40px }` at plain specificity while loading
   last, so it beat every game's own phone sizing — Rummy's cards rendered 40x56 when
   rummy.css asked for 46x64, and the dice page's <main class="card"> collapsed to a
   playing-card box. Those rules are meant as a FLOOR for games that define no phone
   size of their own, not as a ceiling. `:where()` has zero specificity, so any rule in
   a game's own stylesheet wins no matter what order the sheets load in. Load order
   stops being load-bearing, which is the whole point.

   Layout rules (overflow, grid columns, container width) stay at normal specificity —
   those genuinely should win. */

html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }
img, svg, canvas { max-width: 100%; height: auto; }
button, .btn { touch-action: manipulation; }

/* One number every game shell can size a board from. Boards are square, so the binding
   constraint is whichever of width/height runs out first — and on a landscape phone
   that is always height, which a width-only media query cannot see. */
:root {
  --vg-board: min(94vw, 72vh, 620px);
  --vg-gutter: 14px;
}

/* app shells fill the screen width (they already cap with max-width) */
.container, .rummy-app, .chess-app, .carrom-app, .poker-app, .trivia-app, .bg-app,
.dom-app, .durak-app, .okey-app, .truco-app, .mancala-app, .shogi-app, .hana-app,
.ludo-app, .sl-app, .kwrap, .wrap { width: 100%; }

/* card / tile rows scroll instead of overflowing the screen */
.hand, .loose, .cardrow, .rack, .cap, .field, .pairs, .melds { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* fluid type on the shared chrome — one rule beats a breakpoint per size */
:where(h1) { font-size: clamp(22px, 5.2vw, 34px); }
:where(h2) { font-size: clamp(18px, 4vw, 24px); }
:where(.btn, button.btn) { font-size: clamp(13px, 3.4vw, 15px); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 560px) {
  :where(.card) { width: 40px; height: 56px; }
  :where(.card .r) { font-size: 14px; } :where(.card .s) { font-size: 12px; }
  :where(.card.sm) { width: 30px; height: 42px; }
  :where(.tile) { font-size: 14px; }
  :where(.pit) { font-size: 15px; }
  :where(.die) { width: 30px; height: 30px; font-size: 16px; }
  :where(.seat) { width: 74px; }
  :where(.pc) { font-size: 6.6vw; }
  :where(.store) { width: 44px; }
  .actions { grid-template-columns: repeat(3, 1fr) !important; }
  .controls { flex-wrap: wrap; }
  .hdr { flex-wrap: wrap; }
  /* lobby grid: 2 columns on phones */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .logo { font-size: 32px !important; }
}

/* small phones */
@media (max-width: 380px) {
  :where(.card) { width: 34px; height: 48px; }
  :where(.card .r) { font-size: 12px; } :where(.card .s) { font-size: 11px; }
  :where(.seat) { width: 64px; }
  .grid { gap: 10px !important; }
  a.gcard { padding: 14px 12px !important; }
}

/* ------------------------------------------------------- tablets (portrait)
   561-899px used to fall straight through to the desktop rules: every tablet in
   portrait, plus a large phone in landscape, got a layout designed for a mouse. */
@media (min-width: 561px) and (max-width: 899px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .wrap, .container { padding-left: 18px; padding-right: 18px; }
  /* side panels sit under the board rather than squeezing it into a column */
  .side, .sidebar, .panelcol { flex: 1 1 100% !important; min-width: 0 !important; }
  .boardwrap, .felt, .board { margin-left: auto; margin-right: auto; }
  .boardwrap { width: min(88vw, 66vh); }
  :where(.card) { width: 48px; height: 67px; }
  :where(.seat) { width: 84px; }
}

/* --------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  .felt, .board { margin-left: auto; margin-right: auto; }
  .ludo-app, .poker-app, .carrom-app, .bg-app, .dom-app, .durak-app, .okey-app,
  .truco-app, .mancala-app, .shogi-app, .hana-app, .trivia-app { max-width: 620px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* very large screens: cap and center lobby grid for a premium feel */
@media (min-width: 1200px) {
  .wrap { max-width: 1080px; }
  .grid { grid-template-columns: repeat(5, 1fr); }
}

/* ------------------------------------------------------- landscape phones
   A phone on its side is ~360px tall. A square board plus a control stack cannot fit
   vertically, so the board goes beside the controls and the page chrome shrinks.
   Height-gated, not width-gated: a short window is the actual problem. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --vg-board: min(58vw, 88vh); }
  .hero, .stats-strip, .foot { display: none; }
  .navbar { padding: 6px 12px; }
  .boardwrap, .board, .felt { width: var(--vg-board); max-width: var(--vg-board); }
  /* board + side panel share the row instead of stacking off-screen */
  .sl-app > .row, .game, .table, .play { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }
  .side, .sidebar, .panelcol { flex: 1 1 240px; min-width: 200px; }
  .grid { grid-template-columns: repeat(4, 1fr) !important; }
  :where(h1) { font-size: clamp(18px, 3vh, 24px); }
}

/* =============================================================================
 * TAP TARGETS
 * 44px is the accepted minimum for a finger; the lobby had 38 controls under it. Applied
 * as a MINIMUM with centred content, so a small chip grows its hit box without the label
 * changing size. Scoped to coarse pointers — a mouse does not need it, and :where() keeps
 * it a floor any game can still override.
 * ============================================================================= */
@media (pointer: coarse) {
  :where(button, .chip, .filt, select, [role="button"]) { min-height: 44px; }
  :where(.chip, .filt) { display: inline-flex; align-items: center; justify-content: center; }
}

/* smooth scrolling everywhere */
html { scroll-behavior: smooth; }

/* safe-area insets for notched phones / PWA */
body { padding-bottom: env(safe-area-inset-bottom); }
.nav { bottom: calc(14px + env(safe-area-inset-bottom)) !important; }