*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}:root{--bg:#fff8e7;--ink:#4a3f35;--primary:#ff6b6b;--accent:#4ecdc4;--locked:#d8d2c5;--card:#fff;--shadow:0 4px 0 #0000001f}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 12% 18%, #4ecdc41f 0 90px, transparent 90px), radial-gradient(circle at 85% 10%, #ff6b6b1a 0 70px, transparent 70px), radial-gradient(circle at 70% 80%, #ffb7031a 0 110px, transparent 110px), radial-gradient(circle at 25% 75%, #4ecdc414 0 80px, transparent 80px), var(--bg);color:var(--ink);overscroll-behavior:none;background-attachment:fixed;font-family:Comic Sans MS,Chalkboard SE,Segoe UI,system-ui,sans-serif}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}input{background:#fff;border:2px solid #e5dccb;border-radius:14px;width:100%;padding:12px 16px;font-family:inherit;font-size:18px}.screen{flex-direction:column;min-height:100%;padding:16px;display:flex}.center{text-align:center;justify-content:center;align-items:center;gap:12px}.muted{color:#9a8f7f;margin:4px 0 12px}.error{color:#d64545}.warn{background:#fff3cd;border-radius:12px;padding:10px 14px}.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow);border-radius:18px;min-height:64px;padding:14px 32px;font-size:22px;font-weight:700}.btn-primary:active{box-shadow:none;transform:translateY(2px)}.btn-primary:disabled{opacity:.6}.btn-ghost{color:#9a8f7f;padding:10px;font-size:16px}.btn-ghost.danger{color:#d64545}.login-card{background:var(--card);width:min(400px,92vw);box-shadow:var(--shadow);border-radius:24px;flex-direction:column;gap:14px;padding:28px;display:flex}.login-card h1{margin:0;font-size:26px}.mascot{font-size:72px}.profile-grid{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.profile-card{background:var(--card);width:140px;height:150px;box-shadow:var(--shadow);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:20px;font-weight:700;display:flex}.profile-card:active{transform:scale(.96)}.profile-avatar{font-size:56px}.profile-card.add{opacity:.7}.create-card{background:var(--card);width:min(400px,92vw);box-shadow:var(--shadow);border-radius:20px;flex-direction:column;gap:14px;padding:20px;display:flex}.age-row{align-items:center;gap:10px;font-size:17px;font-weight:700;display:flex}.age-row select{background:#fff;border:2px solid #e5dccb;border-radius:12px;padding:8px 12px;font-family:inherit;font-size:17px}.avatar-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.avatar-pick{border-radius:12px;padding:6px;font-size:34px}.avatar-pick.active{background:#ffe0a3}.path{padding:0}.path-top{background:var(--bg);z-index:5;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.avatar-chip,.xp-chip,.parent-chip{background:var(--card);box-shadow:var(--shadow);border-radius:999px;padding:8px 16px;font-size:17px;font-weight:700}.path-scroll{flex-direction:column;align-items:center;gap:10px;padding:12px 16px 80px;display:flex}.unit-block{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:480px;display:flex}.unit-header{background:var(--unit,var(--primary));color:#fff;text-align:center;width:100%;box-shadow:var(--shadow);border-radius:18px;margin-top:18px;padding:14px}.unit-title{font-size:22px;font-weight:800;display:block}.unit-en{opacity:.9;font-size:15px}.btn-jump{color:var(--ink);box-shadow:var(--shadow);background:#fff;border-radius:999px;margin:10px auto 0;padding:10px 18px;font-size:15px;font-weight:800;animation:2s infinite pulse;display:block}.path-node{background:var(--card);border:4px solid var(--unit,var(--primary));min-width:220px;min-height:72px;box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:12px;padding:8px 22px;font-size:18px;font-weight:700;display:flex}.path-node:nth-child(odd){transform:translate(-24px)}.path-node:nth-child(2n){transform:translate(24px)}.path-node:active:not(.locked){transform:scale(.97)}.path-node.locked{border-color:var(--locked);color:#b4ab9c;box-shadow:none}.path-node.done{background:#fffbe8}.node-icon{font-size:30px}.node-stars{color:#ffb703;margin-left:auto;font-size:20px}.path-end{color:#b4ab9c;padding:24px}.start-overlay{background:var(--bg);z-index:50;flex-direction:column;justify-content:center;align-items:center;gap:24px;display:flex;position:fixed;inset:0}.btn-start{background:var(--accent);color:#fff;box-shadow:var(--shadow);border-radius:999px;padding:20px 48px;font-size:32px;font-weight:800}.lesson{gap:8px}.lesson-top{align-items:center;gap:12px;display:flex}.btn-exit{color:#b4ab9c;width:48px;height:48px;font-size:22px}.progress-bar{background:#eee4d2;border-radius:999px;flex:1;height:16px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .4s}.game-stage{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:22px;padding:12px;display:flex}.big-card{background:var(--card);box-shadow:var(--shadow);border-radius:28px;flex-direction:column;align-items:center;gap:10px;min-width:min(340px,86vw);padding:28px 40px;display:flex}.big-card:active{transform:scale(.98)}.card-word{font-size:40px;font-weight:800}.card-word.pattern{font-size:28px}.card-vi{color:#9a8f7f;font-size:20px}.tap-hint{color:#b4ab9c;font-size:15px}.dots{gap:8px;display:flex}.dot{background:#e0d7c5;border-radius:50%;width:12px;height:12px}.dot.active{background:var(--primary)}.btn-next{background:var(--accent);color:#fff;box-shadow:var(--shadow);border-radius:16px;min-height:64px;padding:12px 36px;font-size:20px;font-weight:700}.speaker-big{background:var(--card);width:110px;height:110px;box-shadow:var(--shadow);border-radius:50%;font-size:56px}.speaker-big:active{transform:scale(.94)}.choice-grid{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.choice-card{background:var(--card);width:150px;height:150px;box-shadow:var(--shadow);border-radius:22px;justify-content:center;align-items:center;display:flex}.choice-card:active{transform:scale(.96)}.choice-card.solved{opacity:.35}.pair-row{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.word-chip{background:var(--card);border:3px solid var(--accent);min-height:64px;box-shadow:var(--shadow);border-radius:999px;padding:12px 26px;font-size:24px;font-weight:800}.word-chip.holding{background:var(--accent);color:#fff;transform:scale(1.08)}.word-chip.solved{opacity:.3;border-color:var(--locked)}.memory-grid{grid-template-columns:repeat(2,minmax(140px,190px));gap:12px 16px;display:grid}.memory-card{background:var(--accent);aspect-ratio:3/2;box-shadow:var(--shadow);border-radius:18px;justify-content:center;align-items:center;display:flex}.memory-card.up{background:var(--card)}.memory-back{font-size:34px}.memory-word{font-size:19px;font-weight:800}.letter-target{background:var(--card);box-shadow:var(--shadow);border-radius:24px;align-items:center;gap:12px;padding:18px 30px;display:flex}.letter-slots{gap:10px;display:flex}.slot{border-bottom:5px solid #d8cfbd;justify-content:center;align-items:center;width:58px;height:66px;font-size:38px;font-weight:800;display:flex}.slot.filled{border-color:var(--accent);color:var(--accent)}.letter-bank{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.letter-tile{background:var(--card);width:64px;height:64px;box-shadow:var(--shadow);border-radius:16px;font-size:30px;font-weight:800}.letter-tile.used{opacity:.25}.instruction-bar{background:#fff3d6;border:2px dashed #ffb703;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:fit-content;max-width:480px;margin:4px auto 0;padding:10px 20px;font-size:18px;font-weight:700;animation:.4s slide-down;display:flex}@keyframes slide-down{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.q-text{color:var(--accent);box-shadow:var(--shadow);background:#fff;border-radius:14px;padding:6px 20px;font-size:24px;font-weight:800}.choice-label{margin-top:4px;font-size:18px;font-weight:800}.choice-label.vi{color:#9a8f7f;font-size:15px;font-weight:700}.card-ipa{color:#b4ab9c;font-size:17px}.vi-hint{color:#9a8f7f;font-size:17px;font-weight:700}.choice-card{flex-direction:column;gap:2px;height:auto;min-height:150px;padding:8px}.bounce-in{animation:.45s bounce-in}@keyframes bounce-in{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}.wiggle{animation:2.4s ease-in-out infinite wiggle}@keyframes wiggle{0%,84%,to{transform:rotate(0)}88%{transform:rotate(-8deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}.bob{animation:2s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.mascot-corner{z-index:4;filter:drop-shadow(0 4px 4px #00000026);pointer-events:none;font-size:56px;position:fixed;bottom:14px;right:14px}.mascot-bubble-wrap{z-index:6;align-items:flex-end;gap:6px;max-width:min(420px,80vw);display:flex;position:fixed;bottom:14px;right:14px}.mascot-bubble-fox{filter:drop-shadow(0 4px 4px #00000026);font-size:56px}.mascot-bubble{border:3px solid var(--accent);box-shadow:var(--shadow);background:#fff;border-radius:20px 20px 4px;padding:12px 18px;font-size:18px;font-weight:700}.mascot-moment{flex-direction:column;align-items:center;gap:14px;display:flex}.mascot-moment .mascot-bubble{text-align:center;border-radius:20px;max-width:min(480px,86vw);font-size:22px}.mascot.cheer{animation:.8s ease-in-out infinite cheer}@keyframes cheer{0%,to{transform:rotate(-6deg)translateY(0)}50%{transform:rotate(6deg)translateY(-10px)}}.path-node.current{border-width:5px;animation:1.6s ease-in-out infinite node-pulse}@keyframes node-pulse{0%,to{transform:scale(1) translateX(var(--tx,0))}50%{transform:scale(1.05) translateX(var(--tx,0))}}.path-node:nth-child(odd){--tx:-24px}.path-node:nth-child(2n){--tx:24px}.node-go{background:var(--primary);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800;animation:1.2s ease-in-out infinite bob;position:absolute;top:-14px;right:12px}.path-node{position:relative}.confetti-rain{pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti-rain span{top:-10%;left:calc(var(--i) * 8.3%);animation:2.6s linear infinite fall;animation-delay:calc(var(--i) * .22s);font-size:30px;position:absolute}@keyframes fall{to{transform:translateY(115vh)rotate(300deg)}}.star-pop{animation:.5s backwards star-pop;animation-delay:calc(var(--i) * .35s);display:inline-block}@keyframes star-pop{0%{transform:scale(0)}70%{transform:scale(1.5)rotate(12deg)}to{transform:scale(1)}}.choice-card .vimg{animation:3.2s ease-in-out infinite float}.choice-card:nth-child(2) .vimg{animation-delay:.6s}.choice-card:nth-child(3) .vimg{animation-delay:1.2s}.choice-card:nth-child(4) .vimg{animation-delay:1.8s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.big-card .vimg{animation:3.5s ease-in-out infinite breathe}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.hint-pulse{animation:1s infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 8px #4ecdc480}}.celebrate{gap:20px}.confetti{font-size:80px;animation:.6s pop}@keyframes pop{0%{transform:scale(.2)}70%{transform:scale(1.3)}to{transform:scale(1)}}.stars-big{color:#ffb703;font-size:64px}.stars-off{color:#e0d7c5}.xp-badge{background:var(--accent);color:#fff;border-radius:999px;padding:10px 28px;font-size:24px;font-weight:800}.bottom-nav{padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:20;background:#fff;border-top:3px solid #f0e5cf;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.nav-tab{color:#b4ab9c;border-radius:14px;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:4px 10px;font-weight:700;display:flex}.nav-tab.active{color:var(--ink);background:#fff3d6}.nav-tab.locked{opacity:.55}.nav-icon{font-size:26px;position:relative}.nav-label{font-size:12px}.nav-badge{background:var(--primary);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 4px;font-size:12px;font-weight:800;display:flex;position:absolute;top:-6px;right:-12px}.nav-toast{border:3px solid var(--accent);z-index:30;box-shadow:var(--shadow);white-space:nowrap;background:#fff;border-radius:16px;padding:10px 18px;font-weight:700;position:fixed;bottom:96px;left:50%;transform:translate(-50%)}.path .path-scroll{padding-bottom:120px}.fox-corner{z-index:21;flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:fixed;bottom:92px;right:14px}.fox-btn{filter:drop-shadow(0 4px 4px #00000026);font-size:56px;position:relative}.fox-btn:active{transform:scale(.92)}.fox-btn.spin{animation:1.1s fox-spin}@keyframes fox-spin{0%{transform:rotate(0)}70%{transform:rotate(680deg)scale(1.1)}to{transform:rotate(720deg)}}.fox-accessory{font-size:24px;position:absolute;top:-10px;right:-6px}.fox-due{top:-4px;left:-10px;right:auto}.fox-bubble{max-width:min(340px,70vw)}.fox-menu{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.fox-menu-btn{border:3px solid var(--accent);box-shadow:var(--shadow);background:#fff;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-size:20px;font-weight:700;animation:.3s bounce-in;display:flex}.fox-menu-btn span{font-size:15px}.fox-menu-btn.primary{border-color:var(--primary);background:#fff0f0}.abc{align-items:center;padding-bottom:110px}.abc-title{margin:8px 0 4px}.chant-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.chant-btn{background:var(--accent);color:#fff;box-shadow:var(--shadow);border-radius:999px;padding:12px 22px;font-size:18px;font-weight:800}.chant-btn:active{transform:scale(.96)}.abc-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;width:100%;max-width:760px;margin-top:14px;display:grid}.abc-card{border:4px solid var(--unit,var(--accent));box-shadow:var(--shadow);background:#fff;border-radius:20px;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;display:flex}.abc-card:active{transform:scale(.94)}.abc-letter{color:var(--unit,var(--accent));font-size:40px;font-weight:800}.abc-emoji{font-size:34px}.abc-word{color:#9a8f7f;font-size:15px;font-weight:700}.review-count{font-size:18px;font-weight:800}.riddle{padding-bottom:110px}.abc-tabs{gap:10px;margin:6px 0;display:flex}.abc-tab{color:#9a8f7f;background:#fff;border:3px solid #e5dccb;border-radius:999px;padding:10px 22px;font-size:17px;font-weight:800}.abc-tab.active{border-color:var(--primary);color:var(--ink);background:#fff0f0}.sounds-note{margin:2px 0 6px}.sounds-group{width:100%;max-width:760px}.sounds-group h3{color:#9a8f7f;margin:14px 0 8px}.abc-letter.snd{font-size:28px}.snd-words{color:#b4ab9c;text-align:center;font-size:12px}.tf-word{font-size:22px}.tf-word b{font-size:26px}.tf-btn{color:#fff;min-height:72px;box-shadow:var(--shadow);border-radius:20px;padding:16px 40px;font-size:26px;font-weight:800}.tf-btn:active{transform:scale(.95)}.tf-btn.yes{background:#58c26e}.tf-btn.no{background:#e26d5c}.parent{gap:14px;width:100%;max-width:640px;margin:0 auto}.parent-header{justify-content:space-between;align-items:center;display:flex}.report-grid{flex-wrap:wrap;gap:14px;display:flex}.stat-card{background:var(--card);text-align:center;box-shadow:var(--shadow);border-radius:18px;padding:18px 26px}.stat-num{color:var(--primary);font-size:34px;font-weight:800}.report-block{background:var(--card);width:100%;box-shadow:var(--shadow);border-radius:18px;padding:16px 20px}.report-block table{border-collapse:collapse;width:100%}.report-block td{border-bottom:1px solid #f0e9da;padding:6px 4px}