:root{
  --bg1:#FFF6E5; --bg2:#FFE7C2;
  --ink:#5A3E2B; --ink-soft:#9B7B5E;
  --read:#FF7A3D; --read-d:#D85F29;
  --math:#1FB0A3; --math-d:#188C82;
  --sun:#FFD23F; --sun-d:#E0B400;
  --card:#FFFFFF; --pink:#FF7EC4;
  --radius:24px; --tap:64px;
  --font:'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:var(--font); color:var(--ink);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed; overscroll-behavior:none; user-select:none;
}
#app{max-width:480px;margin:0 auto;min-height:100%;padding:16px;
  padding-top:max(16px,env(safe-area-inset-top));
  padding-bottom:max(16px,env(safe-area-inset-bottom));}
button{font-family:inherit;border:none;cursor:pointer;background:none}
.btn-tap{min-width:var(--tap);min-height:var(--tap)}
.hidden{display:none !important}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pop{animation:pop .35s ease both}
.bounce{animation:bounce 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* Botones grandes reutilizables */
.big-btn{min-height:var(--tap);padding:14px 22px;border-radius:22px;font-size:20px;font-weight:800;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.big-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.big-btn--read{background:var(--read)} .big-btn--math{background:var(--math)}
.big-btn--ghost{background:#fff;color:var(--ink)}

/* Celebración */
.celebrate-overlay{position:fixed;inset:0;background:rgba(40,20,30,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.celebrate-card{background:#fff;border-radius:30px;padding:24px;text-align:center;max-width:340px;width:100%}
.celebrate-stars{font-size:40px;letter-spacing:4px;margin:6px 0}
.celebrate-msg{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:16px}
.celebrate-actions{display:flex;flex-direction:column;gap:12px}

/* Inicio */
.home-top{display:flex;justify-content:space-between;align-items:center}
.hello{font-size:22px;font-weight:800}
.stars-badge{background:#fff;border-radius:20px;padding:6px 14px;font-weight:800;color:#E8920A;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.home-hero{display:flex;align-items:center;gap:8px;margin:14px 0}
.speech{background:#fff;border-radius:18px;padding:10px 16px;font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.08)}
.area-cards{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.area-card{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--radius);box-shadow:0 8px 18px rgba(0,0,0,.18);text-align:left}
.area-card:active{transform:translateY(3px)}
.area-card--read{background:linear-gradient(135deg,#FF9E4F,#FF7A3D)}
.area-card--math{background:linear-gradient(135deg,#34D1C2,#1FB0A3)}
.area-ico{background:rgba(255,255,255,.25);width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:34px}
.area-txt{color:#fff;display:flex;flex-direction:column}.area-txt b{font-size:22px}.area-txt small{opacity:.95}
.soon-label{margin-top:18px;color:var(--ink-soft);font-weight:700;font-size:14px}
.soon-row{display:flex;gap:10px;margin-top:8px}
.soon{flex:1;background:#fff;opacity:.6;border-radius:18px;padding:12px;text-align:center;font-size:13px;color:#7A5C42;display:flex;flex-direction:column;gap:2px}
.parent-dot{position:fixed;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.6);font-size:18px;opacity:.5}

/* Control parental */
.parent-input{font-size:24px;padding:10px;width:120px;text-align:center;border:3px solid #FFC58A;border-radius:14px}

/* Cabecera de juego y mapa de niveles */
.play-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.play-title{font-size:22px;margin:0}
.round-btn{width:44px;height:44px;border-radius:50%;background:#fff;font-size:20px;color:var(--read);box-shadow:0 3px 8px rgba(0,0,0,.1)}
.level-list{display:flex;flex-direction:column;gap:12px}
.level-item{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08);text-align:left;font-size:18px;font-weight:700;color:var(--ink)}
.level-item .level-ico{font-size:28px}
.level-item--read{border-left:8px solid var(--read)} .level-item--math{border-left:8px solid var(--math)}
.level-item.locked{opacity:.5}
.level-item:not(.locked):active{transform:translateY(2px)}

/* Actividades: comunes */
.act-instruction{text-align:center;font-size:18px;font-weight:700;margin:6px 0 14px}
.dots{display:flex;gap:6px}
.dot{width:12px;height:12px;border-radius:50%;background:#E9C9A0}.dot.on{background:var(--read)}
.listen{display:block;margin:0 auto 14px}

/* Escucha y repite */
.syll-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.syll-tile{aspect-ratio:1;border-radius:16px;background:var(--sun);color:var(--ink);font-size:22px;font-weight:800;box-shadow:0 4px 0 var(--sun-d)}
.syll-tile.done{background:#FFE9A8}
.syll-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun-d)}
@media (max-width:360px){.syll-tile{font-size:18px}}

/* Forma la palabra */
.build-card{background:#fff;border-radius:22px;padding:16px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.06);margin:6px 0 14px}
.build-emoji{font-size:74px;line-height:1}
.build-slots{display:flex;gap:10px;justify-content:center;margin-top:10px}
.slot{width:64px;height:64px;border-radius:16px;border:3px dashed #FFC58A;color:#FFC58A;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center}
.slot.filled{background:var(--read);color:#fff;border:none;box-shadow:0 4px 0 var(--read-d)}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{min-height:var(--tap);border-radius:18px;background:var(--sun);color:var(--ink);font-size:26px;font-weight:800;box-shadow:0 4px 0 var(--sun-d)}
.tile.used{opacity:.35}
.tile:not(.used):active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun-d)}
.tile.shake{animation:shake .4s}

/* ¿Qué dibujo es? */
.match-word{display:flex;align-items:center;justify-content:center;gap:10px;font-size:40px;font-weight:800;color:var(--read);margin:10px 0 16px}
.match-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.match-opt{background:#fff;border-radius:20px;padding:10px;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.match-emoji{font-size:46px}
.match-opt.right{outline:4px solid var(--math)}
.match-opt.wrong{outline:4px solid #FF6B6B;animation:shake .4s}
@media (max-width:360px){.match-emoji{font-size:38px}}

/* Cuenta y suma */
.sum-stage{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border-radius:22px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.06);margin-bottom:14px;min-height:120px}
.sum-group{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:120px}
.sum-item{font-size:30px;line-height:1}
.sum-plus{font-size:34px;font-weight:800;color:var(--math)}
.choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.choice{min-height:72px;border-radius:18px;background:var(--math);color:#fff;font-size:34px;font-weight:800;box-shadow:0 5px 0 var(--math-d)}
.choice:active{transform:translateY(3px);box-shadow:0 2px 0 var(--math-d)}
.choice.right{background:#2ecc71;box-shadow:0 5px 0 #27ae60}
.choice.wrong{background:#FF6B6B;box-shadow:0 5px 0 #d64545;animation:shake .4s}

/* ¿Cuánto es? */
.bignum{text-align:center;font-size:52px;font-weight:800;color:var(--ink);background:#fff;border-radius:22px;padding:24px;margin-bottom:14px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.bignum b{color:var(--math)}

/* Explorar (galería de items) */
.item-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.item-tile{background:#fff;border-radius:20px;padding:14px;display:flex;align-items:center;justify-content:center;min-height:96px;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.item-tile.done{outline:3px solid var(--sun)}
.item-tile:active{transform:translateY(2px)}
.swatch{width:60px;height:60px;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.shape{width:64px;height:64px}
.item-emoji{font-size:52px}
@media (max-width:360px){.item-emoji{font-size:42px}}

/* Identificar (prompt) */
.identify-prompt{display:flex;justify-content:center;margin:8px 0 18px}
.identify-prompt .round-btn{width:64px;height:64px;font-size:28px;color:var(--math)}

/* Inicio: tarjetas mini de áreas nuevas */
.mini-cards{display:flex;gap:10px;margin-top:18px}
.mini-card{flex:1;background:#fff;border-radius:18px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;color:var(--ink);box-shadow:0 4px 10px rgba(0,0,0,.08)}
.mini-card span{font-size:30px}
.mini-card:active{transform:translateY(2px)}