:root{
  --sky:#EAF6FF; --sky-deep:#D6ECFF;
  --ink:#1E3A5F; --ink-soft:#5A7699;
  --coral:#FF6B57; --coral-dark:#E04E3B;
  --sun:#FFC93C; --sun-dark:#E8AC14;
  --mint:#3DC98B; --mint-dark:#26A96F;
  --violet:#8B5CF6; --violet-dark:#6D3FE0;
  --card:#FFFFFF; --card-edge:#C9DFF2;
  --wrong:#FF8FA3;
  --radius:26px;
  --font:'Chalkboard SE','Comic Sans MS','Marker Felt','Segoe Print',ui-rounded,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--sky);
  background-image:
    radial-gradient(circle at 15% 20%, #FFFFFF66 0 90px, transparent 91px),
    radial-gradient(circle at 85% 12%, #FFFFFF55 0 60px, transparent 61px),
    radial-gradient(circle at 70% 85%, #FFFFFF44 0 110px, transparent 111px);
  min-height:100dvh; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
}
.screen{display:none; min-height:100dvh; flex-direction:column; padding:16px; max-width:640px; margin:0 auto;}
.screen.active{display:flex; animation:screenIn .35s ease-out;}
@keyframes screenIn{from{opacity:0; transform:translateY(24px) scale(.98);}}

/* nubes de fondo a la deriva */
.cloud{position:fixed; z-index:-1; border-radius:50%; background:#FFFFFF99; filter:blur(2px); pointer-events:none;}
.cloud.c1{width:180px; height:70px; top:8%;  animation:drift 46s linear infinite;}
.cloud.c2{width:120px; height:50px; top:26%; animation:drift 34s linear infinite; animation-delay:-18s;}
.cloud.c3{width:220px; height:80px; top:74%; animation:drift 58s linear infinite; animation-delay:-30s;}
@keyframes drift{from{left:-240px;} to{left:100%;}}

/* entrada escalonada */
.drop-in{animation:dropIn .45s ease-out backwards;}
@keyframes dropIn{from{opacity:0; transform:translateY(18px) scale(.92);}}

/* flotado suave */
.prompt-card .giant, .tut-card .mascot, .rank-banner .em{display:inline-block; animation:floaty 3s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.logo h1 .hero{display:inline-block; animation:heroWiggle 4s ease-in-out infinite;}
@keyframes heroWiggle{0%,88%,100%{transform:rotate(0);}92%{transform:rotate(-3deg) scale(1.05);}96%{transform:rotate(3deg) scale(1.05);}}

/* +1 estrella volando */
.star-pop{
  position:fixed; left:50%; top:45%; transform:translateX(-50%); z-index:160;
  font-size:34px; font-weight:700; color:var(--sun-dark); font-family:var(--font);
  pointer-events:none; animation:starPop 1.1s ease-out forwards;
  text-shadow:0 2px 0 #fff;
}
@keyframes starPop{
  0%{opacity:0; transform:translateX(-50%) translateY(10px) scale(.6);}
  20%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.15);}
  100%{opacity:0; transform:translateX(-50%) translateY(-90px) scale(1);}
}
.stars-pill.bump{animation:bump .5s;}
@keyframes bump{35%{transform:scale(1.18) rotate(-4deg);}70%{transform:scale(.95);}}

/* HUD */
.hud{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.hud .back, .hud .help{
  font-family:var(--font); font-size:18px; border:none; background:var(--card);
  color:var(--ink); border-radius:18px; padding:10px 16px;
  box-shadow:0 4px 0 var(--card-edge); cursor:pointer;
}
.hud .back:active,.hud .help:active{transform:translateY(3px); box-shadow:0 1px 0 var(--card-edge);}
.hud-right{display:flex; gap:8px; align-items:center;}
.stars-pill{
  display:flex; align-items:center; gap:6px; background:var(--card);
  border-radius:18px; padding:8px 14px; font-size:19px; font-weight:700;
  box-shadow:0 4px 0 var(--card-edge); font-variant-numeric:tabular-nums;
}
.streak-pill{
  display:none; align-items:center; gap:4px; background:#FFF1E8;
  border-radius:18px; padding:8px 14px; font-size:19px; font-weight:700; color:var(--coral-dark);
  box-shadow:0 4px 0 #F5C9BC; font-variant-numeric:tabular-nums;
}
.streak-pill.on{display:flex; animation:pop .4s;}

/* PORTAL + HOMES */
.center-col{justify-content:center; gap:18px;}
.logo{text-align:center; margin-bottom:2px;}
.logo h1{font-size:clamp(34px,9vw,52px); margin:0; line-height:1.05; letter-spacing:-.5px; text-wrap:balance;}
.logo h1 .hero{color:var(--coral);}
.logo p{margin:6px 0 0; color:var(--ink-soft); font-size:17px;}
.rank-banner{
  display:flex; align-items:center; gap:14px; background:var(--card);
  border-radius:var(--radius); padding:14px 18px; box-shadow:0 6px 0 var(--card-edge);
}
.rank-banner .em{font-size:42px;}
.rank-banner h3{margin:0; font-size:19px;}
.rank-banner small{color:var(--ink-soft); font-size:14px; display:block; margin-top:2px;}
.rank-bar{height:12px; background:var(--sky-deep); border-radius:8px; overflow:hidden; margin-top:7px;}
.rank-bar .fill{height:100%; background:linear-gradient(90deg,var(--sun),var(--coral)); border-radius:8px; transition:width .5s;}
.mode-card{
  display:flex; align-items:center; gap:18px; width:100%;
  background:var(--card); border:none; border-radius:var(--radius);
  padding:19px 22px; cursor:pointer; text-align:left;
  font-family:var(--font); color:var(--ink);
  box-shadow:0 7px 0 var(--edge,var(--card-edge)); transition:transform .1s;
}
.mode-card:active{transform:translateY(5px); box-shadow:0 2px 0 var(--edge,var(--card-edge));}
.mode-card .big{font-size:46px; line-height:1;}
.mode-card h2{margin:0; font-size:23px;}
.mode-card small{color:var(--ink-soft); font-size:15px; display:block; margin-top:2px;}
.mode-card.vocab{--edge:var(--sun-dark); background:linear-gradient(135deg,#FFF6DE,#FFEDB8);}
.mode-card.speak{--edge:var(--violet-dark); background:linear-gradient(135deg,#F1EAFF,#E2D5FF);}
.mode-card.write{--edge:var(--mint-dark); background:linear-gradient(135deg,#E4FBF0,#CDF5E3);}
.mode-card.english{--edge:#3B82C4; background:linear-gradient(135deg,#E3F1FF,#C9E4FF);}
.mode-card.math{--edge:var(--coral-dark); background:linear-gradient(135deg,#FFE9E4,#FFD6CC);}
.mode-card.soon{opacity:.55; background:#EDF3F8;}
.mode-card.soon .big{filter:grayscale(1);}

/* CATEGORÍAS Y NIVELES */
.cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:12px;}
.cat-btn{
  background:var(--card); border:none; border-radius:var(--radius);
  padding:16px 10px; font-family:var(--font); color:var(--ink); cursor:pointer;
  box-shadow:0 6px 0 var(--card-edge); font-size:18px;
}
.cat-btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--card-edge);}
.cat-btn .em{display:block; font-size:38px; margin-bottom:6px;}
.screen-title{font-size:25px; text-align:center; margin:10px 0 4px; text-wrap:balance;}
.screen-sub{text-align:center; color:var(--ink-soft); margin:0 0 10px; font-size:16px;}
.level-list{display:flex; flex-direction:column; gap:20px; margin-top:14px;}
.level-btn{
  display:flex; align-items:center; gap:16px; text-align:left;
  background:var(--card); border:none; border-radius:var(--radius);
  padding:18px 20px; font-family:var(--font); color:var(--ink); cursor:pointer;
  box-shadow:0 7px 0 var(--card-edge);
}
.level-btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--card-edge);}
.level-btn .em{font-size:44px;}
.level-btn h3{margin:0; font-size:21px;}
.level-btn small{color:var(--ink-soft); font-size:15px; display:block; margin-top:2px;}
.level-btn.locked{opacity:.55; background:#EDF3F8;}
.level-btn.locked .em{filter:grayscale(1);}

/* JUEGO COMÚN */
.progress{height:14px; background:#FFFFFFAA; border-radius:10px; overflow:hidden; margin:6px 0 14px; box-shadow:inset 0 2px 4px #0001;}
.progress .fill{height:100%; width:0%; background:linear-gradient(90deg,var(--sun),var(--coral)); border-radius:10px; transition:width .4s; position:relative; overflow:hidden;}
.progress .fill::after{
  content:''; position:absolute; top:0; bottom:0; width:36px;
  background:linear-gradient(90deg,transparent,#FFFFFF88,transparent);
  animation:shine 1.8s linear infinite;
}
@keyframes shine{from{left:-40px;} to{left:110%;}}
.prompt-card{
  background:var(--card); border-radius:var(--radius); padding:20px 16px;
  text-align:center; box-shadow:0 7px 0 var(--card-edge); margin-bottom:16px;
}
.prompt-card .giant{font-size:70px; line-height:1.1;}
.prompt-card .word{font-size:clamp(26px,7vw,40px); font-weight:700; letter-spacing:.5px; text-wrap:balance;}
.prompt-card .hint{color:var(--ink-soft); font-size:16px; margin-top:6px;}
.prompt-card .story{font-size:clamp(19px,5vw,24px); line-height:1.5; text-wrap:balance; margin-top:6px;}
.listen-btn{
  font-family:var(--font); font-size:19px; margin:14px 6px 0;
  background:var(--sky-deep); color:var(--ink); border:none; border-radius:18px;
  padding:12px 22px; cursor:pointer; box-shadow:0 5px 0 #B7D4EC;
}
.listen-btn:active{transform:translateY(3px); box-shadow:0 2px 0 #B7D4EC;}
.hint-btn{
  font-family:var(--font); font-size:18px; margin:14px 6px 0;
  background:#FFF1C9; color:#8a6d1a; border:none; border-radius:18px;
  padding:12px 20px; cursor:pointer; box-shadow:0 5px 0 #E8D089;
}
.hint-btn:active{transform:translateY(3px); box-shadow:0 2px 0 #E8D089;}
.hint-btn:disabled{opacity:.45; cursor:default;}
.opt.dimmed{opacity:.25; pointer-events:none;}
.hint-word{font-family:'Courier New',monospace; letter-spacing:4px; font-weight:700;}
.options{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:4px;}
.options.long{grid-template-columns:1fr;}
.opt{
  background:var(--card); border:none; border-radius:var(--radius);
  padding:16px 10px; font-family:var(--font); font-size:21px; color:var(--ink);
  cursor:pointer; box-shadow:0 6px 0 var(--card-edge); transition:transform .1s;
}
.opt .em{display:block; font-size:50px; line-height:1.15;}
.opt.num{font-size:30px; font-weight:700; font-variant-numeric:tabular-nums;}
.opt:active{transform:translateY(4px); box-shadow:0 2px 0 var(--card-edge);}
.opt.correct{background:var(--mint); color:#fff; box-shadow:0 6px 0 var(--mint-dark); animation:pop .4s;}
.opt.wrong{background:var(--wrong); color:#fff; box-shadow:0 6px 0 #E06880; animation:shake .4s;}
.opt:disabled{cursor:default;}
@keyframes pop{50%{transform:scale(1.08);}}
@keyframes shake{25%{transform:translateX(-7px);}50%{transform:translateX(7px);}75%{transform:translateX(-4px);}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }
.feedback{min-height:34px; text-align:center; font-size:21px; font-weight:700; margin-top:14px; text-wrap:balance;}
.feedback.good{color:var(--mint-dark);}
.feedback.bad{color:var(--coral-dark);}

/* SPEAKING */
.mic-btn{
  display:block; margin:8px auto 0; width:140px; height:140px; border-radius:50%;
  border:none; background:var(--violet); color:#fff; font-size:58px; cursor:pointer;
  box-shadow:0 8px 0 var(--violet-dark); transition:transform .1s;
}
.mic-btn:active{transform:translateY(5px); box-shadow:0 3px 0 var(--violet-dark);}
.mic-btn.listening{animation:pulse 1s infinite; background:var(--coral); box-shadow:0 8px 0 var(--coral-dark);}
@keyframes pulse{50%{transform:scale(1.07);}}
.mic-label{text-align:center; font-size:17px; color:var(--ink-soft); margin-top:10px; min-height:26px;}
.self-check{display:none; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px;}
.self-check button{
  font-family:var(--font); font-size:18px; border:none; border-radius:var(--radius);
  padding:15px 10px; cursor:pointer; color:#fff;
}
.self-check .yes{background:var(--mint); box-shadow:0 5px 0 var(--mint-dark);}
.self-check .almost{background:var(--sun); box-shadow:0 5px 0 var(--sun-dark); color:var(--ink);}

/* WRITING */
.write-stage{text-align:center;}
.reveal-word{
  font-size:clamp(26px,7vw,42px); font-weight:700; letter-spacing:1.5px; text-wrap:balance;
  background:var(--card); border-radius:var(--radius); padding:18px;
  box-shadow:0 7px 0 var(--card-edge); margin:20px 0;
}
.reveal-word.hidden-word{color:transparent; text-shadow:0 0 18px var(--ink-soft);}
.big-action{
  font-family:var(--font); font-size:20px; border:none; border-radius:var(--radius);
  padding:15px 24px; cursor:pointer; color:#fff; background:var(--coral);
  box-shadow:0 6px 0 var(--coral-dark); margin:9px 7px;
}
.big-action:active{transform:translateY(4px); box-shadow:0 2px 0 var(--coral-dark);}
.big-action.green{background:var(--mint); box-shadow:0 6px 0 var(--mint-dark);}
.big-action.yellow{background:var(--sun); box-shadow:0 6px 0 var(--sun-dark); color:var(--ink);}
.big-action.purple{background:var(--violet); box-shadow:0 6px 0 var(--violet-dark);}
.paper-tip{
  background:#FFFBEA; border-radius:18px; padding:11px 16px; font-size:15px;
  color:#8a6d1a; margin-bottom:10px; box-shadow:0 4px 0 #EBDFB0;
}

/* RESULTADOS */
#results{justify-content:center; text-align:center;}
.result-stars{font-size:60px; letter-spacing:6px; margin:10px 0;}
.result-msg{font-size:26px; font-weight:700; text-wrap:balance;}
.result-detail{color:var(--ink-soft); font-size:18px; margin:8px 0 8px;}
.rank-up{
  display:none; background:linear-gradient(135deg,#FFF6DE,#FFEDB8); border-radius:var(--radius);
  padding:16px; margin:10px 0 14px; box-shadow:0 6px 0 var(--sun-dark); font-size:19px; font-weight:700;
}

/* TUTORIAL */
.tut-overlay{display:none; position:fixed; inset:0; z-index:100; background:#1E3A5FCC; padding:18px; overflow-y:auto;}
.tut-overlay.open{display:flex; align-items:center; justify-content:center;}
.tut-card{
  background:var(--card); border-radius:30px; padding:26px 22px; max-width:480px; width:100%;
  box-shadow:0 10px 0 #16304E; text-align:center; animation:tutIn .35s;
}
@keyframes tutIn{from{transform:translateY(40px) scale(.95); opacity:0;}}
.tut-card .mascot{font-size:64px;}
.tut-card h2{font-size:26px; margin:8px 0 4px; text-wrap:balance;}
.tut-steps{text-align:left; margin:16px 0 6px; display:flex; flex-direction:column; gap:12px;}
.tut-step{display:flex; gap:14px; align-items:center; background:var(--sky); border-radius:18px; padding:12px 14px;}
.tut-step .ic{font-size:34px; flex:0 0 auto;}
.tut-step p{margin:0; font-size:17px; line-height:1.45;}
.tut-actions{display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap;}
.tut-voice{
  font-family:var(--font); font-size:19px; border:none; border-radius:20px;
  padding:14px 22px; cursor:pointer; background:var(--sky-deep); color:var(--ink);
  box-shadow:0 5px 0 #B7D4EC;
}
.tut-voice:active{transform:translateY(3px); box-shadow:0 2px 0 #B7D4EC;}
.tut-go{
  font-family:var(--font); font-size:21px; border:none; border-radius:20px;
  padding:14px 30px; cursor:pointer; background:var(--coral); color:#fff;
  box-shadow:0 5px 0 var(--coral-dark);
}
.tut-go:active{transform:translateY(3px); box-shadow:0 2px 0 var(--coral-dark);}

/* NOMBRE */
.name-input{
  width:100%; font-family:var(--font); font-size:22px; text-align:center;
  color:var(--ink); background:var(--sky); border:none; border-radius:20px;
  padding:14px 16px; margin:4px 0; box-shadow:inset 0 3px 6px #0001;
  outline:none;
}
.name-input:focus{box-shadow:inset 0 3px 6px #0001, 0 0 0 3px var(--sun);}

/* AJUSTES DE VOZ */
.voice-gear{
  position:absolute; top:14px; right:14px;
  font-family:var(--font); font-size:17px; border:none; background:var(--card);
  color:var(--ink); border-radius:16px; padding:9px 14px;
  box-shadow:0 4px 0 var(--card-edge); cursor:pointer;
}
.voice-gear:active{transform:translateY(3px); box-shadow:0 1px 0 var(--card-edge);}
.voice-group{margin-top:14px;}
.voice-group h3{font-size:19px; margin:0 0 8px; text-align:left;}
.voice-list{display:flex; flex-direction:column; gap:14px;}
.voice-item{
  display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--card); border:none; border-radius:20px;
  padding:13px 16px; font-family:var(--font); font-size:17px; color:var(--ink);
  cursor:pointer; box-shadow:0 5px 0 var(--card-edge);
}
.voice-item:active{transform:translateY(3px); box-shadow:0 2px 0 var(--card-edge);}
.voice-item.sel{background:linear-gradient(135deg,#E4FBF0,#CDF5E3); box-shadow:0 5px 0 var(--mint-dark);}
.voice-item .check{font-size:22px; width:28px;}
.voice-item small{display:block; color:var(--ink-soft); font-size:13px;}
.voice-empty{color:var(--ink-soft); font-size:15px; background:#FFFFFF88; border-radius:16px; padding:12px;}

/* TOUR GUIADO (spotlight) */
.tour-layer{display:none; position:fixed; inset:0; z-index:95;}
.tour-layer.open{display:block;}
.tour-blocker{position:absolute; inset:0;}
.tour-hole{
  position:absolute; border-radius:26px; pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(22,48,78,.78);
  outline:4px solid var(--sun); outline-offset:2px;
  transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease;
}
.tour-hand{
  position:absolute; font-size:46px; pointer-events:none; z-index:97;
  animation:handBob 1s ease-in-out infinite;
  filter:drop-shadow(0 3px 5px #0007);
  transition:left .35s ease, top .35s ease;
}
@keyframes handBob{50%{transform:translateY(-12px);}}
.tour-bubble{
  position:absolute; z-index:98; background:var(--card); border-radius:22px;
  padding:16px 18px; max-width:340px; width:calc(100% - 32px);
  box-shadow:0 8px 0 #16304E88; font-size:18px; line-height:1.45;
  transition:left .35s ease, top .35s ease;
}
.tour-bubble .owl{font-size:30px; float:left; margin-right:10px;}
.tour-btns{display:flex; gap:10px; margin-top:14px; justify-content:flex-end;}
.tour-skip{
  font-family:var(--font); font-size:16px; border:none; border-radius:16px;
  padding:10px 16px; cursor:pointer; background:var(--sky-deep); color:var(--ink-soft);
  box-shadow:0 4px 0 #B7D4EC;
}
.tour-next{
  font-family:var(--font); font-size:18px; border:none; border-radius:16px;
  padding:10px 22px; cursor:pointer; background:var(--coral); color:#fff;
  box-shadow:0 4px 0 var(--coral-dark);
}
.tour-next:active{transform:translateY(3px); box-shadow:0 1px 0 var(--coral-dark);}

canvas#confetti{position:fixed; inset:0; pointer-events:none; z-index:150;}