*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--kid:#8b5cf6;--bg:#0b0b14;--card:#161622;--line:rgba(255,255,255,.09);--text:#f7f7fb;--muted:#a1a1aa;--soft:rgba(255,255,255,.06)}
html[data-theme="light"]{--bg:#eef1f7;--card:#ffffff;--line:rgba(15,23,42,.1);--text:#0f172a;--muted:#64748b;--soft:rgba(15,23,42,.05)}
html,body{height:100%}
body{font-family:'Space Grotesk','Inter',-apple-system,sans-serif;color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -12%, color-mix(in srgb, var(--kid) 30%, transparent), transparent 60%),
    radial-gradient(900px 600px at 92% 112%, color-mix(in srgb, var(--kid) 18%, transparent), transparent 55%),
    var(--bg);
  min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .5s ease}
html[data-theme="light"] body{background:
    radial-gradient(1200px 700px at 50% -12%, color-mix(in srgb, var(--kid) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at 92% 112%, color-mix(in srgb, var(--kid) 10%, transparent), transparent 55%),
    var(--bg)}

/* Decorative drifting emojis (cheap: transform only) */
.k-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.k-bg i{position:absolute;font-size:1.4rem;opacity:.16;will-change:transform;animation:kfloat 20s ease-in-out infinite}
.k-bg i:nth-child(1){left:7%;top:16%;animation-duration:22s}
.k-bg i:nth-child(2){left:82%;top:12%;animation-duration:26s;animation-delay:-4s}
.k-bg i:nth-child(3){left:16%;top:72%;animation-duration:24s;animation-delay:-8s}
.k-bg i:nth-child(4){left:88%;top:64%;animation-duration:28s;animation-delay:-2s}
.k-bg i:nth-child(5){left:48%;top:6%;animation-duration:30s;animation-delay:-6s}
.k-bg i:nth-child(6){left:70%;top:86%;animation-duration:25s;animation-delay:-11s}
@keyframes kfloat{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-26px,0)}100%{transform:translate3d(0,0,0)}}

.kid-root{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:26px 20px 38px;min-height:100dvh;display:flex;flex-direction:column}
.kid-loading{color:var(--muted);text-align:center;margin-top:40vh;font-weight:700}

/* HEADER */
.k-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.k-avatar{width:74px;height:74px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;flex:none;background:var(--kid);box-shadow:0 12px 30px color-mix(in srgb,var(--kid) 45%,transparent);will-change:transform;animation:kbob 3.6s ease-in-out infinite}
@keyframes kbob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.k-hello{flex:1;min-width:0}
.k-name{font-size:clamp(1.3rem,4.4vw,1.7rem);font-weight:800;letter-spacing:-.02em}

/* LEVEL */
.k-level{margin-top:8px}
.k-level-badge{display:inline-block;font-size:.78rem;font-weight:800;color:var(--kid);letter-spacing:.02em;margin-bottom:6px}
.k-level-bar{height:12px;border-radius:99px;background:var(--soft);overflow:hidden}
.k-level-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--kid) 65%,#fff 0%),var(--kid));transform-origin:left center;transform:scaleX(0);transition:transform .7s cubic-bezier(.16,1,.3,1)}

/* HERO BALANCE */
.k-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px;border-radius:30px;margin-bottom:22px;border:1px solid var(--line);
  background:linear-gradient(160deg,color-mix(in srgb,var(--kid) 34%,var(--card)),var(--card));box-shadow:0 18px 50px rgba(0,0,0,.42);overflow:hidden}
html[data-theme="light"] .k-hero{box-shadow:0 18px 50px rgba(15,23,42,.12)}
.k-bal-ico{font-size:1.5rem;margin-bottom:2px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.k-bal{font-size:clamp(3.4rem,17vw,5.6rem);font-weight:800;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.k-bal-lab{color:var(--muted);font-size:.95rem;font-weight:700;margin-top:6px}
.k-gain{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-weight:800;font-size:1.1rem;color:#22c55e;opacity:0;pointer-events:none}
.k-gain.go{animation:kgain 1.15s ease-out}
@keyframes kgain{0%{opacity:0;transform:translate(-50%,10px) scale(.85)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-34px) scale(1.05)}}

/* QUESTS */
.k-quests{margin-bottom:22px}
.k-quests-head{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.k-quests-count{font-size:.85rem;color:var(--muted)}
.k-tasks{display:flex;flex-direction:column;gap:12px}
.k-task{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:15px 16px;font-size:1.1rem;font-weight:700;transition:border-color .2s,background .2s,transform .12s;will-change:transform}
.k-task.tap{cursor:pointer}
.k-task.tap:hover{border-color:color-mix(in srgb,var(--kid) 55%,transparent)}
.k-task.tap:active{transform:scale(.97)}
.k-q-emoji{width:46px;height:46px;flex:none;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--soft)}
.k-q-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.k-q-title{overflow-wrap:anywhere}
.k-q-worth{font-size:.82rem;font-weight:700;color:var(--muted)}
.k-q-go{padding:10px 15px;border-radius:14px;border:0;background:var(--kid);color:#fff;font-family:inherit;font-size:.92rem;font-weight:800;white-space:nowrap;box-shadow:0 6px 16px color-mix(in srgb,var(--kid) 45%,transparent)}
.k-q-badge{font-size:1.4rem;line-height:1;flex:none}
.k-task.done{border-color:color-mix(in srgb,#22c55e 55%,transparent);background:color-mix(in srgb,#22c55e 12%,var(--card))}
.k-task.done .k-q-emoji{background:color-mix(in srgb,#22c55e 22%,transparent)}
.k-task.outstanding{border-color:color-mix(in srgb,#eab308 60%,transparent);background:color-mix(in srgb,#eab308 12%,var(--card))}
.k-task.half{border-color:color-mix(in srgb,#f59e0b 50%,transparent)}
.k-task.failed{opacity:.6}
.k-task.pop{animation:kpop .55s cubic-bezier(.16,1,.3,1)}
@keyframes kpop{0%{transform:scale(1)}35%{transform:scale(1.05)}70%{transform:scale(.99)}100%{transform:scale(1)}}
.k-empty{color:var(--muted);text-align:center;padding:26px;font-size:1.05rem;font-weight:700}

/* PLAY / ASK */
.k-play{margin-bottom:22px;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:22px;text-align:center}
.k-play.ready{border-color:color-mix(in srgb,var(--kid) 55%,transparent);background:color-mix(in srgb,var(--kid) 12%,var(--card))}
.k-play.running{border-color:color-mix(in srgb,var(--kid) 60%,transparent);background:color-mix(in srgb,var(--kid) 16%,var(--card))}
.k-play.locked{border-color:color-mix(in srgb,var(--text) 14%,transparent)}
.k-play-title{font-size:1.2rem;font-weight:800;margin-bottom:4px}
.k-play-sub{color:var(--muted);font-size:.95rem;font-weight:700;margin-top:8px}
.k-note{margin:12px auto 4px;max-width:360px;padding:10px 14px;border-radius:14px;background:var(--soft);border:1px dashed color-mix(in srgb,var(--kid) 45%,transparent);font-size:.95rem;font-weight:700}
.k-timer{font-size:clamp(3rem,16vw,4.4rem);font-weight:800;letter-spacing:.02em;margin:6px 0 12px;font-variant-numeric:tabular-nums}
.k-input{width:100%;max-width:340px;margin:10px auto 0;display:block;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-family:inherit;font-size:1rem;font-weight:600;outline:none;text-align:center}
.k-input:focus{border-color:var(--kid)}
.k-ideas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.k-idea{padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s}
.k-idea:hover{color:var(--text);border-color:var(--kid)}
.k-ask{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.k-chip{padding:12px 18px;border-radius:15px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-family:inherit;font-size:1.1rem;font-weight:800;cursor:pointer;transition:transform .1s,background .15s}
.k-chip:hover{background:color-mix(in srgb,var(--text) 10%,transparent)}
.k-chip:active{transform:scale(.95)}

/* BUTTONS */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border-radius:18px;border:0;background:var(--kid);color:#fff;font-family:inherit;font-size:1.15rem;font-weight:800;cursor:pointer;box-shadow:0 10px 26px color-mix(in srgb,var(--kid) 45%,transparent);transition:transform .1s}
.k-btn:active{transform:scale(.95)}
.k-btn.stop{background:#ef4444;box-shadow:0 10px 26px rgba(239,68,68,.4)}
.k-play.ready .k-btn{animation:kpulse 1.9s ease-in-out infinite}
@keyframes kpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* FOOTER */
.k-foot{margin-top:auto;padding-top:22px;text-align:center;color:var(--muted);font-size:.85rem}
.k-foot button{background:none;border:0;color:var(--kid);font-family:inherit;font-weight:700;cursor:pointer;font-size:.85rem}
.k-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:middle;transition:background .2s}
.k-live.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22)}

/* LANGUAGE + THEME toggles */
.lang-toggle.k-lang{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle}
.k-lang button{padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:inherit;font-size:.75rem;font-weight:800;cursor:pointer}
.k-lang button.on{background:var(--kid);border-color:var(--kid);color:#fff}
.k-theme{margin-left:10px;width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--text);font-size:1rem;line-height:1;cursor:pointer;vertical-align:middle;transition:background .15s,transform .12s}
.k-theme:hover{background:color-mix(in srgb,var(--text) 10%,transparent)}
.k-theme:active{transform:scale(.95)}
.k-pair .lang-toggle.k-lang{display:flex;justify-content:center;margin-top:18px;margin-left:0}
.k-pair .k-theme{display:inline-block;margin-top:12px}

/* PAIRING / ERROR */
.k-pair{max-width:520px;margin:auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px 30px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
html[data-theme="light"] .k-pair{box-shadow:0 18px 50px rgba(15,23,42,.12)}
.k-pair-emoji{font-size:3rem;margin-bottom:10px}
.k-pair-title{font-size:1.5rem;font-weight:800;margin-bottom:10px}
.k-pair-sub{color:var(--muted);font-size:1rem;line-height:1.5;margin-bottom:20px}
.k-code{font-size:clamp(2.4rem,12vw,3.4rem);font-weight:800;letter-spacing:.26em;padding:18px 10px;border-radius:18px;background:var(--soft);border:1px dashed color-mix(in srgb,var(--kid) 60%,transparent);color:var(--text);margin-bottom:16px}
.k-pair-hint{color:var(--muted);font-size:.85rem}
.k-pair-hint button{background:none;border:0;color:var(--kid);font-family:inherit;font-weight:700;cursor:pointer;font-size:.85rem}

/* INTRO overlay */
.k-intro{position:fixed;inset:0;z-index:80;background:rgba(4,6,14,.72);display:flex;align-items:center;justify-content:center;padding:22px}
.k-intro-card{max-width:420px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px 26px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.k-intro-emoji{font-size:3rem;margin-bottom:8px}
.k-intro-title{font-size:1.5rem;font-weight:800;margin-bottom:10px}
.k-intro-body{color:var(--muted);font-size:1.02rem;line-height:1.5;font-weight:600;margin-bottom:20px}

/* FLASH + CONFETTI */
.k-flash{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:#1e1e2e;border:1px solid var(--line);color:var(--text);padding:12px 20px;border-radius:14px;font-weight:700;opacity:0;transition:all .3s ease;z-index:50}
.k-flash.show{opacity:1;transform:translate(-50%,0)}
.k-flash.err{border-color:rgba(239,68,68,.5);color:#fecaca}
.k-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.k-confetti span{position:absolute;top:-30px;animation:kfall 1.8s ease-in forwards;will-change:transform,opacity}
@keyframes kfall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(360deg);opacity:0}}

@media(min-width:640px){.kid-root{padding-top:40px}.k-bal{padding:0}.k-hero{padding:30px}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .k-level-fill{transition:none}
}