@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#101323;color:#f1ecff;font:14px 'Space Grotesk','Noto Sans Thai',sans-serif;overflow:hidden}#game{display:block;width:100vw;height:100dvh;image-rendering:pixelated}.vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 40px #090c27aa}header{position:absolute;top:0;left:0;right:0;height:94px;padding:24px 36px;display:flex;align-items:center;gap:14px;background:linear-gradient(#0c1025e8,transparent)}button{font:inherit;color:inherit;border:1px solid #a5a2d73b;background:#181d32dc;border-radius:8px;padding:10px 15px;cursor:pointer}button:hover{border-color:#6ef4e7;background:#28324c}.brand{display:flex;gap:12px;align-items:center;color:#e2c7ff;text-decoration:none;font-size:30px}.brand span{font-size:24px;letter-spacing:5px;font-weight:700}.brand small{display:block;font-size:9px;letter-spacing:4px;color:#a5a4c3;margin-top:3px}.district{margin:auto;color:#b1b4cf;font-size:11px;letter-spacing:2px}.district i,.map i{display:inline-block;background:#67f0c2;width:5px;height:5px;border-radius:50%;margin:0 5px 2px 18px}.panel{background:#10182de8;border:1px solid #b2a3e330;border-radius:12px;backdrop-filter:blur(14px);box-shadow:0 8px 30px #090b2422}.player{position:absolute;top:116px;left:32px;display:flex;gap:12px;padding:15px;width:270px;align-items:center}.avatar{background:#685087;color:#6ff3e0;border:1px solid #ba86e7;width:42px;height:46px;display:grid;place-items:center;font-size:30px}.player small{display:block;font-size:10px;color:#aaa8c7;margin-top:5px}.player>span{position:absolute;bottom:12px;right:14px;font-size:9px;color:#8cd7d3}.bar{width:158px;height:4px;background:#26434e;margin:10px 0 2px}.bar i{display:block;width:100%;height:100%;background:#75e4c7}.quest{position:absolute;top:116px;right:32px;width:264px;padding:21px}.eyebrow{color:#c4a0ed;letter-spacing:2px;font-size:10px}h2{font-size:19px;font-weight:500;margin:12px 0}.quest p{color:#c9c5dc;font-size:12px;line-height:1.8}.quest #progress{letter-spacing:12px;font-size:22px;color:#70e5e3;margin:12px 0}.quest #hint{color:#8a8ba9;font-size:10px}.location{position:absolute;bottom:100px;left:34px;display:flex;gap:12px;align-items:center}.location>span{font-size:40px;color:#bb91ef}.location small{display:block;color:#a8a5c0;font-size:10px}.location b{font-weight:500;font-size:17px}.map{position:absolute;bottom:100px;right:32px;padding:13px}.map small{font-size:8px;color:#b6b1d0;letter-spacing:1px}.map small span{float:right;color:#78dadb}.map canvas{display:block;margin-top:8px;border-radius:4px}.map div{font-size:9px;color:#8d96ab;margin-top:8px}.map i{margin-left:0}footer{position:absolute;bottom:0;left:0;width:100%;padding:24px 34px;display:flex;justify-content:space-between;align-items:center;background:#0e142bed;color:#9a9db9;font-size:11px;border-top:1px solid #c9c1ff1c}kbd{font:10px monospace;border:1px solid #555974;border-bottom:2px solid #555974;padding:4px 6px;border-radius:4px;margin:0 5px;color:#d6d5e8}footer span{color:#75e3de}footer button{margin-left:18px;font-size:11px}#prompt{position:absolute;left:50%;bottom:135px;transform:translateX(-50%);color:#e5faff;font-size:12px;background:#161e38d9;border:1px solid #82d8d770;border-radius:6px;padding:10px 18px;display:none}#toast{position:absolute;top:100px;left:50%;transform:translateX(-50%);background:#203748ed;color:#a4fff0;padding:12px 25px;border-radius:8px;opacity:0;transition:opacity .4s;pointer-events:none}dialog{background:#141a32;color:#f2edff;border:1px solid #9d81ce;border-radius:15px;width:min(480px,90vw);padding:32px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#080d2199;backdrop-filter:blur(5px)}dialog small{color:#66e8dc;letter-spacing:3px}dialog p{line-height:1.9;color:#c0bed6}dialog button{float:right;color:#8cf0df}.touch,.interact{display:none}@media(max-width:700px){header{padding:18px;height:75px}.brand span{font-size:18px}.brand small{font-size:7px}.district,#sound{display:none}header #help{margin-left:auto}.player{left:15px;top:85px;transform:scale(.8);transform-origin:top left}.quest{top:85px;right:15px;width:190px;padding:14px}.quest h2{font-size:16px}.quest p{font-size:11px}.quest #hint{display:none}.map{display:none}.location{bottom:170px;left:20px}footer{padding:13px 18px}footer>div{display:none}footer>span{width:100%;display:flex;justify-content:space-between;align-items:center}.touch{display:block;position:absolute;bottom:66px;left:20px;text-align:center}.touch button{width:43px;height:40px;padding:5px;touch-action:none;background:#1c2546c9}.touch section{display:flex;gap:4px;margin-top:4px}.interact{display:block;position:absolute;bottom:85px;right:25px;border-radius:50%;width:65px;height:65px;border-color:#68d8d8;color:#8aeeea;font-size:22px;touch-action:none}#prompt{bottom:160px;white-space:nowrap;font-size:11px}}
.battle-hud{position:absolute;top:112px;left:30px;width:268px;padding:16px 18px}.battle-hud>div:first-child{display:flex;align-items:center;gap:10px;margin-bottom:12px}.battle-hud b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.battle-hud button{margin-left:auto;padding:3px 8px}#heroLevel{font-size:10px;background:#8671b833;color:#d8b9ff;padding:5px 7px;border:1px solid #b68ce766;border-radius:5px;white-space:nowrap}.battle-hud small{display:block;font-size:9px;color:#b5b4d0;margin:4px 0 8px}.hp-track,.xp-track{height:5px;background:#28314c;border-radius:4px;overflow:hidden}.hp-track i,.xp-track i{display:block;height:100%;transition:width .2s;border-radius:4px}.hp-track i{background:linear-gradient(90deg,#579f9a,#92f5ca)}.xp-track{height:3px}.xp-track i{background:linear-gradient(90deg,#a580eb,#e1b7ff)}.hotbar{position:absolute;bottom:94px;left:50%;transform:translateX(-50%);display:flex;padding:7px;gap:5px}.hotbar button{position:relative;min-width:70px;padding:8px 7px 5px;border-color:transparent;background:#1e2540}.hotbar button.active{background:#374462;border-color:#91ddd7;box-shadow:inset 0 0 14px #83f5dc18}.hotbar span{display:block;font-size:24px;height:32px}.hotbar small{display:block;font-size:8px;color:#9eabc3}.hotbar em{font-size:8px;font-style:normal;color:#cbcbe1}#creator{padding:0;width:min(900px,94vw);max-width:900px;max-height:94dvh;overflow:auto;background:linear-gradient(120deg,#1c233b,#15192f)}#heroForm{display:grid;grid-template-columns:.9fr 1.1fr}#creator button{float:none}.creator-art{padding:32px 25px;position:relative;background:radial-gradient(ellipse at 40% 45%,#68609c44,transparent 70%),linear-gradient(140deg,#252b48,#171c34);border-right:1px solid #bda6f326;overflow:hidden}.creator-art:before{content:'✦';position:absolute;font-size:300px;line-height:1;color:#a391da08;right:-90px;top:100px}.creator-art h1{font-size:28px;line-height:1.5;font-weight:500;letter-spacing:-1px}.creator-art h1 span{color:#b5a0df}.creator-art canvas{display:block;max-width:100%;margin:-10px auto 0}.preview-label{text-align:center;letter-spacing:3px;font-size:8px;color:#9c99bc}.creator-options{padding:30px}.creator-options h2{font-size:23px;margin-top:8px;margin-bottom:23px}.creator-options label{display:block;font-size:11px;color:#c8c4dc}.creator-options input[type=text],#heroInput{width:100%;background:#11182c;color:#efeaff;border:1px solid #69628277;border-radius:7px;font:inherit;font-size:14px;padding:10px 12px;margin-top:7px}.creator-options fieldset{padding:0;border:0;margin:15px 0}.creator-options legend{font-size:10px;color:#c8c4dc;margin-bottom:7px}.choices{display:flex;gap:6px}.choices button{flex:1;font-size:11px;padding:8px 6px;background:#242a44;color:#bbb9cf}.choices button.selected{border-color:#9fdfda;color:#c6fff3;background:#3b4860;box-shadow:0 0 12px #6ce4e513}.outfit-choices{display:grid;grid-template-columns:1fr 1fr}.outfit-choices i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--swatch);margin-right:6px}.outfit-choices button{font-size:9px}.weapon-choices button{font-size:9px}.weapon-choices span{font-size:22px;display:block}#weaponDesc{font-size:9px;color:#9cabc0;display:block;margin-top:6px}.check{display:flex!important;align-items:center;gap:7px;font-size:10px!important}.check input{accent-color:#92ddd4}.enter-city{width:100%;margin-top:21px;background:linear-gradient(110deg,#a2e6da,#b6c5ff)!important;color:#19273b!important;font-weight:700;padding:13px}.creator-note{text-align:center;font-size:9px;color:#7f86a1}.attack-touch,.guard-touch{display:none}#prompt{bottom:207px}header{gap:10px}.brand{margin-right:10px}#customize{font-size:11px}#help,#sound{font-size:11px}
@media(max-width:700px){.battle-hud{top:84px;left:14px;width:174px;padding:11px}.battle-hud b{font-size:11px}.battle-hud>div:first-child{gap:5px;margin-bottom:9px}.battle-hud small{font-size:8px;margin-bottom:5px}#heroLevel{font-size:8px;padding:3px}#editHero{display:none}.quest{width:163px}.quest h2{margin:7px 0;font-size:14px}.quest #progress{margin:5px 0;font-size:17px}.quest .eyebrow{font-size:8px}#customize{font-size:9px;padding:8px}.brand span{letter-spacing:2px;font-size:16px}.brand{gap:5px;font-size:22px;margin-right:0}header{gap:6px}header #help{font-size:9px;padding:8px}.hotbar{bottom:64px;padding:4px;gap:3px}.hotbar button{min-width:40px;padding:5px 3px}.hotbar em{display:none}.hotbar small{font-size:7px}.hotbar span{font-size:20px;height:27px}.hotbar #shieldToggle small{font-size:6px}.touch{bottom:135px;left:15px}.interact{bottom:240px;right:19px;width:42px;height:42px;font-size:16px}.attack-touch{display:block;position:absolute;right:18px;bottom:145px;width:72px;height:72px;border:1px solid #cda3e6;border-radius:50%;font-size:31px;background:linear-gradient(140deg,#735b8dcc,#293c65ee);touch-action:none}.guard-touch{display:block;position:absolute;right:100px;bottom:140px;width:45px;height:45px;border-radius:50%;font-size:22px;touch-action:none}.location{bottom:245px;font-size:12px}.location b{font-size:13px}#prompt{bottom:302px;font-size:9px;max-width:95vw}#heroForm{grid-template-columns:1fr}#creator{max-height:94dvh}.creator-art{padding:16px;border-right:0;border-bottom:1px solid #bda6f326}.creator-art h1{font-size:18px;position:absolute;top:40px;left:20px}.creator-art canvas{width:160px;height:181px;margin:0 0 0 auto}.creator-art .eyebrow{font-size:8px}.preview-label{font-size:6px;position:absolute;left:20px;bottom:25px}.creator-options{padding:20px}.creator-options h2{font-size:19px;margin-bottom:15px}.creator-options fieldset{margin:12px 0}.creator-note{margin-bottom:0}}