/* dejuego.com — estilo común (portada y juegos). Colores alegres, botones grandes para dedos pequeños. */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap");
:root{
  --cielo:#4cc9f0; --cielo-2:#4361ee; --mar:#3a86ff; --verde:#2fbf4a; --verde-2:#23943a; --sol:#ffd23f; --naranja:#ff7a45; --rosa:#ff5d8f; --morado:#8b5cf6; --rojo:#ef476f;
  --tinta:#1d2433; --tinta-2:#4a5568; --papel:#fffdf7; --papel-2:#fff4dc; --borde:#e8dcc0;
  --sombra:0 10px 0 rgba(29,36,51,.12), 0 18px 40px -18px rgba(29,36,51,.35);
  --radio:24px; --titulo:"Baloo 2", "Nunito", system-ui, sans-serif; --texto:"Nunito", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texto);color:var(--tinta);background:var(--papel);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
a{color:inherit}
h1,h2,h3{font-family:var(--titulo);line-height:1.05;letter-spacing:-.01em}
.oculto{display:none!important}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 26px;border-radius:999px;font-family:var(--titulo);font-weight:800;font-size:1.25rem;
  background:var(--verde);color:#fff;box-shadow:0 6px 0 var(--verde-2);transition:transform .12s, box-shadow .12s;text-decoration:none;user-select:none}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--verde-2)}
.btn.sol{background:var(--sol);color:var(--tinta);box-shadow:0 6px 0 #d9a800}
.btn.azul{background:var(--mar);box-shadow:0 6px 0 #2563c9}
.btn.rosa{background:var(--rosa);box-shadow:0 6px 0 #d63c6c}
.btn.blanco{background:#fff;color:var(--tinta);box-shadow:0 6px 0 var(--borde)}
.btn.chico{min-height:44px;padding:8px 16px;font-size:1rem}

/* barra superior de los juegos */
.j-barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,253,247,.92);backdrop-filter:blur(8px);box-shadow:0 2px 0 var(--borde)}
.j-barra .j-volver{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 4px 0 var(--borde);display:grid;place-items:center;font-size:1.4rem}
.j-barra h1{font-size:clamp(1.1rem,3.6vw,1.6rem);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j-estrellas{display:flex;align-items:center;gap:4px;font-family:var(--titulo);font-weight:800;font-size:1.2rem;background:#fff;padding:6px 12px;border-radius:999px;box-shadow:0 4px 0 var(--borde)}
.j-icono{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 4px 0 var(--borde);display:grid;place-items:center;font-size:1.3rem}
.j-icono[aria-pressed="false"]{opacity:.5}

/* zona de juego */
.j-escena{position:relative;max-width:1100px;margin:0 auto;padding:16px 14px 120px}
.j-progreso{height:14px;border-radius:999px;background:#efe6cf;overflow:hidden;margin:4px 0 14px}
.j-progreso i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--verde),var(--sol));border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* Kiko y su globo */
.j-kiko{position:fixed;left:10px;bottom:10px;z-index:40;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.j-kiko img{width:86px;height:86px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));transition:transform .3s}
.j-kiko.salta img{animation:kikoSalta .6s}
.j-kiko.triste img{animation:kikoNo .5s}
.j-globo{pointer-events:none!important;max-width:min(60vw,340px);background:#fff;border-radius:20px 20px 20px 4px;padding:10px 14px;font-weight:800;font-size:1.05rem;box-shadow:var(--sombra);opacity:0;transform:translateY(8px) scale(.95);transition:all .25s;pointer-events:auto}
.j-globo.ver{opacity:1;transform:none}
@keyframes kikoSalta{0%,100%{transform:translateY(0)}40%{transform:translateY(-26px) rotate(-6deg)}70%{transform:translateY(0) scale(1.05,.95)}}
@keyframes kikoNo{0%,100%{transform:none}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* ventanas (instrucciones y final) */
.j-velo{position:fixed;inset:0;z-index:60;background:rgba(29,36,51,.45);display:grid;place-items:center;padding:16px;animation:aparece .25s}
.j-ventana{width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 24px);overscroll-behavior:contain;overflow:auto;background:var(--papel);border-radius:30px;padding:26px 24px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:sube .35s cubic-bezier(.2,.9,.3,1.2)}
.j-ventana .kiko{width:120px;height:120px;margin:-6px auto 4px}
.j-ventana h2{font-size:clamp(1.6rem,5vw,2.2rem);margin-bottom:6px}
.j-ventana .edad{display:inline-block;background:var(--papel-2);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.9rem;margin-bottom:12px}
.j-pasos{list-style:none;text-align:left;display:grid;gap:10px;margin:12px 0 18px}
.j-pasos li{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:18px;padding:12px 14px;font-weight:700;font-size:1.05rem;line-height:1.35;box-shadow:0 4px 0 var(--borde)}
.j-pasos b{flex:0 0 32px;height:32px;border-radius:50%;background:var(--sol);display:grid;place-items:center;font-family:var(--titulo)}
.j-aprende{background:#e9f9ee;border-radius:16px;padding:10px 14px;font-weight:700;font-size:.95rem;color:#1d5a2a;margin-bottom:16px}
.j-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.j-final .estrellas-grandes{display:flex;justify-content:center;gap:8px;margin:8px 0 6px}
.j-final .estrellas-grandes span{font-size:3.2rem;filter:grayscale(1) opacity(.3);transform:scale(.6);transition:all .4s cubic-bezier(.2,.9,.3,1.6)}
.j-final .estrellas-grandes span.on{filter:none;transform:scale(1)}
@keyframes aparece{from{opacity:0}}
@keyframes sube{from{opacity:0;transform:translateY(30px) scale(.95)}}

/* confeti */
.j-confeti{position:fixed;inset:0;pointer-events:none;z-index:70}

/* utilidades de juego */
.j-pregunta{font-family:var(--titulo);font-weight:800;font-size:clamp(1.5rem,5vw,2.4rem);text-align:center;margin:8px 0 14px}
.j-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;max-width:720px;margin:0 auto}
.j-opcion{min-height:84px;border-radius:22px;background:#fff;box-shadow:0 7px 0 var(--borde);font-family:var(--titulo);font-weight:800;font-size:clamp(1.6rem,5vw,2.3rem);transition:transform .12s, box-shadow .12s, background .2s}
.j-opcion:active{transform:translateY(5px);box-shadow:0 2px 0 var(--borde)}
.j-opcion.bien{background:#c9f5d4;box-shadow:0 7px 0 #7fd896;animation:pop .35s}
.j-opcion.mal{background:#ffd6de;box-shadow:0 7px 0 #f29aac;animation:tiembla .35s}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes tiembla{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* iconos ilustrados (img/iconos, estilo Fluent 3D) */
.ic{width:1.35em;height:1.35em;display:inline-block;vertical-align:-.3em;flex:0 0 auto}
.j-icono .ic,.j-volver .ic{width:28px;height:28px}
.j-estrellas .ic{width:24px;height:24px}
.j-final .estrellas-grandes span .ic{width:64px;height:64px}
.j-final .estrellas-grandes span{font-size:0}
.j-aprende{display:flex;gap:8px;align-items:center;justify-content:center}
.j-aprende .ic{width:28px;height:28px}

/* ===== móvil, plegables y tabletas (Galaxy Fold cerrado 344px, Fold 3 280px, Fold abierto ~690–884px) ===== */
.j-barra{padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top))}
.j-quien{font-family:var(--titulo);font-weight:800;font-size:.95rem;background:linear-gradient(180deg,#fff,#f3e8ff);color:#6d28d9;padding:6px 12px;border-radius:999px;box-shadow:0 4px 0 #ddd6fe;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j-escena{padding-bottom:calc(130px + env(safe-area-inset-bottom))}
.j-kiko{left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom))}
@media (max-width:900px){
  /* el globo de Kiko va abajo, junto a Kiko, y nunca tapa la pregunta de arriba */
  .j-kiko{right:10px}
  .j-kiko img{width:58px;height:58px;flex:0 0 58px}
  .j-globo{max-width:none;flex:1;font-size:.98rem;padding:9px 12px;border-radius:18px 18px 18px 4px;line-height:1.25;max-height:4.2em;overflow:hidden}
}
@media (max-width:520px){
  .j-barra{gap:6px}
  .j-barra h1{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.02rem;line-height:1.1}
  .j-barra .j-volver,.j-icono{width:42px;height:42px;flex:0 0 42px}
  .j-icono .ic,.j-volver .ic{width:24px;height:24px}
  .j-estrellas{padding:5px 9px;font-size:1.05rem}.j-estrellas .ic{width:20px;height:20px}
  .j-quien{display:none}
  .j-escena{padding-left:10px;padding-right:10px}
  .j-ventana{padding:20px 16px;border-radius:26px}
  .j-ventana .kiko{width:86px;height:86px}
  .j-pasos li{font-size:.98rem;padding:10px 12px}
  .j-velo{padding:10px}
}
@media (max-width:360px){
  #jSonido{display:none} /* Fold cerrado / teléfonos de 280–360px: el sonido sigue en la ventana de ayuda */
  .j-barra h1{font-size:.95rem}
  .btn{font-size:1.1rem;padding:10px 18px}
  .j-opcion{min-height:72px}
}
@media (max-height:560px) and (orientation:landscape){ .j-kiko img{width:48px;height:48px} .j-ventana .kiko{display:none} }

/* ===== un poquito de 3D ===== */
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%);text-shadow:0 2px 0 rgba(0,0,0,.12)}
.btn.blanco,.btn.sol{text-shadow:none}
.j-opcion{background-image:linear-gradient(180deg,#fff 0,#f7f3ea 100%);box-shadow:0 7px 0 var(--borde),0 14px 24px -14px rgba(29,36,51,.35);border:2px solid rgba(255,255,255,.9)}
.j-opcion:hover{transform:translateY(-2px)}
.j-barra .j-volver,.j-icono,.j-estrellas{background-image:linear-gradient(180deg,#fff,#f6f0e2)}
.j-ventana{background-image:radial-gradient(120% 60% at 50% 0,#fff 0,var(--papel) 60%)}
.j-ventana .kiko{filter:drop-shadow(0 10px 10px rgba(0,0,0,.18))}
.j-pasos li{background-image:linear-gradient(180deg,#fff,#fbf7ee)}

/* ===== marcador del final ===== */
.j-marcador{margin:0 0 16px}
.j-tu{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#f5f3ff,#fdf2f8);border-radius:20px;padding:12px 14px;text-align:left;box-shadow:0 5px 0 #e9d5ff}
.j-tu > .ic{width:44px;height:44px}
.j-tu div{flex:1;min-width:0}.j-tu b{font-family:var(--titulo);font-size:1.3rem;display:block;line-height:1.05;overflow:hidden;text-overflow:ellipsis}
.j-tu small{font-weight:800;color:#7c3aed}
.j-tu span{display:flex;align-items:center;gap:4px;font-family:var(--titulo);font-weight:800;font-size:1.4rem}
.j-tu span .ic{width:26px;height:26px}
.j-nombre{background:#fff;border-radius:20px;padding:12px;box-shadow:0 5px 0 var(--borde)}
.j-nombre label{display:block;font-weight:800;margin-bottom:8px}
.j-nombre div{display:flex;gap:8px}
.j-nombre input{flex:1;min-width:0;font:inherit;font-weight:800;font-size:1.1rem;padding:10px 14px;border-radius:999px;border:3px solid #e9d5ff;outline:none}
.j-nombre input:focus{border-color:#a78bfa}
.j-nombre small{display:block;margin-top:6px;color:var(--tinta-2);font-weight:700}

/* transición suave al entrar a un juego o a otra página (navegadores que la soportan) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.18s ease-out both vtSale}
::view-transition-new(root){animation:.28s cubic-bezier(.2,.8,.2,1) both vtEntra}
@keyframes vtSale{to{opacity:0;transform:scale(.98)}}
@keyframes vtEntra{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* globo de Kiko en teléfonos: hasta ~5 líneas (las pistas largas ya no se cortan) y se esconde al tocar la pantalla,
   así nunca tapa lo que el niño va a tocar (además no atrapa toques: pointer-events:none) */
@media (max-width:900px){
  .j-globo{max-height:6.6em;font-size:.95rem;line-height:1.28}
  .j-globo.toque{opacity:0!important;transition:opacity .12s}
}
@media (max-width:360px){.j-globo{font-size:.88rem;padding:8px 10px}}