/* El Tesoro de las Tablas — reinicio, body y fondos de la tienda.

   Las fichas de diseño y las dos tipografías ya no viven aquí: son del sitio
   y están en comun/css/tokens.css, que index.html enlaza justo antes que esta
   hoja. El orden no es negociable — la primera regla de aquí abajo ya usa
   var(--mar).

   Lo que queda es del juego y solo del juego: los cinco fondos comprables de
   la tienda, el reinicio y el body con su degradado oceánico. La paleta que
   tiñe todo eso —aventura tropical vista desde el mar, con el arte de
   js/dibujos.js pintado con los mismos tokens— se documenta allí. */

/* Fondos comprables (v0.3, fase 2) ---------------------------------------
   Cada fondo solo redefine los tres azules del mar: el oro, la arena y el
   coral no se tocan, así que el juego cambia de sitio pero no de identidad.
   Los seis son oscuros a propósito — el texto es blanco y el contraste no es
   negociable en un juego para niños de 7 años. */

body[data-fondo="bosque"] {
  --mar-claro: #2f8f5a;
  --mar: #16543a;
  --mar-profundo: #0c2e21;
}

body[data-fondo="piratas"] {
  --mar-claro: #7a4f24;
  --mar: #3f2a17;
  --mar-profundo: #1d130a;
}

body[data-fondo="nieve"] {
  --mar-claro: #5b8fbc;
  --mar: #2f4d6b;
  --mar-profundo: #16283c;
}

body[data-fondo="castillo"] {
  --mar-claro: #6a52b0;
  --mar: #3a2b6b;
  --mar-profundo: #1c1440;
}

body[data-fondo="volcan"] {
  --mar-claro: #a33520;
  --mar: #5c1c15;
  --mar-profundo: #2a0d0b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(175deg, var(--mar-claro) 0%, var(--mar) 42%, var(--mar-profundo) 100%);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--tipo-texto);
  text-align: center;
  overflow-x: hidden;
}

h1 {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  line-height: 1.15;
  color: var(--texto);
  text-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4), 0 0 3.5rem rgba(245, 166, 35, 0.3);
}

h2 {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  line-height: 1.25;
  color: var(--texto);
  text-shadow: var(--sombra-texto);
}

h3 {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--oro-claro);
}

.subtitulo {
  margin: var(--e3) 0 var(--e5);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cielo-calido);
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
}

.oculta {
  display: none !important;
}

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

/* El foco tiene que verse siempre: el juego se puede jugar con el teclado. */
:focus-visible {
  outline: 0.2rem solid var(--oro-claro);
  outline-offset: 0.2rem;
}