@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{font-family:'Noto Sans Thai',Tahoma,sans-serif;color:#fff5df;background:#120f20;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #dfac5a;border-radius:12px;padding:11px 20px;background:linear-gradient(#5f3f83,#392550);color:#fff6e5;font-weight:600;box-shadow:0 3px 10px #0003}button:hover:not(:disabled){filter:brightness(1.12)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #5cb7ff;outline-offset:3px}button:disabled{cursor:not-allowed}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.screen{min-height:100svh}.cover{position:relative;display:flex;align-items:center;justify-content:center;background:#100f24}.cover-art{display:block;width:100%;height:100svh;object-fit:cover;object-position:center}.entry{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:min(680px,94%);text-align:center;background:linear-gradient(#20152cdd,#150e21ef);border:1px solid #e9bc7180;box-shadow:0 8px 35px #0008;border-radius:18px;padding:14px 24px}.entry p{margin:4px 0 10px;text-shadow:0 1px 4px #000}.entry-buttons{display:flex;justify-content:center;gap:12px}.gold{background:linear-gradient(#ffdf87,#d79c3b);color:#4e2c1c;border-color:#ffedb5}.small{font-size:11px;opacity:.8;margin:7px 0!important}.entry .gold{min-width:200px}.text-button{border:0;background:none;box-shadow:none;color:inherit;font-size:12px;text-decoration:underline;padding:5px 0;display:inline-block}.toolbar{height:52px;display:flex;align-items:center;justify-content:space-between;padding:5px 3%;background:#211729}.toolbar button{padding:6px 14px;font-size:13px}.toolbar span{font-size:12px;color:#efd69e}.creation-stage{position:relative;width:min(1536px,100%);aspect-ratio:3/2;margin:auto}.ui-art{position:absolute;width:100%;height:100%;inset:0}.choices{position:absolute;left:3.3%;top:31%;width:57.1%;height:43%;display:grid;grid-template-columns:repeat(4,1fr);gap:2.5%}.character-choice{position:relative;min-width:0;padding:0;overflow:hidden;background:none;border:0;border-radius:22px;box-shadow:none}.character-choice.selected{border:3px solid #ffe69d;box-shadow:0 0 16px #ffd35a;background:#261e25}.character-choice canvas{width:100%;height:100%;object-fit:cover;display:block}.choice-name,.selected-tag{position:absolute;left:0;right:0;z-index:1;background:#223668ef;padding:5px;font-size:clamp(10px,1.3vw,17px)}.choice-name{top:0}.selected-tag{bottom:0;background:linear-gradient(#439ce2,#1c59ae);color:#fff8b6}.unavailable{background:#171523a6;backdrop-filter:grayscale(1)}.unavailable span{position:absolute;top:0;left:0;right:0;background:#291a38e8;padding:8px 0;font-size:clamp(10px,1.2vw,16px)}.unavailable strong{position:absolute;inset:40% 0 auto;background:#161024e8;color:#fff0d5;padding:15px 0;font-size:clamp(10px,1.3vw,18px);border-top:1px solid #b8955c;border-bottom:1px solid #b8955c}.character-form{position:absolute;top:14.5%;left:62.3%;width:32.3%;height:77%;background:linear-gradient(110deg,#fff0d8,#f5d8b6);color:#623622;border:3px solid #cf914b;border-radius:24px;padding:2% 2.1%;box-shadow:inset 0 0 0 3px #ffecca,0 5px 20px #25151250;display:flex;flex-direction:column;gap:4px;overflow:auto}.character-form h2{font-size:clamp(15px,1.6vw,22px);margin:0 0 6px;text-align:center;color:#7e3928}.profile-picker{display:flex;align-items:center;gap:15px;margin-bottom:2px}.profile-image{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:3px solid #d4a350;background:#261c21;flex-shrink:0}.upload-label{display:inline-block;cursor:pointer;background:#fff8e9;border:1px solid #c58c54;padding:8px 12px;border-radius:20px;font-size:12px;color:#4a4787}.character-form .text-button{color:#8a573a}.character-form label{font-size:13px;font-weight:600}.character-form input,.character-form textarea{color-scheme:light;color:#623622;background:#fff9ee;border:1px solid #cc9a6c;border-radius:8px;padding:9px 11px;width:100%;font-size:13px}.character-form textarea{resize:vertical;min-height:52px;max-height:90px}.field-hint,.counter{font-size:10px;color:#97765d;margin:0}.counter{text-align:right}fieldset{margin:3px 0;padding:4px 8px 7px;border:1px solid #d4a576;border-radius:9px;min-width:0}legend{font-size:12px;font-weight:600;padding:0 6px}.swatches{display:flex;gap:8px;justify-content:center}.swatch{padding:0;width:29px;height:29px;border:2px solid #fff3dc;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #b88e6d}.swatch[aria-pressed=true]{outline:3px solid #3477d5;outline-offset:1px}.play-button{margin-top:auto;flex-shrink:0;padding:10px;background:linear-gradient(#a26bff,#6833d5);border:2px solid #e3ae55;border-radius:18px;font-size:clamp(16px,1.9vw,25px);text-shadow:0 2px 3px #412079;box-shadow:inset 0 0 0 2px #c4a1ff}.error{color:#a22b28;font-size:12px;margin:0;min-height:16px}.game{position:relative;min-height:100svh;background:linear-gradient(#100d2411,#100d2477),url('assets/scene.png') center/cover}.game-top{display:flex;align-items:center;gap:12px;padding:20px 4%;background:linear-gradient(#160e2ce8,transparent)}.game-top div{margin-right:auto}.game-top h1{margin:0;font-size:30px}.eyebrow{font-size:11px;letter-spacing:2px;color:#f4d386}.player{position:absolute;left:10%;bottom:8%;width:min(30vw,320px);display:flex;flex-direction:column;align-items:center}.player canvas{width:100%;height:auto;max-height:65svh;object-fit:contain;border-radius:25%;box-shadow:0 0 35px #21152344}.nameplate{display:flex;align-items:center;gap:8px;background:#1c142fe8;border:1px solid #e8c077;border-radius:24px;padding:4px 15px 4px 4px;margin-bottom:9px;max-width:100%;white-space:nowrap}.nameplate span{max-width:220px;overflow:hidden;text-overflow:ellipsis}.nameplate .profile-image{width:38px;height:38px;border-width:2px}.game-menu{position:absolute;right:6%;top:29%;width:min(470px,49%);padding:25px;background:#1c152be8;border:1px solid #cca561;border-radius:22px}.game-menu h2{font-size:22px}.game-menu p{font-size:13px;color:#e2ceb0}.menu-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.locked{filter:saturate(.2);opacity:.7}#gameBio{white-space:pre-wrap;overflow-wrap:anywhere}dialog{width:min(430px,94%);border:1px solid #d7aa65;border-radius:20px;background:#291d37;color:#ffedcf;padding:28px;box-shadow:0 15px 80px #000a}dialog::backdrop{background:#080616bf;backdrop-filter:blur(6px)}dialog h2{margin:10px 0}.close{float:right;padding:0 8px;font-size:24px;border:0;background:none;box-shadow:none}dialog input{display:block;width:100%;background:#160f21;border:1px solid #96764f;border-radius:8px;padding:11px;color:white;margin:6px 0 14px}dialog label{font-size:13px}.auth-note{font-size:12px;color:#d4bfa5}dialog .gold{width:100%;margin:10px 0}dialog .error{color:#ffb4a6}#switchAuth{display:block;margin:auto}
@media(min-width:1600px){.character-form{gap:8px}.character-form input,.character-form textarea{font-size:16px}.character-form label{font-size:16px}.swatch{width:36px;height:36px}.profile-image{width:85px;height:85px}}
@media(max-width:900px){.cover-art{object-fit:contain;object-position:center 10%;height:70svh}.cover{align-items:flex-start;background:radial-gradient(#49213b,#130d22)}.entry{bottom:8%;padding:20px 12px}.entry-buttons{flex-wrap:wrap}.entry .gold{width:100%}.creation-stage{aspect-ratio:auto;padding:25px 16px;background:linear-gradient(#110d2866,#110d28cc),url('assets/character-ui.png') center/cover}.ui-art{display:none}.creation-stage:before{content:'สร้างตัวละคร · เทศกาลลอยกระทง';display:block;font-size:23px;text-align:center;text-shadow:0 2px 8px #000;margin-bottom:20px}.choices{position:relative;inset:auto;width:100%;height:300px;gap:10px}.character-choice{border:1px solid #d8b061;background:#241a32}.character-choice canvas{object-fit:contain}.choice-name,.selected-tag,.unavailable span,.unavailable strong{font-size:12px}.character-form{position:relative;inset:auto;width:min(600px,100%);height:auto;overflow:visible;margin:24px auto 0;padding:22px;gap:9px}.character-form h2{font-size:22px}.character-form label{font-size:14px}.character-form input,.character-form textarea{font-size:16px}.profile-image{width:75px;height:75px}.swatch{width:35px;height:35px}.swatches{gap:13px}.play-button{font-size:23px;margin-top:10px}.field-hint,.counter{font-size:11px}.game-top{flex-wrap:wrap}.game-top button{font-size:11px;padding:8px}.player{left:4%;bottom:40%;width:40%}.game-menu{top:auto;bottom:3%;right:4%;width:92%;padding:17px}.game-menu h2{font-size:17px;margin:6px 0}.nameplate{font-size:12px}.nameplate .profile-image{width:30px;height:30px}.game{min-height:950px}.player canvas{max-height:430px}.menu-buttons button{font-size:12px;padding:10px}}
@media(max-width:480px){.choices{height:440px;grid-template-columns:1fr 1fr}.unavailable strong{padding:9px 0}.character-choice canvas{object-fit:contain}.profile-picker{gap:10px}.toolbar span{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game{min-height:850px}}
.sr-only{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important}
.tone-icon{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;margin-right:4px;border-radius:50%;background:#f4d4ac;border:1px solid #d4a576;font-size:19px;vertical-align:middle;line-height:1}
.swatch{background:#fff4e0;border-radius:9px}.swatch svg{display:block;width:100%;height:100%;padding:2px;filter:drop-shadow(0 1px 1px #65432255)}