/* Juegos libres: pantalla para elegir, niveles abiertos y los juegos nuevos de libres.js. */
body[data-libre] .tl-boton{display:none}
.libres-top{text-align:center;padding:26px 20px;margin-bottom:24px;border-radius:32px;background:linear-gradient(120deg,#253461,#2f7d5b);color:#fff;box-shadow:0 9px 0 #26325e25}
.libres-top .badge{color:#ffe49b}.libres-top h2{margin:6px 0}.libres-top p{margin:0;font-size:22px;font-weight:800;color:#ffe49b}
#libres-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px}
#libres-cards .card{position:relative;min-height:210px}
.libres-seguir,.libres-volver{display:block;margin:30px auto 0;padding:16px 28px;border:4px solid #1f2a44;border-radius:22px;background:#ffd24b;color:#1f2a44;font-size:24px;font-weight:900;box-shadow:0 6px 0 #1f2a4430}
#libres-niveles{max-width:760px;margin:0 auto;padding:24px;border-radius:30px;background:#fff;text-align:center;box-shadow:0 9px 0 #26325e20}
#libres-niveles h3{margin:0;font-size:clamp(30px,5vw,44px)}#libres-niveles p{margin:6px 0 18px;font-size:22px;font-weight:800}
.libres-tramo{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0;padding:12px;border-radius:22px;background:#dcfce7}
.libres-tramo[data-tramo="1"]{background:#dbeafe}.libres-tramo[data-tramo="2"]{background:#fde2e4}
.libres-tramo-nombre{min-width:130px;font-size:22px;font-weight:900;text-align:left}
.libres-nivel{width:72px;height:72px;border:4px solid #1f2a44;border-radius:20px;background:#fff;font-size:30px;font-weight:900;box-shadow:0 5px 0 #1f2a4430}
.libres-nivel.sel{background:#ffd24b}
.libres-barra{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 12px}
.libres-paso{padding:10px 18px;border:3px solid #1f2a44;border-radius:16px;background:#fff;font-size:20px;font-weight:900}
.libres-actual{padding:10px 18px;border-radius:16px;background:#fff3c4;font-size:22px}
/* Juegos nuevos (libres/): lienzo que entra entero en la pantalla, barras y controles. */
#stage.jl-stage{padding:12px 14px 16px}
#stage.jl-stage .hint{display:none}
.jl-arriba{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin:0 0 10px}
.jl-arriba .libres-barra{margin:0}
.jl-barra{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jl-ayuda{font-size:18px;font-weight:800;color:#334155}
.jl-sonido{width:52px;height:48px;border:3px solid #1f2a44;border-radius:14px;background:#fff;font-size:24px;flex:none}
.jl-canvas{display:block;margin:0 auto;width:min(100%,calc((100vh - 265px) * var(--prop)));min-width:min(100%,320px);aspect-ratio:var(--ar);border-radius:18px;touch-action:none;box-shadow:0 10px 0 #1f2a4422;user-select:none;-webkit-user-select:none}
.jl-ctrl,.jl-pad{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.jl-pad{display:grid;grid-template-columns:repeat(3,70px);grid-template-areas:". up ." "left down right";justify-content:center}
.jl-pad [data-dir=up]{grid-area:up}.jl-pad [data-dir=left]{grid-area:left}.jl-pad [data-dir=down]{grid-area:down}.jl-pad [data-dir=right]{grid-area:right}
.jl-boton{width:70px;height:60px;border:3px solid #1f2a44;border-radius:16px;background:#fff;font-size:28px;touch-action:none;box-shadow:0 4px 0 #1f2a4430}
.jl-boton:active{transform:translateY(3px);box-shadow:0 1px 0 #1f2a4430}
.jl-grande{display:block;margin:14px auto 0;padding:14px 28px;border:0;border-radius:18px;background:#2563eb;color:#fff;font-size:24px;font-weight:900;box-shadow:0 6px 0 #1e3a8a;touch-action:none}
.jl-grande:disabled{opacity:.45}
@media (pointer:fine) and (min-width:900px){.jl-pad,.jl-ctrl{opacity:.75}}
/* Galletitas */
.gl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:14px;align-items:start}
.gl-wrap .jl-canvas{width:min(100%,calc(100vh - 230px))}
.gl-tienda{display:grid;gap:8px;max-height:calc(100vh - 230px);overflow:auto;padding:10px;border-radius:18px;background:linear-gradient(#5b3a1e,#3d2412);box-shadow:inset 0 0 0 4px #8a5a2b}
.gl-titulo{margin:2px 0 4px;color:#ffe9b8;text-align:center;font-size:22px}
.gl-item{display:grid;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:0 10px;padding:8px 10px;border:3px solid #c08a4f;border-radius:14px;background:#fff7e6;text-align:left;position:relative}
.gl-item>img{grid-row:1/3;width:52px;height:52px}
.gl-txt{display:grid;line-height:1.15}.gl-txt b{font-size:19px}.gl-txt small{font-size:14px;font-weight:700;color:#7c5a3a}
.gl-precio{grid-column:2;font-size:17px;font-weight:900;color:#15803d}.gl-precio .art{width:1.1em;height:1.1em}
.gl-item:disabled .gl-precio{color:#b91c1c}
.gl-cant{grid-row:1/3;grid-column:3;font-size:32px;font-weight:950;color:#7c5a3a;opacity:.6}
.gl-item:disabled{opacity:.6;cursor:default}
.gl-item:not(:disabled):hover{background:#fff;border-color:#f59e0b;transform:translateX(-2px)}
.gl-mejora{background:#fef3c7;border-color:#f59e0b}
.gl-oculto>img{filter:brightness(0) opacity(.5)}
.gl-pop{animation:gl-pop .25s ease-out}
@keyframes gl-pop{50%{transform:scale(1.05)}}
@media (max-width:820px){.gl-wrap{grid-template-columns:1fr}.gl-tienda{max-height:none}}
/* Hacé tu canción */
.cn-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.cn-ctrl .jl-grande{margin:0;min-width:150px}.cn-play.on{background:#dc2626;box-shadow:0 6px 0 #7f1d1d}
.cn-tempo{display:flex;align-items:center;gap:6px;font-size:26px}.cn-tempo input{width:150px;accent-color:#7c3aed}
.cn-inst{display:flex;gap:6px}
.cn-opcion{padding:10px 14px;border:3px solid #cbd5e1;border-radius:14px;background:#fff;font-size:17px;font-weight:800}
.cn-opcion.sel{border-color:#7c3aed;background:#ede9fe}
/* Pintar */
.pt-wrap{position:relative;display:grid;grid-template-columns:236px minmax(0,1fr);gap:12px;align-items:start}
.pt-panel{display:grid;gap:8px;align-content:start}
.pt-fila{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px}
.pt-herr{display:grid;justify-items:center;width:72px;padding:5px 4px;border:3px solid #cbd5e1;border-radius:14px;background:#fff}
.pt-herr .pt-ic{font-size:28px;line-height:1}.pt-herr small{font-size:13px;font-weight:800}
.pt-color{width:40px;height:40px;border:3px solid #1f2a44;border-radius:50%}
.pt-tam{display:grid;place-items:center;width:52px;height:48px;border:3px solid #cbd5e1;border-radius:14px;background:#fff}.pt-tam span{display:block;border-radius:50%;background:#1f2a44}
.pt-sello{width:50px;height:50px;padding:4px;border:3px solid #cbd5e1;border-radius:14px;background:#fff}.pt-sello img{width:100%;height:100%}
.pt-accion{flex:1 1 45%;padding:8px 6px;font-size:15px!important;border:3px solid #1f2a44;border-radius:14px;background:#fff;font-size:17px;font-weight:800}
.pt-accion:disabled{opacity:.4}
.pt-panel .sel{outline:5px solid #ffd24b;outline-offset:1px;border-color:#1f2a44}
.pt-galeria{position:absolute;z-index:5;top:0;left:248px;right:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px;border-radius:18px;background:#fff7d6;box-shadow:0 12px 30px #0004}
.pt-dibujo{width:84px;height:84px;padding:6px;border:3px solid #cbd5e1;border-radius:16px;background:#fff}.pt-dibujo img{width:100%;height:100%}
.pt-lienzo{cursor:crosshair}
.cn-lienzo{width:min(100%,calc((100vh - 330px) * var(--prop)))}
@media (max-width:820px){.pt-wrap{grid-template-columns:1fr}.pt-galeria{left:0}}
.camino-libres{background:#2f7d5b;color:#fff}
/* GCompris hexagon: keep earlier guesses visible as distance clues. */
.hx-game{display:grid;gap:10px;margin:0 auto;padding:16px;border-radius:22px;background:#dbeafe}
.hx-instruction,.hx-legend,.hx-status{margin:0;text-align:center;font-weight:800;line-height:1.4}
.hx-instruction{font-size:20px}.hx-legend{font-size:18px}.hx-status{min-height:1.5em;font-size:24px;background:#fff;border-radius:12px;padding:6px}
.hx-board{display:block;margin:0 auto;width:min(100%,calc((100dvh - 360px) * 1.8));min-width:min(100%,300px);outline-offset:4px;touch-action:manipulation}
.hx-board polygon{stroke:#1f2a44;stroke-width:.6;cursor:pointer;transition:fill 200ms}
.hx-board:focus .is-focus{stroke:#fff;stroke-width:1.6}
.hx-berry{pointer-events:none;animation:hx-in .4s ease-out}
@keyframes hx-in{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.hx-board polygon{transition:none}.hx-berry{animation:none}}