@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{font-family:'Noto Sans Thai',sans-serif;color:#46644b;background:#fff9ec;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{max-width:1400px;margin:auto;padding:25px 40px;border-bottom:1px solid #e9e6d5;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:#58794b;font-family:Mali,cursive;font-size:29px;font-weight:700}.brand span{color:#f08c55}.brand small{font:10px sans-serif;letter-spacing:2px;display:block}.pill,.mini-pill{border:1px solid #d2dec0;background:#eff3db;border-radius:30px;padding:7px 15px;font-size:12px}main{max-width:1400px;margin:35px auto 0;padding:0 40px;display:grid;grid-template-columns:1fr minmax(320px,480px) 270px;gap:32px;align-items:start}.intro{padding-top:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#879c73}h1{font-family:Mali,cursive;font-size:clamp(34px,3.5vw,52px);line-height:1.3;letter-spacing:-2px;margin:20px 0}h1>span{display:block;color:#ec8b50}.spark{font-size:30px;vertical-align:top;padding-left:8px}.intro>p{font-size:15px;line-height:1.9;color:#83907b}.rules{margin:32px 0}.rules>div{display:flex;flex-direction:column;padding:12px 0;gap:4px}.rules b{font-size:14px}.rules span{font-size:12px;padding-left:26px;color:#88927e}.how{border-top:1px dashed #cdd8bb;padding-top:22px;font-size:13px}.how p{line-height:1.9;color:#83907b}.little{font-family:Mali,cursive;display:block;color:#d99a80;font-size:14px;transform:rotate(-4deg);margin-top:30px}.hud{display:flex;align-items:center;justify-content:space-between;background:#f9d9d9;border:2px solid #eac5c6;border-radius:16px 16px 0 0;padding:15px 16px;font-size:11px;gap:8px}.hud b{display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;font-size:14px}.score-label strong{font-size:26px;display:block;line-height:1.1;color:#6c6853}#hearts{color:#e98494;white-space:nowrap;font-size:21px}.arena{position:relative;aspect-ratio:480/620;border:6px solid #b7ce9e;border-top:0;border-radius:0 0 24px 24px;overflow:hidden;background:#edf3dd}#game{position:absolute;inset:0}canvas{display:block;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#eff4dfdf;padding:20px}.overlay[hidden]{display:none}.welcome,.end-card{text-align:center;width:100%;max-width:320px}.welcome>img{display:block;width:155px;height:170px;object-fit:contain;margin:15px auto 0}.welcome h2,.end-card h2{font-family:Mali,cursive;font-size:23px;margin:10px 0}.welcome p,.end-card p{font-size:12px;color:#7d8e70}.welcome small{font-size:10px;color:#8a967e}form{text-align:left;margin:20px 0 13px}label{font-size:12px;display:block;margin-bottom:6px}input{width:100%;border:1.5px solid #d1dcbd;border-radius:12px;padding:13px;font:inherit;font-size:14px;background:#fffdf5;color:#45614a;outline:none}input:focus{border-color:#ed9a87;box-shadow:0 0 0 3px #f6d9cc}button{border:0;border-bottom:4px solid #d99397;background:#f4b7bc;color:#674d4d;border-radius:12px;padding:13px 16px;font:600 14px 'Noto Sans Thai',sans-serif;cursor:pointer;width:100%;margin-top:12px}button:hover{filter:brightness(1.03);transform:translateY(-1px)}button:disabled{opacity:.6;cursor:wait}.secondary{border:1px solid #d7dfc8;background:#f9fbee;color:#758568;font-size:11px;padding:9px}.under-game{display:flex;justify-content:space-between;font-size:10px;color:#8b9a79}.under-game span{color:#c18f77}aside{background:#fffdf6;border:1.5px solid #dedfc8;border-radius:22px;padding:23px 20px}.board-heading{text-align:center}.board-heading>span{font-size:31px}.board-heading .eyebrow{margin-top:10px;font-size:9px}.board-heading h2{font-family:Mali,cursive;font-size:22px;margin:9px 0}.board-heading p{color:#9a9d89;font-size:11px}.board-top{border-top:1px dashed #d6ddc6;border-bottom:1px solid #e8e9da;display:flex;justify-content:space-between;font-size:10px;padding:15px 0;margin-top:25px}#board-status{font-size:12px;text-align:center;line-height:1.8;color:#9a917e;padding:20px 0}ol{list-style:none;padding:0;margin:0}li{display:flex;gap:10px;border-bottom:1px solid #f0eedf;padding:13px 0;font-size:12px}li span:nth-child(2){flex:1;overflow-wrap:anywhere}li b{color:#de965f}.board-note{text-align:center;font-size:10px;color:#9caa8a;line-height:1.8;margin-top:24px}.end-card{background:#fffdf5;padding:25px;border-radius:22px;box-shadow:0 10px 35px #556c3520}#end-score{font-family:Mali,cursive;font-size:60px;color:#ec8b50}#save-status{overflow-wrap:anywhere}footer{max-width:1320px;margin:30px auto;padding:20px 0;border-top:1px solid #e7e6d4;font-size:10px;color:#a2a68e;display:flex;justify-content:space-between}#load-status{font-size:11px;color:#aa725b}@media(max-width:1100px){main{grid-template-columns:1fr minmax(320px,460px);gap:25px}aside{grid-column:1/-1}footer{margin:25px 40px}.intro{padding-top:10px}}@media(max-width:650px){header{padding:15px 20px}.brand{font-size:23px}.pill{font-size:9px;padding:6px 9px;max-width:130px}main{display:flex;flex-direction:column;padding:0 16px;margin-top:20px;gap:18px}.intro{width:100%;padding:0}.intro .eyebrow{font-size:8px}h1{font-size:34px;margin:10px 0}h1>span{display:inline;padding-left:8px}.intro>p{font-size:12px;margin:8px 0}.intro>p br{display:none}.rules{display:flex;gap:13px;margin:10px 0}.rules>div{padding:5px 0;flex:1}.rules b{font-size:10px}.rules span{font-size:9px;padding:0}.how,.little{display:none}.play-column,aside{width:100%}.hud{padding:10px 13px}.arena{max-height:calc(100svh - 125px)}.welcome>img{width:125px;height:140px;margin-top:12px}.welcome h2{font-size:21px}.welcome p{margin:7px 0}form{margin:14px 0}footer{margin:20px 16px}.under-game{font-size:9px}}
.character-picker{border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 15px;min-width:0}.character-picker legend{text-align:center;font-size:12px;margin-bottom:9px;width:100%;color:#647e55}.character-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:0;padding:9px 5px 7px;border:2px solid #d4dfc2;border-radius:15px;background:#fffdf4;cursor:pointer;min-height:137px}.character-option img{width:85px;height:103px;object-fit:contain}.character-option input{position:absolute;left:7px;top:7px;width:16px;height:16px;margin:0;accent-color:#e58c9b}.character-option:has(input:checked){border-color:#e495a1;background:#fff0ed;box-shadow:0 0 0 2px #f7d7d5}.character-option:focus-within{outline:3px solid #eab574;outline-offset:2px}.end-card .character-option{min-height:112px}.end-card .character-option img{width:65px;height:75px}.welcome h2{margin-top:5px}.overlay{overflow-y:auto}.welcome{margin:auto}.end-card{margin:auto}@media(max-width:650px){.character-option{min-height:126px}.character-option img{width:75px;height:90px}.character-picker{margin:9px 0 12px}.welcome h2{font-size:19px}.overlay{padding:14px}}
[hidden]{display:none!important}.hub{max-width:1240px;margin:30px auto 50px;padding:0 35px}.hub-hero{display:flex;align-items:center;justify-content:center;gap:80px;background:#eef2dc;border:2px solid #d7dfbf;border-radius:30px;padding:32px 45px}.hub-hero h1{font-size:50px;margin:14px 0}.hub-hero p{font-size:15px;line-height:1.9;color:#859375}.hub-hero img{width:185px;height:220px;object-fit:contain;transform:rotate(4deg)}.hub-section-title{display:flex;align-items:center;justify-content:space-between;margin:30px 0 15px}.hub-section-title h2{font-family:Mali,cursive;font-size:24px}.hub-section-title span{font-size:12px;color:#a29a80}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.game-card{margin:0;border:1.5px solid #dfdfc7;border-bottom:4px solid #d5d9b9;background:#fffdf5;text-align:left;padding:23px;display:flex;flex-direction:column;gap:9px;min-height:235px;position:relative}.game-card:nth-child(3n+2){background:#fff0ef;border-color:#eed4d3}.game-card:nth-child(3n){background:#f3f5e5;border-color:#d9e1c4}.game-card .game-icon{font-size:36px}.game-card b{font-family:Mali,cursive;font-size:21px;color:#566b4b}.game-card>span:not(.game-icon){font-size:12px;color:#8d927d}.game-card small{font-size:10px;color:#96977e}.game-card .card-play{align-self:flex-end;color:#b77c6c!important;margin-top:auto}.game-card:focus-visible{outline:3px solid #de9a86;outline-offset:4px}.hub-note{text-align:center;color:#999f85;font-size:11px;margin:24px 0}.game-controls{font-size:11px;line-height:1.8;color:#829375}.intro>h1{font-size:36px;line-height:1.5}.intro>p{overflow-wrap:anywhere}.intro .secondary{margin:0 0 25px}.play-column .secondary{margin-bottom:6px}@media(max-width:800px){.game-grid{grid-template-columns:repeat(2,1fr)}.hub{padding:0 20px}.hub-hero{gap:25px;padding:25px}.hub-hero h1{font-size:37px}.hub-hero img{width:130px;height:180px}}@media(max-width:480px){.hub{padding:0 16px;margin-top:18px}.hub-hero{padding:22px 18px;gap:5px}.hub-hero h1{font-size:29px;letter-spacing:-1px}.hub-hero p{font-size:11px}.hub-hero .eyebrow{font-size:7px}.hub-hero img{width:100px;height:150px}.game-grid{gap:11px}.game-card{padding:15px;min-height:213px}.game-card b{font-size:17px}.game-card>span:not(.game-icon){font-size:10px}.game-card small{font-size:9px}.hub-section-title h2{font-size:20px}.hub-section-title span{font-size:10px}.intro>h1{font-size:28px}.intro>p{line-height:1.8}.intro .secondary{margin-bottom:10px}.hub-note{line-height:1.9}}
.hub-hero h1>span{display:block;padding-left:0;white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:12px}#language{font:500 13px 'Noto Sans Thai',sans-serif;color:#526b4d;background:#fffdf5;border:1.5px solid #d1dcbd;border-radius:12px;padding:9px 12px;cursor:pointer;min-width:100px}#language:focus-visible{outline:3px solid #ecb294;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brand .brand-first{color:#58794b}.hub-hero h1 .hero-first{color:#46644b}html[lang=en] h1{letter-spacing:-1px}html[lang=en] .hub-hero h1{font-size:42px}html[lang=en] .game-card b{font-size:19px}html[lang=en] .intro>h1{font-size:31px}@media(max-width:650px){.header-actions .pill{display:none}html[lang=en] .hub-hero h1{font-size:27px}html[lang=en] .game-card b{font-size:16px}html[lang=en] .intro>h1{font-size:27px}#language{min-width:95px}}
.sound-toggle{width:auto;margin:0;white-space:nowrap;border:1.5px solid #d1dcbd;border-bottom:3px solid #c8d4b7;background:#fffdf5;color:#526b4d;padding:9px 12px;font-size:12px;border-radius:12px;min-height:39px}.sound-toggle:focus-visible{outline:3px solid #ecb294;outline-offset:2px}.sound-toggle[aria-pressed=false]{background:#f3f1e9;color:#8a8b79}@media(max-width:650px){.header-actions{gap:7px}.sound-toggle{padding:8px;font-size:11px}#language{padding:8px;min-width:85px}}

.character-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.character-option{min-height:108px;padding:7px 3px}.character-option img{width:65px;height:76px}.end-card .character-option{min-height:100px}.end-card .character-option img{width:60px;height:68px}@media(max-width:650px){.character-option{min-height:94px}.character-option img{width:58px;height:65px}.character-picker{gap:6px}}