:root{
  --pink:#FF6B9D;
  --yellow:#FFD93D;
  --cyan:#6BCB77;
  --blue:#4D96FF;
  --purple:#9D65C9;
  --orange:#FF8C42;
  --bg:#FFF8E7;
  --card:#ffffff;
  --text:#3a2a4a;
  --radius:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Fredoka', 'Nunito', system-ui, sans-serif;
  background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 18%, #FFF8E7 45%, #FFEED5 100%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
.bg-clouds{
  position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(ellipse 180px 70px at 12% 14%, #fff 60%, transparent 61%),
    radial-gradient(ellipse 220px 80px at 28% 10%, #fff 60%, transparent 61%),
    radial-gradient(ellipse 160px 60px at 75% 12%, #fff 60%, transparent 61%),
    radial-gradient(ellipse 200px 70px at 88% 18%, #fff 60%, transparent 61%);
  opacity:.9;
}
.bg-hills{
  position:fixed;bottom:0;left:0;right:0;height:220px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 220px at 20% 100%, #A8E6A3 60%, transparent 61%),
    radial-gradient(ellipse 700px 200px at 80% 100%, #8ED48F 60%, transparent 61%),
    radial-gradient(ellipse 1100px 260px at 50% 100%, #7AC87A 60%, transparent 61%);
}

/* TOPBAR */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:4px solid #FFE08A;
  flex-wrap:wrap;gap:8px;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:.3px}
.stars-counter{background:var(--yellow);padding:6px 14px;border-radius:999px;font-weight:800;display:flex;align-items:center;gap:6px;box-shadow:0 4px 0 #e5b800}
.icon-btn{
  border:3px solid #5a3a6b;background:white;border-radius:999px;
  padding:8px 14px;font-size:1.2rem;cursor:pointer;font-weight:700;
  box-shadow:0 4px 0 #5a3a6b;transition:.12s;
}
.icon-btn:active{transform:translateY(4px);box-shadow:none}
.icon-btn.small{font-size:.95rem;padding:8px 12px}
.icon-btn.active{background:var(--yellow)}

/* GUIDE BUBBLE */
.guide-bubble{
  max-width:680px;margin:14px auto 0;
  background:white;border:4px solid #5a3a6b;border-radius:22px;
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  box-shadow:0 8px 0 rgba(90,58,107,.15);
  position:relative;
}
.guide-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#FFD93D,#FF8C42);
  display:grid;place-items:center;font-size:2.1rem;
  border:3px solid #5a3a6b;flex-shrink:0;
  animation:wiggle 2.2s infinite;
}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.guide-text{font-size:1.15rem;font-weight:600;line-height:1.2;flex:1}
.repeat-btn{
  width:44px;height:44px;border-radius:50%;border:3px solid #5a3a6b;background:var(--cyan);font-size:1.2rem;cursor:pointer;flex-shrink:0
}
.repeat-btn.small{width:36px;height:36px;font-size:1rem}

/* SCREENS */
.main{max-width:1020px;margin:0 auto;padding:12px 14px 40px}
.screen{display:none;animation:pop .35s ease}
.screen.active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* HERO */
.hero{
  background:white;border:5px solid #5a3a6b;border-radius:32px;
  padding:28px 18px 22px;text-align:center;
  box-shadow:0 12px 0 rgba(90,58,107,.18);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 260px at 50% -10%, #FFF3B0 0%, transparent 60%);
  pointer-events:none;
}
.hero-badge{background:var(--yellow);display:inline-block;padding:6px 14px;border-radius:999px;font-weight:800;letter-spacing:.4px;border:3px solid #5a3a6b}
.hero-title{font-family:'Nunito', sans-serif;font-size:3.1rem;line-height:.9;font-weight:900;letter-spacing:1px;margin:14px 0 6px;color:#5a3a6b;text-shadow:3px 3px 0 #FFD93D}
.hero-title span{color:var(--pink);text-shadow:3px 3px 0 #FFD93D}
.hero-sub{font-size:1.2rem;font-weight:600;color:#7a5a8a}
.hero-character{margin:14px 0 6px;position:relative;display:inline-block}
.hero-cat{font-size:5.2rem;filter:drop-shadow(0 8px 10px rgba(0,0,0,.15));animation:float 2.8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-shadow{width:90px;height:18px;background:rgba(0,0,0,.12);border-radius:50%;margin:0 auto;filter:blur(2px)}
.hero-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.big-btn{
  border:4px solid #5a3a6b;border-radius:999px;padding:14px 28px;
  font-size:1.25rem;font-weight:800;cursor:pointer;min-width:160px;
  box-shadow:0 6px 0 #5a3a6b;transition:.12s;font-family:inherit;
}
.big-btn:active{transform:translateY(6px);box-shadow:none}
.big-btn.primary{background:linear-gradient(180deg,#6BCB77,#3CB371);color:white}
.big-btn.secondary{background:linear-gradient(180deg,#FFD93D,#FFB703);color:#5a3a6b}
.hero-mini-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.pill-btn{
  border:3px solid #5a3a6b;background:white;border-radius:999px;
  padding:8px 14px;font-weight:700;cursor:pointer;font-family:inherit;
}
.skills-row{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:16px;font-weight:700;
}
.skills-row span{background:white;border:3px solid #5a3a6b;border-radius:999px;padding:6px 12px}

/* SECTION TITLES */
.section-title{font-family:'Nunito',sans-serif;font-size:2rem;font-weight:900;text-align:center;color:#5a3a6b;margin-top:8px}
.section-sub{text-align:center;font-weight:600;color:#7a5a8a;margin:4px 0 14px}
.back-btn{border:3px solid #5a3a6b;background:white;border-radius:999px;padding:8px 14px;font-weight:800;cursor:pointer}

/* LEVELS GRID */
.levels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0;max-height:none}
@media (max-width:520px){ .levels-grid{grid-template-columns:repeat(2,1fr)} }
.level-card{
  background:white;border:4px solid #5a3a6b;border-radius:22px;padding:10px 8px;
  text-align:center;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 8px 0 rgba(90,58,107,.15);transition:.15s;
  min-height:148px;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.level-card:hover{transform:translateY(-3px) rotate(.4deg)}
.level-card.locked{opacity:.55;filter:grayscale(.2)}
.level-card.active{outline:4px solid var(--yellow)}
.level-icon{font-size:2.6rem}
.level-name{font-weight:900;font-size:1.1rem;margin:6px 0 2px;color:#5a3a6b}
.level-desc{font-size:.9rem;color:#7a5a8a;font-weight:600}
.level-stars{margin-top:8px;font-weight:800}
.level-badge{position:absolute;top:8px;right:8px;background:var(--cyan);border:2px solid #5a3a6b;border-radius:999px;padding:2px 8px;font-weight:800;font-size:.8rem}

/* GAMES GRID */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.game-card{
  background:white;border:4px solid #5a3a6b;border-radius:22px;padding:14px;
  display:flex;gap:12px;align-items:center;cursor:pointer;box-shadow:0 6px 0 rgba(90,58,107,.12);
  transition:.15s;
}
.game-card:hover{transform:translateY(-2px)}
.game-card.locked{opacity:.5;pointer-events:none}
.game-card.done{border-color:#3CB371;background:#f0fff4}
.game-card-emoji{font-size:2.4rem;width:64px;height:64px;display:grid;place-items:center;background:#FFF3B0;border:3px solid #5a3a6b;border-radius:18px;flex-shrink:0}
.game-card-text{flex:1;text-align:left}
.game-card-text h3{font-size:1.05rem;line-height:1.1}
.game-card-text p{font-size:.85rem;color:#7a5a8a;font-weight:600}
.game-card-star{font-size:1.6rem}

/* GAME SCREEN */
.game-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.game-progress{flex:1;min-width:160px;background:white;border:3px solid #5a3a6b;border-radius:999px;padding:6px 10px}
.progress-label{font-weight:800;font-size:.95rem;color:#5a3a6b}
.progress-bar{height:10px;background:#f0e6ff;border-radius:999px;overflow:hidden;margin-top:4px;border:2px solid #e8d9ff}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .4s ease}
.game-stars{background:var(--yellow);border:3px solid #5a3a6b;border-radius:999px;padding:8px 12px;font-weight:900}
.game-instruction{
  background:white;border:4px solid #5a3a6b;border-radius:18px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;
  box-shadow:0 6px 0 rgba(90,58,107,.12);margin-bottom:10px;
}
.demo-dbl{
  display:none;align-items:center;justify-content:center;gap:8px;
  background:#fff;border:3px dashed #9D65C9;border-radius:999px;padding:8px 14px;
  font-weight:800;color:#5a3a6b;margin:0 auto 10px;max-width:420px;
}
.demo-dbl.show{display:flex}
.demo-dbl .plus, .demo-dbl .arrow{font-size:1.2rem}
.dbl-anim{animation:blink 1s infinite}
@keyframes blink{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

.game-area{
  background:white;border:5px solid #5a3a6b;border-radius:28px;
  min-height:420px;position:relative;overflow:hidden;
  box-shadow:0 10px 0 rgba(90,58,107,.15);
  padding:12px;
  /* cursor personalizado grande para niños */
}
.game-footer{text-align:center;margin-top:10px}
.hint{background:white;border:3px solid #5a3a6b;border-radius:999px;display:inline-block;padding:6px 14px;font-weight:700}

/* ELEMENTOS DE JUEGO */
.star-target{
  position:absolute;width:96px;height:96px;display:grid;place-items:center;
  font-size:3.2rem;cursor:pointer;user-select:none;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.15));
  transition:transform .15s;
  animation:starFloat 1.6s ease-in-out infinite;
}
@keyframes starFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.star-target:hover{transform:scale(1.08)}
.star-target.collected{animation:collect .5s ease forwards}
@keyframes collect{to{transform:scale(1.6) rotate(20deg);opacity:0}}

.animal-card{
  width:130px;height:130px;border:4px solid #5a3a6b;border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fff;cursor:pointer;font-size:3rem;font-weight:800;
  box-shadow:0 6px 0 rgba(90,58,107,.12);transition:.15s;
}
.animal-card:hover{transform:scale(1.04)}
.animal-card small{font-size:.85rem;margin-top:4px}
.animal-card.correct{outline:5px solid var(--cyan);animation:correctPop .5s}
@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

.path-svg{width:100%;height:360px;display:block}
.path-track{fill:none;stroke:#FFE08A;stroke-width:42;stroke-linecap:round;stroke-linejoin:round}
.path-track-inner{fill:none;stroke:white;stroke-width:4;stroke-dasharray:10 10;opacity:.9}
.path-start, .path-end{font-size:1.8rem}
.cursor-dot{
  position:absolute;width:18px;height:18px;background:var(--pink);border:3px solid white;border-radius:50%;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.25);transform:translate(-50%,-50%);
}

.balloon{
  width:110px;height:138px;border-radius:55px 55px 55px 55px / 70px 70px 40px 40px;
  display:grid;place-items:center;font-size:2.6rem;color:white;font-weight:900;
  cursor:pointer;position:relative;box-shadow:0 8px 0 rgba(0,0,0,.12);border:3px solid rgba(90,58,107,.3);
  transition:.15s;user-select:none;
}
.balloon::after{content:"";position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);width:4px;height:22px;background:#8a7a6a;border-radius:99px}
.balloon:active{transform:scale(.96)}
.balloon.pop{animation:popBalloon .45s forwards}
@keyframes popBalloon{0%{transform:scale(1)}30%{transform:scale(1.2)}100%{transform:scale(0) rotate(10deg);opacity:0}}

.butterfly{
  position:absolute;width:92px;height:92px;display:grid;place-items:center;
  font-size:3rem;cursor:pointer;user-select:none;
  animation:fly 1.8s ease-in-out infinite alternate;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.15));
}
@keyframes fly{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-14px) rotate(6deg)}}

.color-dot{
  width:96px;height:96px;border-radius:50%;border:5px solid #5a3a6b;
  cursor:pointer;box-shadow:0 6px 0 rgba(90,58,107,.15);transition:.15s;
}
.color-dot:hover{transform:scale(1.07)}
.color-dot.correct{outline:6px solid var(--cyan)}

.gift{
  width:180px;height:160px;background:linear-gradient(180deg,#FF8C42,#E86A2C);
  border:5px solid #5a3a6b;border-radius:22px;display:grid;place-items:center;
  font-size:4rem;cursor:pointer;position:relative;box-shadow:0 10px 0 rgba(90,58,107,.18);
}
.gift::before{content:"";position:absolute;top:50%;left:0;right:0;height:18px;background:#FFD93D;transform:translateY(-50%);border-top:3px solid #5a3a6b;border-bottom:3px solid #5a3a6b}
.gift::after{content:"🎀";position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:2.6rem}
.gift.open{animation:openGift .6s ease}
@keyframes openGift{0%{transform:scale(1)}40%{transform:scale(1.08) rotate(-2deg)}100%{transform:scale(1)}}

.sleepy{
  width:130px;height:130px;border:4px solid #5a3a6b;border-radius:22px;background:white;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 0 rgba(90,58,107,.12);font-size:3rem;
}
.sleepy small{font-size:.8rem;font-weight:700}
.sleepy.awake{background:#f0fff4;border-color:#3CB371;animation:correctPop .5s}

.draggable{
  width:96px;height:96px;border:4px solid #5a3a6b;border-radius:22px;background:white;
  display:grid;place-items:center;font-size:2.8rem;cursor:grab;user-select:none;
  box-shadow:0 6px 0 rgba(90,58,107,.12);touch-action:none;
}
.draggable:active{cursor:grabbing}
.drop-zone{
  width:150px;height:150px;border:4px dashed #9D65C9;border-radius:22px;
  background:#f7f0ff;display:grid;place-items:center;font-size:3rem;position:relative;
}
.drop-zone.over{background:#e9ffd9;border-color:#3CB371;transform:scale(1.03)}
.drop-zone.filled{border-style:solid;background:#e9ffd9;border-color:#3CB371}

.dress-avatar{
  width:180px;height:240px;border:5px solid #5a3a6b;border-radius:22px;background:linear-gradient(180deg,#E0F7FF,#FFF);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px;font-size:4.5rem;position:relative;overflow:hidden;
}
.closet{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.forest-scene{
  width:100%;min-height:380px;
  background:linear-gradient(180deg,#B0E7FF 0%, #E0F7FF 30%, #A8E6A3 60%, #8ED48F 100%);
  border-radius:22px;position:relative;overflow:hidden;padding:10px;
}

/* Mensajes suaves */
.toast{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  background:#5a3a6b;color:white;padding:10px 16px;border-radius:999px;font-weight:800;
  box-shadow:0 6px 0 rgba(0,0,0,.15);animation:toastIn .3s ease;z-index:5;white-space:nowrap;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* MODAL */
.modal{
  position:fixed;inset:0;background:rgba(60,40,80,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:14px;
}
.modal.show{display:flex}
.modal-card{
  background:white;border:5px solid #5a3a6b;border-radius:28px;padding:22px 18px;
  text-align:center;max-width:420px;width:100%;box-shadow:0 12px 0 rgba(90,58,107,.2);
  position:relative;overflow:hidden;
}
.modal-emoji{font-size:3.2rem}
.modal-card h2{font-family:'Nunito',sans-serif;font-size:1.9rem;color:#5a3a6b}
.modal-card p{font-weight:700;color:#7a5a8a;margin:6px 0 12px}
.modal-star{font-size:3rem;animation:starFloat 1.2s infinite}
.modal-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti span{position:absolute;top:-10px;font-size:1.4rem;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(420px) rotate(360deg)}}

/* STARS SCREEN */
.stars-big{font-size:2rem;font-weight:900;text-align:center;background:white;border:4px solid #5a3a6b;border-radius:999px;padding:10px;max-width:360px;margin:12px auto}
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0}
.badge{background:white;border:4px solid #5a3a6b;border-radius:22px;padding:12px;text-align:center;opacity:.45}
.badge.unlocked{opacity:1;background:linear-gradient(180deg,#FFF8B0,#FFD93D);transform:rotate(-.6deg)}
.badge.super.unlocked{background:linear-gradient(180deg,#FFD93D,#FF8C42)}
.badge span{font-size:2rem;display:block}
.stars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.mini-star-card{background:white;border:3px solid #5a3a6b;border-radius:18px;padding:8px;text-align:center;font-weight:800;font-size:.82rem;line-height:1.1}
.mini-star-card.done{background:#f0fff4}
.mini-star-card small{font-size:.72rem;color:#7a5a8a}
.level-progress{height:8px;background:#f0e6ff;border-radius:999px;overflow:hidden;margin-top:6px;border:2px solid #e8d9ff}
.level-progress-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .3s}
.shape-big{width:110px;height:110px;border:5px solid #5a3a6b;display:grid;place-items:center;font-size:2.6rem;background:white;cursor:pointer;border-radius:18px;box-shadow:0 6px 0 rgba(90,58,107,.12)}
.shape-circle{border-radius:50%}
.shape-triangle{clip-path:polygon(50% 8%, 92% 92%, 8% 92%)}
.shape-star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.trace-dots{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.trace-dot{width:44px;height:44px;border-radius:50%;border:4px solid #5a3a6b;background:#FFE08A;display:grid;place-items:center;font-weight:900;cursor:pointer}
.trace-dot.done{background:#6BCB77;color:white}
.paint-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:280px;margin:0 auto}
.paint-cell{aspect-ratio:1;border:3px solid #5a3a6b;border-radius:12px;background:white;cursor:pointer;display:grid;place-items:center;font-size:1.6rem}
.paint-cell.filled{transform:scale(1.03)}

/* HELP */
.help-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0}
.help-card{background:white;border:4px solid #5a3a6b;border-radius:22px;padding:14px;text-align:center}
.help-card span{font-size:2.4rem}
.help-tip{background:white;border:4px solid #5a3a6b;border-radius:22px;padding:14px;font-weight:600;margin-top:12px}

/* ADULT */
.adult-card{max-width:520px}
.adult-stats{display:grid;gap:10px;text-align:left;margin:12px 0}
.adult-stat{background:#f7f0ff;border:3px solid #e8d9ff;border-radius:16px;padding:10px;font-weight:700}
.adult-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}

/* Responsive */
@media (max-width:640px){
  .hero-title{font-size:2.4rem}
  .game-area{min-height:380px}
  .animal-card{width:110px;height:110px}
  .gift{width:150px;height:136px}
}
@media (min-width:900px){
  .hero-title{font-size:3.6rem}
}