/* css/habla.css — Habla con Happy (screens/habla.js): Happy flotando con su bocadillo,
   la palabra en español en grande y el micro. Hereda la paleta del juego (variables).
   (La puerta aparte bajo el Repaso se quitó 2026-07-22: única entrada = nodo del mapa.) */

/* ── pantalla ──
   Reparto horizontal (es web, no un móvil estirado): Happy a la izquierda y el turno
   —palabra + micro— a la derecha, donde va la mano. Abajo, el pie con las salidas y la
   pista. En móvil la fila se apila y vuelve a ser la columna de siempre. */
.habla-wrap{ max-width:960px; margin:0 auto; padding:12px 16px 32px; display:flex;
  flex-direction:column; align-items:center; gap:6px; text-align:center }
.hb-fila{ display:flex; align-items:center; justify-content:center; width:100%;
  gap:clamp(12px,4vw,56px) }
/* la columna del turno no baila de ancho al cambiar de palabra (evita que el micro se
   mueva de sitio entre turnos: el dedo ya sabe dónde está) */
.hb-turno{ display:flex; flex-direction:column; align-items:center; gap:8px;
  flex:0 1 340px; min-width:min(260px,44vw) }
/* el aire sobre las salidas es a propósito: pegadas al micro se leen como parte de él y
   el dedo se equivoca; separadas quedan claramente como "la otra opción" */
.hb-acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; min-height:40px;
  margin-top:16px }
/* las salidas son secundarias y van bajo el micro: chiquitas y ajustadas al texto (el .btn
   del sistema viene a 320px de ancho y 54px de alto, pensado para botones de columna).
   Si compitieran en tamaño con el micro, invitarían a rendirse antes de intentarlo. */
.hb-acciones .btn{ width:auto; min-width:0; min-height:40px; margin:0; padding:8px 16px;
  font-size:.82rem; gap:6px }
.hb-acciones .btn svg{ width:16px; height:16px }
/* la pista usa la caja del test (.pistabox) y, dentro, el panel de las cartas del juego de
   la carta escondida (.carta-op): mismo marco lila, mismo redondeo, misma entrada suave.
   Nunca de entrada — solo si el niño la pide, para que primero lo intente de memoria.
   object-fit:contain (y no cover como en el juego) porque la ilustración de estudio trae
   fondo blanco y recortarla se comería parte del dibujo, que aquí ES la pista. */
.hb-pista-img{ width:min(170px,44vw); margin:0 auto; animation:hb-pista-in .35s ease both }
.hb-pista-img .carta-op{ cursor:default; background:#fff }
.hb-pista-img img{ object-fit:contain }
/* la pista pega el salto hacia arriba: sin el margen de la caja del test, que aquí solo
   añadía hueco muerto entre el micro y el dibujo */
#hbPista.pistabox{ margin-top:0 }
#hbPista .ibx-label{ margin-top:12px }
@keyframes hb-pista-in{ from{ opacity:0; transform:translateY(10px) scale(.96) }
  to{ opacity:1; transform:none } }
@media (max-width:700px){
  .hb-fila{ flex-direction:column; gap:8px }
  .hb-turno{ flex:0 0 auto }
}

/* escena: bocadillo arriba, Happy flotando debajo */
.hb-escena{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:6px }
.hb-burbuja{ position:relative; background:#fff; border-radius:18px; padding:12px 18px;
  font-weight:800; font-size:1.05rem; color:#3b2f66; box-shadow:0 6px 18px rgba(46,16,101,.14);
  max-width:320px }
.hb-burbuja::after{ content:''; position:absolute; left:50%; bottom:-7px; width:14px; height:14px;
  background:#fff; transform:translateX(-50%) rotate(45deg); border-radius:3px }
/* Happy en su escoba (recorte transparente): flota con un vaivén de vuelo suave.
   Un punto más grande que antes ahora que tiene su propia columna, sin comerse el turno */
.hb-happy{ width:min(52vw,268px); aspect-ratio:1; animation:hb-flota 3.2s ease-in-out infinite }
.hb-happy img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(46,16,101,.25)) }
@keyframes hb-flota{ 0%,100%{ transform:translateY(0) rotate(-1.5deg) }
  50%{ transform:translateY(-12px) rotate(1.5deg) } }

/* la palabra en español, bien grande. Sube un poco (margin negativo) para que el bloque
   entero —palabra, micro, salidas— quede a la altura del centro de Happy y le deje sitio
   a la pista sin que se vaya al fondo de la pantalla */
.hb-palabra{ font-size:clamp(1.6rem,6vw,2.3rem); font-weight:900; color:var(--purple, #7C3AED);
  min-height:1.2em; margin-top:-18px }

/* feedback: la palabra en inglés (acierto/enseñanza) o "te escucho" */
.hb-feedback{ min-height:1.8rem; font-weight:900 }
.hb-ok{ font-size:1.5rem; color:#059669 }
.hb-oyendo{ color:#7C3AED; animation:hb-late 1.1s ease-in-out infinite }
@keyframes hb-late{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* controles: el micro manda en la columna derecha (mín. 48px táctil) */
.hb-controles{ display:flex; flex-direction:column; align-items:center; gap:10px; min-height:88px }
.hb-mic{ width:84px; height:84px; border-radius:50%; border:0; cursor:pointer; font-size:2rem;
  background:linear-gradient(180deg,var(--purple-light,#9F67FF),var(--purple,#7C3AED)); color:#fff;
  box-shadow:0 7px 0 var(--purple-hover,#5B21B6),0 10px 24px rgba(124,58,237,.4);
  transition:transform .1s, box-shadow .1s }
.hb-mic:active{ transform:translateY(4px); box-shadow:0 3px 0 var(--purple-hover,#5B21B6) }
.hb-mic.oyendo{ animation:hb-pulso 1.2s ease-in-out infinite }
@keyframes hb-pulso{ 0%,100%{ box-shadow:0 7px 0 var(--purple-hover,#5B21B6),0 0 0 0 rgba(124,58,237,.45) }
  50%{ box-shadow:0 7px 0 var(--purple-hover,#5B21B6),0 0 0 18px rgba(124,58,237,0) } }
.hb-nose,.hb-oye{ min-height:48px }
.hb-dicha{ min-height:48px }
/* instrucción del modo loro/mental: no es un botón, es la consigna del turno */
.hb-mental{ margin:0; font-weight:800; color:var(--text2,#6B7280); font-size:.92rem }
/* "No puedo hablar ahora": la salida de sesión completa (pasa a loro para todo el resto).
   Deliberadamente la más discreta de las tres — texto puro, sin píldora ni fondo — porque
   es la opción que menos queremos empujar; que esté ahí basta, no hace falta destacarla */
.hb-nomic{ background:none; box-shadow:none; color:var(--text2,#6B7280); font-weight:700;
  text-decoration:underline; text-underline-offset:3px }
.hb-nomic:hover{ color:var(--purple,#7C3AED) }

/* ── PLENO: la carta de GREAT por encima de todo ──
   Solo sale con 5/5 al micro. La carta entra con rebote, el rótulo aterriza después (el
   verde del acierto del juego) y el conjunto respira una vez: fiesta corta, sin bloquear
   —se cierra sola a los 3,4 s o al tocarla—. */
.hb-great{ position:fixed; inset:0; z-index:150; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; cursor:pointer;
  background:radial-gradient(circle at 50% 42%,rgba(16,185,129,.30),rgba(46,16,101,.72));
  backdrop-filter:blur(4px); opacity:0; transition:opacity .3s }
.hb-great.on{ opacity:1 }
.hb-great-card{ width:min(62vw,300px); aspect-ratio:1; border-radius:26px; background:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.35); overflow:hidden; display:flex;
  transform:scale(.85); opacity:0 }
.hb-great.on .hb-great-card{ animation:hb-great-card .55s cubic-bezier(.22,1.5,.36,1) forwards }
.hb-great-card img{ width:100%; height:100%; object-fit:contain }
.hb-great-txt{ font-family:'Nunito',system-ui,sans-serif; font-weight:900; letter-spacing:.04em;
  font-size:clamp(2.6rem,11vw,4.4rem); line-height:1; color:#34D399;
  text-shadow:0 4px 0 #047857,0 12px 30px rgba(4,120,87,.45); opacity:0 }
.hb-great.on .hb-great-txt{ animation:hb-great-txt .5s cubic-bezier(.22,1.6,.36,1) .22s forwards,
  hb-great-late 1.6s ease-in-out .8s infinite }
@keyframes hb-great-card{ to{ transform:scale(1); opacity:1 } }
@keyframes hb-great-txt{ from{ transform:translateY(14px) scale(.8) } to{ transform:none; opacity:1 } }
@keyframes hb-great-late{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }

@media (prefers-reduced-motion:reduce){
  .hb-happy{ animation:none }
  .hb-mic.oyendo{ animation:none }
  .hb-oyendo{ animation:none }
  .hb-pista{ animation:none }
  .hb-great.on .hb-great-card,.hb-great.on .hb-great-txt{ animation:none; opacity:1; transform:none }
}