:root{
  --pink:#ff8fc0;--pink2:#ff5fa8;--pink3:#ffc2dd;--rose:#ff3d8b;--cream:#fff6fa;--white:#fff;
  --text:#4a2c3a;--muted:#9c6f85;--green:#58cc7a;--green2:#3fb865;--red:#ff6b81;--gold:#ffc542;
  --shadow:0 10px 30px rgba(255,95,168,.18);--r:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--text);background:linear-gradient(160deg,#ffe3f0 0%,#ffd1e6 40%,#ffe9f4 100%);background-attachment:fixed;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
button{font-family:inherit}
h1,h2,h3{margin:.2em 0;font-weight:900;line-height:1.15}
h1{font-size:1.7rem}h2{font-size:1.25rem}h3{font-size:1.05rem;color:var(--rose)}
.sub{color:var(--muted);margin:.3em 0 1em;font-weight:700}
.hidden{display:none!important}

/* floating hearts */
#hearts-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#hearts-bg span{position:absolute;bottom:-10vh;font-size:1.4rem;opacity:.55;animation:floatUp linear infinite}
@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.6}100%{transform:translateY(-120vh) rotate(30deg);opacity:0}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
#confetti span{position:absolute;top:-10vh;animation:fall 2.6s ease-in forwards}
@keyframes fall{to{transform:translateY(130vh) rotate(720deg);opacity:.2}}

.screen{display:none;position:relative;z-index:1;max-width:560px;margin:0 auto;padding:16px 16px 40px;min-height:100vh}
.screen.active{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.card{background:var(--white);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.mascot{font-size:3rem;line-height:1;display:inline-block}
.mascot.big{font-size:4.5rem}
.bounce{animation:bounce 2.2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.btn{border:0;border-radius:18px;padding:14px 20px;font-weight:900;font-size:1rem;cursor:pointer;background:#f2e5ec;color:var(--text);box-shadow:0 4px 0 #ddc6d2;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #ddc6d2}
.btn.primary{background:linear-gradient(135deg,var(--pink2),var(--rose));color:#fff;box-shadow:0 5px 0 #c92a6d}
.btn.primary:active{box-shadow:0 1px 0 #c92a6d}
.btn.big{width:100%;font-size:1.1rem;padding:16px}
.btn.ghost{background:transparent;box-shadow:none;color:var(--red);text-decoration:underline}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.iconbtn{border:0;background:#fff;border-radius:50%;width:40px;height:40px;font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow)}

/* gate */
#gate.active{align-items:center;justify-content:center}
#gate.active{display:flex}
.gate-card{width:100%;text-align:center}
.gate-step{text-align:left;margin:12px 0}
.gate-step label{display:block;font-weight:800;margin-bottom:6px}
.gate-step input{width:100%;padding:14px;border-radius:16px;border:3px solid var(--pink3);font:inherit;font-size:1.05rem;outline:none;background:var(--cream)}
.gate-step input:focus{border-color:var(--pink2)}
.gate-msg{min-height:1.4em;font-weight:800;color:var(--rose);margin:6px 0 10px}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* home */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.topbar h2{flex:1}
.stat{background:#fff;border-radius:999px;padding:6px 12px;display:flex;gap:6px;align-items:center;font-weight:900;box-shadow:var(--shadow)}
.stat .ico{font-size:1.1rem}
#btn-sound{margin-left:auto}
.hero{display:flex;gap:14px;align-items:center}
.bubble{position:relative;background:var(--cream);border-radius:16px;padding:12px 14px;font-weight:800;flex:1}
.bubble:before{content:"";position:absolute;left:-10px;top:18px;border:8px solid transparent;border-right-color:var(--cream)}
.goal-head{display:flex;justify-content:space-between;font-weight:900;margin-bottom:8px}
.bar{height:14px;background:#ffe3ef;border-radius:999px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--pink2),var(--gold));border-radius:999px;transition:width .5s ease}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.mode{border:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;margin:0;transition:transform .1s}
.mode:active{transform:scale(.97)}
.mode.exam{background:linear-gradient(135deg,#fff 0%,#ffe6f1 100%);border:2px solid var(--pink3)}
.m-ico{font-size:2rem}.m-title{font-weight:900;font-size:1.05rem}.m-sub{color:var(--muted);font-size:.8rem;font-weight:700}
.area-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed #ffe3ef;cursor:pointer}
.area-row:last-child{border:0}
.area-row .a-ico{font-size:1.5rem}
.area-row .a-body{flex:1}
.a-name{font-weight:900;font-size:.95rem}
.a-meta{font-size:.75rem;color:var(--muted);font-weight:700}
.area-row .bar{height:8px;margin-top:4px}
.foot{text-align:center;color:var(--muted);font-size:.75rem;font-weight:700}

/* quiz */
.quizbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.quizbar .bar{flex:1;height:16px}
.hearts{font-size:1rem;letter-spacing:-2px;min-width:20px}
.timer{font-weight:900;background:#fff;border-radius:999px;padding:6px 12px;box-shadow:var(--shadow)}
.timer.warn{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.q-meta{display:flex;gap:10px;align-items:center;margin-bottom:8px;font-weight:800;color:var(--muted);font-size:.85rem}
.tag{background:#fff;border-radius:999px;padding:4px 10px;color:var(--rose)}
.combo{margin-left:auto;background:var(--gold);color:#5a3d00;border-radius:999px;padding:4px 10px;animation:pop .3s}
.q-card h2{font-size:1.15rem;margin-bottom:14px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{border:3px solid #f3dfe9;background:#fff;border-radius:16px;padding:14px;text-align:left;font-weight:700;font-size:.98rem;cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:all .12s;box-shadow:0 3px 0 #f3dfe9}
.opt .l{background:#ffe3ef;color:var(--rose);border-radius:8px;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0}
.opt.sel{border-color:var(--pink2);background:#fff0f7;box-shadow:0 3px 0 var(--pink2)}
.opt.right{border-color:var(--green);background:#eefbf2;box-shadow:0 3px 0 var(--green)}
.opt.wrong{border-color:var(--red);background:#fff0f2;box-shadow:0 3px 0 var(--red)}
.opt:disabled{cursor:default}
.q-actions{margin-top:6px}
.feedback{position:fixed;left:0;right:0;bottom:0;transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);z-index:20}
.feedback.show{transform:none}
.fb-inner{max-width:560px;margin:0 auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0}
.feedback.ok .fb-inner{background:#d9f7e3}.feedback.bad .fb-inner{background:#ffe0e6}
.fb-title{font-weight:900;font-size:1.2rem;margin-bottom:4px}
.feedback.ok .fb-title{color:#1f7a3f}.feedback.bad .fb-title{color:#c0304c}
.fb-text{font-weight:700;font-size:.9rem;margin-bottom:12px;color:var(--text)}
.feedback.ok #fb-next{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green2)}
.feedback.bad #fb-next{background:var(--red);color:#fff;box-shadow:0 5px 0 #d84d65}

/* result */
.result-card{text-align:center}
.r-stats{display:flex;justify-content:space-around;margin:14px 0}
.r-stats div{display:flex;flex-direction:column}
.r-stats b{font-size:1.6rem;color:var(--rose)}
.r-stats span{font-size:.75rem;color:var(--muted);font-weight:800}
.r-areas{text-align:left;margin:10px 0}
.r-btns{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.review .rv{background:#fff;border-radius:16px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow);font-size:.9rem}
.review .rv b{display:block;margin-bottom:6px}
.review .rv .ok{color:#1f7a3f;font-weight:800}.review .rv .no{color:#c0304c;font-weight:800;text-decoration:line-through}
.review .rv .ex{color:var(--muted);font-weight:700;margin-top:6px;font-size:.82rem}

/* stats */
.st-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.st-row .a-ico{font-size:1.4rem}.st-row .a-body{flex:1}
.exam-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #ffe3ef;font-weight:800;font-size:.9rem}
.exam-row .pass{color:#1f7a3f}.exam-row .fail{color:#c0304c}
.danger{text-align:center;background:transparent;box-shadow:none}
.xp-pop{position:fixed;left:50%;top:40%;transform:translate(-50%,0);font-size:1.6rem;font-weight:900;color:var(--gold);text-shadow:0 2px 0 #b8860b;animation:xp 1s ease forwards;z-index:60;pointer-events:none}
@keyframes xp{to{transform:translate(-50%,-80px);opacity:0}}
@media (max-width:380px){.modes{grid-template-columns:1fr}}