:root{--bg: #0e1130;--bg-2: #191e46;--card: #242a54;--card-2: #2d3566;--card-hi: #333c73;--ink: #f5f7ff;--ink-dim: #aab2dd;--line: rgba(255, 255, 255, .09);--line-strong: #3a4482;--accent: #ffd166;--accent-2: #ff9f68;--accent-ink: #3a2a00;--good: #2dd4a7;--good-ink: #00231a;--bad: #ff6b6b;--warn: #ffcf8b;--brand-grad: linear-gradient(135deg, #ffd98a 0%, #ffc24d 100%);--good-grad: linear-gradient(135deg, #3fe0b4 0%, #16b98f 100%);--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--r-sm: 12px;--r: 18px;--r-lg: 24px;--radius: var(--r-lg);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);--shadow-md: 0 2px 6px rgba(0, 0, 0, .22), 0 10px 26px -8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);--shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);--glow-accent: 0 8px 22px -6px rgba(255, 193, 77, .5);--glow-good: 0 8px 22px -6px rgba(45, 212, 167, .45);--tap: .09s cubic-bezier(.34, 1.56, .64, 1);--ease: .2s cubic-bezier(.4, 0, .2, 1);--ipa-font: "Charis SIL", "Doulos SIL", "Gentium Plus", "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", "Noto Sans", system-ui, sans-serif;--ui-font: "Sarabun", "Noto Sans Thai", "Leelawadee UI", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--display-font: "Baloo Thai 2", "Sarabun", "Noto Sans Thai", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:radial-gradient(90% 60% at 12% -5%,rgba(255,159,104,.1) 0%,transparent 55%),radial-gradient(90% 60% at 100% 0%,rgba(45,212,167,.1) 0%,transparent 50%),radial-gradient(130% 110% at 50% 0%,var(--bg-2) 0%,var(--bg) 62%);background-attachment:fixed;color:var(--ink);font-family:var(--ui-font);font-size:17px;line-height:1.5;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3{font-family:var(--display-font);font-weight:700;letter-spacing:.1px}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}input,select{font:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}.app{height:100%;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;padding:env(safe-area-inset-top) var(--s4) env(safe-area-inset-bottom)}.topbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s1) var(--s3);flex-shrink:0}.topbar h1{font-size:23px;margin:0;flex:1;line-height:1.15;min-width:0}.topbar .sub{font-family:var(--ui-font);font-size:13px;color:var(--ink-dim);font-weight:500;display:block;margin-top:2px}.iconbtn{width:48px;height:48px;border-radius:15px;background:var(--card);display:grid;place-items:center;font-size:21px;flex-shrink:0;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform var(--tap),background var(--ease),box-shadow var(--ease)}.iconbtn:active{transform:scale(.9);background:var(--card-2)}.scroll{flex:1;overflow-y:auto;padding-bottom:var(--s5);-webkit-overflow-scrolling:touch}.card{background:linear-gradient(180deg,var(--card-2),var(--card));border-radius:var(--r-lg);padding:var(--s5);border:1px solid var(--line);box-shadow:var(--shadow-md)}.grid{display:grid;gap:var(--s4)}.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.bigbtn{border-radius:var(--r-lg);padding:var(--s5) var(--s4);background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;gap:var(--s2);transition:transform var(--tap),box-shadow var(--ease),background var(--ease),border-color var(--ease);text-align:center}.bigbtn:active{transform:scale(.95)}.bigbtn:disabled{opacity:.4;box-shadow:none}.bigbtn.primary{background:var(--brand-grad);color:var(--accent-ink);border-color:transparent;font-weight:700;box-shadow:var(--glow-accent)}.bigbtn.good{background:var(--good-grad);color:var(--good-ink);border-color:transparent;font-weight:700;box-shadow:var(--glow-good)}.bigbtn.flat{flex-direction:row;justify-content:center;padding:var(--s4);gap:var(--s2)}.phoneme-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--s4) var(--s3);border-radius:var(--r);background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform var(--tap),border-color var(--ease),box-shadow var(--ease);position:relative}.phoneme-card:active{transform:scale(.93)}.phoneme-card.trap{border-color:#c77a2e}.phoneme-card.playing{border-color:var(--accent);background:var(--card-hi);box-shadow:var(--glow-accent)}.phoneme-card .ipa{font-family:var(--ipa-font);font-size:34px;line-height:1;font-weight:600;letter-spacing:.5px}.phoneme-card .grapheme{font-size:13px;color:var(--ink-dim);font-weight:500}.phoneme-card .badge{position:absolute;top:6px;right:8px;font-size:12px}.ipa{font-family:var(--ipa-font)}.sound-hero{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s6) var(--s4);border-radius:var(--r-lg);background:radial-gradient(120% 90% at 50% -10%,rgba(255,193,77,.14) 0%,transparent 60%),linear-gradient(165deg,var(--card-hi),var(--card));border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)}.sound-hero .ipa-big{font-family:var(--ipa-font);font-size:clamp(56px,14vw,96px);line-height:1;font-weight:700;text-shadow:0 6px 24px rgba(0,0,0,.35)}.sound-hero .letters{font-family:var(--display-font);font-size:22px;color:var(--accent);font-weight:700;letter-spacing:3px}.note{font-size:15px;color:var(--ink-dim);line-height:1.65}.note strong{color:var(--ink);font-weight:600}.note.warn{color:var(--warn)}.word-chip{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r);background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform var(--tap),box-shadow var(--ease),border-color var(--ease)}.word-chip:active{transform:scale(.95)}.word-chip .emoji{font-size:30px}.word-chip .w{font-family:var(--display-font);font-size:21px;font-weight:600}.blend-row{display:flex;justify-content:center;gap:var(--s3);flex-wrap:wrap}.blend-part{min-width:76px;padding:var(--s4) var(--s3);border-radius:var(--r);background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:var(--display-font);font-size:34px;font-weight:700;text-align:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow var(--ease),background var(--ease),border-color var(--ease)}.blend-part.active{background:var(--brand-grad);color:var(--accent-ink);border-color:transparent;transform:translateY(-10px) scale(1.08);box-shadow:var(--glow-accent)}.blend-part.done{border-color:var(--good)}.word-reveal{font-family:var(--display-font);font-size:clamp(42px,12vw,76px);font-weight:800;letter-spacing:1px;text-align:center;line-height:1.05}.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}.pair-btn{border-radius:var(--r-lg);padding:var(--s6) var(--s4);background:linear-gradient(180deg,var(--card-2),var(--card));border:2px solid var(--line);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;gap:var(--s3);transition:transform var(--tap),border-color var(--ease),background var(--ease),box-shadow var(--ease)}.pair-btn:active{transform:scale(.96)}.pair-btn .emoji{font-size:46px}.pair-btn .w{font-family:var(--display-font);font-size:24px;font-weight:700}.pair-btn .ipa-hint{font-family:var(--ipa-font);font-size:15px;color:var(--ink-dim)}.pair-btn.correct{border-color:var(--good);background:#2dd4a724;box-shadow:var(--glow-good)}.pair-btn.wrong{border-color:var(--bad);background:#ff6b6b24}.mic{width:112px;height:112px;border-radius:50%;background:radial-gradient(120% 120% at 30% 25%,#ff8a8a,#ef4d4d);display:grid;place-items:center;font-size:46px;margin:0 auto;box-shadow:0 10px 28px -8px #ef4d4d99,inset 0 2px 4px #ffffff40;transition:transform .1s,box-shadow .1s}.mic.recording{animation:pulse 1.3s infinite}.mic:active{transform:scale(.92)}@keyframes pulse{0%{box-shadow:0 0 #ef4d4d80,inset 0 2px 4px #ffffff40}70%{box-shadow:0 0 0 28px #ef4d4d00,inset 0 2px 4px #ffffff40}to{box-shadow:0 0 #ef4d4d00,inset 0 2px 4px #ffffff40}}.score-ring{width:136px;height:136px;border-radius:50%;display:grid;place-items:center;margin:0 auto;font-family:var(--display-font);font-size:40px;font-weight:800;background:conic-gradient(var(--ring-color) var(--ring-deg),var(--line-strong) 0);position:relative;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}.score-ring:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:50%;background:radial-gradient(130% 130% at 50% 30%,var(--card),var(--bg))}.score-ring span{position:relative;z-index:1}.ph-score{display:inline-flex;flex-direction:column;align-items:center;padding:var(--s2) var(--s3);border-radius:var(--r-sm);min-width:56px;background:linear-gradient(180deg,var(--card-2),var(--card));border:2px solid var(--line);box-shadow:var(--shadow-sm);transition:transform var(--tap),border-color var(--ease)}.ph-score:active{transform:scale(.94)}.ph-score .s{font-size:12px;color:var(--ink-dim);font-weight:600}.ph-score.ok{border-color:var(--good)}.ph-score.mid{border-color:var(--accent)}.ph-score.bad{border-color:var(--bad);background:#ff6b6b1f}.stars{letter-spacing:2px;font-size:18px;white-space:nowrap}.row{display:flex;align-items:center;gap:var(--s3)}.row.wrap{flex-wrap:wrap}.spacer{flex:1}.center{text-align:center}.muted{color:var(--ink-dim);font-size:14px}.pill{display:inline-block;padding:5px 13px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink-dim)}.pill.live{background:#2dd4a729;border-color:#2dd4a74d;color:var(--good)}.pill.free{background:#ffd16629;border-color:#ffd1664d;color:var(--accent)}.progress{height:10px;border-radius:999px;background:#00000040;overflow:hidden;box-shadow:inset 0 1px 2px #0000004d}.progress>i{display:block;height:100%;border-radius:999px;background:var(--good-grad);box-shadow:0 0 12px #2dd4a780;transition:width .45s cubic-bezier(.4,0,.2,1)}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}.field label{font-size:14px;color:var(--ink-dim);font-weight:500}.field input{padding:13px 15px;border-radius:var(--r-sm);background:#00000038;border:1px solid var(--line-strong);color:var(--ink);-webkit-user-select:text;user-select:text;transition:border-color var(--ease),box-shadow var(--ease)}.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #ffd16638}.sheet-actions{display:flex;gap:var(--s3);margin-top:var(--s5)}.sheet-actions>*{flex:1}@media (hover: hover){.card,.bigbtn,.word-chip,.phoneme-card,.pair-btn,.ph-score{cursor:pointer}.iconbtn:hover{background:var(--card-2);box-shadow:var(--shadow-md)}.bigbtn:not(:disabled):hover,.phoneme-card:hover,.word-chip:hover,.pair-btn:hover,button.card:not(:disabled):hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.bigbtn.primary:hover{box-shadow:var(--glow-accent),var(--shadow-lg)}.bigbtn.good:hover{box-shadow:var(--glow-good),var(--shadow-lg)}}@media (max-width: 560px){body{font-size:16px}.topbar h1{font-size:21px}.grid.c3{grid-template-columns:repeat(2,1fr)}.card{padding:var(--s4)}.pair-btn{padding:var(--s5) var(--s3)}.pair-btn .emoji{font-size:38px}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.bigbtn:hover,.card:hover,.phoneme-card:hover,.word-chip:hover,.pair-btn:hover{transform:none!important}}