:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#183e35;background:#f1f3e9;font-synthesis:none;--ink:#183e35;--gold:#efd67c;--green:#176950}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;background:#fff9e9;border:1px solid #b9c7af;color:var(--ink);border-radius:12px;min-height:40px;padding:8px 14px;font-weight:750}button:hover{filter:brightness(1.05)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #f5b64e;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}a{color:inherit}.sitebar{height:66px;max-width:1340px;padding:14px 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;font-size:.85rem}.brand{text-decoration:none;font-size:1.35rem;font-weight:900}.brand span{color:#479572}.stage{position:relative;max-width:1280px;aspect-ratio:5/3;background:#153f3e;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 18px 60px #1d4f3522;isolation:isolate}.stage canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;outline:none}.playing .sitebar,.playing footer{display:none}.playing{overflow:hidden}.playing .stage,.stage:fullscreen{position:fixed;inset:0;border-radius:0;width:100vw;height:100dvh;max-width:none;aspect-ratio:auto}.hud{position:absolute;inset:max(8px,env(safe-area-inset-top)) 12px auto;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:10;pointer-events:none}.stats,.tools{display:flex;gap:7px;align-items:center;pointer-events:auto}.stats>span{padding:7px 11px;border-radius:12px;background:#103b36e8;color:#fff8d7;font-weight:850}.stats>span:empty{display:none}.tools button{background:#103b36ed;color:#fff8e1;border-color:#bad4be66;font-size:.78rem;min-height:36px;padding:6px 10px}.promptbox{position:absolute;top:58px;left:50%;transform:translateX(-50%);width:max-content;max-width:91%;text-align:center;background:#fffaf0f5;color:#173f35;border:1px solid #fff6ce;box-shadow:0 4px 12px #183c3019;border-radius:16px;padding:9px 20px;z-index:8;pointer-events:none}.promptbox>span{display:block;font-size:.65rem;letter-spacing:.13em;color:#66816c;text-transform:uppercase;font-weight:850}.promptbox strong{display:block;font-size:clamp(.9rem,1.9vw,1.25rem)}.promptbox small{display:block;margin-top:4px;font-size:.72rem;color:#546e59}.feedback{position:absolute;left:50%;bottom:91px;transform:translateX(-50%);max-width:85%;padding:9px 18px;border-radius:12px;font-weight:800;color:#fff;background:#175b4bef;z-index:35;pointer-events:none;opacity:0;text-align:center;transition:opacity .16s}.feedback.show{opacity:1}.feedback.bad{background:#85462bef}.controls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:14px;right:14px;display:flex;justify-content:space-between;gap:8px;z-index:15;pointer-events:none}.control-group{display:flex;gap:9px;pointer-events:auto}.controls button{background:#113b37d9;color:#fff8dc;border:1px solid #dcefd380;min-width:64px;min-height:56px;touch-action:none;user-select:none}.controls button.down{background:#bf9650;transform:scale(.95)}.panel{position:absolute;right:12px;top:143px;width:min(340px,35vw);max-height:calc(100% - 220px);overflow:auto;padding:14px;border-radius:18px;background:#fff9eef5;border:1px solid #c8d7ba;z-index:20;box-shadow:0 10px 24px #153c3320}.panel h3{margin:0 0 10px;font-size:1rem}.panel p{margin:5px 0 12px;line-height:1.45;font-size:.85rem}.panel .choices{display:flex;flex-wrap:wrap;gap:7px}.panel .choices button{flex:1 1 auto}.panel button.selected{background:#176950;color:#fff}.panel .answer{padding:10px;min-height:44px;border:1px dashed #97ad8b;border-radius:8px;margin-bottom:10px;font-size:.9rem}.panel .full{width:100%;margin-top:9px}.panel .tip{font-size:.73rem;color:#667c64}.panel .palette{display:grid;grid-template-columns:1fr 1fr;gap:6px}.swatch{display:inline-block;width:13px;height:13px;vertical-align:middle;border-radius:3px;margin-right:5px}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#102d2caa;z-index:40;padding:20px;overflow:auto;backdrop-filter:blur(4px)}.menu{background:linear-gradient(110deg,#153e36e8,#245b4144)}.menu-card,.dialog{width:min(500px,100%);background:#fffaf0;border:1px solid #fff7da;border-radius:24px;padding:30px;text-align:center;box-shadow:0 15px 60px #07292138}.menu-card h1{font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.03;margin:12px 0}.eyebrow{font-size:.67rem;letter-spacing:.16em;font-weight:900;color:#64816a}.hero-icon{font-size:3rem;margin:12px}.lead{font-size:1rem;line-height:1.5;margin:8px auto;color:#496754}.thai{font-size:.8rem;color:#72846c}.setup{display:flex;justify-content:center;gap:12px;margin:18px 0 8px}.setup label{display:grid;gap:6px;text-align:left;font-size:.7rem;font-weight:750;color:#526a57}select{border:1px solid #bccbb1;background:#f0f2e7;color:#213f32;border-radius:10px;padding:9px}.primary{background:#176950;color:#fff9e3;border-color:#176950;padding:13px 22px;min-height:48px;box-shadow:0 5px 0 #0c4837}.menu-card>.primary{width:100%;margin:7px 0 12px}.best{font-size:.76rem;margin:8px;color:#6a7e63}details{font-size:.78rem;margin:15px 0;text-align:left;line-height:1.55}summary{cursor:pointer;font-weight:750;text-align:center}.back{display:inline-block;font-size:.78rem;text-decoration:none;color:#5a735d}.dialog{max-width:390px}.dialog button{display:block;width:100%;margin:12px 0}.dialog h2{font-size:1.9rem;margin:12px}.result-score{font-size:2.7rem;font-weight:900;color:#166950}.rotate{z-index:80;background:#123c35;color:#fff5d9;text-align:center}.rotate span{font-size:4rem}.rotate p{font-size:.9rem;color:#d4dfcc}footer{text-align:center;font-size:.72rem;padding:18px;color:#6a7b63}.hub{max-width:1160px;margin:30px auto;padding:25px}.hub h1{font-size:clamp(2rem,4vw,3.5rem);max-width:650px;line-height:1.05}.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0}.hub-card{display:block;text-decoration:none;background:#fffaf0;padding:25px;border:1px solid #d8dec9;border-radius:22px;box-shadow:0 7px 0 #dce3d0}.hub-card>span{font-size:3rem}.hub-card h2{font-size:1.2rem}.hub-card p{font-size:.9rem;line-height:1.5}.hub-card small{font-size:.7rem;font-weight:800;color:#6c8265}.hub-card:hover{transform:translateY(-3px)}
@media(max-width:800px){.sitebar{padding:10px 16px}.sitebar>a:last-child:not(.brand){font-size:.7rem}.hub-grid{grid-template-columns:repeat(2,1fr)}.stage{border-radius:0}.menu-card{padding:20px}.panel{width:36vw;padding:9px;font-size:.8rem}.panel button{padding:6px 9px;min-height:33px;font-size:.8rem}.promptbox{top:50px;padding:6px 12px}.stats>span{font-size:.75rem;padding:7px}.tools button{font-size:.7rem;min-height:32px;padding:5px 7px}.panel h3{font-size:.9rem}.controls button{min-width:52px;min-height:47px;font-size:.85rem}.hud{left:7px;right:7px}.hero-icon{margin:4px}}
@media(max-height:520px){.menu-card{padding:14px 25px;width:min(600px,94%)}.hero-icon{display:none}.menu-card h1{font-size:1.8rem;margin:6px}.lead{font-size:.85rem;margin:5px}.thai{margin:5px}.setup{margin:9px}.menu-card>.primary{width:auto;margin:5px;min-height:38px;padding:8px 30px}.menu-card details{margin:8px}.menu-card .best{margin:4px}.overlay{padding:8px}.controls{bottom:8px}.controls button{min-height:43px}.panel{top:113px;max-height:calc(100% - 170px)}.promptbox strong{font-size:.9rem}.promptbox{top:45px}.promptbox small{font-size:.67rem}.dialog{padding:15px}.dialog h2{font-size:1.5rem}.dialog button{margin:8px}.feedback{bottom:62px;font-size:.8rem}}
@media(orientation:portrait) and (max-width:1024px){.stage{min-height:75dvh;aspect-ratio:auto}.menu-card{max-width:92%}.hub-grid{grid-template-columns:1fr}.sitebar{height:60px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.panel h2{font-size:1rem;margin:0 0 10px}.panel .word-bank{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.panel .sentence{padding:10px;border:1px dashed #8aa685;border-radius:10px;min-height:44px}.panel .choice{display:block;width:100%;margin:7px 0;text-align:left}.panel>.primary{display:block;width:100%;margin-top:12px}.panel .small{font-size:.73rem}.panel>button:not(.primary):not(.choice){margin:5px 4px 0 0}
/* V3.0.6: readable clues and rewards */
.promptbox{top:66px;width:min(780px,86%);max-width:86%;padding:12px 22px;border:3px solid #e9bf55;border-bottom-width:6px;background:#fffdf2;box-shadow:0 8px 28px #061e4755;pointer-events:none}.promptbox>span{font-size:.75rem;letter-spacing:.1em;color:#785621}.promptbox strong{font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.22;color:#113c39}.promptbox small{font-size:clamp(.9rem,1.5vw,1.1rem);line-height:1.3;color:#294b45;margin-top:6px}.new-clue{animation:clue-arrive .4s ease-out}.paused-clue{display:block;font-size:1.6rem;color:#1d604f}.stats #health{background:linear-gradient(#a12f4e,#6c2339);color:#fff5f8}.stats #coins{background:linear-gradient(#ffe8a3,#d5a843);color:#553e12;border:1px solid #fff1ba}.stats #score{background:#163a42}.stats small{background:#173e36df;padding:6px 9px;border-radius:9px;color:#ffe9b3;font-size:.72rem}.tools #readClue{background:#f5d47b;color:#284a3e;border-color:#f7df9f}.panel{top:190px;max-height:calc(100% - 270px);border:2px solid #dfc58c}.panel h2{font-size:1.18rem}.panel p,.panel button{font-size:1rem;line-height:1.35}.panel .small{font-size:.9rem}.panel .sentence{font-size:1.1rem;background:#f7f0d9}.panel .choice{padding:12px}.word-bank button{min-height:44px}.feedback{max-width:80%;font-size:1.05rem;text-shadow:0 1px 1px #0003}.hud{inset:max(9px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto max(12px,env(safe-area-inset-left))}.stats>span{font-size:1rem}.controls button{box-shadow:0 4px 0 #092b2d88}.panel .build-checklist{padding-left:18px;font-size:.86rem}.panel .build-checklist li{margin-bottom:5px}.warning-pill{color:#993e2d;background:#fff0d5;padding:6px;border-radius:8px}.panel .palette{gap:5px}
@keyframes clue-arrive{from{opacity:1;transform:translateX(-50%) translateY(-7px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media(max-height:520px){.hud{top:7px;left:8px;right:8px}.stats{gap:4px}.stats>span{font-size:.8rem;padding:6px 8px}.stats small{display:none}.tools{gap:4px}.tools button{font-size:.7rem;min-height:32px;padding:5px 8px}.promptbox{top:46px;padding:7px 15px;border-width:2px;border-bottom-width:4px;width:78%;max-width:78%}.promptbox>span{font-size:.6rem}.promptbox strong{font-size:clamp(1.03rem,2.4vw,1.3rem)}.promptbox small{font-size:.88rem;line-height:1.2;margin-top:3px}.panel{top:139px;max-height:calc(100% - 195px);width:35vw;padding:10px}.panel h2{font-size:1rem}.panel p,.panel button,.panel .small{font-size:.87rem}.panel .palette button{min-height:34px;padding:6px}.feedback{font-size:.85rem;bottom:61px}.dialog{max-height:94dvh;overflow:auto}.paused-clue{font-size:1.25rem}}
@media(max-width:620px) and (orientation:landscape){.tools #sound{font-size:0;min-width:31px}.tools #sound::after{content:'♫';font-size:16px}.stats>span{font-size:.73rem;padding:6px}.tools button{padding:5px 6px}.promptbox{width:94%;max-width:94%}.promptbox strong{font-size:1.05rem}.promptbox small{font-size:.8rem}.panel{top:136px;max-height:calc(100% - 190px);width:35vw}.controls button{min-width:42px;padding:6px 10px}.control-group{gap:5px}.controls{left:9px;right:9px}}
@media(prefers-reduced-motion:reduce){.new-clue{animation:none}}