/* ============================================================================
   JUEGOS — hoja compartida por el hub y los tres juegos (rompecabezas,
   laberintos, canicas).

   Por qué compartida y no un archivo monolítico por juego como en Colorea o
   Dibuja: acá son TRES páginas hermanas de una misma sección que tienen que
   verse idénticas entre sí (cabecera, grilla de niveles, candados, celebración).
   Duplicar ese armazón tres veces garantizaba que se desincronizaran a la
   primera corrección.

   ===== DÓNDE VA CADA ESTILO (corregido 2026-08-07 tras revisión del cliente) =====
   La primera versión pintó TODA la interfaz con la paleta del cuento "Sofi"
   (crema + contorno marrón) y quedó fuera del sitio. La regla correcta:

   - LA INTERFAZ es la de Lumi, igual que Colorea/Dibuja/Idiomas: fondo
     `bg_garden.jpg`, tarjetas con borde BLANCO de 7px y radio 30, acentos
     morados (#8860b5), títulos blancos con sombra naranja, chips blancos con
     borde crema. Nada de contornos marrones ni fondos crema en el chrome.
   - EL ESTILO DE SOFI es el del CONTENIDO de los juegos: las ilustraciones de
     los rompecabezas, los setos de los laberintos y los tubos de la canica —
     plano saturado y contorno marrón fino. Ahí sí, y solo ahí.
   ============================================================================ */

:root{
  /* Sistema visual del sitio (mismos valores que l8-colorea / l7-idiomas) */
  --morado:#8860b5;
  --morado-claro:#f0e9fb;
  --texto:#4a3f63;
  --texto-2:#6a5e84;
  --crema-borde:#ffe1b0;
  --naranja:#ff9a3c;

  /* Paleta "Sofi", SOLO para el contenido dibujado de los juegos */
  --sofi-linea:#6b4526;
  --sofi-pasto:#5b9436;
  --sofi-tubo:#f6c445;
  --sofi-canica:#9d6fc7;
  --sofi-papel:#fdf6e3;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}
html,body{height:100%;width:100%;font-family:"Baloo 2",system-ui,sans-serif;color:var(--texto)}
body{overflow:hidden;
  background:url("../l7-idiomas/bg_garden.jpg") center/cover no-repeat fixed,#cfeaff}

@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes estrella{0%{transform:scale(.2) rotate(0);opacity:0}40%{transform:scale(1.25) rotate(20deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:0}}

/* ---------- barra superior (idéntica a la de Colorea) ---------- */
.jtop{position:relative;display:flex;align-items:center;gap:9px;padding:13px clamp(11px,2.4vw,23px)}
.jtop::before{content:"";position:absolute;left:0;right:0;top:0;height:80px;
  background:linear-gradient(#ffffffbb,transparent);z-index:-1}
.jtop .clogo{display:flex;align-items:center;text-decoration:none}
.jtop .clogo img{height:clamp(44px,5.3vw,64px);width:auto;object-fit:contain;filter:drop-shadow(0 3px 5px #0002)}
.jtop .burger{display:none;border:0;background:#fff;color:var(--morado);font-size:20px;width:40px;height:40px;
  border-radius:14px;cursor:pointer;box-shadow:0 4px 10px #0002;margin-left:auto}
/* Dos filas ordenadas, nunca un menu deslizante: lo que hay que arrastrar para
   verlo, un nino no lo busca. Con 12 secciones no caben en una fila, asi que por
   debajo de 1300px las fichas se achican hasta caber en dos.
   En movil (<=880px) manda el burger, que despliega en columna. */
.navlinks{display:flex;gap:6px;flex-wrap:wrap;row-gap:5px;
  margin-left:7px;align-items:center}
.navlinks .mauth{display:none}
.navlinks a{text-decoration:none;color:var(--texto-2);font-weight:800;font-size:14px;padding:9px 14px;
  border-radius:14px;background:#ffffffcc;box-shadow:0 3px 8px #0001;transition:.12s}
.navlinks a:hover{background:#fff;color:var(--morado)}
.navlinks a.on{color:#fff;font-size:15px;padding:10px 15px;transform:scale(1.06);box-shadow:0 6px 14px #0003}
   /* Rejilla fija de 6x2: las 12 secciones caen SIEMPRE en dos filas parejas,
      pase lo que pase con el ancho. Con `flex-wrap` sueltas se iban a tres o
      cuatro filas en tablet chica segun el largo de los nombres. */
   @media(min-width:881px){
     .navlinks{display:grid;grid-template-columns:repeat(6,auto);justify-content:start;gap:6px 5px;min-width:0}
     .navlinks a{text-align:center}
   }
   @media(min-width:881px) and (max-width:1300px){
     .navlinks{gap:4px}
     .navlinks a{font-size:12.5px;padding:7px 10px;border-radius:12px}
     .navlinks a.on{font-size:13px;padding:8px 11px}
   }
   /* 881-1010px: aca el menu NO puede bajar a su propia linea (le robaria ~65px
      de alto a la pantalla de juego, que ya va justa). Se achican las fichas lo
      suficiente para que la rejilla quepa al lado del logo. */
   @media(min-width:881px) and (max-width:1010px){
     .navlinks{gap:3px}
     .navlinks a{font-size:11px;padding:6px 8px}
     .navlinks a.on{font-size:11.5px;padding:6px 9px}
     .jtop .forparents{font-size:12px;padding:7px 11px}
   }
.forparents{text-decoration:none;background:linear-gradient(135deg,#8860b5,#89b7f4);color:#fff;font-weight:800;
  font-size:15px;padding:10px 17px;border-radius:14px;box-shadow:0 4px 10px #0002;white-space:nowrap}
.jtop .forparents{margin-left:auto}
/* Solo el PRIMER chip empuja: con margin-left:auto en los dos, el espacio libre
   se reparte entre ellos y "Para papás" queda despegado de "Planes". */
.jtop .forparents + .forparents{margin-left:0}
.cauth{display:flex;gap:7px}
.cauth button{border:0;font-family:inherit;font-weight:800;font-size:13px;border-radius:14px;padding:9px 14px;
  cursor:pointer;box-shadow:0 4px 10px #0002}
.cauth .login{background:var(--morado-claro);color:var(--morado)}
.cauth .signup{background:var(--morado);color:#fff}

/* ---------- héroe ---------- */
.jhero{text-align:center;padding:6px 16px 0}
.jhero img{width:clamp(96px,12vw,150px);filter:drop-shadow(0 12px 10px #0002);animation:bob 3.4s ease-in-out infinite}
.jhero h1{font-size:clamp(26px,4vw,42px);color:#fff;text-shadow:0 3px 0 var(--naranja),0 6px 14px #0004;margin-top:-4px}
.jsub{display:inline-block;background:#fff;border:3px solid var(--crema-borde);border-radius:20px;padding:8px 20px;
  font-weight:800;color:var(--morado);box-shadow:0 8px 18px #0002;margin-top:6px;font-size:clamp(14px,2vw,18px)}

/* ---------- pantallas ---------- */
.pantalla{position:fixed;inset:0;overflow-y:auto;display:none;
  background:url("../l7-idiomas/bg_garden.jpg") center top/cover no-repeat fixed,#cfe9ff}
.pantalla.on{display:block}
#p-menu{z-index:10}
#p-juego{z-index:20}

/* ---------- tarjetas (mismo patrón que .cc de Colorea/Idiomas) ---------- */
.jgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px);
  max-width:1120px;width:100%;margin:20px auto;padding:0 clamp(14px,3vw,28px) 34px}
.jcard{position:relative;background:var(--c,var(--morado));border:7px solid #fff;border-radius:30px;
  min-height:270px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:16px;box-shadow:0 18px 32px #0003;transition:transform .14s;overflow:hidden}
.jcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,#0000003a);z-index:0}
.jcard:hover{transform:translateY(-8px) scale(1.04)}
.jcard:active{transform:scale(.96)}
.jcard .jicono{position:relative;z-index:1;font-size:clamp(64px,10vw,100px);margin:14px 0 auto;line-height:1;
  animation:floaty 4.4s ease-in-out infinite;filter:drop-shadow(0 6px 8px #0003)}
.jcard:nth-child(2n) .jicono{animation-duration:5s}
.jcard:nth-child(3n) .jicono{animation-duration:5.6s}
.jcard .jminiatura{position:relative;z-index:1;width:100%;flex:1;min-height:0;border-radius:18px;
  background-size:cover;background-position:center;margin:4px 0 12px;box-shadow:0 4px 10px #0003}
.jcard .jnombre{position:relative;z-index:1;font-weight:800;font-size:clamp(15px,1.7vw,21px);color:#fff;
  text-shadow:0 2px 5px #0007;line-height:1.08;text-align:center}
.jcard .jdato{position:relative;z-index:1;font-weight:800;font-size:12px;color:#fff;opacity:.92;
  text-shadow:0 2px 4px #0007;margin-top:2px}
.jcard .jbadge{position:absolute;z-index:2;top:10px;right:10px;background:#fff;color:var(--c);font-weight:800;
  font-size:11px;padding:3px 10px;border-radius:11px;box-shadow:0 3px 7px #0003}

/* Nivel resuelto: palomita, y la tarjeta se apaga un poco para que la SIGUIENTE
   (la que toca jugar) sea la que salte a la vista. */
.jcard.hecho{filter:saturate(.72)}
.jcard.hecho .jbadge{background:#7bc67b;color:#fff}

/* Candado de PROGRESO — distinto del de suscripción (que lo pinta auth.js con
   su píldora negra "🔒 Suscriptores" arriba a la izquierda). Este va al centro
   y deja ver la miniatura en gris: el niño tiene que poder desear el siguiente. */
.jcard.cerrado{cursor:default;filter:grayscale(.85) brightness(.92)}
.jcard.cerrado:hover{transform:none}
.jcard.cerrado::before{content:"🔒";position:absolute;z-index:3;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:clamp(38px,6vw,56px);filter:drop-shadow(0 4px 8px #0006)}
/* En una tarjeta bloqueada el "¡Jugar!" no tiene sentido (mismo criterio que Colorea) */
.jcard.lumi-locked .jbadge{display:none}

/* ---------- barra interna del juego (patrón .inner-top + .btn-icon) ---------- */
.jbar{position:fixed;top:0;left:0;right:0;z-index:25;display:flex;align-items:center;gap:10px;
  padding:10px clamp(12px,2.5vw,22px);background:linear-gradient(#ffffffd0,transparent);backdrop-filter:blur(8px)}
.btn{border:0;background:#fff;color:var(--morado);font-family:inherit;font-weight:800;font-size:15px;
  border-radius:14px;padding:10px 17px;cursor:pointer;box-shadow:0 4px 10px #0002;
  display:inline-flex;align-items:center;gap:7px;transition:.12s;text-decoration:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0003}
.btn:active{transform:scale(.95)}
.btn.primario{background:var(--morado);color:#fff}
.btn.verde{background:#7bc67b;color:#fff}
.btn[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none}
/* Herramienta activa: hundida y en morado, para que el estado se note sin leer */
.btn.activo{background:var(--morado);color:#fff;transform:translateY(2px);box-shadow:inset 0 3px 8px #0004}
.jbar .jtitulo{font-weight:800;font-size:clamp(15px,2.2vw,22px);color:var(--texto);background:#ffffffcc;
  padding:7px 16px;border-radius:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jbar .espacio{margin-left:auto}

/* ---------- panel de juego: tarjeta blanca del sitio, no papel crema ---------- */
.panel{background:#fff;border:6px solid #fff;border-radius:26px;box-shadow:0 14px 30px #0003;overflow:hidden}

/* ---------- celebración ---------- */
#celebra{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:#3a2b5199;backdrop-filter:blur(3px)}
#celebra.on{display:flex}
#celebra .cuadro{background:#fff;border:6px solid var(--crema-borde);border-radius:34px;padding:30px 34px;
  text-align:center;max-width:min(440px,90vw);box-shadow:0 24px 50px #0005;animation:popIn .32s ease-out}
#celebra .cemoji{font-size:66px;line-height:1;display:block;margin-bottom:8px;animation:floaty 2.2s ease-in-out infinite}
#celebra h2{font-size:clamp(22px,3.4vw,30px);color:var(--morado);margin-bottom:6px}
#celebra p{font-weight:700;font-size:16px;color:var(--texto-2);margin-bottom:18px;line-height:1.4}
#celebra .cbotones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.estrella{position:fixed;z-index:70;font-size:38px;pointer-events:none;animation:estrella .9s ease-out forwards}

/* ---------- responsive ----------
   Patrón 880/560 de Colorea (4 → 3 → 2 columnas). OJO: con body{overflow:hidden}
   lo que se desborda NO se ve cortado, desaparece — cualquier cambio acá se mide
   con getBoundingClientRect, no a ojo. */
@media(max-width:880px){
  .jgrid{grid-template-columns:repeat(3,1fr)}
  .jtop .burger{display:block}
  .navlinks{display:none}
  .jtop .cauth{display:none}
  .navlinks.open{display:flex;flex-direction:column;align-items:stretch;gap:8px;position:absolute;top:100%;
    left:0;right:0;margin:0;background:#fff;padding:14px 16px 18px;box-shadow:0 14px 28px #0003;
    border-radius:0 0 24px 24px;z-index:30}
  .navlinks.open a{text-align:center;font-size:21px;padding:15px;background:#f4eefc;transform:none}
  .navlinks.open .mauth{display:flex;gap:11px;margin-top:7px}
  .navlinks.open .mauth button{flex:1;border:0;font-family:inherit;font-weight:800;font-size:18px;
    border-radius:16px;padding:15px;cursor:pointer}
}
@media(max-width:560px){
  .jgrid{grid-template-columns:repeat(2,1fr)}
  .jcard{min-height:200px}
}
@media(max-width:620px){
  .jbar{flex-wrap:wrap;gap:8px}
  .jbar .jtitulo{order:3;width:100%;font-size:14px}
  .btn{font-size:14px;padding:9px 14px}
}