/* GOBERNANZA GLOBAL — pantalla de cierre de juego.

   Los seis juegos tenían su propio final copiado a mano: cinco con un
   overlay translúcido y una tarjeta encima, Vocales a pantalla completa
   (por eso se veía mejor, no por casualidad) y Sílabas sin final ninguno.
   Todos con dos líneas de texto que un niño de tres años no puede leer.

   Aquí vive uno solo. La misma lección que celebracion.js y
   pantalla-completa.js: lo transversal duplicado en seis archivos termina
   divergiendo sin que nadie lo note.

   Qué comunica, y en qué orden:
     el fondo entra  ->  aterriza la copa  ->  se cuentan las estrellas
     ->  y solo al final asoma el botón de jugar.
   Ese orden ES el mensaje: primero lo lograste, después cuánto, y por
   último puedes repetir. Con el botón entrando a la vez, competiría con
   la copa justo en el segundo en que el niño la está mirando.

   Ninguna palabra escrita: el premio es la copa, que se entiende sin
   haber aprendido ningún símbolo. Las estrellas se quedan porque no son
   texto — son la misma señal que el niño vio encenderse jugando. */

.cierre{
  position:absolute;inset:0;z-index:30;display:none;
  place-content:center;justify-items:center;
  gap:clamp(2px,1.2vh,12px);
  padding:clamp(10px,3vh,26px);
  text-align:center;
  background:linear-gradient(180deg,#fff6ea,#ffe3c9 60%,#ffd0ae);
}
.cierre.ver{display:grid}

/* LAS ANIMACIONES SON UN ADORNO, NUNCA EL ESTADO.

   Antes el estado visible vivía dentro del fill de cada animación
   (opacity:0 de base y `both` para acabar en 1). Eso significa que si la
   animación no llega a ejecutarse —pestaña en segundo plano, animaciones
   pausadas por el sistema, cualquier motivo— el cierre se queda invisible
   con display:grid. Un niño que termina el juego se encontraría una
   pantalla en blanco sin salida.

   Ahora al revés: todo está visible por defecto, y las animaciones se
   añaden SOLO cuando el sistema no pide menos movimiento. Si no corren,
   el cierre aparece entero y quieto — feo, pero jugable. Es la misma
   regla que ya rige celebracion.js: nada de lo que el niño necesita
   puede depender de un efecto. */
.cierre-copa{opacity:1}

@media(prefers-reduced-motion:no-preference){
  .cierre.ver{animation:cierreEntra .26s ease}
  @keyframes cierreEntra{from{opacity:0}to{opacity:1}}

  /* La copa espera invisible y entra cuando su SVG YA está dibujado, no
     cuando se pide: la librería tarda un momento en resolver el JSON y
     animar una caja vacía se ve como un salto. La clase la pone el evento
     DOMLoaded de la propia animación. */
  .cierre-copa{opacity:0}
  .cierre-copa.lista{animation:cierreCopa .5s cubic-bezier(.2,1.4,.4,1) forwards}
  @keyframes cierreCopa{
    0%{opacity:0;transform:scale(.55) translateY(22px)}
    100%{opacity:1;transform:scale(1) translateY(0)}
  }

  .cierre.ver .cierre-estrellas i{animation:cierreEstrella .42s cubic-bezier(.2,1.4,.4,1) backwards}
  .cierre.ver .cierre-estrellas i:nth-child(1){animation-delay:.30s}
  .cierre.ver .cierre-estrellas i:nth-child(2){animation-delay:.40s}
  .cierre.ver .cierre-estrellas i:nth-child(3){animation-delay:.50s}
  @keyframes cierreEstrella{
    0%{opacity:0;transform:scale(.3) rotate(-24deg)}
    60%{opacity:1;transform:scale(1.32) rotate(8deg)}
    100%{opacity:1;transform:scale(1) rotate(0)}
  }

  .cierre.ver .cierre-repetir{animation:cierreCopa .44s cubic-bezier(.2,1.4,.4,1) .66s backwards}
}

/* La copa manda el tamaño: ocupa el alto disponible sin empujar al botón
   fuera de pantalla en horizontal, que es donde se juega. */
.cierre-copa{width:min(44vh,60vw,400px);aspect-ratio:1;pointer-events:none}
.cierre-copa svg{display:block;width:100%;height:100%}

.cierre-estrellas{display:flex;gap:clamp(8px,2vw,16px);pointer-events:none}
.cierre-estrellas i{
  font-style:normal;font-family:Bunko,Joy,sans-serif;
  font-size:clamp(30px,6vw,46px);line-height:1;color:#e8cdb4;
}
.cierre-estrellas i.on{color:#ffc93d;filter:drop-shadow(0 2px 6px rgba(255,180,40,.5))}

/* Mismo botón redondo verde que el niño ya conoce de los finales
   anteriores, con el icono de play (no la flecha de "siguiente": aquí no
   se avanza, se vuelve a empezar). */
.cierre-repetir{
  position:relative;
  width:clamp(44px,7.5vw,60px);height:clamp(44px,7.5vw,60px);
  border:0;border-radius:50%;cursor:pointer;
  background:#3b9c83;color:#fff7e6;box-shadow:0 5px 0 #27715e;
  display:grid;place-items:center;transition:transform .15s;
  margin-top:clamp(4px,1.5vh,12px);
  -webkit-tap-highlight-color:transparent;
}
/* El premio debe dominar la pantalla, no la acción posterior. El botón se
   ve a la mitad, pero esta extensión invisible conserva una zona de toque
   de al menos 88x88px para manos pequeñas. */
.cierre-repetir::before{content:'';position:absolute;inset:-22px;border-radius:50%}
.cierre-repetir:active{transform:translateY(3px);box-shadow:0 2px 0 #27715e}
.cierre-repetir svg{width:38%;height:38%;fill:currentColor}