@import "https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;700&display=swap";:root{--color-thai-tea:#d9822b;--color-thai-tea-light:#f2a85a;--color-bts-green:#00833e;--color-mrt-blue:#4b5fad;--color-mrt-purple:#7b5ea7;--color-mango:#f5c842;--color-chili:#e03a2f;--color-cafe-cream:#f7edd8;--color-neon-pink:#f72585;--color-neon-blue:#4cc9f0;--color-jasmine:#faf8f2;--color-night-market:#1a0a2e;--color-ink:#1c1b1a;--color-ink-light:#4a4845;--color-border:#e0d8cc;--color-surface:#fff;--color-surface-raised:#fdfaf5;--tone-mid:#6b9bd2;--tone-low:#7dc57d;--tone-falling:#e07b54;--tone-high:#d4a843;--tone-rising:#b87dc8;--font-ui:"Sarabun", "Noto Sans Thai", system-ui, sans-serif;--font-thai:"Sarabun", "Noto Sans Thai", sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--font-normal:400;--font-medium:500;--font-bold:700;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:.5rem;--radius-md:1rem;--radius-lg:1.5rem;--radius-xl:2rem;--radius-full:9999px;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001f;--shadow-lg:0 8px 24px #00000029;--app-max-width:430px;--bottom-nav-height:64px;--safe-bottom:env(safe-area-inset-bottom,0px);--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-fast:.15s;--duration-normal:.28s;--duration-slow:.5s}@keyframes toneLineDraw{0%{stroke-dashoffset:1px;opacity:1}80%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:.7}}.tone-line-draw{stroke-dasharray:1;stroke-dashoffset:1px;animation:.9s cubic-bezier(.4,0,.2,1) forwards toneLineDraw}@keyframes toneLineDrawLoop{0%{stroke-dashoffset:1px;opacity:0}10%{stroke-dashoffset:1px;opacity:1}78%{stroke-dashoffset:0;opacity:1}90%{stroke-dashoffset:0;opacity:.5}to{stroke-dashoffset:0;opacity:0}}.tone-line-draw-loop{stroke-dasharray:1;stroke-dashoffset:1px;animation:1.8s cubic-bezier(.4,0,.6,1) infinite toneLineDrawLoop}@media (prefers-reduced-motion:reduce){.tone-line-draw,.tone-line-draw-loop{stroke-dashoffset:0;animation:none!important}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.screen-enter{animation:fadeIn var(--duration-normal) var(--ease-out) both}@keyframes stickerFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}@keyframes stickerBounce{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes correctFlash{0%{background:0 0}30%{background:#7dc57d40}to{background:0 0}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes xpPop{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-40px)scale(1.2)}}@keyframes meterFill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes namJaiFloat{0%{opacity:0;transform:translate(-50%)translateY(0)scale(.8)}15%{opacity:1;transform:translate(-50%)translateY(-4px)scale(1.05)}70%{opacity:1;transform:translate(-50%)translateY(-12px)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-24px)scale(.95)}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-ui);font-size:var(--text-base);color:var(--color-ink);background:var(--color-jasmine);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#root{background:var(--color-border);justify-content:center;align-items:stretch;display:flex}.app-shell{width:100%;max-width:var(--app-max-width);background:var(--color-jasmine);flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.screen{padding-bottom:calc(var(--bottom-nav-height) + var(--safe-bottom));-webkit-overflow-scrolling:touch;flex:1;overflow:hidden auto}.screen--no-nav{padding-bottom:0}.thai{font-family:var(--font-thai);font-size:var(--text-lg);line-height:1.6}.roman{font-size:var(--text-sm);color:var(--color-ink-light);font-style:italic}.en{font-size:var(--text-sm);color:var(--color-ink-light)}.btn{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-family:var(--font-ui);font-size:var(--text-base);font-weight:var(--font-bold);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce), opacity var(--duration-fast);border:none;justify-content:center;align-items:center;min-height:48px;display:inline-flex}.btn:active{transform:scale(.96)}.btn-primary{background:var(--color-thai-tea);color:#fff}.btn-secondary{background:var(--color-surface);color:var(--color-ink);border:2px solid var(--color-border)}.btn-ghost{color:var(--color-ink-light);background:0 0}.card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-4)}::-webkit-scrollbar{width:0;height:0}:focus-visible{outline:2px solid var(--color-thai-tea);outline-offset:2px}