:root{--sky-0:#071218;--sky-1:#10262b;--sky-2:#16352f;--lantern:#ff8a45;--lantern-2:#ffc45a;--chili:#e23d3d;--leaf:#2f9e74;--leaf-2:#7dcaa8;--paper:#fff6e8;--paper-2:#f7e4c4;--ink:#1b1612;--ink-soft:#5b5046;--line:#fff6e81f;--shadow:0 18px 50px #00000059;--thai:"Noto Sans Thai", "Noto Sans SC", sans-serif;--sc:"Noto Sans SC", "Noto Sans Thai", sans-serif;--display:"Fraunces", "Noto Sans SC", serif;--radius:22px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--paper);font-family:var(--sc);background:var(--sky-0);margin:0}#root{width:100%;max-width:none;text-align:initial;border:0}button,input{font:inherit}button{cursor:pointer}.th{font-family:var(--thai)}.app-sky{background:radial-gradient(900px 420px at 12% -8%,#ff8a4547,#0000 55%),radial-gradient(700px 380px at 92% 0,#ffc45a29,#0000 50%),radial-gradient(600px 500px at 70% 100%,#2f9e742e,#0000 55%),linear-gradient(#071218 0%,#10282c 42%,#14332c 100%);min-height:100svh;position:relative;overflow-x:hidden}.app-sky:before{content:"";pointer-events:none;opacity:.7;background-image:radial-gradient(circle at 18% 22%,#ffc45a73 0 1.2px,#0000 1.8px),radial-gradient(circle at 72% 18%,#fff6e859 0 1px,#0000 1.6px),radial-gradient(circle at 40% 8%,#ff8a4566 0 1px,#0000 1.6px);position:absolute;inset:0}.shell{z-index:1;width:min(1180px,100% - 28px);margin:0 auto;padding:22px 0 96px;position:relative}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand h1{font-family:var(--display);letter-spacing:.02em;color:var(--paper);margin:0;font-size:28px}.brand p{color:var(--lantern-2);letter-spacing:.18em;margin:2px 0 0;font-size:12px}.lantern-mark{color:#3a1408;background:linear-gradient(#ffb25a,#ff7a3a);border-radius:14px;place-items:center;width:44px;height:44px;font-size:22px;display:grid;box-shadow:0 0 24px #ff8a458c}.stats{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.pill{border:1px solid var(--line);color:var(--paper);background:#fff6e814;border-radius:999px;align-items:center;gap:6px;padding:8px 12px;font-size:13px;display:inline-flex}.xp-wrap{min-width:160px}.xp-bar{background:#fff6e81f;border-radius:99px;height:7px;margin-top:6px;overflow:hidden}.xp-bar>span{background:linear-gradient(90deg, var(--lantern), var(--lantern-2));height:100%;display:block}.nav{gap:8px;margin-bottom:18px;display:flex}.nav button{border:1px solid var(--line);color:var(--paper);background:#fff6e80f;border-radius:999px;padding:9px 14px}.nav button.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}.grid{grid-template-columns:1.4fr .8fr;gap:18px;display:grid}@media (width<=860px){.grid{grid-template-columns:1fr}.brand h1{font-size:22px}}.card{color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(#fff6e8f5,#f7e4c4f0);padding:22px}.card h2,.card h3{font-family:var(--display);margin:0 0 8px}.muted{color:var(--ink-soft)}.kicker{letter-spacing:.16em;text-transform:uppercase;color:#9a4b1c;margin-bottom:6px;font-size:12px}.stall-hero{position:relative;overflow:hidden}.stall-hero .th-big{font-family:var(--thai);margin:4px 0 10px;font-size:clamp(32px,5vw,52px);line-height:1.15}.hook{margin:0 0 14px;font-size:16px;line-height:1.7}.row{flex-wrap:wrap;gap:8px;display:flex}.chip{color:var(--paper);background:#16352f;border-radius:999px;padding:6px 10px;font-size:12px}.quest{flex-direction:column;gap:10px;margin-top:16px;display:flex}.quest button.q{text-align:left;color:var(--ink);background:#fffaf1;border:1px solid #e6d2ae;border-radius:16px;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;display:flex}.quest button.q.done{background:#e7f6ee;border-color:#b7e0c8}.quest .q b{display:block}.quest .q span{color:var(--ink-soft);font-size:12px}.side .card+.card{margin-top:14px}.culture{color:var(--paper);background:#16352f;border-radius:18px;padding:16px;line-height:1.7}.culture strong{color:var(--lantern-2)}.cta{color:#fff;background:linear-gradient(90deg,#e23d3d,#ff8a45);border:0;border-radius:999px;padding:12px 18px;font-weight:700}.cta.ghost{color:inherit;background:0 0;border:1px solid}.cta:disabled{opacity:.45;cursor:not-allowed}.cta.ink{background:var(--ink);color:var(--paper)}.word-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;display:grid}.word{text-align:left;color:var(--ink);background:#fffaf1;border:1px solid #e6d2ae;border-radius:16px;padding:12px}.word .th{font-size:22px;font-weight:700}.word .rtgs{color:#8a5a32;font-size:12px}.word .zh{margin-top:4px}.tone{color:#2f9e74;font-size:11px}.speak{color:#3a1408;background:#ff8a45;border:0;border-radius:999px;padding:6px 10px;font-weight:700}.choices{gap:8px;margin-top:14px;display:grid}.choices button{color:var(--ink);text-align:left;background:#fff;border:1px solid #e6d2ae;border-radius:14px;padding:12px}.choices button.ok{background:#d9f5e5;border-color:#2f9e74}.choices button.bad{background:#ffd7d0;border-color:#e23d3d}.blocks{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.blocks button{color:var(--ink);font-family:var(--thai);background:#fff8ea;border:1px dashed #c9aa78;border-radius:12px;padding:10px 12px;font-size:18px}.map{grid-template-columns:repeat(15,1fr);gap:6px;display:grid}@media (width<=720px){.map{grid-template-columns:repeat(10,1fr)}}.lantern{aspect-ratio:1;color:#fff6e866;background:#fff6e814;border:0;border-radius:10px;font-size:11px}.lantern.done{color:#3a1408;background:linear-gradient(#ffb25a,#ff7a3a)}.lantern.today{outline:2px solid var(--lantern-2);color:var(--paper)}.lantern.lock{opacity:.35}.onboard{place-items:center;min-height:100svh;padding:24px;display:grid}.onboard .card{width:min(640px,100%)}.onboard h1{font-family:var(--display);margin:0 0 8px;font-size:36px}.onboard input,.onboard select{width:100%;color:var(--ink);background:#fff;border:1px solid #e6d2ae;border-radius:12px;margin:8px 0 16px;padding:12px 14px}.gender{grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 16px;display:grid}.gender button{color:var(--ink);background:#fffaf1;border:1px solid #e6d2ae;border-radius:16px;padding:16px 10px}.gender button.on{color:var(--paper);background:#16352f;border-color:#16352f}.play-top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.feedback{margin-top:12px;font-weight:700}.feedback.ok{color:#1f7a54}.feedback.bad{color:#b42318}.coach{background:#fffaf1;border:1px solid #e6d2ae;border-radius:16px;margin-top:12px;padding:12px 14px}.coach.ok{background:#f3fbf6;border-color:#7dcaa8}.coach.bad{background:#fff6f4;border-color:#f0b4ae}.coach .feedback{margin-top:0}.coach-issue{color:var(--ink);margin:8px 0 0;font-size:14px;line-height:1.55}.coach-issue b{margin-bottom:2px;display:block}.diff-line{align-items:baseline;gap:8px;margin:6px 0 0;display:flex}.diff-chars{letter-spacing:.04em;font-size:22px}.diff-chars i{border-radius:4px;padding:0 1px;font-style:normal}.diff-ok{color:#1f7a54}.diff-bad{color:#b42318;background:#b423181f}.diff-miss{color:#b42318;background:#b423181f;text-decoration:underline}.diff-extra{color:#9a6700;background:#ffc45a73}.progress-line{background:#ead7b4;border-radius:99px;height:6px;margin:8px 0 16px;overflow:hidden}.progress-line>i{background:#2f9e74;height:100%;display:block}.month-row{grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px;display:grid}.month-row button{text-align:center;color:inherit;background:#fff6e814;border:0;border-radius:14px;justify-items:center;gap:4px;padding:10px 8px;font-size:12px;display:grid}.month-row button.on{background:var(--paper);color:var(--ink)}.month-row button .thai-tap{font-size:13px}.celebrate{text-align:center;padding:8px 0 4px}.celebrate .th{font-size:40px}.city-pick{gap:10px;margin:12px 0 16px;display:grid}.city-pick button{color:var(--ink);text-align:left;background:#fffaf1;border:1px solid #e6d2ae;border-radius:16px;padding:14px}.city-pick button.on{color:var(--paper);background:#16352f;border-color:#16352f}.city-pick button p{opacity:.88;margin:6px 0 0;font-size:13px;line-height:1.5}.pill{cursor:default}button.pill{cursor:pointer}.gender.three{grid-template-columns:1fr 1fr 1fr}.thai-tap{cursor:pointer;color:inherit;font-family:var(--thai);-webkit-tap-highlight-color:#ff8a4540;border-bottom:1px dashed #ff8a45b3;border-radius:3px;display:inline}.thai-tap:hover,.thai-tap:focus-visible{background:#ff8a452e;outline:none}.lookalike{background:#ffc45a73;border-radius:3px;padding:0 1px;font-style:normal;font-weight:700}.hint-box{color:#35564a;background:#2f9e741f;border-left:3px solid #2f9e74;border-radius:10px;margin:8px 0 0;padding:10px 12px;font-size:13px;line-height:1.55}.hint-box p{margin:6px 0 0}.hint-shapes{flex-wrap:wrap;gap:6px;display:flex}.shape-chip{color:var(--ink);background:#fff6e8;border:1px solid #e6d2ae;border-radius:999px;align-items:center;gap:4px;padding:4px 10px;font-size:13px;display:inline-flex}.shape-chip b{font-size:18px;font-weight:700}.shape-chip em{color:#c45c26;font-size:12px;font-style:normal}.th-lg{font-size:clamp(28px,7vw,42px);font-weight:700;line-height:1.2}.th-line{font-family:var(--thai);margin:0 0 10px;font-size:clamp(20px,5vw,26px)}.skit{flex-direction:column;gap:12px;max-height:min(52vh,420px);margin:12px 0 4px;padding-right:4px;display:flex;overflow-y:auto}.skit-row{align-items:flex-end;gap:8px;display:flex}.skit-row.you{flex-direction:row-reverse}.skit-avatar{background:#16352f;border-radius:50%;flex:0 0 40px;place-items:center;width:40px;height:40px;font-size:22px;display:grid;box-shadow:0 0 0 2px #ffc45a}.skit-row.you .skit-avatar{background:#3a2418}.skit-bubble{max-width:min(78%,420px);color:var(--ink);background:#fffaf1;border:1px solid #e6d2ae;border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:16px;line-height:1.45}.skit-row.you .skit-bubble{color:#fff6e8;background:#16352f;border-color:#16352f;border-radius:16px 16px 4px}.skit-bubble.on{box-shadow:0 0 0 2px #ff8a4573}.skit-who{opacity:.7;margin-bottom:4px;font-size:12px}.skit-bubble .speak{margin-top:8px}.skit-row.you .skit-bubble .muted,.skit-row.you .skit-bubble .rtgs{color:#fff6e8b8}.nav-short{display:none}.backup-panel{border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);background:linear-gradient(#fff6e8f5,#f7e4c4f0);margin-bottom:14px;padding:16px 20px}.backup-panel p{margin:0 0 12px;font-size:14px;line-height:1.6}.backup-panel .row{gap:10px}.backup-panel .feedback{margin-top:10px}@media (width<=720px){.shell{width:calc(100% - 16px);padding:12px 0 calc(88px + env(safe-area-inset-bottom))}.topbar{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:12px}.stats{justify-content:flex-start}.pill{padding:7px 10px;font-size:12px}.xp-wrap{flex:1;min-width:0}.brand h1{font-size:22px}.brand p{letter-spacing:.06em}.nav{z-index:30;padding:8px 8px calc(8px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);background:#071218f0;justify-content:space-between;gap:4px;margin:0;position:fixed;bottom:0;left:0;right:0}.nav button{flex:1;min-height:44px;padding:10px 2px;font-size:12px}.nav-full{display:none}.nav-short{display:inline}.card{border-radius:18px;padding:16px}.stall-hero .th-big{font-size:32px}.hook{font-size:15px}.word-grid{grid-template-columns:1fr}.month-row{grid-template-columns:repeat(3,1fr)}.map{grid-template-columns:repeat(6,1fr);gap:5px}.lantern{border-radius:8px;font-size:10px}.onboard{align-items:start;padding:12px}.onboard .card{width:100%}.onboard h1{font-size:26px}.onboard input{font-size:16px}.gender{grid-template-columns:1fr}.gender.three{grid-template-columns:1fr 1fr 1fr}.play-top{flex-wrap:wrap}.cta,.quest button.q,.choices button{min-height:44px}.city-pick button{padding:12px}}@media (width<=420px){.gender.three{grid-template-columns:1fr}.stats .pill:nth-child(n+4){display:none}}