/* ==========================================================================
   HOMBRE AL AGUA · style.css
   Estética náutica infantil · responsive (móvil, tablet, ordenador)
   Índice: 1 Base · 2 Fondo y cabecera · 3 Botones · 4 Pantallas de menú
           5 Partida (HUD, palabra, teclado) · 6 Escena y personaje
           7 Mensajes y efectos · 8 Adaptaciones
   ========================================================================== */

/* ---------- 1. BASE ---------- */
:root {
  --navy: #12325b;
  --azul: #1e90d6;
  --azul-osc: #0f68a5;
  --cielo: #7fd6ff;
  --sol: #ffd23f;
  --naranja: #ff9f1c;
  --coral: #ff5a5f;
  --verde: #37c978;
  --crema: #fff6dc;
  --fuente: "Fredoka", "Baloo 2", "Nunito", "Trebuchet MS", "Segoe UI Rounded", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--fuente);
  color: var(--navy);
  background: #7fd6ff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; }
:focus-visible { outline: 4px solid var(--sol); outline-offset: 2px; }

/* ---------- 2. FONDO Y CABECERA ---------- */
.fondo {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #62c8fb 0%, #a9e6ff 55%, #dcf7ff 100%);
}
.fondo-sol {
  position: absolute; top: 9%; right: 8%; width: clamp(60px, 11vw, 120px); aspect-ratio: 1;
  border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 12px rgba(255, 210, 63, .28), 0 0 0 28px rgba(255, 210, 63, .14);
}
.fondo-nube {
  position: absolute; height: 34px; width: 110px; border-radius: 40px; background: rgba(255, 255, 255, .85);
  animation: deriva-fondo linear infinite;
}
.fondo-nube::before, .fondo-nube::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.fondo-nube::before { width: 50px; height: 50px; left: 18px; top: -24px; }
.fondo-nube::after  { width: 38px; height: 38px; left: 56px; top: -16px; }
.fn1 { top: 14%; animation-duration: 70s; }
.fn2 { top: 30%; animation-duration: 95s; animation-delay: -40s; transform: scale(.7); }
.fn3 { top: 48%; animation-duration: 120s; animation-delay: -80s; transform: scale(.55); opacity: .7; }
@keyframes deriva-fondo { from { left: -160px; } to { left: 105%; } }

.fondo-mar { position: absolute; left: 0; right: 0; bottom: 0; height: 15vh; min-height: 70px; }
.fondo-mar svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.fm-ola { animation: mover-ola 9s linear infinite; }
.fm1 { fill: #35b0e8; }
.fm2 { fill: #1b86cc; animation-duration: 6s; animation-direction: reverse; }
@keyframes mover-ola { to { transform: translateX(-300px); } }

.barra {
  position: relative; z-index: 5; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: 58px; padding: 4px 12px; padding-top: max(4px, env(safe-area-inset-top));
}
.marca { height: 48px; width: auto; filter: drop-shadow(0 3px 0 rgba(18, 50, 91, .2)); }
.barra-botones { display: flex; gap: 8px; }
.btn-icono {
  width: 46px; height: 46px; border: 0; border-radius: 16px; font-size: 22px; cursor: pointer;
  background: #fff; box-shadow: 0 4px 0 #a9cfe8; position: relative; transition: transform .1s;
}
.btn-icono:active { transform: translateY(3px); box-shadow: 0 1px 0 #a9cfe8; }
.btn-icono[aria-pressed="false"] { opacity: .75; background: #e6eef5; }
.btn-icono[aria-pressed="false"]::after {
  content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 4px; border-radius: 3px;
  background: var(--coral); transform: rotate(-42deg);
}
body[data-pantalla="inicio"] #btn-menu { display: none; }

#app { position: relative; z-index: 2; flex: 1; min-height: 0; }

/* ---------- 3. BOTONES ---------- */
.btn {
  --c: var(--azul); --c-osc: var(--azul-osc);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 54px; padding: .6em 1.2em;
  font: 600 clamp(17px, 4.6vw, 23px)/1.1 var(--fuente); letter-spacing: .02em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  background: var(--c); border: 0; border-radius: 22px; cursor: pointer;
  box-shadow: 0 6px 0 var(--c-osc), 0 12px 18px rgba(18, 50, 91, .22);
  transition: transform .1s, box-shadow .1s, filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--c-osc); }
.btn .ico { font-size: 1.25em; }
.btn-jugar   { --c: #37c978; --c-osc: #1f9e58; }
.btn-azul    { --c: #1e90d6; --c-osc: #0f68a5; }
.btn-naranja { --c: #ff9f1c; --c-osc: #d47800; }
.btn-rosa    { --c: #ff5fa2; --c-osc: #cf3a7f; }
.btn-morado  { --c: #8a5cf6; --c-osc: #6236c9; }
.btn-coral   { --c: #ff5a5f; --c-osc: #cf3439; }

.enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--azul-osc); text-decoration: underline; cursor: pointer; }

/* ---------- 4. PANTALLAS DE MENÚ ---------- */
.pantalla { display: none; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 6px 14px 22px; }
.pantalla.activa { display: flex; flex-direction: column; }
.pantalla > * { margin-top: auto; margin-bottom: auto; }
.pantalla.activa { animation: entra-pantalla .35s ease-out; }
@keyframes entra-pantalla { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Inicio */
.hero { width: min(100%, 560px); margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.marca-hero { width: min(40vw, 190px); height: auto; filter: drop-shadow(0 6px 0 rgba(18, 50, 91, .22)); animation: flota-marca 4s ease-in-out infinite; }
@keyframes flota-marca { 50% { transform: translateY(-5px) rotate(-1deg); } }
.titulo {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em;
  font: 700 clamp(38px, 10.5vw, 76px)/.98 var(--fuente); letter-spacing: .01em;
  -webkit-text-stroke: .11em var(--navy); paint-order: stroke fill;
  text-shadow: 0 .07em 0 var(--navy), 0 .12em 0 rgba(18, 50, 91, .25);
}
.t1 { color: #ff9f1c; } .t2 { color: #ffd23f; } .t3 { color: #39b6e8; }
.lema { margin: 0 8px; font-size: clamp(15px, 3.9vw, 20px); font-weight: 500; line-height: 1.25; }
.menu-inicio { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding: 0 4px 6px; }
.menu-inicio .btn-jugar { min-height: 66px; font-size: clamp(24px, 6.4vw, 32px); }
.fila-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fila-3 .btn { flex-direction: column; gap: 2px; min-height: 74px; font-size: clamp(12px, 3.3vw, 16px); padding: .5em .3em; }
.fila-3 .btn .ico { font-size: 1.7em; }

/* Paneles */
.panel {
  width: min(100%, 560px); padding: 20px clamp(14px, 4vw, 26px); margin: auto;
  background: rgba(255, 255, 255, .94); border-radius: 30px; border: 4px solid #fff;
  box-shadow: 0 8px 0 rgba(18, 50, 91, .18), 0 18px 34px rgba(18, 50, 91, .18);
}
.panel-ancho { width: min(100%, 860px); }
.panel-centro { text-align: center; }
.titulo-pantalla { margin: 0 0 12px; font: 700 clamp(24px, 6vw, 34px)/1.1 var(--fuente); text-align: center; color: var(--navy); }
.acciones { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ayuda { margin: 0 0 12px; font-size: 17px; }
.nota { margin: 12px 0 0; font-size: 14px; text-align: center; opacity: .8; }
.grande-emoji { font-size: 64px; line-height: 1; animation: flota-marca 3s ease-in-out infinite; }

/* Cómo jugar */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pasos li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #eef8ff; border-radius: 18px; font-size: clamp(14px, 3.7vw, 17px); line-height: 1.25; }
.paso-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; background: #fff; border-radius: 14px; box-shadow: 0 3px 0 #bcdff5; }
.tabla-mult { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.mult-chip { display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 6px 8px; border-radius: 14px; color: #fff; font-weight: 600; font-size: 13px; background: var(--c); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.mult-chip b { font-size: 20px; }

/* Nickname */
.input-nick {
  width: 100%; max-width: 380px; padding: 14px 16px; text-align: center; text-transform: uppercase;
  font: 700 clamp(24px, 6.5vw, 32px) var(--fuente); letter-spacing: .08em; color: var(--navy);
  border: 4px solid var(--azul); border-radius: 20px; background: #f4fbff; user-select: text; -webkit-user-select: text;
}
.input-nick::placeholder { color: #a9c3d8; }
.input-nick:focus { outline: 4px solid var(--sol); border-color: var(--naranja); }
.error { min-height: 24px; margin: 8px 0 0; font-weight: 600; color: #d4303a; }

/* Selección de nivel */
.jugador-actual { text-align: center; margin: -4px 0 12px; font-size: 16px; }
.niveles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.nivel-card {
  --c: var(--azul);
  position: relative; display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 4px 12px;
  padding: 12px 14px; text-align: left; color: var(--navy); cursor: pointer;
  background: #fff; border: 4px solid var(--c); border-radius: 22px;
  box-shadow: 0 6px 0 var(--c); transition: transform .1s, box-shadow .1s;
}
.nivel-card:hover { transform: translateY(-2px); }
.nivel-card:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--c); }
.nivel-ico { grid-row: span 3; width: 62px; height: 62px; display: grid; place-items: center; font-size: 34px; border-radius: 18px; background: color-mix(in srgb, var(--c) 18%, #fff); }
.nivel-num { font-size: 12px; font-weight: 600; letter-spacing: .08em; opacity: .7; }
.nivel-nombre { font-size: 20px; font-weight: 700; line-height: 1.05; }
.nivel-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.nivel-mult { padding: 2px 9px; border-radius: 10px; background: var(--c); color: #fff; font-weight: 700; }
.estrellas { letter-spacing: 1px; font-size: 14px; }
.nivel-card.bloqueado { cursor: not-allowed; filter: grayscale(.85); opacity: .72; box-shadow: 0 6px 0 #9aa9b6; border-color: #9aa9b6; }
.nivel-card.bloqueado:hover { transform: none; }
.nivel-card.sacude { animation: tiembla-tecla .35s; }
.candado { position: absolute; top: 8px; right: 12px; font-size: 22px; }

/* Ranking */
.pestanas { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.pestana { padding: 8px 14px; font: 600 15px var(--fuente); color: var(--azul-osc); background: #e6f3fc; border: 0; border-radius: 14px; cursor: pointer; }
.pestana.activa { color: #fff; background: var(--azul); box-shadow: 0 3px 0 var(--azul-osc); }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; max-height: 46dvh; overflow-y: auto; }
.ranking li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 9px 12px; background: #eef8ff; border-radius: 16px; font-weight: 600; }
.ranking li.yo { background: #fff2c2; outline: 3px solid var(--sol); }
.rk-pos { font-size: 22px; text-align: center; }
.rk-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pts { font-size: 20px; font-weight: 700; color: var(--azul-osc); }
.ranking li.ranking-vacio { display: block; padding: 22px 10px; text-align: center; font-size: 17px; }

/* Ajustes */
.ajustes { display: grid; gap: 10px; }
.interruptor {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 12px 16px;
  font: 600 18px var(--fuente); color: var(--navy); text-align: left; background: #eef8ff; border: 0; border-radius: 18px; cursor: pointer;
}
.interruptor .ico { font-size: 26px; }
.interruptor .estado { min-width: 48px; padding: 4px 10px; text-align: center; color: #fff; font-size: 15px; background: var(--verde); border-radius: 12px; }
.interruptor[aria-pressed="false"] .estado { background: #9aa9b6; }
.interruptor[aria-pressed="false"] .estado::after { content: ""; }

/* ---------- 5. PARTIDA ---------- */
#pantalla-juego { padding: 0 10px 8px; overflow: hidden; }
#pantalla-juego.activa { display: block; }
.juego {
  height: 100%; width: min(100%, 980px); margin: 0 auto;
  display: grid; gap: 6px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.hud-nivel {
  justify-self: start; padding: 6px 12px; border-radius: 16px; color: #fff; font-weight: 700; font-size: clamp(13px, 3.6vw, 17px); line-height: 1.1;
  background: var(--nv, var(--azul)); box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}
.hud-nivel small { display: block; font-weight: 500; opacity: .95; font-size: .82em; }
.hud-puntos {
  position: relative; min-width: 120px; padding: 4px 18px 5px; text-align: center; border-radius: 18px;
  background: #fff; box-shadow: 0 4px 0 #a9cfe8;
}
.hud-puntos small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; opacity: .65; line-height: 1.1; }
.hud-puntos b { display: block; font-size: clamp(24px, 7vw, 34px); line-height: 1; font-variant-numeric: tabular-nums; }
.hud-puntos.sube b { animation: pulso .4s ease-out; }
@keyframes pulso { 40% { transform: scale(1.22); color: var(--verde); } }
.hud-derecha { justify-self: end; display: flex; align-items: center; gap: 6px; }
.hud-racha { padding: 4px 9px; font-weight: 700; font-size: 14px; color: #fff; background: var(--naranja); border-radius: 14px; box-shadow: 0 3px 0 #d47800; animation: pulso .5s ease-out; }
.hud-salvavidas { display: flex; gap: 1px; font-size: clamp(20px, 5.5vw, 26px); line-height: 1; }
.hud-salvavidas .perdido { filter: grayscale(1); opacity: .35; }

.progreso { position: relative; height: 20px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .7); box-shadow: inset 0 2px 0 rgba(18, 50, 91, .12); }
.progreso-barra { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #37c978, #7be3a6); border-radius: 12px; transition: width .5s ease; }
.progreso span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 600; line-height: 20px; }

.hueco-escena { min-height: 0; container-type: size; display: grid; place-items: center; }
.zona-palabra { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pista { padding: 3px 14px; font-size: clamp(13px, 3.5vw, 16px); font-weight: 600; background: rgba(255, 255, 255, .85); border-radius: 14px; }

.palabra { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; --slot: clamp(28px, min(8.6vw, 6.4dvh), 54px); padding: 0 4px; }
.slot {
  width: var(--slot); height: calc(var(--slot) * 1.2); display: grid; place-items: center;
  font: 700 calc(var(--slot) * .72)/1 var(--fuente); color: var(--navy);
  background: #fff; border-radius: 12px; border-bottom: 5px solid var(--azul); box-shadow: 0 4px 0 rgba(18, 50, 91, .15);
}
.slot.ok { border-bottom-color: var(--verde); }
.slot.pop { animation: pop-letra .5s cubic-bezier(.3, 1.8, .5, 1); }
.slot.perdida { color: var(--coral); border-bottom-color: var(--coral); background: #fff4f4; animation: gira-letra .5s ease-out both; }
.slot.sep { width: calc(var(--slot) * .5); background: none; border: 0; box-shadow: none; }
@keyframes pop-letra { 0% { transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.25) rotate(4deg); background: #d9ffe9; } 100% { transform: none; } }
@keyframes gira-letra { from { transform: rotateX(90deg); } to { transform: none; } }

.estado-fallos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; min-height: 30px; }
.vidas { display: flex; gap: 3px; font-size: clamp(18px, 4.6vw, 24px); line-height: 1; }
.vidas .v { transition: transform .2s; }
.vidas .v.perdida { filter: grayscale(1); opacity: .35; }
.vidas .v.nueva { animation: pierde-vida .6s ease-out; }
@keyframes pierde-vida { 30% { transform: scale(1.6); filter: none; opacity: 1; } }
.vidas-texto { font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .8; }
.fallos { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.fallos span { padding: 1px 8px; font-weight: 700; font-size: 15px; color: #fff; background: var(--coral); border-radius: 10px; }

.teclado { display: grid; grid-template-columns: repeat(9, 1fr); gap: clamp(4px, 1.1vw, 8px); width: min(100%, 600px); margin: 0 auto; }
.tecla {
  height: clamp(42px, 7.6dvh, 62px); padding: 0; font: 700 clamp(19px, 5.4vw, 28px) var(--fuente); color: var(--navy);
  background: #fff; border: 0; border-radius: 14px; cursor: pointer; box-shadow: 0 4px 0 #a9cfe8; transition: transform .08s, box-shadow .08s;
}
.tecla:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #a9cfe8; }
.tecla:disabled { cursor: default; }
.tecla.acierto { color: #fff; background: var(--verde); box-shadow: 0 4px 0 #1f9e58; animation: pop-letra .4s ease-out; }
.tecla.fallo { color: #fff; background: #ff8a8e; box-shadow: 0 4px 0 #d9575c; opacity: .6; animation: tiembla-tecla .35s; }
@keyframes tiembla-tecla { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- 6. ESCENA Y PERSONAJE ---------- */
.escena-wrap {
  position: relative; overflow: hidden; border-radius: 26px; border: 4px solid #fff;
  background: linear-gradient(180deg, #62c8fb 0%, #a9e6ff 60%, #dcf7ff 100%);
  box-shadow: 0 6px 0 rgba(18, 50, 91, .2), 0 14px 26px rgba(18, 50, 91, .18);
}
.hueco-escena .escena-wrap { width: min(100cqw, 150cqh); aspect-ratio: 3 / 2; }
#escena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#escena-wrap.tiembla { animation: sacude .4s; }
@keyframes sacude { 20% { transform: translateX(-5px) rotate(-.6deg); } 60% { transform: translateX(5px) rotate(.6deg); } }

.sol { transform-origin: 356px 46px; animation: girar 40s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.nube { animation: deriva 60s linear infinite; }
.nb1 { animation-duration: 70s; animation-delay: -18s; }
.nb2 { animation-duration: 95s; animation-delay: -60s; }
@keyframes deriva { from { transform: translateX(-60px); } to { transform: translateX(480px); } }
.gaviota { animation: vuela 16s linear infinite; }
.gv2 { animation-duration: 23s; animation-delay: -9s; }
@keyframes vuela { from { transform: translateX(-30px) translateY(0); } 50% { transform: translateX(210px) translateY(-8px); } to { transform: translateX(460px) translateY(0); } }
.ola { animation: mover-ola-escena 5s linear infinite; }
.ola-atras { animation-duration: 7s; }
.ola-f1 { animation-duration: 4.2s; }
.ola-f2 { animation-duration: 5.6s; animation-direction: reverse; }
@keyframes mover-ola-escena { to { transform: translateX(-104px); } }
.pez { animation: salta-pez 7s ease-in-out infinite; opacity: 0; }
@keyframes salta-pez {
  0%, 62% { transform: translate(0, 16px) rotate(-50deg); opacity: 0; }
  66% { opacity: 1; }
  76% { transform: translate(30px, -26px) rotate(-8deg); opacity: 1; }
  88% { transform: translate(64px, 12px) rotate(50deg); opacity: 1; }
  92%, 100% { transform: translate(72px, 22px) rotate(60deg); opacity: 0; }
}

/* --- Posición del personaje según el estado (0 = tierra … 4 = a punto de caer) --- */
#personaje { transform: translate(82px, 170px); transition: transform .9s cubic-bezier(.45, -.2, .35, 1.2); }
#escena[data-pose="1"] #personaje { transform: translate(160px, 170px); }
#escena:is([data-pose="2"], [data-pose="3"], [data-pose="4"], [data-pose="5"]) #personaje { transform: translate(250px, 170px); }
#escena[data-pose="agua"] #personaje { transform: translate(332px, 224px); animation: aparece .5s ease-out; }
#escena.sin-trans #personaje { transition: none; }
#escena.entra #personaje { animation: entra 1s ease-out; }
@keyframes entra { from { transform: translate(-50px, 170px); } to { transform: translate(82px, 170px); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* Caída al agua */
#escena.cae #personaje { animation: caida 1.3s cubic-bezier(.5, 0, .9, .55) forwards; }
@keyframes caida {
  0%   { transform: translate(250px, 170px) rotate(0); }
  22%  { transform: translate(246px, 166px) rotate(-16deg); }
  100% { transform: translate(318px, 262px) rotate(220deg); }
}

/* Cuerpo */
.upper { transition: transform .4s cubic-bezier(.4, 1.6, .5, 1); }
#escena:is([data-pose="2"], [data-pose="3"], [data-pose="4"], [data-pose="5"], [data-pose="agua"]) .upper { transform: translateY(28px); }

.piernas-sit, .anillo, .boca, .cejas, .sudor { display: none; }
#escena:is([data-pose="2"], [data-pose="3"], [data-pose="4"], [data-pose="5"]) .piernas-sit { display: inline; }
#escena:is([data-pose="2"], [data-pose="3"], [data-pose="4"], [data-pose="5"], [data-pose="agua"]) .piernas-pie { display: none; }
#escena[data-pose="agua"] .anillo { display: inline; }

#escena { --s: .6; }
#escena:is([data-pose="3"], [data-pose="4"], [data-pose="5"]) { --s: 1; }
.espinilla { transform: translate(34px, -12px) scaleY(var(--s)); transition: transform .35s; }
.zapato    { transform: translate(40px, calc(46px * var(--s) - 14px)); transition: transform .35s; }
#escena[data-pose="4"] .piernas-sit .espinilla { animation: patalea .35s ease-in-out infinite alternate; }
@keyframes patalea { to { transform: translate(34px, -12px) scaleY(var(--s)) rotate(10deg); } }

/* Mientras camina hacia su sitio conserva la postura de pie */
#escena[data-mueve] .piernas-sit { display: none !important; }
#escena[data-mueve] .piernas-pie { display: inline !important; }
#escena[data-mueve] .upper { transform: none !important; }

/* Caras */
#escena:is([data-pose="0"], [data-pose="1"], [data-pose="agua"]) .boca-sonrisa,
#escena.celebra .boca-sonrisa { display: inline; }
#escena[data-pose="2"] .boca-o,
#escena[data-pose="3"] .boca-o { display: inline; }
#escena:is([data-pose="3"], [data-pose="4"], [data-pose="5"]) .cejas { display: inline; }
#escena:is([data-pose="4"], [data-pose="5"]) .boca-grande { display: inline; }
#escena[data-pose="4"] .sudor { display: inline; animation: sudor .8s ease-in infinite; }
@keyframes sudor { from { transform: translateY(-2px); opacity: 1; } to { transform: translateY(8px); opacity: 0; } }
#escena.celebra .boca-o, #escena.celebra .boca-grande, #escena.celebra .cejas, #escena.celebra .sudor { display: none !important; }

/* Brazos */
.brazo { transition: transform .35s; }
.brazo-i { transform: translate(-17px, -60px) rotate(10deg); }
.brazo-d { transform: translate(17px, -60px) rotate(-10deg); }
#escena[data-pose="0"] .brazo-d { animation: saluda 1.1s ease-in-out infinite; }
@keyframes saluda { 0%, 100% { transform: translate(17px, -60px) rotate(-125deg); } 50% { transform: translate(17px, -60px) rotate(-155deg); } }
#escena[data-pose="1"] .brazo-i { transform: translate(-17px, -60px) rotate(30deg); }
#escena[data-pose="1"] .brazo-d { transform: translate(17px, -60px) rotate(-30deg); }
#escena[data-pose="3"] .brazo-i { transform: translate(-17px, -60px) rotate(38deg); }
#escena[data-pose="3"] .brazo-d { transform: translate(17px, -60px) rotate(-38deg); }
#escena[data-pose="4"] .brazo-i { animation: aletea-i .3s ease-in-out infinite alternate; }
#escena[data-pose="4"] .brazo-d { animation: aletea-d .3s ease-in-out infinite alternate; }
@keyframes aletea-i { from { transform: translate(-17px, -60px) rotate(115deg); } to { transform: translate(-17px, -60px) rotate(165deg); } }
@keyframes aletea-d { from { transform: translate(17px, -60px) rotate(-115deg); } to { transform: translate(17px, -60px) rotate(-165deg); } }
#escena[data-pose="5"] .brazo-i { transform: translate(-17px, -60px) rotate(150deg); }
#escena[data-pose="5"] .brazo-d { transform: translate(17px, -60px) rotate(-150deg); }
#escena[data-pose="agua"] .brazo-i { animation: aletea-i .9s ease-in-out infinite alternate; }
#escena[data-pose="agua"] .brazo-d { animation: aletea-d .9s ease-in-out infinite alternate; }
#escena.celebra .brazo-i { animation: aletea-i .35s ease-in-out infinite alternate; }
#escena.celebra .brazo-d { animation: aletea-d .35s ease-in-out infinite alternate; }

/* Movimientos del cuerpo entero */
#escena.caminando .bob { animation: paso .28s ease-in-out infinite alternate; }
@keyframes paso { to { transform: translateY(-5px) rotate(3deg); } }
#escena[data-pose="4"] .bob { animation: tambalea .45s ease-in-out infinite alternate; }
@keyframes tambalea { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
#escena[data-pose="agua"] .bob { animation: flota 2.4s ease-in-out infinite; }
@keyframes flota { 50% { transform: translateY(4px) rotate(2deg); } }
#escena.celebra .bob { animation: salto .5s ease-out 4; }
@keyframes salto { 40% { transform: translateY(-18px); } }

/* Salpicadura */
.aro, .gota { opacity: 0; }
#escena.chof .aro.a1 { animation: aro 1s ease-out forwards; }
#escena.chof .aro.a2 { animation: aro 1s .18s ease-out forwards; }
#escena.chof .gota { animation: gota 1s ease-out forwards; }
@keyframes aro { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(4.5); opacity: 0; } }
@keyframes gota { 0% { transform: translate(0, 0) scale(.5); opacity: 1; } 55% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 46px)) scale(1); opacity: 0; } }

/* Globos de texto sobre la escena */
.globo {
  position: absolute; left: 50%; top: 14%; z-index: 3; padding: .15em .6em; white-space: nowrap;
  font: 700 clamp(22px, 7cqw, 44px)/1.1 var(--fuente); color: #fff; letter-spacing: .02em;
  -webkit-text-stroke: .14em var(--navy); paint-order: stroke fill;
  transform: translate(-50%, 0) scale(0); pointer-events: none;
}
.globo.ver { animation: globo 1.3s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.globo.ups { color: #ffd23f; }
.globo.chof { color: #8fdcff; }
.globo.ok { color: #7be3a6; }
@keyframes globo {
  0% { transform: translate(-50%, 10px) scale(0) rotate(-8deg); }
  22% { transform: translate(-50%, 0) scale(1.15) rotate(3deg); }
  40% { transform: translate(-50%, 0) scale(1) rotate(-2deg); }
  80% { transform: translate(-50%, -6px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -18px) scale(.9); opacity: 0; }
}
#escena-wrap { container-type: inline-size; }

/* ---------- 7. MENSAJES Y EFECTOS ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 40, 80, .55); backdrop-filter: blur(3px); animation: aparece .25s ease-out;
}
.modal-caja {
  --c: var(--azul); width: min(100%, 460px); max-height: 92dvh; overflow-y: auto; padding: 22px 20px 20px; text-align: center;
  background: #fff; border-radius: 30px; border: 6px solid var(--c);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .2), 0 24px 50px rgba(0, 0, 0, .3); animation: modal-in .5s cubic-bezier(.3, 1.5, .5, 1);
}
.modal-caja.gana { --c: #37c978; } .modal-caja.pierde { --c: #1e90d6; } .modal-caja.nivel { --c: #8a5cf6; } .modal-caja.fin { --c: #ff9f1c; }
@keyframes modal-in { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.m-emoji { font-size: 60px; line-height: 1; animation: flota-marca 2.4s ease-in-out infinite; }
.m-titulo { margin: 6px 0 4px; font: 700 clamp(26px, 7.4vw, 36px)/1.05 var(--fuente); color: var(--c); }
.m-palabra { margin: 6px 0; font: 700 clamp(28px, 8vw, 40px) var(--fuente); letter-spacing: .12em; color: var(--navy); word-break: break-word; }
.m-texto { margin: 4px 0; font-size: 17px; line-height: 1.3; }
.m-puntos { margin: 8px 0; font: 700 44px/1 var(--fuente); color: var(--c); font-variant-numeric: tabular-nums; }
.m-lista { display: grid; gap: 5px; margin: 10px 0; padding: 0; list-style: none; text-align: left; }
.m-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; background: #f0f8ff; border-radius: 12px; font-weight: 600; font-size: 16px; }
.m-lista li.bonus { background: #fff2c2; }
.m-lista li b { font-variant-numeric: tabular-nums; }
.m-destacado { display: inline-block; margin: 6px 0; padding: 5px 14px; font-weight: 700; color: #fff; background: var(--naranja); border-radius: 14px; animation: pulso .6s ease-out; }
.modal-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.modal-botones .btn { width: 100%; }

#capa-efectos { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.confeti { position: absolute; top: -40px; font-size: 26px; animation: cae-confeti linear forwards; }
@keyframes cae-confeti { to { transform: translate(var(--dx, 0), 110vh) rotate(var(--rot, 360deg)); opacity: .9; } }
.pop-texto {
  position: absolute; transform: translate(-50%, 0); white-space: nowrap; text-align: center;
  font: 700 clamp(22px, 6vw, 34px)/1.05 var(--fuente); color: #ffd23f; -webkit-text-stroke: .14em var(--navy); paint-order: stroke fill;
  animation: sube-pop 1.6s ease-out forwards;
}
.pop-texto small { display: block; font-size: .7em; color: #ffb34d; }
.pop-texto.verde { color: #7be3a6; }
.pop-texto.mini { font-size: 20px; animation-duration: 1s; }
@keyframes sube-pop { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }

/* ---------- 8. ADAPTACIONES ---------- */

/* Ordenador / tablet apaisada: escena a la izquierda, palabra y teclado a la derecha */
@media (min-aspect-ratio: 13/10) and (min-width: 700px) and (min-height: 430px) {
  .juego {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 18px;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "hud hud" "prog prog" "escena palabra" "escena teclado";
  }
  .hud { grid-area: hud; } .progreso { grid-area: prog; }
  .hueco-escena { grid-area: escena; align-self: stretch; }
  .zona-palabra { grid-area: palabra; align-self: end; padding-top: 6px; }
  .teclado { grid-area: teclado; align-self: start; margin-top: 10px; width: 100%; }
  .tecla { height: clamp(44px, 8.6dvh, 66px); }
}

/* Móviles en horizontal (poco alto) */
@media (max-height: 520px) {
  .barra { height: 44px; }
  .marca { height: 36px; }
  .btn-icono { width: 38px; height: 38px; font-size: 18px; }
  .marca-hero, .lema { display: none; }
  .hero { gap: 2px; }
  #hueco-escena-inicio { height: 110px; }
  .hud-puntos b { font-size: 22px; }
  .progreso { height: 16px; } .progreso span { line-height: 16px; font-size: 11px; }
}
@media (min-height: 521px) { body[data-pantalla="inicio"] .marca { visibility: hidden; } }

/* Pantallas grandes: todo un poco más generoso */
@media (min-width: 900px) and (min-height: 760px) {
  .marca-hero { width: 210px; }
  .hud-puntos b { font-size: 38px; }
}

/* Escena del menú principal */
#hueco-escena-inicio { width: 100%; height: clamp(120px, 24dvh, 250px); }
#hueco-escena-juego { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fondo-nube, .fm-ola, .marca-hero, .grande-emoji, .m-emoji, .nube, .gaviota, .sol, .pez, .ola { animation: none !important; }
}