/* =========================================================================
 * zonajuega-fullscreen.css — PARCHE DROP-IN de pantalla completa real (§9)
 * -------------------------------------------------------------------------
 * Pega este archivo en `public_html/css/` y enlázalo en index.html DESPUÉS de
 * styles.css:
 *     <link rel="stylesheet" href="./css/zonajuega-fullscreen.css" />
 *
 * O copia estas reglas al final de tu styles.css. Resuelve el bug "la pantalla
 * de juego no llega a los bordes" usando UNIDADES DE VIEWPORT DINÁMICAS (dvh)
 * en lugar de height:100%, y respeta las safe-areas (notch / barra inferior).
 *
 * El <meta viewport ... viewport-fit=cover> YA está en tu index.html (no tocar).
 * ========================================================================= */

/* --- A) Capa raíz: viewport dinámico + safe-areas --------------------- */
html, body {
  height: 100dvh;            /* dvh se adapta a la barra del navegador */
  min-height: 100svh;        /* fallback en arranque (small viewport) */
  height: 100vh;             /* fallback navegadores sin dvh (queda detrás) */
  height: 100dvh;            /* gana en navegadores modernos */
  overflow: hidden;
  overscroll-behavior: none; /* sin "rebote" de scroll que descoloca */
}

#app {
  position: fixed;
  inset: 0;
  height: 100dvh;
}

#lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;              /* llena #app, que ya es 100dvh */
}

/* --- B) Respetar notch / barra inferior en las capas de juego --------- */
/* El HUD y los pads flotan (position:absolute), así que NO restan altura al
 * tablero; solo añadimos padding de safe-area para que no queden bajo el notch. */
.capa,
#juego {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* La barra superior y los pads ya usan var(--safe-t)/var(--safe-b) en tu CSS;
 * esto refuerza el caso en el que el contenedor padre no las propague. */
#barra-juego { padding-top: max(var(--safe-t, 0px), env(safe-area-inset-top, 0px)); }
.pad.abajo   { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }

/* --- C) El tablero MAXIMIZA el alto disponible ------------------------ *
 * Tu render.js (calcularLayout / _ajustarArea) ya calcula el tamaño de celda
 * priorizando la ALTURA usable (uh = H - top - bot) y deja bandas laterales
 * mínimas. Con el viewport dinámico de (A), `uh` ahora vale el alto REAL del
 * dispositivo → el tablero llega de borde a borde. No hace falta tocar JS.
 *
 * Si quisieras forzar aún menos margen lateral, baja el padding en _ajustarArea:
 *     const pad = Math.round(Math.min(a.w, a.h) * 0.012) + 2 * this.dpr;
 * ------------------------------------------------------------------------ */