:root{--bg:#f7f6fe;--surface:#fff;--tint:#f3efff;--tint2:#e6e2ff;--text:#21294b;--muted:#68728e;--line:#e6e9f3;--primary:#7666dc;--primary2:#a79ef5;--mint:#3cbfa1;--pink:#f589b0;--sky:#8bc8f5;--orange:#ffb77f;--shadow:0 12px 38px #3f478515;--glow:#8370e625;--hero1:#e9e7ff;--hero2:#e8f7f3;--nav:#fff}
html[data-theme=peach]{--bg:#fff7f6;--surface:#fff;--tint:#ffecf0;--tint2:#ffdaea;--text:#423451;--muted:#776775;--line:#f4e5e9;--primary:#b45782;--primary2:#f5aac4;--mint:#6bbfa3;--pink:#e98caf;--sky:#a5d5ef;--orange:#f5bd8d;--hero1:#fff0e9;--hero2:#ffe1ec;--glow:#e790a320}
html[data-theme=sky]{--bg:#f4f9ff;--surface:#fff;--tint:#e8f3ff;--tint2:#d9ebff;--text:#243653;--muted:#63758b;--line:#e2edf6;--primary:#4d7ac9;--primary2:#9cbbf4;--mint:#56c9b1;--pink:#ef9dc6;--sky:#7fc8f2;--orange:#f4bd88;--hero1:#e3f1ff;--hero2:#e8f9fc;--glow:#7da9e725}
html[data-theme=midnight]{--bg:#151d33;--surface:#25304a;--tint:#303653;--tint2:#444970;--text:#f5f4ff;--muted:#abb5d1;--line:#3d4866;--primary:#aaa0ff;--primary2:#877fe7;--mint:#77dfc8;--pink:#f3a0c9;--sky:#8dbdf6;--orange:#f5c58b;--hero1:#34365e;--hero2:#24475a;--nav:#242d46;--shadow:0 12px 38px #03081655;--glow:#958ce640}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Noto Sans Thai',Tahoma,sans-serif;font-size:14px;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.53;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--primary);outline-offset:3px}a{color:var(--primary)}.app-shell{margin:auto;max-width:510px;min-height:100dvh;padding:0 20px calc(104px + env(safe-area-inset-bottom));position:relative}.loading{display:grid;min-height:100dvh;align-content:center;place-items:center;color:var(--primary)}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:linear-gradient(145deg,#a29cf5,#6ed8be);color:white;font-size:14px;font-weight:900;box-shadow:0 5px 15px #6e80bd2c}.loading .brand-icon{width:64px;height:64px;font-size:22px}.loading p{color:var(--muted)}.app-header{height:78px;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px;text-align:left;min-width:0}.brand strong{font-size:20px;line-height:1.1;letter-spacing:-.5px;white-space:nowrap}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.25px;margin-top:4px}.top-right{display:flex;align-items:center;gap:8px}.tiny-icon{border:none;background:var(--surface);width:38px;height:38px;border-radius:14px;display:grid;place-items:center;box-shadow:0 3px 14px #6f7f9d0e;color:var(--text)}.top-avatar{display:grid;place-items:center;border-radius:50%;width:36px;height:36px;background:linear-gradient(135deg,#e6d9ff,#c8f6e8);color:#6350a5;font-weight:800;border:2px solid white}.top-streak{display:flex;gap:3px;align-items:center;font-weight:800;color:#f18f55;padding:5px}.main-content{animation:page-in .32s cubic-bezier(.23,.82,.34,.99)}@keyframes page-in{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.eyebrow{color:var(--primary);font-weight:850;letter-spacing:1.1px;font-size:10px;text-transform:uppercase}.page-title{font-size:23px;letter-spacing:-.5px;margin:3px 0 7px;line-height:1.35}.subtitle{color:var(--muted);font-size:12px;line-height:1.6;margin:4px 0 18px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:23px 0 12px;gap:10px}.section-head h2{font-size:15px;margin:0;font-weight:850}.section-head .link{font-size:12px;font-weight:800;border:none;background:transparent;color:var(--primary)}.game-hero{position:relative;overflow:hidden;background:linear-gradient(117deg,var(--hero1),var(--hero2));min-height:162px;border-radius:22px;padding:19px;display:flex;align-items:center;box-shadow:var(--shadow)}.game-hero h2{font-size:21px;letter-spacing:-.5px;line-height:1.35;margin:6px 0 6px;position:relative;z-index:1;max-width:61%}.game-hero p{font-size:11px;color:var(--muted);max-width:65%;position:relative;z-index:1;margin:0 0 11px}.game-hero .hero-art{position:absolute;right:-19px;bottom:-6px;width:58%;height:96%;opacity:.99;pointer-events:none}.hero-cta{position:relative;z-index:2;padding:8px 13px;background:var(--surface);border:none;color:var(--primary);border-radius:10px;font-weight:850;font-size:11px;box-shadow:0 5px 12px #586b9b1f}.panel{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:16px;box-shadow:0 4px 20px #42527709}.profile-strip{display:grid;grid-template-columns:1.35fr .85fr;gap:9px;margin-top:12px}.strip-card{background:var(--surface);border-radius:16px;padding:12px 13px;border:1px solid var(--line);min-width:0}.strip-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.strip-strong{font-weight:850;font-size:14px}.strip-sub{color:var(--muted);font-size:10px}.track{height:6px;background:var(--tint2);border-radius:30px;overflow:hidden;margin:9px 0 0}.track span{display:block;height:100%;border-radius:30px;background:linear-gradient(90deg,var(--primary),var(--mint));transition:width .6s cubic-bezier(.2,.9,.3,1)}.mission-mini{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);padding:12px 14px;border-radius:16px;text-align:left;gap:7px}.mission-mini .left{display:flex;gap:9px;align-items:center}.mission-icon{width:36px;height:36px;border-radius:12px;background:#fff0dd;display:grid;place-items:center;color:#eda044}.mission-mini b{display:block;font-size:12px}.mission-mini small{color:var(--muted);font-size:10px}.mission-mini .chev{color:var(--primary)}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.feature-tile{height:130px;padding:16px;border:1px solid #fff9;background:linear-gradient(140deg,var(--tile-a),var(--tile-b));border-radius:18px;text-align:left;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;box-shadow:0 6px 18px #536b8a0a}.feature-tile:active,.tap:active{transform:scale(.965)}.feature-tile:hover{box-shadow:0 10px 24px var(--glow)}.feature-tile .feature-ico{width:44px;height:44px;border-radius:13px;background:#ffffffb8;display:grid;place-items:center;position:absolute;top:15px;left:14px;color:#514c83}.feature-tile strong{font-size:13px;font-weight:850;line-height:1.3}.feature-tile small{font-size:10px;opacity:.72;margin-top:3px}.feature-tile .spark{position:absolute;right:15px;top:19px;opacity:.35;transform:rotate(20deg)}.feature-tile.purple{--tile-a:#e5e2ff;--tile-b:#d7d7ff;color:#434179}.feature-tile.coral{--tile-a:#ffe9e3;--tile-b:#ffdde3;color:#a3536e}.feature-tile.mint{--tile-a:#ddfaf0;--tile-b:#c7f3ea;color:#187969}.feature-tile.lilac{--tile-a:#f5ddff;--tile-b:#e8dfff;color:#7452a9}html[data-theme=midnight] .feature-tile{filter:saturate(.8);color:#2a2853}.summary-line{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:11px}.progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.stat-box{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px;text-align:center}.stat-box strong{display:block;font-size:24px;color:var(--text);font-weight:900}.stat-box small{color:var(--muted);font-size:10px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(510px,100%);height:72px;padding:7px 12px calc(4px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);background:var(--nav);box-shadow:0 -5px 20px #30407016;border-top:1px solid var(--line);z-index:20}.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;border-radius:12px;background:transparent;color:var(--muted);font-size:10px}.bottom-nav button.selected{color:var(--primary);font-weight:800}.bottom-nav button.selected svg{filter:drop-shadow(0 3px 4px var(--glow))}.bottom-nav svg{width:21px;height:21px;stroke-width:2.1}.btn{border:none;border-radius:13px;background:var(--primary);color:white;padding:13px 17px;font-weight:800;font-size:12px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .17s,filter .2s}.btn:hover{filter:brightness(1.045)}.btn:active{transform:scale(.97)}.btn.light{background:var(--tint);color:var(--primary)}.btn.white{background:var(--surface);color:var(--primary);border:1px solid var(--line)}.btn.green{background:var(--mint);color:#fff}.btn.wide{width:100%}.btn.sm{min-height:34px;padding:8px 11px;font-size:11px}.back-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0 15px}.back-btn{width:33px;height:33px;border:1px solid var(--line);background:var(--surface);border-radius:11px;display:grid;place-items:center}.counter{font-size:11px;color:var(--primary);font-weight:800}.level-card{width:100%;border:none;padding:19px;min-height:142px;display:flex;position:relative;align-items:center;border-radius:20px;margin:12px 0;text-align:left;overflow:hidden;background:linear-gradient(120deg,var(--t1),var(--t2));color:var(--text);box-shadow:0 7px 18px #56618812}.level-card>div{position:relative;z-index:2;width:58%}.level-card .level-art{position:absolute;right:-3px;bottom:0;height:100%;width:47%;opacity:.85}.level-card h3{font-size:18px;margin:0 0 4px}.level-card p{font-size:12px;line-height:1.4;opacity:.7;margin:0}.level-card .level-tag{font-size:10px;letter-spacing:.2px;font-weight:900;padding:5px 9px;border-radius:20px;background:#ffffffb5;display:inline-block;margin-bottom:10px}.level-card.selected{outline:2px solid var(--primary);outline-offset:1px}.level-card.beginner{--t1:#e3f6f0;--t2:#e5f1dd}.level-card.intermediate{--t1:#e1edff;--t2:#d5edfc}.level-card.advanced{--t1:#eae2ff;--t2:#e9eaff}.study-card{background:var(--surface);padding:15px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.study-visual{height:183px;border-radius:15px;background:linear-gradient(145deg,#f4efff,#eaf7f8);overflow:hidden;position:relative;display:grid;place-items:center}.study-visual .visual-svg{height:100%;width:100%}.study-visual .study-icon{font-size:68px;filter:drop-shadow(0 10px 10px #5a68862a)}.study-card .main-word{text-align:center;margin:21px 0 0;font-size:31px;font-weight:900;letter-spacing:-.7px;line-height:1.2}.pronun{text-align:center;color:var(--primary);font-size:16px;font-weight:800;margin:10px 0 2px}.reading-note{text-align:center;color:var(--muted);font-size:11px}.translate{text-align:center;font-size:18px;font-weight:750;margin:14px 0}.example-box{text-align:center;margin:18px 0 13px;background:var(--bg);padding:15px;border-radius:13px}.example-box p{margin:0 0 5px;line-height:1.5;font-weight:750;font-size:12px}.example-box small{color:var(--muted);font-size:11px}.study-controls{display:flex;align-items:center;justify-content:center;gap:10px}.sound-btn{border:none;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;width:54px;height:54px;border-radius:50%;box-shadow:0 8px 15px var(--glow);display:grid;place-items:center}.small-round{display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);width:38px;height:38px;border-radius:50%}.subtoolbar{display:flex;gap:9px;margin:13px 0}.subtoolbar .btn{flex:1}.search{width:100%;height:46px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;color:var(--text)}.selector{height:40px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px;color:var(--text);font-size:12px;max-width:100%}.category-pills{display:flex;overflow-x:auto;gap:7px;padding:4px 0 12px;scrollbar-width:none}.category-pills button{background:var(--surface);border:1px solid var(--line);border-radius:25px;padding:8px 11px;white-space:nowrap;font-size:11px;font-weight:700}.category-pills .sel{color:var(--primary);background:var(--tint);border-color:var(--primary)}.list-row{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:13px;margin:7px 0;padding:12px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:11px}.list-row strong{font-size:13px}.list-row small{color:var(--muted);font-size:11px;display:block;margin-top:4px}.list-row .arrow{color:var(--primary)}.quiz-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.quiz-head .track{flex:1;margin:0}.hearts{font-size:12px;color:#f58ca8;white-space:nowrap;font-weight:800}.prompt-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:17px;box-shadow:var(--shadow)}.prompt-card .question{font-size:15px;text-align:center;font-weight:850;margin:6px 0 17px}.option{width:100%;display:block;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:9px 0;padding:13px 15px;font-weight:700;color:var(--text)}.option.correct{background:#def7e9!important;border-color:var(--mint);color:#15745d}.option.wrong{background:#ffe3ea;border-color:#ef7194;color:#aa465f}.result-box{padding:14px;background:#e0f7e9;border-radius:14px;color:#147351;margin:14px 0;font-size:13px;font-weight:800}.result-box.bad{background:#ffe9ee;color:#a24a62}.builder-target{font-weight:850;text-align:center;background:var(--tint);padding:14px;border-radius:14px;font-size:15px;margin:15px 0}.slots{min-height:90px;border:2px dashed var(--tint2);background:var(--bg);padding:12px;border-radius:15px;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.slots.empty{align-items:center;color:var(--muted);font-size:12px}.word-chip{border:1px solid var(--line);background:var(--surface);box-shadow:0 3px 8px #5f6a9f11;padding:10px 12px;border-radius:10px;font-weight:800;font-size:12px;animation:tile-in .2s ease}.word-chip.used{opacity:.3}.chip-bank{margin:17px 0;display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.chip-bank button{min-height:42px}.notice{font-size:11px;color:var(--muted);line-height:1.6}.speaking-mic{width:95px;height:95px;border-radius:50%;border:none;background:linear-gradient(145deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 0 0 15px var(--tint),0 8px 25px var(--glow);display:grid;place-items:center;margin:28px auto;transition:transform .25s}.speaking-mic.listening{animation:pulse 1s infinite}.speaking-mic svg{width:36px;height:36px}.speaking-status{font-weight:750;color:var(--primary);text-align:center;font-size:12px;min-height:37px}.record-player{width:100%;margin:8px 0}.score-circle{border:7px solid var(--mint);border-left-color:var(--tint2);width:94px;height:94px;border-radius:50%;display:grid;place-items:center;font-size:23px;font-weight:900;margin:12px auto}.choice-line{display:flex;gap:9px;align-items:center;margin:13px 0}.choice-line button{flex:1;padding:11px 9px;border:1px solid var(--line);background:var(--surface);border-radius:12px;font-size:12px;font-weight:750}.choice-line .active{color:var(--primary);background:var(--tint);border-color:var(--primary)}.progress-header{background:linear-gradient(140deg,var(--hero1),var(--hero2));border-radius:21px;padding:21px;text-align:center}.level-ring{height:126px;width:126px;display:grid;place-items:center;border-radius:50%;margin:8px auto;background:conic-gradient(var(--primary) var(--progress),var(--surface) 0);padding:10px}.level-ring>div{border-radius:50%;background:var(--surface);height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.level-ring strong{font-size:33px}.level-ring small{font-size:10px;color:var(--muted)}.progress-bar-row{margin:13px 0}.progress-bar-row>div{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:750}.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.badge-card{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px;text-align:center}.badge-card.locked{opacity:.5;filter:grayscale(.55)}.badge-card .badge-art{font-size:29px}.badge-card strong{display:block;font-size:11px;margin:6px 0}.badge-card small{color:var(--muted);font-size:10px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:none}.setting-row strong{display:block;font-size:12px}.setting-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.color-choice{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:10px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:850}.color-choice.sel{border:2px solid var(--primary);padding:9px;background:var(--tint)}.color-choice span{height:27px;width:27px;border-radius:9px;background:var(--swatch);border:1px solid #bcbadf66}.small-note{font-size:11px;color:var(--muted);line-height:1.7}.label{display:block;font-size:12px;font-weight:850;margin-bottom:8px}.mission-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.mission-row:last-child{border:0}.mission-row .mission-details{flex:1;min-width:0}.mission-row strong{display:block;font-size:12px}.mission-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.mission-row .track{margin-top:6px}.reward{font-size:11px;color:#ce9b39;font-weight:850;background:#fff4d9;padding:6px;border-radius:7px}.end-card{text-align:center;padding:32px 12px}.end-card .trophy{font-size:48px;animation:trophy-pop .7s ease}.end-card h2{font-size:23px}.end-card p{color:var(--muted)}#toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:#313854;color:white;padding:12px 17px;border-radius:14px;z-index:50;font-size:12px;opacity:0;transition:opacity .2s,transform .2s;max-width:85vw;text-align:center;pointer-events:none;box-shadow:0 8px 25px #0002}#toast.show{opacity:1;transform:translate(-50%,0)}.confetti{position:fixed;z-index:60;width:8px;height:12px;pointer-events:none;animation:confetti-fly 1.1s cubic-bezier(.24,.52,.33,.98) forwards;left:var(--left);top:var(--top);background:var(--color)}@keyframes confetti-fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--angle));opacity:0}}@keyframes tile-in{from{transform:scale(.7);opacity:.5}to{transform:scale(1);opacity:1}}@keyframes pulse{50%{box-shadow:0 0 0 23px #a59aea44,0 0 35px var(--glow)}}@keyframes trophy-pop{50%{transform:scale(1.18)}}@media (min-width:560px){body{background:#e8eaf4}.app-shell{background:var(--bg);box-shadow:0 0 70px #2f3a691c}.bottom-nav{border-radius:18px 18px 0 0}}@media (max-width:365px){.app-shell{padding-left:15px;padding-right:15px}.feature-tile{height:120px;padding:12px}.game-hero h2{font-size:18px}.feature-tile strong{font-size:12px}.game-hero{min-height:158px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.game-hero{justify-content:flex-start}.hero-copy{width:64%;max-width:260px;z-index:2;position:relative}.game-hero .hero-copy h2{max-width:100%;font-size:21px}.game-hero .hero-copy p{max-width:95%}.game-hero .hero-art{width:53%;right:-15px}.hero-copy .eyebrow{font-size:9px;letter-spacing:.7px;margin-bottom:5px}@media(max-width:365px){.game-hero .hero-copy h2{font-size:19px}.hero-copy{width:67%}}

html[data-theme=midnight] .btn:not(.light):not(.white):not(.green){color:#1f2440}.mission-row .reward{color:#956322;background:#fff0ce}.feature-tile strong{font-weight:900}.reading-note,.small-note{color:var(--muted)}

.category-pills.expand{flex-wrap:wrap;overflow:visible}.category-pills button{transition:background .17s,transform .17s}.category-pills button:active{transform:scale(.98)}