@font-face{font-family:"Baloo 2";src:url(fuentes/baloo2-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fuentes/atkinson-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fuentes/atkinson-700-latin.woff2) format("woff2");font-weight:700;font-display:swap}
/* Layout: one screen at a time, giant touch targets; home = age tabs + a grid of game doors. Single bright look by choice. */
:root{
  --sky:#DFF3F7; --sky2:#BFE6EE; --ink:#1F3A4D; --soft:#4F6B7C;
  --red:#E8483B; --blue:#2F7FE0; --yellow:#F6C431; --green:#3DB46D; --purple:#8B5BD6; --orange:#F28A2E; --pink:#E25E9C; --teal:#1FA3A0;
  --card:#FFFFFF;
  --display:"Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--sky);color:var(--ink);font-family:var(--display);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
.app{max-width:960px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-block:12px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:800;font-size:clamp(1.5rem,5vw,2.2rem);letter-spacing:.5px;line-height:1}
.brand span:nth-child(1){color:var(--red)}.brand span:nth-child(2){color:var(--blue)}.brand span:nth-child(3){color:var(--green)}
.hbtns{display:flex;gap:10px}
.btn-round{width:56px;height:56px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font-size:1.6rem;
  box-shadow:0 4px 0 var(--sky2);cursor:pointer;display:grid;place-items:center;font-family:var(--display)}
.btn-round:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sky2)}
button:focus-visible{outline:4px solid var(--purple);outline-offset:3px}
main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-block:16px}
.screen{display:flex;flex-direction:column;gap:18px}
.hello{text-align:center;font-size:clamp(1.3rem,4.5vw,1.9rem);font-weight:700;color:var(--soft);text-wrap:balance;margin:0}
.agecards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:600px){.agecards{grid-template-columns:1fr}}
.agecard{border:0;border-radius:28px;padding:24px 12px;color:#fff;cursor:pointer;font-family:var(--display);display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 8px 0 rgba(0,0,0,.18)}
.agecard:active{transform:translateY(5px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.agecard .pic{font-size:clamp(3.4rem,12vw,5rem);line-height:1.1}
.agecard .name{font-size:1.8rem;font-weight:800;line-height:1.1}
.agecard .what{font-size:1.1rem;font-weight:500;opacity:.95}
.age{border:0;border-radius:999px;padding:10px 20px;font-family:var(--display);font-size:1.2rem;font-weight:800;cursor:pointer;
  background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--sky2)}
.age[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 4px 0 #0f2230}
.doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.door{border:0;border-radius:24px;padding:16px 10px;color:#fff;cursor:pointer;font-family:var(--display);
  display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 7px 0 rgba(0,0,0,.18);text-align:center}
.door:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.door .pic{font-size:clamp(2.6rem,9vw,3.4rem);line-height:1.15}
.door .name{font-size:1.35rem;font-weight:800;line-height:1.1}
.door .what{font-size:.95rem;font-weight:500;opacity:.95;line-height:1.2}
.gtitle{text-align:center;font-weight:800;color:var(--soft);font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;margin:0}
.prompt{text-align:center;font-size:clamp(1.5rem,5.5vw,2.4rem);font-weight:800;line-height:1.15;text-wrap:balance;min-height:2.3em;display:flex;align-items:center;justify-content:center;margin:0}
.prompt b{padding:0 .25em;border-radius:12px;color:#fff}
.visual{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;font-size:clamp(2.6rem,10vw,4.4rem);min-height:1.2em;line-height:1.2;text-align:center}
.visual .op{font-weight:800;color:var(--soft);font-size:.8em}
.visual .word{font-size:.6em;font-weight:800;letter-spacing:.08em;width:100%}
.visual .box{background:var(--card);border-radius:18px;padding:4px 14px;box-shadow:0 5px 0 var(--sky2);font-weight:800;font-size:.75em;min-width:1.6em}
.visual .box.q{background:var(--yellow)}
.choices{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.dot{width:clamp(96px,26vw,150px);aspect-ratio:1;max-width:100%;border-radius:50%;border:6px solid #fff;cursor:pointer;box-shadow:0 8px 0 rgba(0,0,0,.15)}
.tile{width:clamp(104px,27vw,160px);aspect-ratio:1;max-width:100%;border-radius:26px;border:0;background:var(--card);cursor:pointer;
  font-size:clamp(3.2rem,12vw,5rem);box-shadow:0 8px 0 var(--sky2);display:grid;place-items:center;font-family:var(--display);color:var(--ink);padding:8px}
.tile svg{width:80%;height:80%}
.tile.num{font-weight:800;font-size:clamp(2.6rem,10vw,4.4rem)}
.tile.word{width:auto;min-width:130px;aspect-ratio:auto;padding:14px 22px;font-size:clamp(1.3rem,4.6vw,1.9rem);font-weight:800}
.dot:active,.tile:active{transform:translateY(5px)}
.wobble{animation:wob .45s}
@keyframes wob{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.pop{animation:pop .5s}
@keyframes pop{50%{transform:scale(1.18)}}
.stars{display:flex;justify-content:center;gap:6px;font-size:2rem;min-height:2.6rem}
.stars span{animation:pop .5s}
.parents{text-align:center;color:var(--soft);font-size:.95rem;font-weight:500;max-width:60ch;margin:0 auto;text-wrap:balance}
/* memoria */
.mem{display:grid;gap:12px;justify-content:center}
.card{width:clamp(70px,20vw,120px);aspect-ratio:1;max-width:100%;border:0;border-radius:20px;cursor:pointer;font-size:clamp(2.2rem,9vw,3.8rem);
  background:var(--blue);color:transparent;box-shadow:0 6px 0 rgba(0,0,0,.15);display:grid;place-items:center;transition:transform .25s,background .25s;font-family:var(--display)}
.card::before{content:"?";color:#fff;font-weight:800;font-size:.8em}
.card.up{background:var(--card);color:var(--ink);transform:rotateY(180deg) scaleX(-1)}
.card.up::before{content:none}
.card.done{background:#d9f5e3}
/* globos */
.sky{position:relative;height:min(62vh,520px);border-radius:28px;background:linear-gradient(#bfe8f3,#eaf8fb);overflow:hidden;touch-action:manipulation}
.balloon{position:absolute;bottom:-140px;width:84px;height:104px;border-radius:50% 50% 47% 47%;border:0;cursor:pointer;
  animation:rise linear forwards;box-shadow:inset -10px -12px 0 rgba(0,0,0,.12)}
.balloon::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:36px;background:#7c8b93}
@keyframes rise{to{transform:translateY(calc(-1 * (min(62vh,520px) + 160px)))}}
.boom{position:absolute;font-size:2.4rem;pointer-events:none;animation:pop .4s}
.counter{text-align:center;font-weight:800;font-size:1.5rem;margin:0}
/* adivina */
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,90px));gap:10px;justify-content:center}
.pad button{height:64px;border:0;border-radius:18px;background:var(--card);font-family:var(--display);font-size:1.8rem;font-weight:800;color:var(--ink);box-shadow:0 5px 0 var(--sky2);cursor:pointer}
.pad button.go{background:var(--green);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.guess{text-align:center;font-size:3rem;font-weight:800;min-height:1.3em;line-height:1.2;margin:0}
.hist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-weight:700}
.hist span{background:var(--card);border-radius:999px;padding:2px 12px}
.again{align-self:center;border:0;border-radius:999px;padding:12px 28px;font-family:var(--display);font-size:1.4rem;font-weight:800;background:var(--green);color:#fff;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18)}

/* colorear, construir, diseñar, cuento */
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pill{border:0;border-radius:999px;padding:10px 20px;font-family:var(--display);font-size:1.15rem;font-weight:800;background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--sky2);cursor:pointer}
.pill[aria-pressed="true"]{background:var(--ink);color:#fff}
.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.palette button{width:52px;height:52px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.15);cursor:pointer}
.palette button[aria-pressed="true"]{outline:4px solid var(--ink);outline-offset:2px;transform:scale(1.1)}
.paper{background:var(--card);border-radius:24px;padding:10px;box-shadow:0 6px 0 var(--sky2);align-self:center;width:min(100%,440px)}
.paper svg{width:100%;height:auto;display:block}
.paper [data-r]{stroke:var(--ink);stroke-width:3;stroke-linejoin:round;cursor:pointer;transition:fill .2s}
.tower{height:min(50vh,420px);width:min(100%,360px);align-self:center;display:flex;flex-direction:column-reverse;align-items:center;background:var(--card);border-radius:24px 24px 6px 6px;padding:8px;overflow:hidden;border-bottom:14px solid #8a6a4a;box-sizing:border-box}
.block{height:9%;flex:none;border-radius:10px;animation:drop .35s ease-out;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15);transition:transform .9s ease-in,opacity .9s}
@keyframes drop{from{transform:translateY(-220px);opacity:.4}}
.scene{position:relative;height:min(52vh,440px);border-radius:24px;overflow:hidden;touch-action:none}
.scene .stk{position:absolute;font-size:clamp(2.6rem,9vw,3.6rem);transform:translate(-50%,-50%);cursor:grab;line-height:1;touch-action:none;animation:pop .35s}
.stickers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.stickers button{width:60px;height:60px;border:0;border-radius:16px;background:var(--card);font-size:2.1rem;box-shadow:0 4px 0 var(--sky2);cursor:pointer}
.tile.pic{font-size:clamp(2.6rem,10vw,4rem);gap:0;align-content:center}
.tile.pic small{display:block;font-size:clamp(.95rem,3.2vw,1.15rem);font-weight:700;line-height:1.1}
.story{background:var(--card);border-radius:24px;padding:18px 22px;box-shadow:0 6px 0 var(--sky2);font-size:clamp(1.15rem,3.8vw,1.45rem);line-height:1.55;max-width:60ch;margin:0 auto;font-weight:500}
.story .pics{font-size:3rem;text-align:center;letter-spacing:.2em}
.story p{margin:.4em 0}

/* juegos de mesa */
.ctrls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ctrls .pill{font-size:1rem;padding:8px 16px}
.status{text-align:center;font-size:clamp(1.2rem,4.4vw,1.6rem);font-weight:800;min-height:1.4em;margin:0}
.tip{text-align:center;color:var(--soft);font-weight:600;font-size:1.05rem;min-height:1.3em;margin:0;max-width:60ch;align-self:center}
.board{display:grid;align-self:center;width:min(100%,520px);aspect-ratio:1;max-width:100%;border-radius:14px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.18)}
.board button{border:0;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;font-family:var(--display);position:relative;min-width:0;min-height:0}
.b8{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.sq-l{background:#F1E3C6}.sq-d{background:#B5835A}
.board .sel{box-shadow:inset 0 0 0 4px var(--yellow)}
.board .last{background-image:linear-gradient(rgba(246,196,49,.45),rgba(246,196,49,.45))}
.board .tgt::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(31,58,77,.35)}
.board .chk{background:#f08a80!important}
.cp{font-size:clamp(1.6rem,8.6vw,3rem);line-height:1}
.cp.w{color:#fff;text-shadow:0 0 2px #1F3A4D,0 0 2px #1F3A4D,0 2px 0 #1F3A4D}
.cp.b{color:#1F3A4D;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.man{width:76%;height:76%;border-radius:50%;display:grid;place-items:center;font-size:clamp(.9rem,4vw,1.6rem);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25)}
.man.w{background:#fff8ec;color:#B5835A}.man.b{background:#2b2b2b;color:#F6C431}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,360px);aspect-ratio:1;align-self:center}
.ttt button{border:0;border-radius:20px;background:var(--card);font-size:clamp(3rem,14vw,5rem);font-weight:800;font-family:var(--display);box-shadow:0 6px 0 var(--sky2);cursor:pointer;min-width:0}
.ttt .x{color:var(--red)}.ttt .o{color:var(--blue)}.ttt .win{background:#d9f5e3}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:var(--blue);padding:8px;border-radius:20px;width:min(100%,520px);align-self:center;box-shadow:0 8px 0 rgba(0,0,0,.18)}
.c4 button{aspect-ratio:1;border:0;border-radius:50%;background:var(--sky);cursor:pointer;min-width:0;padding:0}
.c4 .r{background:var(--red);animation:drop .3s ease-in}.c4 .y{background:var(--yellow);animation:drop .3s ease-in}.c4 .win{box-shadow:0 0 0 4px #fff inset}

/* cuentos */
.agecards{grid-template-columns:repeat(2,1fr)}
@media (max-width:420px){.agecards{grid-template-columns:1fr}}
.pill:disabled{opacity:.4;cursor:default}
.book{background:var(--card);border-radius:28px;padding:20px 22px;box-shadow:0 8px 0 var(--sky2);display:flex;flex-direction:column;gap:10px;align-items:center;width:min(100%,640px);align-self:center;box-sizing:border-box}
.bpic{font-size:clamp(3.6rem,15vw,6rem);line-height:1.15;text-align:center;letter-spacing:.08em}
.btext{font-size:clamp(1.2rem,4.2vw,1.6rem);line-height:1.5;font-weight:500;text-align:center;margin:0;max-width:40ch;text-wrap:pretty}
.bpage{color:var(--soft);font-weight:700;margin:0;font-variant-numeric:tabular-nums}
canvas#fx{position:fixed;inset:0;pointer-events:none;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.wobble,.pop,.stars span,.boom{animation:none}.card{transition:none}}

/* ---------- pantalla de inicio con 5 tarjetas ---------- */
.agecards{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.agecard.wide{grid-column:1/-1}
.agecard .pic{font-size:clamp(3rem,10vw,4.4rem)}
.hbtns{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:420px){.btn-round{width:48px;height:48px;font-size:1.35rem}.hbtns{gap:6px}}
.lvl .pill{font-size:.95rem;padding:6px 14px}

/* ---------- nombres en los colores (daltonismo) ---------- */
.cname{display:none}
[data-nombres-color="si"] .cname{display:block;background:rgba(255,255,255,.92);color:#1F3A4D;border-radius:999px;padding:1px 8px;font-size:.8rem;font-weight:800;line-height:1.3;pointer-events:none;font-family:var(--display);white-space:nowrap}
[data-nombres-color="si"] .dot{display:grid;place-items:center}
[data-nombres-color="si"] .dot .cname{font-size:1.05rem}
[data-nombres-color="si"] .palette button{width:auto;min-width:52px;border-radius:999px;padding:0 4px;display:grid;place-items:center}
[data-nombres-color="si"] .balloon .cname{position:absolute;top:38%;left:50%;transform:translateX(-50%)}

/* ---------- letra grande ---------- */
[data-grande="si"] body{zoom:1.15}
@supports not (zoom:1){[data-grande="si"] .app{font-size:115%}}

/* ---------- letra fácil de leer ---------- */
[data-legible="si"]{--display:"Atkinson Hyperlegible", Verdana, system-ui, sans-serif}
[data-legible="si"] .btext,[data-legible="si"] .story{letter-spacing:.02em;word-spacing:.12em;line-height:1.7}

/* ---------- alto contraste ---------- */
[data-contraste="si"]{--sky:#FFFFFF;--sky2:#1F3A4D;--soft:#0B1F2C;--ink:#000000}
[data-contraste="si"] .tile,[data-contraste="si"] .pill,[data-contraste="si"] .btn-round,[data-contraste="si"] .book,[data-contraste="si"] .story,[data-contraste="si"] .paper,[data-contraste="si"] .ttt button,[data-contraste="si"] .pad button,[data-contraste="si"] .slot{border:3px solid #000}
[data-contraste="si"] .door,[data-contraste="si"] .agecard{outline:3px solid #000;text-shadow:0 1px 2px #000}
[data-contraste="si"] .dot{border-color:#000}
[data-contraste="si"] button:focus-visible{outline:5px solid #000}

/* ---------- modo calma ---------- */
[data-calma="si"] .wobble,[data-calma="si"] .pop,[data-calma="si"] .stars span,[data-calma="si"] .boom,[data-calma="si"] .block,[data-calma="si"] .scene .stk,[data-calma="si"] .c4 .r,[data-calma="si"] .c4 .y{animation:none!important}
[data-calma="si"] .card{transition:none}
[data-calma="si"]{--red:#C9625A;--blue:#4C7FB8;--yellow:#D9B451;--green:#5A9E73;--purple:#8470B0;--orange:#C98552;--pink:#C07196;--teal:#3F918F}

/* ---------- diseña tu mundo: pegatina elegida para mover ---------- */
.scene .stk.sel{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 3px var(--yellow));transform:translate(-50%,-50%) scale(1.15)}

/* ---------- cuentos: palabra que se está leyendo ---------- */
.btext .w{border-radius:8px;transition:background .15s;cursor:pointer;padding:0 .05em}
.btext .w.hl{background:var(--yellow);color:#1F3A4D}
[data-calma="si"] .btext .w{transition:none}

/* ---------- subtítulos y avisos ---------- */
.sub{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(92vw,720px);box-sizing:border-box;
  background:rgba(15,34,48,.92);color:#fff;border-radius:18px;padding:10px 16px;font-size:clamp(1rem,3.6vw,1.3rem);font-weight:600;text-align:center;z-index:5;pointer-events:none}
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);background:var(--card);border-radius:24px;padding:12px 22px;box-shadow:0 8px 0 rgba(0,0,0,.18);
  display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.15rem;z-index:6;max-width:calc(100vw - 32px);box-sizing:border-box}
.toast .tbig{font-size:3rem;line-height:1;animation:pop .6s}

/* ---------- álbum ---------- */
.bar{height:16px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 2px var(--sky2);overflow:hidden;width:min(100%,420px);align-self:center}
.bar span{display:block;height:100%;background:var(--yellow);border-radius:999px;transition:width .4s}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.slot{aspect-ratio:1;border:0;border-radius:18px;background:rgba(255,255,255,.55);color:var(--sky2);font-size:1.8rem;font-weight:800;font-family:var(--display);cursor:pointer;box-shadow:inset 0 0 0 3px var(--sky2)}
.slot.got{background:var(--card);color:var(--ink);font-size:2.4rem;box-shadow:0 5px 0 var(--sky2)}

/* ---------- zona de padres ---------- */
.gate{display:flex;flex-direction:column;gap:14px}
.ajustes{display:flex;flex-direction:column;gap:14px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-user-select:text;user-select:text}
[data-legible="si"] .ajustes{font-family:var(--display)}
.ajustes h2{font-family:var(--display);font-size:1.6rem;margin:0;text-align:center}
.ajustes h3{font-family:var(--display);font-size:1.25rem;margin:0 0 6px}
.ajustes .set{background:var(--card);border-radius:22px;padding:16px 18px;box-shadow:0 5px 0 var(--sky2);display:flex;flex-direction:column;gap:10px}
.ajustes .note,.ajustes small{color:var(--soft);font-size:.95rem;margin:0;display:block}
.ajustes p,.ajustes ul{margin:0}
.ajustes a{color:var(--blue);font-weight:700}
.ajustes details{border-top:1px solid var(--sky2);padding-top:8px}
.ajustes summary{font-weight:700;cursor:pointer;padding:4px 0}
.ajustes details p,.ajustes details li{font-size:.95rem;line-height:1.5;margin:.4em 0}
.sw{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:6px 0}
.sw input{width:28px;height:28px;flex:none;accent-color:var(--green);margin:2px 0 0}
.sw span{display:flex;flex-direction:column;gap:2px}
.opt{display:flex;flex-direction:column;gap:8px}
.opt .row{justify-content:flex-start}
.pill.danger{background:#fde3e0;color:#9b2318;align-self:flex-start}
.pill.go{background:var(--green);color:#fff;align-self:flex-start}

/* ---------- idiomas ---------- */
.langs .pill{font-size:1rem;padding:6px 16px}
.learn{margin-bottom:4px}
.btext.fx{font-size:clamp(1.6rem,6vw,2.4rem);font-weight:800}
.swatch{display:inline-block;width:1.6em;height:1.6em;border-radius:50%;border:6px solid #fff;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.card.txt{font-size:clamp(.95rem,3.4vw,1.3rem);font-weight:800;padding:4px;line-height:1.1;word-break:break-word}

/* ---------- sombras, puzle y piano ---------- */
.shadow{filter:brightness(0);opacity:.85}
.pz-board{position:relative;display:grid;align-self:center;background:var(--card);border-radius:18px;box-shadow:0 6px 0 var(--sky2);overflow:hidden}
.pz-ghost{position:absolute;inset:0;display:grid;place-items:center;opacity:.13;line-height:1;pointer-events:none}
.pz-slot{position:relative;border:1px dashed var(--sky2);background:transparent;padding:0;overflow:hidden;cursor:pointer}
.pz-slot.done{border-color:transparent}
.pz-board.full{box-shadow:0 0 0 6px var(--yellow),0 6px 0 var(--sky2)}
.pz-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pz-pc{position:relative;overflow:hidden;border:0;padding:0;border-radius:10px;background:var(--card);box-shadow:0 4px 0 var(--sky2);cursor:grab;touch-action:none}
.pz-pc.sel{outline:4px solid var(--purple);outline-offset:2px}
.pz-img{position:absolute;display:grid;place-items:center;line-height:1;pointer-events:none}
.piano{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;height:min(46vh,340px)}
.piano button{border:0;border-radius:0 0 18px 18px;box-shadow:inset 0 -12px 0 rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;font-size:clamp(1.4rem,6vw,2.4rem);touch-action:manipulation}
.piano button.on{filter:brightness(1.2);transform:translateY(4px)}

/* ---------- dominó, reloj, monedas ---------- */
.domino{width:clamp(140px,40vw,220px);height:auto}
.tile.wide{width:auto;aspect-ratio:auto;padding:10px 12px}
.tile.wide .domino{width:clamp(110px,30vw,170px)}
.clock{width:min(60vw,240px);height:auto}
.coin{display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:#F6C431;color:#7a5a00;font-weight:800;font-size:.8em;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 0 0 4px #E2A90B}
.coin.c1{width:1em;height:1em;font-size:.7em}.coin.c2{background:#E7C873}.coin.c5{background:#D9A441}.coin.c10{background:#C9CED2;color:#3a444b;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 0 0 4px #9aa3a9}

/* ---------- laberinto ---------- */
.maze{display:grid;width:min(100%,460px);aspect-ratio:1;align-self:center;background:var(--card);border-radius:12px;box-shadow:0 6px 0 var(--sky2);padding:6px;box-sizing:border-box;touch-action:none}
.mc{border:3px solid transparent;display:grid;place-items:center;font-size:clamp(1rem,5vw,2rem);line-height:1;min-width:0;min-height:0}
.mc.wn{border-top-color:var(--ink)}.mc.ws{border-bottom-color:var(--ink)}.mc.we{border-right-color:var(--ink)}.mc.ww{border-left-color:var(--ink)}
.mc.trail{background:#FFF3C4}
.arrows{display:grid;grid-template-columns:repeat(4,64px);gap:10px;justify-content:center}
.arrows button{height:60px;border:0;border-radius:16px;background:var(--card);font-size:1.8rem;box-shadow:0 5px 0 var(--sky2);cursor:pointer;font-family:var(--display)}
.arrows .wide{grid-column:span 2;font-size:1.1rem;font-weight:800}
.arrows .go{background:var(--green);color:#fff}

/* ---------- trazar letras ---------- */
.trace{position:relative;align-self:center;background:var(--card);border-radius:24px;box-shadow:0 6px 0 var(--sky2);max-width:100%}
.trace canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}

/* ---------- sopa de letras ---------- */
.wlist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-weight:800}
.wlist span{background:var(--card);border-radius:999px;padding:4px 14px;box-shadow:0 3px 0 var(--sky2)}
.wlist .done{text-decoration:line-through;opacity:.55}
.soup{display:grid;gap:4px;width:min(100%,480px);align-self:center}
.soup button{aspect-ratio:1;border:0;border-radius:10px;background:var(--card);font-family:var(--display);font-weight:800;font-size:clamp(1rem,5vw,1.7rem);color:var(--ink);cursor:pointer;min-width:0;padding:0}
.soup .sel{background:var(--yellow)}.soup .found{background:#bfeccc}

/* ---------- sudoku ---------- */
.sudoku{display:grid;width:min(100%,460px);aspect-ratio:1;align-self:center;background:var(--ink);gap:1px;padding:3px;border-radius:10px;box-sizing:border-box}
.sudoku button{border:0;background:var(--card);font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,5vw,2rem);color:var(--blue);cursor:pointer;min-width:0;min-height:0;padding:0}
.sudoku.s9 button{font-size:clamp(.9rem,4vw,1.5rem)}
.sudoku .fix{color:var(--ink);font-weight:800;background:#EEF4F6;cursor:default}
.sudoku .br{margin-right:2px}.sudoku .bb{margin-bottom:2px}
.sudoku .sel{background:#FFF3C4}.sudoku .bad{color:var(--red);background:#fde3e0}
.sdpad{grid-template-columns:repeat(5,minmax(0,64px))}

/* ---------- salva la flor ---------- */
.flower{width:min(42vw,170px);align-self:center}
.flower svg{width:100%;height:auto;overflow:visible}
.petal{transition:transform 1.2s ease-in,opacity 1.2s}
.petal.fall{transform:translate(20px,140px) rotate(80deg);opacity:0}
[data-calma="si"] .petal{transition:opacity .3s}
.hword{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0}
.hword span{width:1.5em;height:1.7em;border-bottom:4px solid var(--ink);display:grid;place-items:center;font-size:clamp(1.4rem,6vw,2.2rem);font-weight:800}
.hword .sp{border:0;width:.8em}
.kb{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:640px;align-self:center}
.kb button{width:44px;height:48px;border:0;border-radius:12px;background:var(--card);font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--ink);box-shadow:0 4px 0 var(--sky2);cursor:pointer}
.kb .ok{background:#bfeccc}.kb .no{background:#e6e9eb;color:#9aa5ad}
.hintpic{font-size:2rem;vertical-align:middle}

/* ---------- robot ---------- */
.rgrid{display:grid;width:min(100%,420px);aspect-ratio:1;align-self:center;gap:3px;background:var(--sky2);padding:3px;border-radius:12px;box-sizing:border-box}
.rc{background:var(--card);border-radius:6px;display:grid;place-items:center;font-size:clamp(1rem,5.5vw,2rem);line-height:1;min-width:0;min-height:0}
.rc.trail{background:#FFF3C4}
.prog{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:48px;background:var(--card);border-radius:16px;padding:8px;box-shadow:inset 0 0 0 2px var(--sky2)}
.chip{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:10px;background:var(--sky);font-size:1.4rem;font-weight:800;border:0;font-family:var(--display);padding:0 6px}
.chip.rep{background:var(--purple);color:#fff;font-size:1rem;cursor:pointer}
.rk{grid-template-columns:repeat(4,64px)}

/* ---------- fracciones ---------- */
.pizza{width:min(48vw,200px);height:auto}
.frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.frac span:last-child{border-top:4px solid currentColor;padding-top:2px}
.tile.num .frac{font-size:.8em}

/* ---------- mecanografía ---------- */
.target{text-align:center;font-size:clamp(1.8rem,7vw,3rem);font-weight:800;letter-spacing:.06em;margin:0;min-height:1.3em}
.target .ok{color:var(--green)}.target .bad{color:var(--red);text-decoration:underline}.target .now{border-bottom:4px solid var(--purple)}
.typein{align-self:center;width:min(100%,420px);font-size:1.6rem;font-family:var(--display);padding:10px 16px;border-radius:16px;border:3px solid var(--sky2);text-align:center;box-sizing:border-box;-webkit-user-select:text;user-select:text}