@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#101c20;color:#e9e7d9;font-family:'Noto Sans Thai',Tahoma,sans-serif}main{max-width:1600px;margin:auto}header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #40504a;background:#142529}.brand{font:24px Georgia;letter-spacing:5px;color:#dfc58c}.brand span{display:block;font:9px sans-serif;letter-spacing:3px;margin-top:8px;color:#879d97}.location{font-size:14px}.location small{display:block;font-size:9px;letter-spacing:2px;color:#8dafa1;margin-top:3px}button{cursor:pointer;color:inherit;background:#263a38;border:1px solid #607068;border-radius:5px;padding:9px 15px;font:inherit}button:hover{background:#39534a}.world{position:relative;height:calc(100vh - 130px);min-height:540px;overflow:hidden;background:#668a59}canvas{width:100%;height:100%;display:block;outline:none}.profile{position:absolute;top:24px;left:26px;display:flex;gap:12px;padding:14px;background:#142a29ed;border:1px solid #99aa8570;border-radius:8px;box-shadow:0 8px 25px #0003;pointer-events:none}.portrait{width:58px;height:70px;display:grid;place-items:center;font-size:37px;background:#46574b;border:1px solid #ad9871;border-radius:5px}.profile small{font-size:10px;color:#a6b5a5}.profile strong{display:block;font-size:16px}.profile em{font:11px sans-serif;margin-left:60px;color:#e1c485}.bar{width:200px;height:15px;background:#0f1e20;position:relative;margin-top:5px;border-radius:3px;overflow:hidden}.bar i,.exp i{position:absolute;height:100%;left:0;top:0;transition:width .15s}.hp i{background:linear-gradient(90deg,#699956,#a1be6c)}.sp i{background:#619bb1}.bar span{position:absolute;width:100%;text-align:center;font:10px Arial;top:2px}.maplabel{position:absolute;top:28px;right:28px;font:12px Georgia;letter-spacing:2px;text-align:right;text-shadow:0 2px 3px #233}.maplabel small{display:block;font:11px Tahoma;letter-spacing:0;margin-top:7px}.quest{position:absolute;right:26px;top:105px;background:#192d28de;border:1px solid #bec29745;border-radius:6px;width:210px;padding:18px}.quest small{font:9px Arial;letter-spacing:3px;color:#d8bf85}.quest strong{display:block;margin-top:8px;font-size:14px}.quest p{font-size:11px;line-height:1.9;color:#b7c6b1}.quest span{font-size:12px;color:#e2c88e}.bottom{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:390px;text-align:center}nav{display:flex;justify-content:center;gap:9px}nav button{position:relative;width:100px;height:77px;font-size:26px;background:#192d2bed;border-color:#ad9e74;box-shadow:0 3px 9px #0004}nav span{display:block;font-size:10px}kbd{position:absolute;top:4px;left:6px;font:9px Arial;color:#c9cbb5}nav b{position:absolute;right:8px;top:8px;font:13px Arial;color:#e9c692}.exp{height:12px;background:#172a28;margin-top:12px;position:relative;border:1px solid #61715a;border-radius:3px;overflow:hidden}.exp i{background:#d6b66e}.exp span{position:relative;font:9px Arial;display:block}#log{font-size:11px;margin-bottom:12px;text-shadow:0 2px 3px #000;background:#172c268c;border-radius:4px;padding:6px}footer{height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 26px;font-size:10px;color:#a7b9ac}footer b{color:#e2d4ae;margin:0 6px}#notice{position:absolute;top:27%;width:100%;text-align:center;font-size:26px;color:#fff0bc;text-shadow:0 3px 5px #152b22;pointer-events:none}.target{position:absolute;top:26px;left:50%;transform:translateX(-50%);background:#172b29e8;padding:12px 28px;border:1px solid #b7a57a;border-radius:5px;font-size:12px}@media(max-width:750px){header{padding:0 12px}.brand{font-size:18px}.brand span{font-size:7px}.location,footer span:last-child,.quest{display:none}.profile{top:12px;left:12px;transform:scale(.8);transform-origin:top left}.maplabel{font-size:9px;right:12px}.bottom{width:310px}.world{min-height:500px}footer{padding:8px;font-size:9px}}
@media(max-width:1050px){.quest{display:none}.profile{transform:scale(.8);transform-origin:top left}.maplabel{font-size:10px;right:15px;top:18px}.maplabel small{font-size:9px}}

.quest{top:auto;bottom:125px;pointer-events:none}.maplabel,.target{pointer-events:none}

#touch-guard[hidden]{display:none!important}#touch-guard.active{background:#3a6170;box-shadow:0 0 12px #8ddfff}#mobile-actions button{touch-action:none}

#audio-settings{position:fixed;right:12px;top:54px;z-index:35;color:#e4cf9b;background:#152320ed;border:1px solid #8e7e56;padding:5px 9px;font:12px Tahoma}#audio-settings summary{cursor:pointer}#audio-settings label{display:flex;gap:8px;align-items:center;margin:8px 0}#audio-settings input{width:110px}#mobile-actions:has(#touch-guard:not([hidden])){grid-template-columns:repeat(3,1fr)}

#audio-settings p{max-width:250px;white-space:normal;font-size:11px;line-height:1.5}#audio-settings a{display:block;font-size:10px;color:#b7d6cc;max-width:250px}#audio-settings button{padding:7px;font-size:12px;margin:4px 0}