/* Layout: una sola pantalla — barra arriba, tablero cuadrado al centro, controles al alcance del pulgar */

/* Como app, la página corre bajo la barra de estado y el indicador de inicio: se despeja con los márgenes seguros */
html {
  height: 100%;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--sand);
  overscroll-behavior: none;
  /* Pantalla fija como un juego: sin scroll, rebote ni zoom con gestos */
  overflow: hidden;
  touch-action: none;
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 10px 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--sand);
  color: var(--text);
  font: 15px/1.4 var(--font-ui);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Cada fila mide lo mismo que el tablero (--board lo fija el JS) */
.bar, .goal, .hint, .controls, .dev { width: 100%; max-width: max(var(--board, 640px), 340px); margin-inline: auto; }

/* El JS mide el espacio libre y fija la altura del escenario; el sobrante se reparte arriba y abajo */
.stage { flex: 1 1 0; min-height: 0; display: grid; place-items: center; margin-top: auto; }
.goal:not([hidden]) + .stage { margin-top: 0; }
#board, .target-full { grid-area: 1 / 1; }
#board { display: block; touch-action: none; border-radius: var(--board-radius); }

.controls { display: grid; gap: 8px; margin-bottom: auto; }
.panel { display: grid; gap: 8px; }

/* Solo para lectores de pantalla */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }