/* ============================================================
   LABORATORIO DE MONSTRUOS — hoja de estilos
   Paleta: laboratorio de noche + slime brillante
   ============================================================ */

:root{
  --noche:      #1A1140;   /* fondo profundo del laboratorio */
  --noche-2:    #2C1D63;   /* violeta de las paredes */
  --slime:      #7CF56A;   /* verde slime, color estrella */
  --burbuja:    #4ED9F0;   /* cian de las burbujas */
  --chispa:     #FFD23F;   /* amarillo de las estrellas */
  --pocion:     #FF6BC1;   /* rosa poción */
  --papel:      #FFF6E5;   /* papel de la receta (texto para leer) */
  --tinta:      #241736;   /* tinta oscura sobre papel */

  --radio:      28px;
  --toque:      64px;      /* área mínima de toque */
}

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

html, body{
  height: 100%;
  overflow: hidden;                 /* nada de scroll: todo cabe en pantalla */
  background: var(--noche);
  font-family: 'Quicksand', 'Comic Neue', 'Trebuchet MS', sans-serif;
  color: var(--papel);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body{
  background:
    radial-gradient(circle at 15% 12%, rgba(124,245,106,.20), transparent 42%),
    radial-gradient(circle at 85% 82%, rgba(255,107,193,.20), transparent 45%),
    linear-gradient(170deg, var(--noche-2) 0%, var(--noche) 65%);
}

/* ---------- Pantallas ---------- */
.pantalla{
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: clamp(10px, 2vh, 22px);
}
.pantalla.activa{ display: flex; }
.oculto{ display: none !important; }

/* ============================================================
   PANTALLA DE INICIO
   ============================================================ */
#pantalla-inicio{ justify-content: center; gap: clamp(14px, 3vh, 30px); text-align: center; }

.titulo-juego{
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  font-weight: 700;
  line-height: .92;
  display: flex;
  flex-direction: column;
}
.titulo-linea-1{
  font-size: clamp(28px, 5.5vh, 52px);
  color: var(--burbuja);
  letter-spacing: .02em;
}
.titulo-linea-2{
  font-size: clamp(48px, 11vh, 108px);
  color: var(--slime);
  text-shadow: 0 0 30px rgba(124,245,106,.55);
}

.subtitulo{ font-size: clamp(24px, 3.4vh, 32px); font-weight: 600; }
.pie-inicio{ font-size: 24px; opacity: .7; }

/* ---------- Botón principal ---------- */
.boton-grande{
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  font-size: clamp(26px, 3.6vh, 36px);
  font-weight: 600;
  color: var(--tinta);
  background: var(--slime);
  border: none;
  border-radius: 999px;
  padding: 18px 44px;
  min-height: var(--toque);
  box-shadow: 0 10px 0 #48A93B, 0 16px 30px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.boton-grande:active{ transform: translateY(8px); box-shadow: 0 2px 0 #48A93B; }
.boton-grande:focus-visible{ outline: 5px solid var(--chispa); outline-offset: 5px; }

/* Burbujas ambientales del inicio */
.burbujas-fondo{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.burbujas-fondo::before, .burbujas-fondo::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(78,217,240,.12));
  animation: flotar 9s ease-in-out infinite;
}
.burbujas-fondo::before{ width: 130px; height: 130px; left: 8%;  bottom: -60px; }
.burbujas-fondo::after { width: 80px;  height: 80px;  right: 12%; bottom: -40px; animation-duration: 12s; }
@keyframes flotar{ to{ transform: translateY(-115vh); } }

/* ============================================================
   PANTALLA DE JUEGO
   ============================================================ */
#pantalla-juego{ justify-content: flex-start; gap: clamp(8px, 1.6vh, 16px); }

.barra-superior{
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(20px, 2.4vh, 26px);
  font-weight: 700;
  color: var(--burbuja);
}
.marcador-estrellas{
  background: rgba(255,210,63,.15);
  border: 3px solid var(--chispa);
  color: var(--chispa);
  border-radius: 999px;
  padding: 4px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.marcador-estrellas.brinca{ animation: brincar .45s ease; }
@keyframes brincar{ 50%{ transform: scale(1.28) rotate(-4deg); } }

/* ---------- La receta (el texto a leer) ---------- */
.receta{
  position: relative;
  width: 100%;
  max-width: 900px;
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--radio);
  padding: clamp(14px, 2.2vh, 22px) clamp(18px, 3vw, 34px);
  box-shadow: 0 12px 0 rgba(0,0,0,.25);
  text-align: center;
  transform: rotate(-.6deg);
}
.receta-etiqueta{
  position: absolute;
  top: -16px; left: 26px;
  background: var(--pocion);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  padding: 3px 18px;
  border-radius: 999px;
  transform: rotate(-3deg);
}
.receta-texto{
  font-size: clamp(24px, 3.6vh, 38px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}
.boton-ayuda{
  margin-top: 10px;
  min-height: 48px;
  font-family: 'Quicksand', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--tinta);
  background: var(--chispa);
  border: none;
  border-radius: 999px;
  padding: 8px 24px;
  cursor: pointer;
}

/* ---------- La probeta ---------- */
.zona-probeta{
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.probeta{
  position: relative;
  height: 100%;
  aspect-ratio: 3 / 4;
  max-width: 92vw;
  border: 6px solid rgba(255,255,255,.35);
  border-radius: 40px 40px 90px 90px;
  background: linear-gradient(180deg, rgba(78,217,240,.10), rgba(124,245,106,.20));
  box-shadow: inset -18px 0 30px rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.probeta.recibe{ border-color: var(--chispa); }

.burbujas-probeta span{
  position: absolute;
  bottom: -30px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  animation: subir 6s linear infinite;
}
.burbujas-probeta span:nth-child(1){ left: 18%; animation-delay: 0s; }
.burbujas-probeta span:nth-child(2){ left: 38%; width: 12px; height: 12px; animation-delay: 1.4s; }
.burbujas-probeta span:nth-child(3){ left: 58%; animation-delay: 2.6s; }
.burbujas-probeta span:nth-child(4){ left: 74%; width: 10px; height: 10px; animation-delay: 3.8s; }
.burbujas-probeta span:nth-child(5){ left: 48%; width: 22px; height: 22px; animation-delay: 5s; }
@keyframes subir{ to{ transform: translateY(-105%); opacity: .1; } }

/* ---------- El monstruo y sus huecos ---------- */
.monstruo{
  position: relative;
  width: 82%;
  height: 88%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.zona-cabeza{ position: relative; width: 100%; height: 62%; }

.hueco{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px dashed rgba(255,255,255,.45);
  border-radius: 24px;
  transition: border-color .15s ease, background .15s ease;
}
.hueco-marca{
  font-family: 'Fredoka', sans-serif;
  font-size: 30px;
  color: rgba(255,255,255,.55);
}
.hueco svg{ width: 100%; height: 100%; display: block; }
.hueco.lleno{ border: none; background: none; }
.hueco.lleno .hueco-marca{ display: none; }
.hueco.aparece{ animation: plop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes plop{ 0%{ transform: scale(.2) rotate(-12deg); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }

.hueco-cabeza{ inset: 0; }
.hueco-ojos { top: 34%; left: 16%; width: 68%; height: 20%; }
.hueco-boca { top: 60%; left: 30%; width: 40%; height: 18%; }
.hueco-patas{ position: relative; width: 62%; height: 34%; margin-top: -2%; }

.probeta.tiembla{ animation: temblar .4s ease; }
@keyframes temblar{
  20%{ transform: translateX(-10px) rotate(-1deg); }
  50%{ transform: translateX(9px) rotate(1deg); }
  80%{ transform: translateX(-5px); }
}

.cartel-nombre{
  position: absolute;
  bottom: 6%;
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(26px, 4vh, 42px);
  color: var(--tinta);
  background: var(--chispa);
  padding: 6px 26px;
  border-radius: 999px;
  transform: rotate(-2deg);
  animation: plop .5s cubic-bezier(.2,1.6,.4,1);
}

/* ---------- Mesa de piezas ---------- */
.mesa-piezas{
  width: 100%;
  max-width: 900px;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 26px);
  padding-bottom: 4px;
}
.pieza{
  width: clamp(96px, 15vh, 160px);
  height: clamp(96px, 15vh, 160px);
  min-width: var(--toque);
  min-height: var(--toque);
  background: rgba(255,255,255,.10);
  border: 4px solid rgba(255,255,255,.30);
  border-radius: var(--radio);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;                 /* el dedo arrastra, no hace scroll */
  transition: transform .12s ease, border-color .12s ease;
}
.pieza svg{ width: 100%; height: 100%; pointer-events: none; }
.pieza.elegida{ border-color: var(--chispa); background: rgba(255,210,63,.20); transform: scale(1.06); }
.pieza.invisible{ opacity: .25; }

.fantasma{
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: .95;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.45));
}

/* ---------- Avisos suaves ---------- */
.aviso{
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pocion);
  color: #fff;
  font-size: clamp(24px, 3vh, 30px);
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  z-index: 40;
}

/* ---------- Confeti y victoria ---------- */
.confeti{ position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.confeti i{
  position: absolute;
  width: 14px; height: 20px;
  border-radius: 4px;
  animation: caer 1.5s linear forwards;
}
@keyframes caer{
  to{ transform: translateY(88vh) rotate(620deg); opacity: 0; }
}

.capa-victoria{
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(26,17,64,.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}
.victoria-texto{
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(32px, 6vh, 64px);
  color: var(--slime);
}

/* ============================================================
   DIPLOMA
   ============================================================ */
#pantalla-diploma{ justify-content: center; }
.diploma{
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--radio);
  border: 10px solid var(--chispa);
  padding: clamp(22px, 5vh, 48px);
  max-width: 700px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.diploma-eyebrow{ font-size: 22px; font-weight: 700; color: var(--pocion); letter-spacing: .08em; text-transform: uppercase; }
.diploma-titulo{ font-family: 'Fredoka', sans-serif; font-size: clamp(32px, 6vh, 56px); margin: 10px 0; }
.diploma-cuerpo{ font-size: clamp(24px, 3vh, 30px); font-weight: 600; }
.diploma-estrellas{ font-size: clamp(34px, 5vh, 52px); margin: 16px 0 26px; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Tablet en horizontal: receta y probeta lado a lado */
@media (orientation: landscape) and (min-width: 820px){
  .receta{ max-width: 760px; }
  .pieza{ width: clamp(96px, 20vh, 150px); height: clamp(96px, 20vh, 150px); }
}