:root{--ink:#2b1d4f;--pri:#7c4dff;--priD:#5a2fd6;--sun:#ffd23f;--sunD:#e0a800;--pink:#ff5fa2;--pinkD:#d63b7f;--ok:#22b573}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#070b2e;font-family:Fredoka,"Segoe UI Rounded","Trebuchet MS",system-ui,sans-serif;color:var(--ink)}
button{font-family:inherit;color:inherit;cursor:pointer}
.hide{display:none!important}
#bg{position:fixed;inset:0;background:#070b2e center/cover no-repeat;transition:background-image .5s}
#bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,40,.05),rgba(10,8,40,.35))}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* botones */
.btn{border:0;border-radius:18px;padding:14px 28px;font-size:22px;font-weight:700;color:#fff;background:var(--pri);box-shadow:0 6px 0 var(--priD),0 10px 18px rgba(0,0,0,.25);transition:transform .05s}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--priD)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:0 6px 0 var(--sunD),0 10px 18px rgba(0,0,0,.25)}
.btn.ghost{background:#fff;color:var(--pri);box-shadow:0 6px 0 #cfc3ff,0 10px 18px rgba(0,0,0,.15)}
.btn.mic{background:var(--pink);box-shadow:0 6px 0 var(--pinkD),0 10px 18px rgba(0,0,0,.25)}
.btn.big{font-size:26px;padding:18px 36px;border-radius:999px}
.btn.rec{filter:brightness(1.15);animation:beat .7s infinite}
.pill{background:rgba(255,255,255,.94);border:0;border-radius:999px;padding:6px 14px;font-weight:700;font-size:20px;box-shadow:0 4px 0 rgba(0,0,0,.18);white-space:nowrap}

/* pantallas de la lección */
#ui{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));overflow:auto}
.top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;display:flex;gap:8px;align-items:center}
.top .sp{flex:1}
.card{background:#fff;border-radius:30px;padding:20px 22px;max-width:620px;width:100%;text-align:center;box-shadow:0 10px 0 rgba(43,29,79,.3),0 26px 50px rgba(0,0,0,.4);animation:pop .3s}
.card h1{margin:4px 0;font-size:clamp(26px,5vw,40px);color:var(--pri);line-height:1.05}
.card h2{margin:6px 0;font-size:clamp(22px,4vw,30px)}
.card p{font-size:clamp(16px,2.6vw,20px);font-weight:600;margin:8px 0}
.card .sub{color:var(--pri);font-size:18px;margin:0}
.luna{height:clamp(90px,20vh,150px)}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.inp{font:inherit;font-size:26px;font-weight:700;text-align:center;border:4px solid #cfc3ff;border-radius:18px;padding:8px;width:min(320px,90%);color:var(--pri);outline:none;user-select:text;-webkit-user-select:text}
.tiny{display:inline-block;margin-top:10px;font-size:14px;color:#8a7fb0;background:none;border:0;text-decoration:underline}

/* camino de la lección en el inicio */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.step{border:0;background:#f1ecff;border-radius:16px;padding:10px 4px;font-size:14px;font-weight:700;position:relative}
.step b{display:block;font-size:28px;line-height:1.2}
.step.done{background:#dff7ea}
.step.done::after{content:"✓";position:absolute;top:-6px;right:-4px;background:var(--ok);color:#fff;border-radius:50%;width:22px;height:22px;font-size:14px;line-height:22px}
.step.now{outline:4px solid var(--sun)}
.step.lock{opacity:.45}

/* tarjeta de palabra (aprende y repite) */
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.45);border:2px solid #fff}
.dots i.on{background:var(--sun)}
.word{background:rgba(255,255,255,.96);border-radius:30px;padding:16px 22px;max-width:560px;width:100%;text-align:center;box-shadow:0 10px 0 rgba(43,29,79,.3),0 26px 50px rgba(0,0,0,.35);animation:pop .3s}
.word .emoji{font-size:clamp(48px,10vh,84px);line-height:1.1}
.word .when{font-size:clamp(15px,2.4vw,19px);font-weight:600;color:#6a5f8f}
.word .en{font-size:clamp(34px,7vw,58px);font-weight:700;color:var(--pri);line-height:1.1;margin:4px 0}
.word .es{font-size:clamp(17px,3vw,24px);font-weight:600}
.word .fb{min-height:30px;font-size:clamp(16px,2.6vw,20px);font-weight:600;margin-top:8px}
.word .en.say{animation:glow .9s}
.say-hint{color:#fff;font-weight:700;font-size:clamp(17px,2.8vw,22px);text-shadow:0 2px 6px rgba(0,0,0,.7);text-align:center}

/* atrapa el poder */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:520px;width:100%}
.pick{border:5px solid #fff;border-radius:24px;aspect-ratio:16/10;background:center/cover no-repeat;font-size:clamp(40px,9vw,64px);box-shadow:0 8px 0 rgba(0,0,0,.3);position:relative;overflow:hidden}
.pick.ok{border-color:var(--ok);animation:pop .3s}
.pick.no{animation:shake .35s}
.pick span{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.92);font-size:clamp(14px,2.6vw,18px);font-weight:700;padding:4px}

.stars{font-size:54px;letter-spacing:6px}
.powers{font-size:34px;letter-spacing:8px}

/* marcadores de la misión */
#hud{position:fixed;inset:0;pointer-events:none;padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
#hud>*{pointer-events:auto}
.hrow{display:flex;align-items:center;gap:10px}
.sp{flex:1}
#prompt{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);font-size:clamp(18px,2.6vw,28px);max-width:94vw;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#prompt b{color:var(--pri)}
#ebox{position:absolute;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:min(300px,42vw)}
#ebar{height:26px;border-radius:999px;background:rgba(255,255,255,.55);overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.2);border:3px solid #fff}
#ebar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5fa2,#ffd23f);transition:width .2s}
#ebox small{color:#fff;font-weight:700;font-size:16px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
#turbo{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:clamp(18px,2.6vw,26px);padding:14px 26px;white-space:nowrap;animation:pulse .8s infinite}
#turbo.rec{animation:none}
#keys{position:absolute;right:16px;bottom:16px;color:#fff;font-weight:600;font-size:15px;text-align:right;text-shadow:0 2px 4px rgba(0,0,0,.7);pointer-events:none}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .6s}
#flash.on{opacity:.95;transition:none}
#flash.red{background:#ff3b4a}
#speed{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at 50% 55%,transparent 30%,rgba(255,210,63,.35) 70%,rgba(255,95,162,.55) 100%)}
#speed.on{opacity:1}
#big{position:fixed;left:0;right:0;top:32%;text-align:center;font-size:clamp(40px,8vw,90px);font-weight:700;color:#fff;text-shadow:0 5px 0 var(--priD),0 10px 24px rgba(0,0,0,.5);pointer-events:none;opacity:0}
#big.on{animation:big 1.3s ease-out}

@keyframes pulse{50%{transform:translateX(-50%) scale(1.07)}}
@keyframes pulse2{50%{transform:scale(1.06)}}
@keyframes beat{50%{transform:scale(1.06)}}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes glow{50%{color:var(--pink);transform:scale(1.06)}}
@keyframes big{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}

/* celulares y tablets */
@media (pointer:coarse),(max-width:900px){#keys{display:none}}
@media (max-width:600px){
  #hud{padding-left:8px;padding-right:8px}.hrow{gap:6px}.pill{font-size:15px;padding:5px 10px}#rep .t{display:none}
  #prompt{top:calc(50px + env(safe-area-inset-top));font-size:16px;text-align:center;width:92vw;border-radius:18px;white-space:normal}
  #turbo{bottom:calc(74px + env(safe-area-inset-bottom));font-size:17px;padding:12px 16px;max-width:94vw}#ebox{width:46vw}
  .card{padding:16px 14px;border-radius:24px}.btn{font-size:19px;padding:12px 20px}.btn.big{font-size:22px;padding:16px 28px}.step{font-size:12px}
}
@media (max-height:480px){
  #ui{gap:6px;padding-top:6px;padding-bottom:6px}
  .pill{font-size:15px;padding:4px 10px}#prompt{top:46px;font-size:16px}#ebox{width:24vw;bottom:10px}
  #turbo{left:auto;right:12px;bottom:12px;transform:none;animation-name:pulse2;font-size:16px;padding:10px 16px}
  .card{padding:10px 18px}.luna{height:64px;float:left;margin-right:10px}.card h1{font-size:24px}.card p{font-size:15px;margin:4px 0}
  .steps{margin:6px 0}.step{padding:4px}.step b{font-size:20px;display:inline}.inp{font-size:20px;padding:5px}.row{margin:6px 0 2px}.stars{font-size:34px}
  .word{padding:8px 18px}.word .emoji{font-size:34px;float:left}.word .en{font-size:32px}.btn.big{font-size:19px;padding:10px 24px}
  .grid{grid-template-columns:repeat(4,1fr);max-width:96vw}.top{display:none}
}