:root{--cream: #fff6e4;--ink: #4a3423;--ink-soft: #8a7458;--line: #e8d8bd;--orange: #ff9f43;--orange-d: #d97a1f;--green: #5cc85c;--green-d: #3fa03f;--pink: #ff7aa2;--pink-d: #d95b82;--teal: #3cc9a6;--teal-d: #2aa287;--sky: #5ec4f2;--sky-d: #2f9bd0;--gold: #ffc93c;--gold-d: #d9a11f;--purple: #a98bd9;--purple-d: #7f63b3;--font-display: "Baloo 2", Nunito, sans-serif;--font-body: Nunito, sans-serif}body{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#9fdcf2;margin:0}.panel{background:linear-gradient(180deg,#fffdf6,var(--cream) 60%,#fdf0d9);border:3px solid #fff;border-radius:30px;box-shadow:0 8px 0 var(--line),0 26px 60px #462d1959}.pill{background:linear-gradient(180deg,#fffdf7,var(--cream));border:2.5px solid #fff;border-radius:999px;box-shadow:0 4px 0 var(--line)}.ribbon{background:linear-gradient(180deg,#ffb35f,var(--orange));border:3px solid #fff;border-radius:18px;box-shadow:0 5px 0 var(--orange-d)}.slot{background:#fff;border:2px solid var(--line);border-radius:20px;box-shadow:0 3px 0 var(--line)}.scroll-y{overflow-y:auto}.scroll-y::-webkit-scrollbar{width:6px}.scroll-y::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}.btn3d{--c: var(--orange);--d: var(--orange-d);background:var(--c);color:#fff;border:2.5px solid #fff;border-radius:999px;box-shadow:0 5px 0 var(--d),0 9px 18px #5a3e2b38,inset 0 -3px #0000000f;font-family:var(--font-display);font-weight:800;transition:transform .12s cubic-bezier(.3,1.6,.5,1),box-shadow .12s,filter .15s;cursor:pointer}.btn3d:hover{filter:brightness(1.05)}.btn3d:active{transform:translateY(4px) scale(.98);box-shadow:0 1px 0 var(--d),0 3px 8px #5a3e2b33}.btn3d:disabled{--c: #cdbfae;--d: #a9988a;cursor:not-allowed;filter:none}.btn3d.green{--c: var(--green);--d: var(--green-d)}.btn3d.pink{--c: var(--pink);--d: var(--pink-d)}.btn3d.teal{--c: var(--teal);--d: var(--teal-d)}.btn3d.gold{--c: var(--gold);--d: var(--gold-d)}.btn3d.purple{--c: var(--purple);--d: var(--purple-d)}.btn3d.sky{--c: var(--sky);--d: var(--sky-d)}@keyframes logo-in{0%{opacity:0;transform:scale(.2) rotate(-8deg)}55%{opacity:1;transform:scale(1.08) rotate(2deg)}75%{transform:scale(.96) rotate(-1deg)}to{transform:scale(1) rotate(0)}}@keyframes pop-in{0%{opacity:0;transform:scale(.6) translateY(20px)}60%{opacity:1;transform:scale(1.04) translateY(-2px)}to{transform:scale(1) translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{transform:translate(-120%)}to{transform:translate(220%)}}@keyframes sheet-up{0%{transform:translateY(110%)}70%{transform:translateY(-3%)}to{transform:translateY(0)}}@keyframes toast-in{0%{opacity:0;transform:translateY(-24px) scale(.85)}60%{opacity:1;transform:translateY(3px) scale(1.03)}to{transform:translateY(0) scale(1)}}@keyframes float-y{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.anim-logo{animation:.9s cubic-bezier(.2,1.2,.4,1) both logo-in}.anim-pop{animation:.42s cubic-bezier(.2,1.3,.4,1) both pop-in}.anim-fade{animation:.25s both fade-in}.anim-sheet{animation:.45s cubic-bezier(.2,1.1,.4,1) both sheet-up}.anim-toast{animation:.4s cubic-bezier(.2,1.3,.4,1) both toast-in}.anim-float{animation:3.2s ease-in-out infinite float-y}.splash-scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:#9fdcf2;pointer-events:none}.splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;gap:0;background:linear-gradient(180deg,#8fd8f5,#c6ecf7 60%,#fff3d9)}.splash.splash-ready{background:radial-gradient(ellipse at 50% 45%,#fff8ec40,#78c8eb8c 70%,#5aaad7bf);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.splash-logo{width:min(86vw,460px);filter:drop-shadow(0 14px 20px rgba(60,100,140,.35))}.splash-tagline{display:flex;align-items:center;gap:8px;margin-top:-4px;padding:6px 20px;border:3px solid #fff;background:linear-gradient(180deg,#5aa8ff,#3d84f0);color:#fff;font-family:var(--font-display);font-weight:800;box-shadow:0 5px #2d66c4,0 10px 20px #28509640}.splash-tagline-star{height:32px;width:32px;object-fit:contain;margin:-8px 0}.splash-tagline-text{font-size:20px;font-weight:800;line-height:1;letter-spacing:.025em;color:#fff;text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),0 4px 0 rgba(90,62,43,.35)}.splash-progress-block{margin-top:12px;height:120px;width:100%;max-width:320px;display:flex;flex-direction:column;justify-content:center;gap:8px}.splash-ready-block{display:flex;flex-direction:column;align-items:center}.splash-track{height:24px;padding:3px;overflow:hidden}.splash-fill{position:relative;height:100%;border-radius:999px;background:linear-gradient(90deg,#9be86a,#4fbf4a);transition:width .2s;overflow:hidden}.splash-shimmer{position:absolute;top:0;bottom:0;width:33%;background:#fff6;animation:shimmer 1.1s linear infinite}.splash-progress-text{font-family:var(--font-display);font-weight:800;font-size:15px;text-align:center}.splash-play{height:62px;width:240px;font-size:26px}.splash-sub{margin-top:16px;border-radius:999px;background:#ffffffb3;padding:4px 16px;font-family:var(--font-display);font-weight:700;font-size:13.5px}.hud-top{position:absolute;inset-inline:0;top:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px 12px 0;pointer-events:none}.hud-cluster{display:flex;flex-direction:column;gap:8px;pointer-events:auto}.hud-row{display:flex;align-items:center;gap:8px}.hud-dock{position:absolute;inset-inline:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:12px;padding-bottom:14px;pointer-events:none}.dock-btn{display:flex;flex-direction:column;align-items:center;pointer-events:auto;background:none;border:none;cursor:pointer;position:relative}.dock-icon{width:70px;height:70px;border-radius:24px;border:3px solid #fff;display:grid;place-items:center;font-size:30px}.dock-label{margin-top:-12px;border:2px solid #fff;border-radius:999px;padding:2px 10px;font-family:var(--font-display);font-weight:800;font-size:13px;color:#fff}.dock-badge{position:absolute;right:-8px;top:-8px;height:28px;min-width:28px;border-radius:999px;border:2.5px solid #fff;background:var(--pink);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;padding:0 6px}.xp-track{width:92px;height:11px;border-radius:999px;background:#f1e2c8;box-shadow:inset 0 1px 3px #0003;overflow:hidden}.xp-fill{height:100%;background:linear-gradient(90deg,#9be86a,#4fbf4a);transition:width .7s ease-out}.weather-chip{display:flex;height:36px;align-items:center;gap:6px;padding:0 12px 0 10px;cursor:pointer}@media (prefers-reduced-motion: reduce){.anim-float,.splash-shimmer{animation:none}}.lesson-player{position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;background:var(--cream);overflow-y:auto;display:flex;flex-direction:column}.lesson-player .lesson-header{display:flex;align-items:center;gap:14px;padding:14px 18px 6px}.lesson-player .lesson-exit{height:44px;width:44px;border:3px solid #fff;border-radius:999px;cursor:pointer;background:linear-gradient(180deg,#ff8fab,#e76a8d);box-shadow:0 5px #c2496c;color:#fff;font-size:20px;font-weight:800}.lesson-progress{flex:1;height:22px;background:#e9dfc8;border:2px solid #fff;border-radius:999px;overflow:hidden}.lesson-progress-fill{height:100%;background:linear-gradient(180deg,var(--green),var(--green-d));border-radius:999px;transition:width .3s}.lesson-sub{display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:14px;color:var(--ink-soft);font-weight:700}.lesson-retry-chip{background:#ffe3ec;color:#c2496c;border-radius:999px;padding:2px 12px;font-size:13px;border:2px solid #fff}.lesson-content{flex:1;width:min(720px,92vw);margin:0 auto;padding:8px 0 140px}.lesson-content .lesson-title{font-size:28px;font-weight:800;color:var(--ink);margin:10px 0 6px}.lesson-sub-copy{color:var(--ink-soft);font-size:15px;margin:4px 0 14px}.lesson-word-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.lesson-word-list>li{background:#fff;border:2.5px solid #f0e3c8;border-radius:18px;padding:12px 16px;box-shadow:0 3px #f0e3c8}.lesson-word-list button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font:inherit;padding:0}.lesson-word-target{font-size:22px;font-weight:800;color:var(--ink);display:inline-block;margin-right:10px}.lesson-word-rom{color:var(--ink-soft);font-size:14px;display:inline-block;margin-right:10px;font-style:italic}.lesson-word-vi{color:var(--ink-soft);font-size:15px;display:inline-block}.lesson-word-example{margin:8px 0 0;font-size:15px;color:var(--ink-soft)}.lesson-word-example mark{background:#fff3c4;border-radius:6px;padding:0 4px;color:var(--ink)}.lesson-word-target:only-child,p.lesson-word-target{font-size:34px;display:block;margin:4px 0}p.lesson-word-rom{font-style:italic;color:var(--ink-soft);margin:0 0 6px}.lesson-fill-sentence{font-size:22px;font-weight:700;margin:6px 0 14px;letter-spacing:1px}.lesson-dialogue-prompt{font-size:22px;font-weight:700;margin:6px 0 2px}.lesson-dialogue-meaning{color:var(--ink-soft);margin:6px 0}.lesson-replay-row{display:flex;gap:10px;margin:8px 0 14px}.lesson-replay-row button{padding:8px 16px;border-radius:999px;border:2.5px solid #fff;background:#dff3ff;box-shadow:0 3px #9cc9e8;font-weight:700;cursor:pointer;font:inherit;color:var(--ink)}.lesson-options{display:flex;flex-direction:column;gap:10px;margin-top:10px}.lesson-option{padding:14px 18px;font-size:18px;font-weight:700;font:inherit;color:var(--ink);background:#fff;border:2.5px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);cursor:pointer;transition:transform .1s,box-shadow .1s,opacity .15s}.lesson-option:disabled{cursor:default}.lesson-option.idle:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--line)}.lesson-option.right{background:#e2f6e2;border-color:var(--green);box-shadow:0 4px 0 var(--green-d)}.lesson-option.wrong{background:#ffe3ec;border-color:#e76a8d;box-shadow:0 4px #c2496c;animation:lesson-shake .48s}.lesson-option.dim{opacity:.45}@keyframes lesson-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.lesson-order-answer{display:flex;flex-wrap:wrap;gap:8px;min-height:54px;padding:8px;background:#fff;border:2.5px dashed var(--line);border-radius:16px;margin-bottom:12px}.lesson-order-pool{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.lesson-order-answer button,.lesson-order-pool button{padding:8px 14px;font-size:17px;font-weight:700;font:inherit;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;box-shadow:0 3px 0 var(--line);cursor:pointer}.lesson-cta{display:block;width:100%;height:56px;font:inherit;font-size:20px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--green),var(--green-d));border:3px solid #fff;border-radius:18px;box-shadow:0 6px 0 var(--green-d);cursor:pointer}.lesson-cta:disabled{filter:grayscale(.7);opacity:.6;cursor:default}.lesson-feedback{position:fixed;left:0;right:0;bottom:0;z-index:58;padding:18px max(18px,calc((100vw - 720px)/2)) 22px;border-radius:26px 26px 0 0}.lesson-feedback.ok{background:#e2f6e2;border-top:3px solid #fff;box-shadow:0 -8px 30px #462d1940}.lesson-feedback.bad{background:#ffe3ec;border-top:3px solid #fff;box-shadow:0 -8px 30px #462d1940}.lesson-feedback-title{font-size:22px;font-weight:800;margin:0 0 4px}.lesson-feedback-detail{margin:0 0 2px;color:var(--ink-soft);font-weight:600}.lesson-feedback-explain{margin:0 0 2px;color:var(--ink-soft);font-size:14px}.lesson-continue{display:block;width:100%;height:52px;margin-top:12px;font:inherit;font-size:19px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--green),var(--green-d));border:3px solid #fff;border-radius:16px;box-shadow:0 5px 0 var(--green-d);cursor:pointer}.lesson-match{display:flex;flex-direction:column;gap:10px}.lesson-match-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lesson-match-col{display:flex;flex-direction:column;gap:10px}.lesson-complete{text-align:center;padding:40px 20px}.lesson-complete h1{font-size:34px;margin:8px 0}.lesson-perfect-chip{display:inline-block;background:#fff3c4;color:var(--ink);border:2.5px solid #fff;border-radius:999px;padding:6px 18px;font-weight:800;box-shadow:0 4px 0 var(--line)}.lesson-rewards{display:flex;justify-content:center;gap:14px;margin:22px 0 8px;flex-wrap:wrap}.lesson-reward{background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:14px 20px;font-weight:800;font-size:18px;box-shadow:0 4px 0 var(--line)}.lesson-speak-text{font-size:26px;font-weight:800;margin:8px 0}