/* Misión limpiar el océano — la hoja del juego.

   Va después de tokens.css, sitio.css y componentes.css: el body, la
   cabecera, el pie, el decorado y el botón de sitio son del sitio y no se
   repiten aquí. Lo que hay es la zona de juego, los objetos que asoman, el
   HUD y las dos pantallas que se ponen encima.

   El material es el del Tesoro: vidrio esmerilado sobre el mar. El oro es la
   acción principal, el verde de selva el acierto y el coral el error, así que
   puestos al lado se ve que son del mismo sitio. */

:root {
  /* El tamaño de un objeto, en rem: lo lee vista.js para colocarlos sin
     medir nada, con calc((100% - var(--objeto)) * fracción). */
  --objeto: 5.5rem;
}

/* Cabecera: más apretada que la de la home, que el mar tiene que caber. */
.cabecera-juego {
  padding-block: var(--e4) var(--e3);
}

.cabecera-juego h1 {
  font-size: clamp(1.6rem, 6vw, 2.5rem);
}

.cabecera-juego .bienvenida {
  margin-top: 0;
  margin-bottom: var(--e1);
  font-size: 1rem;
}

.cabecera-juego .bienvenida a {
  text-decoration: none;
  border-radius: var(--radio-s);
}

.cabecera-juego .bienvenida a::before {
  content: "← ";
}

.cabecera-juego .bienvenida a:hover {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

main {
  padding-block: var(--e2) var(--e4);
}

/* La zona de juego ------------------------------------------------------- */

/* El mar: un panel de vidrio con el fondo del océano, que ocupa lo que cabe
   entre la cabecera y el pie. Los objetos se colocan en absoluto dentro. */
.zona-juego {
  position: relative;
  width: 100%;
  max-width: 50rem;
  height: clamp(18rem, 62svh, 40rem);
  margin: 0 auto;
  border-radius: var(--radio-g);
  background: linear-gradient(180deg, var(--mar-claro) 0%, var(--mar) 55%, var(--mar-profundo) 100%);
  border: 0.125rem solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel), inset 0 0 4rem rgba(0, 0, 0, 0.25);
  overflow: hidden;
  outline: none;
  /* Táctil: un doble toque rápido no hace zoom, y ni el dedo ni el ratón
     seleccionan texto o arrastran imágenes en plena pesca. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background-color var(--rapido) ease;
}

/* Con el ratón, la red es el cursor. En táctil no hay cursor y no hace
   falta: las instrucciones dicen "toca", no "mueve la red". */
.zona-juego.en-juego {
  cursor: url("../img/red.svg") 12 12, crosshair;
}

/* Fogonazo coral al tocar un animal. Es una clase, no una animación: con
   movimiento reducido se ve igual, solo que sin fundido. */
.zona-juego.golpe {
  box-shadow: var(--sombra-panel), inset 0 0 0 100vmax rgba(255, 107, 107, 0.45);
}

/* Objetos ----------------------------------------------------------------- */

/* Cada objeto nace hundido y sin opacidad; `visible` lo hace emerger y
   `hundido` lo devuelve al fondo. La visibilidad va por clase: con
   movimiento reducido las transiciones se anulan y el objeto simplemente
   aparece y desaparece, y el tiempo que está en pantalla es el mismo. */
.objeto {
  position: absolute;
  width: var(--objeto);
  height: var(--objeto);
  z-index: 1;
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}

.objeto.visible {
  opacity: 1;
  transform: translateY(0);
}

.objeto.hundido {
  opacity: 0;
  transform: translateY(2.5rem);
  transition-timing-function: ease-in;
}

/* El dibujo es un SVG inline (dibujos.js) que ocupa la caja entera; el
   contorno de tinta ya lo separa del fondo, y la sombra lo despega. */
.objeto .dibujo {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0.25rem 0.375rem rgba(0, 0, 0, 0.35));
}

.objeto .dibujo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Al pescar crece un poco y se va; al dañar, lo mismo pero en coral. */
.objeto.pescado,
.objeto.dañado {
  opacity: 0;
  transform: scale(1.3);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.objeto.dañado .dibujo {
  filter: drop-shadow(0 0 0.75rem var(--coral));
}

/* El texto que sube desde el objeto. Como el del Tesoro: Fredoka, sombra y
   sin capturar el dedo. Sale en el mismo sitio que el objeto. */
.volador {
  position: absolute;
  width: var(--objeto);
  z-index: var(--z-volador);
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  text-align: center;
  text-shadow: var(--sombra-texto);
  pointer-events: none;
  animation: volar 900ms ease-out forwards;
}

.volador.pescado {
  font-size: 1.6rem;
  color: var(--selva-clara);
}

.volador.escapado {
  color: var(--oro-claro);
}

.volador.dañado {
  color: var(--coral);
}

@keyframes volar {
  from { opacity: 1; transform: translateY(0) scale(0.9); }
  to   { opacity: 0; transform: translateY(-4rem) scale(1.2); }
}

/* HUD ----------------------------------------------------------------------- */

/* Cada dato en su cápsula de vidrio oscuro, como el del Tesoro. Arriba a la
   derecha, sobre los objetos y debajo de las pantallas. */
.hud {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: var(--z-hud);
  display: flex;
  gap: var(--e2);
  pointer-events: none;
}

.hud-dato {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e3);
  border-radius: 999px;
  background: var(--vidrio-oscuro);
  backdrop-filter: var(--desenfoque);
  border: 0.0625rem solid var(--vidrio-borde);
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 1rem;
}

.hud-etiqueta {
  color: var(--apagado);
  font-size: 0.85rem;
}

.hud-cifra {
  min-width: 1.5ch;
  font-size: 1.25rem;
  color: var(--oro-claro);
  text-align: right;
}

.corazones {
  display: inline-flex;
  gap: 0.125rem;
}

.corazon {
  width: 1.1rem;
  height: 1rem;
  fill: var(--coral);
  transition: opacity var(--medio) ease, transform var(--medio) ease;
}

/* Las vidas perdidas se apagan, de derecha a izquierda. */
.corazones[data-vidas="2"] .corazon:nth-child(n + 3),
.corazones[data-vidas="1"] .corazon:nth-child(n + 2),
.corazones[data-vidas="0"] .corazon {
  opacity: 0.25;
  transform: scale(0.8);
  fill: var(--texto);
}

/* Pantallas de inicio y de fin ------------------------------------------- */

/* Un panel de vidrio centrado sobre el mar. Se ve por la clase `oculta`
   (sitio.css), nunca solo por la animación. */
.panel-juego {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z-cofre);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  width: min(90%, 26rem);
  max-height: 92%;
  padding: var(--e5) var(--e4);
  border-radius: var(--radio-g);
  background: rgba(6, 58, 92, 0.82);
  backdrop-filter: var(--desenfoque);
  border: 0.0625rem solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel);
  text-align: center;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  animation: aparecer var(--medio) ease-out;
}

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* El noscript no está sobre un mar: va en el flujo, como un panel de texto. */
noscript .panel-juego {
  position: static;
  margin: var(--e4) auto;
  transform: none;
}

.instrucciones {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  font-size: 1.05rem;
  line-height: 1.4;
}

.instrucciones .bien {
  color: var(--selva-clara);
}

.instrucciones .mal {
  color: var(--coral);
}

.record {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  color: var(--cielo-calido);
}

.cifra-final {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--texto);
}

.cifra-final span {
  font-size: 3rem;
  line-height: 1;
  color: var(--oro-claro);
  text-shadow: var(--sombra-texto);
}

.nuevo-record {
  padding: var(--e1) var(--e4);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--oro), var(--oro-claro));
  font-family: var(--tipo-titulo);
  font-weight: 700;
  color: var(--texto-invertido);
}

.enlace-volver {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--e3);
  border-radius: var(--radio-s);
  color: var(--cielo-calido);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.enlace-volver:hover {
  color: var(--texto);
}

/* Adaptaciones ----------------------------------------------------------- */

/* Móvil apaisado: poca altura. La cabecera se encoge al mínimo y el mar se
   lleva lo que queda; el decorado ya lo retira sitio.css. */
@media (max-height: 34rem) and (orientation: landscape) {
  :root {
    --objeto: 4.5rem;
  }

  .cabecera-juego {
    padding-block: var(--e2) var(--e1);
  }

  .cabecera-juego h1 {
    font-size: 1.25rem;
  }

  /* El enlace de vuelta se queda: es el camino a la home desde el juego. */
  .cabecera-juego .bienvenida {
    font-size: 0.85rem;
  }

  .zona-juego {
    height: clamp(14rem, 72svh, 40rem);
  }

  .panel-juego {
    gap: var(--e2);
    padding: var(--e3) var(--e4);
  }

  .instrucciones {
    font-size: 0.95rem;
  }
}

/* Teléfono estrecho: objetos un poco más pequeños para que quepan más. */
@media (max-width: 24rem) {
  :root {
    --objeto: 4.5rem;
  }

  .hud-dato {
    padding: var(--e1) var(--e2);
    font-size: 0.9rem;
  }
}

/* Movimiento reducido: sitio.css ya anula toda animación y transición con
   !important. Aquí solo queda asegurar que los objetos y los textos se ven
   sin moverse: nada de lo de arriba depende de una animación para verse. */
@media (prefers-reduced-motion: reduce) {
  .objeto {
    transform: none;
  }

  .objeto.pescado,
  .objeto.dañado {
    opacity: 1;
    transform: none;
  }

  .volador {
    opacity: 1;
  }
}