@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');
:root{
  --bg:#0d1117;--card:#161b27;--card2:#1c2333;--bord:#2a3347;
  --green:#39d98a;--blue:#4da6ff;--purple:#a855f7;--orange:#ff8c42;
  --yellow:#ffd166;--red:#ff4757;--cyan:#00d4ff;--pink:#ff6b9d;
  --white:#e8edf5;--muted:#6b7a99;--gold:#ffd700;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:18px;}
html,body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--white);
  min-height:100vh;overflow-x:hidden;overscroll-behavior:none;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(168,85,247,.12) 0%,transparent 65%),
    radial-gradient(ellipse 50% 50% at 90% 90%,rgba(77,166,255,.08) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 60%,rgba(57,217,138,.07) 0%,transparent 55%);}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(77,166,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,166,255,.035) 1px,transparent 1px);
  background-size:42px 42px;}
#confetti-cv{position:fixed;inset:0;z-index:800;pointer-events:none;}
.ptcl{position:fixed;pointer-events:none;z-index:810;font-size:1.5rem;
  animation:pfloat 1.3s ease-out forwards;}
@keyframes pfloat{0%{opacity:1;transform:translateY(0) scale(1);}
  100%{opacity:0;transform:translateY(-140px) scale(1.4);}}

/* HUD */
#hud{position:fixed;top:0;left:0;right:0;z-index:300;
  padding:calc(var(--safe-t)+6px) 12px 8px;
  background:linear-gradient(180deg,rgba(13,17,23,.97) 0%,rgba(13,17,23,.82) 100%);
  border-bottom:1px solid rgba(168,85,247,.4);
  box-shadow:0 2px 18px rgba(168,85,247,.15);
  display:flex;align-items:center;gap:8px;}
.hud-home{display:flex;align-items:center;gap:5px;
  font-family:'Fredoka One',cursive;font-size:.72rem;letter-spacing:1.5px;
  color:var(--muted);text-decoration:none;
  padding:4px 10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;
  transition:all .15s;flex-shrink:0;}
.hud-home:hover,.hud-home:active{color:var(--white);border-color:rgba(168,85,247,.4);
  background:rgba(168,85,247,.1);}
.hud-logo{font-family:'Fredoka One',cursive;font-size:1.1rem;letter-spacing:2px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;display:flex;align-items:center;gap:5px;}
.hud-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--purple);box-shadow:0 0 8px var(--purple);
  animation:bdot 1.5s infinite;-webkit-text-fill-color:initial;}
@keyframes bdot{0%,100%{opacity:1}50%{opacity:.2}}
.hud-chips{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.hchip{font-family:'Fredoka One',cursive;font-size:.82rem;letter-spacing:1px;
  padding:5px 11px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;
  color:var(--muted);display:flex;align-items:center;gap:3px;white-space:nowrap;}
.hchip b{color:var(--gold);}
.hchip.p{border-color:rgba(168,85,247,.4);}.hchip.b{border-color:rgba(77,166,255,.4);}
.hchip.g{border-color:rgba(57,217,138,.4);}
.xpw{width:44px;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;}
.xpf{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:3px;transition:width .5s;}

/* SOUND TOGGLE */
.snd-btn{padding:4px 9px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;
  color:var(--muted);font-size:.85rem;cursor:pointer;flex-shrink:0;
  transition:all .15s;touch-action:manipulation;}
.snd-btn.on{border-color:rgba(57,217,138,.4);color:var(--green);}

/* APP */
#app{position:relative;z-index:10;
  padding:calc(var(--safe-t)+60px) 12px calc(var(--safe-b)+24px);
  max-width:660px;margin:0 auto;}
.scr{display:none;}.scr.on{display:block;}
#s-title.on{display:flex;}

/* TITLE */
#s-title{display:flex;flex-direction:column;align-items:center;
  padding:10px 14px 28px;text-align:center;}
.title-anim{width:140px;height:140px;position:relative;margin:8px auto 0;}
.ta-ring{position:absolute;inset:0;border-radius:50%;
  border:3px solid var(--purple);animation:spin-ring 6s linear infinite;
  box-shadow:0 0 18px var(--purple);}
@keyframes spin-ring{to{transform:rotate(360deg);}}
.ta-inner{position:absolute;inset:14px;border-radius:50%;
  background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(77,166,255,.2));
  display:flex;align-items:center;justify-content:center;font-size:2.8rem;
  animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.title-tag{font-family:'Fredoka One',cursive;font-size:.65rem;letter-spacing:5px;
  color:var(--purple);margin-top:14px;}
.title-main{font-family:'Fredoka One',cursive;font-size:clamp(2.5rem,6vw,4rem);
  line-height:1.05;margin:4px 0;
  background:linear-gradient(135deg,var(--purple),var(--cyan),var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.title-sub{font-size:1rem;color:var(--muted);letter-spacing:.5px;}
.title-chars{display:flex;align-items:flex-end;justify-content:center;
  gap:18px;height:70px;margin:12px 0 6px;position:relative;}
.tc{font-size:3.5rem;animation:bob 2.5s ease-in-out infinite;}
.tc:nth-child(2){animation-delay:.4s;}.tc:nth-child(3){animation-delay:.8s;}
.tc-ground{position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),var(--purple),transparent);
  box-shadow:0 0 8px rgba(168,85,247,.5);}
.pcard{background:var(--card);border:1px solid var(--bord);border-top:3px solid var(--purple);
  border-radius:8px;padding:14px 16px;width:100%;max-width:400px;margin:12px auto;
  display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;}
.pcard::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(168,85,247,.05),transparent 60%);pointer-events:none;}
.pav{width:54px;height:54px;border-radius:6px;flex-shrink:0;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;box-shadow:0 4px 12px rgba(168,85,247,.4);}
.pinfo{flex:1;text-align:left;}
.pname{font-family:'Fredoka One',cursive;font-size:1.15rem;letter-spacing:2px;}
.pstats{display:flex;gap:8px;margin-top:3px;}
.pst{font-family:'Fredoka One',cursive;font-size:.78rem;letter-spacing:1px;color:var(--muted);}
.pst span{color:var(--gold);}
.prank{position:absolute;top:8px;right:9px;font-family:'Fredoka One',cursive;
  font-size:.72rem;letter-spacing:2px;background:rgba(168,85,247,.15);
  border:1px solid rgba(168,85,247,.35);border-radius:3px;padding:2px 7px;color:var(--purple);}
.btn-start{font-family:'Fredoka One',cursive;font-size:1.45rem;letter-spacing:3px;
  padding:18px 40px;border:none;border-radius:6px;cursor:pointer;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;margin-top:16px;width:100%;max-width:300px;
  box-shadow:0 6px 22px rgba(168,85,247,.45);
  transition:transform .15s;position:relative;overflow:hidden;
  touch-action:manipulation;animation:btn-glow 2.5s ease-in-out infinite;}
@keyframes btn-glow{0%,100%{box-shadow:0 6px 22px rgba(168,85,247,.4);}
  50%{box-shadow:0 8px 32px rgba(168,85,247,.7),0 0 40px rgba(168,85,247,.2);}}
.btn-start::before{content:'';position:absolute;top:-50%;left:-60%;width:50%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-20deg);animation:sheen 3s infinite;}
@keyframes sheen{0%{left:-60%}100%{left:160%}}
.btn-start:active{transform:scale(.95);}
.feat-row{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;
  margin-top:14px;max-width:320px;}
.ftag{font-family:'Fredoka One',cursive;font-size:.75rem;letter-spacing:1.5px;
  padding:5px 11px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:3px;color:var(--muted);}
.ftag.h{border-color:rgba(168,85,247,.4);color:var(--purple);}

/* MISSIONS */
#s-missions{padding:8px 0 16px;}
.sec-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.sec-t{font-family:'Fredoka One',cursive;font-size:1.5rem;letter-spacing:3px;}
.sec-l{flex:1;height:1px;background:linear-gradient(90deg,rgba(168,85,247,.5),transparent);}
.sec-s{font-size:.9rem;color:var(--muted);margin-bottom:12px;}
.ach-row{display:flex;gap:5px;overflow-x:auto;padding:3px 0 9px;scrollbar-width:none;}
.ach-row::-webkit-scrollbar{display:none;}
.ach{font-family:'Fredoka One',cursive;font-size:.75rem;letter-spacing:1.5px;
  padding:4px 10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:3px;
  color:var(--muted);white-space:nowrap;flex-shrink:0;}
.ach.e{background:rgba(255,215,0,.1);border-color:rgba(255,215,0,.45);color:var(--gold);}
.mlist{display:flex;flex-direction:column;gap:9px;}
.mcard{background:var(--card);border:1px solid var(--bord);border-radius:8px;
  padding:13px 13px;cursor:pointer;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;transition:transform .15s;
  min-height:88px;touch-action:manipulation;-webkit-user-select:none;user-select:none;}
.mcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--mc,var(--purple));box-shadow:0 0 7px var(--mc,var(--purple));}
.mcard:active{transform:scale(.97);}
.mnum{font-family:'Fredoka One',cursive;font-size:.58rem;letter-spacing:2px;
  color:var(--muted);position:absolute;top:7px;right:10px;}
.mic{width:58px;height:58px;border-radius:6px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  font-size:2rem;
  position:relative;z-index:1;}
.mbody{flex:1;min-width:0;position:relative;z-index:1;}
.mtitle{font-family:'Fredoka One',cursive;font-size:1.05rem;letter-spacing:1.5px;margin-bottom:2px;}
.mdesc{font-size:.82rem;color:var(--muted);margin-bottom:5px;}
.mmeta{display:flex;gap:7px;align-items:center;}
.mstars{letter-spacing:2px;font-size:.9rem;}
.mxp{font-family:'Fredoka One',cursive;font-size:.72rem;letter-spacing:1.5px;
  background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3);
  border-radius:3px;padding:2px 7px;color:var(--purple);}
.marr{font-size:1.2rem;color:var(--muted);z-index:1;flex-shrink:0;}

/* GAME */
#s-game{padding:8px 0 16px;}
.gtop{display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--bord);border-top:3px solid var(--purple);
  border-radius:8px;padding:11px 12px;margin-bottom:10px;}
.gtico{font-size:2.2rem;flex-shrink:0;}
.gtinfo{flex:1;min-width:0;}
.gttitle{font-family:'Fredoka One',cursive;font-size:1.1rem;letter-spacing:2px;}
.gtsub{font-size:.85rem;color:var(--muted);}
.btn-exit{font-family:'Fredoka One',cursive;font-size:.82rem;letter-spacing:2px;
  padding:9px 14px;background:rgba(255,71,87,.15);border:1px solid rgba(255,71,87,.4);
  border-radius:4px;color:var(--red);cursor:pointer;flex-shrink:0;
  touch-action:manipulation;}
.progw{background:var(--card);border:1px solid var(--bord);border-radius:6px;
  padding:9px 13px;margin-bottom:10px;}
.progl{display:flex;justify-content:space-between;align-items:center;
  font-family:'Fredoka One',cursive;font-size:.85rem;letter-spacing:1.5px;
  color:var(--muted);margin-bottom:6px;}
.progl .ok{color:var(--green);}
.progt{height:10px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.progf{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:3px;transition:width .5s;}
.expl{background:var(--card);border:1px solid var(--bord);border-left:4px solid var(--cyan);
  border-radius:8px;padding:14px;margin-bottom:12px;}
.expl-t{font-family:'Fredoka One',cursive;font-size:1rem;letter-spacing:2px;
  color:var(--cyan);margin-bottom:8px;}
.expl-b{font-size:1.05rem;line-height:1.7;color:rgba(232,237,245,.85);}
.expl-ex{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--yellow);border-radius:4px;
  padding:11px 16px;font-family:'Fredoka One',cursive;font-size:1.05rem;
  color:var(--yellow);margin:9px 0;letter-spacing:.5px;}
.qcard{background:var(--card);border:1px solid var(--bord);border-radius:8px;
  padding:16px 14px;margin-bottom:12px;position:relative;overflow:hidden;}
.qcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple),var(--cyan),var(--green));}
.qlbl{display:flex;align-items:center;justify-content:space-between;
  font-family:'Fredoka One',cursive;font-size:.8rem;letter-spacing:2.5px;
  color:var(--muted);margin-bottom:11px;}
.qleft{display:flex;align-items:center;gap:6px;color:var(--orange);}
.qtext{font-family:'Fredoka One',cursive;font-size:clamp(1.4rem,3.5vw,2rem);
  color:var(--white);text-align:center;margin:10px 0;min-height:42px;
  display:flex;align-items:center;justify-content:center;line-height:1.3;flex-wrap:wrap;gap:4px;}
.qctx{font-size:1rem;color:rgba(232,237,245,.75);text-align:center;
  margin-bottom:6px;line-height:1.6;}
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;}
.mc-opt{font-family:'Fredoka One',cursive;font-size:1.35rem;padding:18px 12px;
  background:rgba(255,255,255,.05);border:1px solid var(--bord);border-radius:6px;
  color:var(--white);cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s;
  min-height:56px;display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;}
.mc-opt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--bord);border-radius:3px 0 0 3px;}
.mc-opt.answered{pointer-events:none;}
.mc-opt.correct{background:rgba(57,217,138,.12);border-color:var(--green);color:var(--green);}
.mc-opt.correct::before{background:var(--green);}
.mc-opt.wrong{background:rgba(255,71,87,.1);border-color:var(--red);color:var(--red);
  animation:shake .4s ease;}
.mc-opt.wrong::before{background:var(--red);}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.ans-wrap{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.ans-inp{font-family:'Fredoka One',cursive;font-size:1.9rem;
  width:180px;padding:12px 16px;background:rgba(255,255,255,.06);
  border:2px solid var(--bord);border-radius:6px;color:var(--white);
  text-align:center;outline:none;transition:border-color .2s;letter-spacing:2px;
  touch-action:manipulation;}
.ans-inp:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,212,255,.18);}
.ans-inp.correct{border-color:var(--green);background:rgba(57,217,138,.1);}
.ans-inp.wrong{border-color:var(--red);background:rgba(255,71,87,.08);animation:shake .4s ease;}
.btn-check{font-family:'Fredoka One',cursive;font-size:1.05rem;letter-spacing:2px;
  padding:14px 24px;background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;border:none;border-radius:6px;cursor:pointer;
  box-shadow:0 4px 14px rgba(168,85,247,.38);transition:transform .15s;
  touch-action:manipulation;min-height:48px;min-width:100px;}
.btn-check:active{transform:scale(.95);}
.gap-sent{font-size:1.05rem;line-height:2.2;text-align:center;margin:10px 0;}
.gap-inp{font-family:'Fredoka One',cursive;font-size:1rem;
  width:100px;padding:3px 8px;background:rgba(255,255,255,.08);
  border:none;border-bottom:2px solid var(--cyan);color:var(--white);
  text-align:center;outline:none;letter-spacing:1px;border-radius:3px 3px 0 0;}
.gap-inp.correct{border-bottom-color:var(--green);background:rgba(57,217,138,.08);}
.gap-inp.wrong{border-bottom-color:var(--red);animation:shake .4s ease;}
.dnd-area{margin-top:12px;}
.dnd-targets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.dnd-target{min-height:46px;border:2px dashed var(--bord);border-radius:6px;
  padding:8px 12px;display:flex;align-items:center;gap:8px;
  font-size:.88rem;color:var(--muted);transition:border-color .2s;flex-wrap:wrap;}
.dnd-target.over{border-color:var(--cyan);background:rgba(0,212,255,.06);}
.dnd-target.filled{border-style:solid;}
.dnd-target.correct{border-color:var(--green);background:rgba(57,217,138,.08);color:var(--green);}
.dnd-target.wrong{border-color:var(--red);background:rgba(255,71,87,.06);color:var(--red);}
.dnd-slot-label{font-family:'Fredoka One',cursive;font-size:.65rem;letter-spacing:1.5px;
  color:var(--muted);white-space:nowrap;}
.dnd-placed{font-family:'Fredoka One',cursive;font-size:.95rem;color:var(--cyan);}
.dnd-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
.dchip{font-family:'Fredoka One',cursive;font-size:1.1rem;
  padding:11px 18px;background:rgba(168,85,247,.15);
  border:1px solid rgba(168,85,247,.4);border-radius:5px;
  color:var(--purple);cursor:grab;transition:all .15s;
  touch-action:none;-webkit-user-select:none;user-select:none;}
.dchip.dragging{opacity:.4;}.dchip.used{opacity:.25;pointer-events:none;}
.sent-analysis{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0;}
.word-btn{font-family:'Fredoka One',cursive;font-size:1.2rem;padding:12px 18px;
  background:rgba(255,255,255,.07);border:1px solid var(--bord);border-radius:5px;
  color:var(--white);cursor:pointer;transition:all .2s;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;}
.word-btn.selected-subj{background:rgba(57,217,138,.2);border-color:var(--green);color:var(--green);}
.word-btn.correct-hl{background:rgba(57,217,138,.25);border-color:var(--green);}
.word-btn.wrong-hl{background:rgba(255,71,87,.15);border-color:var(--red);}
.fb{display:none;border-radius:6px;padding:14px 18px;margin-top:10px;
  font-family:'Fredoka One',cursive;font-size:1.05rem;letter-spacing:1px;
  text-align:center;animation:slideup .22s ease;}
@keyframes slideup{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.fb.ok{background:rgba(57,217,138,.1);border:1px solid var(--green);color:var(--green);}
.fb.err{background:rgba(255,140,66,.1);border:1px solid var(--orange);color:var(--orange);}
.btn-next{display:none;width:100%;font-family:'Fredoka One',cursive;font-size:1.15rem;
  letter-spacing:3px;padding:16px;background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:10px;
  box-shadow:0 4px 14px rgba(77,166,255,.32);transition:transform .15s;
  touch-action:manipulation;min-height:50px;}
.btn-next.on{display:block;animation:slideup .22s ease;}
.btn-next:active{transform:scale(.97);}
.btn-hint{display:flex;align-items:center;gap:5px;background:rgba(255,209,102,.08);
  border:1px solid rgba(255,209,102,.22);border-radius:4px;padding:9px 14px;
  font-family:'Fredoka One',cursive;font-size:.8rem;letter-spacing:2px;
  color:rgba(255,209,102,.7);cursor:pointer;margin-top:10px;touch-action:manipulation;}
.hint-box{display:none;background:rgba(255,209,102,.07);border:1px solid rgba(255,209,102,.2);
  border-radius:4px;padding:11px 15px;margin-top:8px;font-size:1rem;
  font-weight:700;color:rgba(255,209,102,.85);animation:slideup .2s ease;}
.cross-wrap{background:rgba(255,255,255,.04);border:1px solid var(--bord);
  border-radius:6px;padding:12px;margin:9px 0;}

/* RESULTS */
#s-results{padding:16px 0 24px;text-align:center;}
.res-banner{background:var(--card);border:1px solid var(--bord);
  border-top:3px solid var(--gold);border-radius:8px;
  padding:24px 18px;margin-bottom:14px;position:relative;overflow:hidden;}
.res-banner::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,215,0,.09) 0%,transparent 60%);
  pointer-events:none;}
.res-trophy{font-size:3.6rem;animation:bob 2s ease-in-out infinite;display:block;margin-bottom:6px;}
.res-title{font-family:'Fredoka One',cursive;font-size:2rem;letter-spacing:3px;color:var(--gold);}
.res-score{font-family:'Fredoka One',cursive;font-size:4.5rem;letter-spacing:3px;line-height:1;}
.res-stars{font-size:1.9rem;letter-spacing:6px;margin:9px 0;}
.res-msg{font-size:1rem;color:var(--muted);margin-top:6px;}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px;}
.rstat{background:var(--card);border:1px solid var(--bord);border-radius:6px;padding:12px 6px;}
.rsv{font-family:'Fredoka One',cursive;font-size:1.8rem;display:block;margin-bottom:2px;}
.rsl{font-family:'Fredoka One',cursive;font-size:.56rem;letter-spacing:2px;color:var(--muted);}
.btn-res{width:100%;font-family:'Fredoka One',cursive;font-size:.92rem;letter-spacing:3px;
  padding:15px;border:none;border-radius:6px;cursor:pointer;margin-top:9px;
  transition:transform .15s;touch-action:manipulation;min-height:50px;}
.btn-res:active{transform:scale(.97);}
.btn-res.p{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;
  box-shadow:0 4px 18px rgba(168,85,247,.38);}
.btn-res.s{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:var(--muted);}

/* TRAINING */
#s-training{padding:8px 0 16px;}
.kt-header{background:var(--card);border:1px solid var(--bord);border-top:3px solid var(--red);
  border-radius:8px;padding:14px;margin-bottom:12px;text-align:center;}
.kt-title{font-family:'Fredoka One',cursive;font-size:1.4rem;letter-spacing:2px;color:var(--red);}
.kt-sub{font-size:.95rem;color:var(--muted);margin-top:4px;}
.kt-timer{font-family:'Fredoka One',cursive;font-size:2rem;color:var(--yellow);
  margin-top:8px;letter-spacing:3px;}
.kt-parts{display:flex;flex-direction:column;gap:18px;}
.kt-part{background:var(--card);border:1px solid var(--bord);border-radius:8px;padding:14px;}
.kt-part-title{font-family:'Fredoka One',cursive;font-size:1.05rem;letter-spacing:2px;
  color:var(--cyan);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.kt-part-num{font-family:'Fredoka One',cursive;font-size:.65rem;
  background:rgba(0,212,255,.15);border:1px solid rgba(0,212,255,.3);
  border-radius:3px;padding:2px 7px;color:var(--cyan);}
.kt-item{margin-bottom:12px;}
.kt-q{font-size:1.05rem;color:var(--white);margin-bottom:6px;line-height:1.6;}
.kt-inp{font-family:'Fredoka One',cursive;font-size:1.1rem;
  width:100%;padding:8px 12px;background:rgba(255,255,255,.06);
  border:1px solid var(--bord);border-bottom:2px solid var(--cyan);
  border-radius:4px 4px 0 0;color:var(--white);outline:none;margin-top:4px;
  touch-action:manipulation;}
.kt-inp:focus{border-bottom-color:var(--purple);}
.kt-mc{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px;}
.kt-opt{font-family:'Fredoka One',cursive;font-size:1.05rem;
  padding:13px 10px;background:rgba(255,255,255,.05);
  border:1px solid var(--bord);border-radius:5px;color:var(--white);
  cursor:pointer;text-align:center;touch-action:manipulation;
  transition:all .15s;-webkit-user-select:none;user-select:none;}
.kt-opt.sel{background:rgba(168,85,247,.2);border-color:var(--purple);color:var(--purple);}
.kt-opt.kt-correct{background:rgba(57,217,138,.15);border-color:var(--green);color:var(--green);}
.kt-opt.kt-wrong{background:rgba(255,71,87,.1);border-color:var(--red);color:var(--red);}
.kt-inp.kt-correct{border-bottom-color:var(--green);background:rgba(57,217,138,.06);}
.kt-inp.kt-wrong{border-bottom-color:var(--red);background:rgba(255,71,87,.06);}
.analysis-card{background:var(--card);border:1px solid var(--bord);border-radius:8px;
  padding:14px;margin-bottom:10px;}
.analysis-title{font-family:'Fredoka One',cursive;font-size:.82rem;letter-spacing:2px;margin-bottom:10px;}
.analysis-item{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.95rem;line-height:1.6;}
.analysis-item:last-child{border-bottom:none;}
.ai-q{color:var(--muted);margin-bottom:3px;}
.ai-your.ok{color:var(--green);}
.ai-your.err{color:var(--red);}
.ai-correct{color:var(--cyan);font-weight:700;}
.ai-explain{color:var(--muted);font-size:.9rem;margin-top:3px;padding:6px 10px;
  background:rgba(0,212,255,.06);border-left:2px solid var(--cyan);border-radius:0 4px 4px 0;}
.recommend{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);
  border-radius:8px;padding:13px;margin-top:10px;}
.rec-title{font-family:'Fredoka One',cursive;font-size:.8rem;letter-spacing:2px;
  color:var(--purple);margin-bottom:8px;}
.rec-item{font-size:.82rem;color:var(--muted);padding:3px 0;
  display:flex;align-items:center;gap:6px;}
.rec-item::before{content:'→';color:var(--purple);}

/* REWARD */
#rew-ov{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.86);
  backdrop-filter:blur(4px);display:none;align-items:center;
  justify-content:center;flex-direction:column;text-align:center;padding:20px;}
#rew-ov.on{display:flex;}
.rew-panel{background:var(--card);border:1px solid var(--bord);
  border-top:3px solid var(--gold);border-radius:10px;
  padding:36px 30px;max-width:400px;width:100%;
  box-shadow:0 0 50px rgba(255,215,0,.22),0 20px 60px rgba(0,0,0,.6);
  animation:pop-big .45s cubic-bezier(.175,.885,.32,1.275);
  position:relative;z-index:1;}
@keyframes pop-big{from{transform:scale(.6) translateY(30px);opacity:0;}
  to{transform:scale(1) translateY(0);opacity:1;}}
.rew-icon{font-size:3.2rem;margin-bottom:7px;animation:spin-in .5s ease .3s both;}
@keyframes spin-in{from{transform:rotate(-180deg) scale(.5)}to{transform:rotate(0) scale(1)}}
.rew-title{font-family:'Fredoka One',cursive;font-size:1.9rem;letter-spacing:3px;color:var(--gold);}
.rew-sub{font-size:1rem;color:var(--muted);margin:5px 0 16px;}
.rew-gains{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.rew-gain{font-family:'Fredoka One',cursive;font-size:.7rem;letter-spacing:2px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:4px;padding:5px 11px;}
.btn-rew{width:100%;font-family:'Fredoka One',cursive;font-size:.9rem;letter-spacing:3px;
  padding:13px;background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;border:none;border-radius:6px;cursor:pointer;
  box-shadow:0 4px 14px rgba(168,85,247,.38);touch-action:manipulation;}
.btn-rew:active{transform:scale(.97);}

@media(max-width:480px){
  html{font-size:16px;}
  .mc-grid{grid-template-columns:1fr 1fr;}
  .mc-opt{font-size:1rem;padding:12px 7px;}
  .kt-mc{grid-template-columns:1fr;}
  #app{padding-left:10px;padding-right:10px;}
}
@media(max-width:380px){
  html{font-size:15px;}
  .mc-grid{grid-template-columns:1fr 1fr;}
  .mc-opt{font-size:.95rem;padding:11px 6px;}
  .kt-mc{grid-template-columns:1fr;}
}