/* La aventura del reciclaje — 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, el cubo, los objetos que
   caen, el HUD y las dos pantallas que se ponen encima.

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

:root {
  /* Los tamaños del cubo y de un objeto, en rem: los lee vista.js para mover
     y para la colisión, así que las reglas del juego se llevan en rem y no
     en píxeles. Cambian en móvil, aquí abajo. */
  --cubo: 6rem;
  --objeto: 4rem;
}

/* Cabecera: más apretada que la de la home, que la zona 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 ------------------------------------------------------- */

/* Un panel de vidrio con el cielo detrás, que ocupa lo que cabe entre la
   cabecera y el pie. Los objetos y el cubo se colocan en absoluto dentro,
   con transform en rem que pone vista.js. */
.zona-juego {
  position: relative;
  width: 100%;
  max-width: 40rem;
  height: clamp(20rem, 66svh, 42rem);
  margin: 0 auto;
  border-radius: var(--radio-g);
  background: linear-gradient(180deg, var(--cielo-calido) 0%, var(--mar-claro) 70%, var(--mar) 100%);
  border: 0.125rem solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel), inset 0 0 4rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
  outline: none;
  /* Táctil: el dedo mueve el cubo y nada más. Sin esto, arrastrar desplaza la
     página y el doble toque hace zoom, que era el defecto más visible del
     prototipo en una tablet. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: box-shadow var(--rapido) ease;
}

/* En marcha, el cubo hace de cursor. */
.zona-juego.en-juego {
  cursor: none;
}

/* Fogonazo coral al recoger un resto. Es una clase, no una animación: se ve
   igual con movimiento reducido… salvo que allí se retira del todo, abajo. */
.zona-juego.golpe {
  box-shadow: var(--sombra-panel), inset 0 0 0 100vmax rgba(255, 107, 107, 0.45);
}

/* El suelo: una franja de arena bajo el cubo, para que se vea dónde acaba la
   caída. */
.zona-juego::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.75rem;
  background: var(--arena);
  opacity: 0.8;
  pointer-events: none;
}

/* El cubo ---------------------------------------------------------------- */

/* Pegado al suelo de la zona; vista.js lo desplaza con translateX. Sin
   transición: iría a rastras del puntero. */
.cubo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--cubo);
  height: var(--cubo);
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

/* Los dibujos son SVG inline (dibujos.js) que ocupan su caja entera. */
.cubo .dibujo,
.objeto .dibujo {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

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

.cubo .dibujo {
  filter: drop-shadow(0 0.3rem 0.4rem rgba(0, 0, 0, 0.3));
}

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

/* Nacen justo encima de la zona y vista.js los baja fotograma a fotograma. */
.objeto {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--objeto);
  height: var(--objeto);
  z-index: 1;
  border-radius: 50%;
  will-change: transform;
}

.objeto .dibujo {
  filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.3));
}

/* El plástico lleva un aro del amarillo del cubo: "lo que brilla como el cubo
   va al cubo". El aro es un contorno, no solo un tono, así que quien no
   distingue bien el amarillo del gris lo sigue viendo. El resto no lleva nada. */
.objeto.plastico {
  background: rgba(255, 210, 52, 0.35);
  box-shadow: 0 0 0 0.2rem var(--oro-claro), 0 0 1rem rgba(255, 210, 52, 0.7);
}

.objeto.plastico .dibujo {
  padding: 0.3rem;
  box-sizing: border-box;
}

/* El texto que sube desde donde cayó el objeto. Como el del Tesoro: Fredoka,
   sombra y sin capturar el dedo. */
.volador {
  position: absolute;
  top: 0;
  left: 0;
  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.recogido {
  font-size: 1.6rem;
  color: var(--selva-clara);
}

.volador.error {
  width: 12rem;
  margin-left: calc((var(--objeto) - 12rem) / 2);
  color: var(--coral);
}

/* La animación no toca el transform: es de vista.js, que coloca el texto. */
@keyframes volar {
  from { opacity: 1; margin-top: 0; }
  to   { opacity: 0; margin-top: -4rem; }
}

/* 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 la zona. 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.86);
  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 la zona: 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);
}

.instrucciones kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.3em;
  border-radius: var(--radio-s);
  background: var(--vidrio);
  border: 0.0625rem solid var(--vidrio-borde);
  font-family: var(--tipo-titulo);
  font-size: 0.95em;
}

.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 la zona se
   lleva lo que queda; el decorado ya lo retira sitio.css. */
@media (max-height: 34rem) and (orientation: landscape) {
  :root {
    --cubo: 4.5rem;
    --objeto: 3.25rem;
  }

  .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, 74svh, 42rem);
  }

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

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

/* Teléfono estrecho: cubo y objetos un poco más pequeños para que quepan. */
@media (max-width: 24rem) {
  :root {
    --cubo: 5rem;
    --objeto: 3.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. La caída es la mecánica y se queda; lo que se retira es todo
   lo demás: el fogonazo coral y los textos que suben (el HUD ya lo dice). */
@media (prefers-reduced-motion: reduce) {
  .zona-juego.golpe {
    box-shadow: var(--sombra-panel), inset 0 0 4rem rgba(0, 0, 0, 0.18);
  }

  .volador {
    display: none;
  }
}