:root{--surface:#0d1b1bd1;--surface-hover:#1d3534eb;--line:#cab0726b;--line-soft:#a3c2b03d;--text:#f3f3ed;--text-dim:#b5bfb0;--accent:#e4ba58;--health:#d03948;--heal:#66d68b;--mana:#3c85d7;--track:#070e0dd9;--space:8px;--touch-size:44px;--radius:8px;--edge-top:max(var(--space), env(safe-area-inset-top));--edge-left:max(var(--space), env(safe-area-inset-left));--edge-right:max(var(--space), env(safe-area-inset-right));--edge-bottom:max(var(--space), env(safe-area-inset-bottom))}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#265434;margin:0;font-family:Inter,Noto Sans Thai,system-ui,sans-serif;font-size:14px;overflow:hidden}[hidden]{display:none!important}#stage{place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}#game{image-rendering:pixelated;touch-action:none;flex:none;display:block}.visually-hidden{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.ui-button{justify-content:center;align-items:center;gap:var(--space);min-width:var(--touch-size);min-height:var(--touch-size);padding:0 calc(var(--space) * 1.5);border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;pointer-events:auto;transition:background-color .15s,border-color .15s,opacity .15s;display:inline-flex}.ui-button:hover:not(:disabled){background:var(--surface-hover)}.ui-button:focus-visible,.slot:focus-visible,.wheel-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ui-button:disabled{color:var(--text-dim);opacity:.8;cursor:default}.ui-button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.ui-button.round{border-radius:50%;padding:0}.portrait{border:2px solid var(--accent);object-fit:cover;object-position:top;image-rendering:pixelated;background:#18302f;border-radius:50%;flex:none}.frame-body{gap:calc(var(--space) / 2);flex:1;min-width:0;display:grid}.frame-title{justify-content:space-between;gap:var(--space);white-space:nowrap;font-weight:700;display:flex}.bar{border-radius:calc(var(--radius) / 2);background:var(--track);height:16px;position:relative;overflow:hidden}.bar-thin{flex:1;height:6px}.bar-fill{background:var(--health);height:100%;transition:width .15s}#mana-fill{background:var(--mana)}#experience-fill{background:var(--accent)}.bar-text{font-variant-numeric:tabular-nums;text-align:center;font-size:12px;line-height:16px;position:absolute;inset:0}#player-frame,#target-frame{top:var(--edge-top);align-items:center;gap:var(--space);padding:var(--space);pointer-events:none;display:flex;position:fixed}#player-frame{left:var(--edge-left);width:264px}#target-frame{width:248px;left:50%;transform:translate(-50%)}.frame-footer{align-items:center;gap:var(--space);display:flex}#vitals-coins{align-items:center;gap:calc(var(--space) / 2);color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700;display:flex}#vitals-coins img{image-rendering:pixelated}#right-column{top:var(--edge-top);right:var(--edge-right);justify-items:end;gap:var(--space);pointer-events:none;display:grid;position:fixed}#top-right{align-items:flex-start;gap:var(--space);display:flex}#system-strip{align-items:flex-start;gap:calc(var(--space) / 2);display:flex}#clock,#perf-summary{font-variant-numeric:tabular-nums;white-space:nowrap}#clock,#online-count{pointer-events:none;cursor:default}#online-count{white-space:nowrap}#online-count[hidden]{display:none}#clock-time,#perf-fps{font-weight:600}#clock-period,#perf-ping{color:var(--text-dim)}#perf{pointer-events:none;position:relative}#perf-fps[data-health=good]{color:#81da8f}#perf-fps[data-health=fair]{color:#f2cc5a}#perf-fps[data-health=poor]{color:#f08675}#perf-details{top:calc(100% + var(--space) / 2);gap:calc(var(--space) / 2);min-width:200px;padding:var(--space) calc(var(--space) * 1.5);font-variant-numeric:tabular-nums;margin:0;display:grid;position:absolute;right:0}#perf-details div{justify-content:space-between;gap:calc(var(--space) * 2);display:flex}#perf-details dt{color:var(--text-dim)}#perf-details dd{margin:0}#minimap-frame{flex:none;width:144px;height:144px;position:relative}#minimap{pointer-events:auto;cursor:pointer;border:2px solid var(--accent);width:100%;height:100%;image-rendering:pixelated;background:#274931;border-radius:50%;display:block}.compass{border:1px solid var(--line);background:var(--surface);width:20px;height:20px;color:var(--text-dim);text-align:center;border-radius:50%;margin:-10px 0 0 -10px;font-size:11px;font-weight:700;line-height:18px;position:absolute;top:50%;left:50%}.compass.north{border-color:var(--accent);color:var(--accent)}#map-coords{padding:2px var(--space);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.ui-button.mini{right:calc(var(--space) * -.5);min-width:32px;min-height:32px;position:absolute}#zoom-in{bottom:32px}#zoom-out{bottom:-4px}#quest-tracker{gap:calc(var(--space) / 2);width:280px;padding:calc(var(--space) / 2);pointer-events:auto;display:grid}.quest-header{justify-content:space-between;align-items:center;gap:var(--space);min-height:var(--touch-size);padding:0 var(--space);border-radius:calc(var(--radius) / 2);color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;font-weight:700;transition:background-color .15s;display:flex}.quest-header:hover{background:var(--surface-hover)}.quest-header:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#quest-progress{color:var(--text-dim);font-variant-numeric:tabular-nums;font-weight:400}#quest-objectives{gap:calc(var(--space) / 2);padding:0 var(--space) calc(var(--space) / 2);margin:0;list-style:none;display:grid}#quest-objectives li{justify-content:space-between;gap:var(--space);font-variant-numeric:tabular-nums;display:flex}#quest-objectives li[data-done=true]{color:var(--text-dim);text-decoration:line-through}#quest-claim{border-color:var(--accent);color:var(--accent);font-weight:700}#skill-bar{left:50%;bottom:var(--edge-bottom);align-items:center;gap:calc(var(--space) / 2);display:flex;position:fixed;transform:translate(-50%)}.slot{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:48px;height:48px;color:var(--text);font:inherit;cursor:pointer;flex:none;font-weight:700;transition:background-color .15s,opacity .15s;position:relative}.slot:hover:not(:disabled){background:var(--surface-hover)}.slot:disabled{color:var(--text-dim);cursor:default;opacity:.8}.slot kbd{color:var(--text-dim);font:inherit;font-size:11px;font-weight:400;position:absolute;bottom:2px;right:4px}.slot-divider{width:1px;height:32px;margin:0 calc(var(--space) / 2);background:var(--line)}.slot img,.wheel-button img{object-fit:contain;width:24px;height:24px;image-rendering:pixelated;margin:auto;display:block}.potion-count{font-variant-numeric:tabular-nums;font-size:11px;position:absolute;top:0;left:4px}#quest-hint{left:50%;bottom:calc(var(--edge-bottom) + 96px);max-width:min(560px,60vw);padding:calc(var(--space) / 2) var(--space);color:var(--accent);text-align:center;pointer-events:none;font-size:13px;position:fixed;transform:translate(-50%)}#menu-bar{right:var(--edge-right);bottom:var(--edge-bottom);gap:calc(var(--space) / 2);display:flex;position:fixed}#character-panel{right:var(--edge-right);bottom:calc(var(--edge-bottom) + var(--touch-size) + var(--space));gap:var(--space);padding:var(--space);display:flex;position:fixed}#action-wheel{right:var(--edge-right);bottom:var(--edge-bottom);pointer-events:none;width:184px;height:168px;display:none;position:fixed}.wheel-button{border:2px solid var(--accent);background:var(--surface);color:var(--text);font:inherit;pointer-events:auto;touch-action:manipulation;border-radius:50%;font-weight:700;transition:background-color .15s,transform .15s,opacity .15s;position:absolute}.wheel-button:active:not(:disabled){background:var(--surface-hover);transform:scale(.94)}.wheel-button:disabled{border-color:var(--line);opacity:.8}#attack-button{width:88px;height:88px;font-size:20px;bottom:0;right:0}.wheel-button.small{width:44px;height:44px}.wheel-button.s1{bottom:96px;right:24px}.wheel-button.s2{bottom:112px;right:76px}.wheel-button.s3{bottom:60px;right:96px}.wheel-button.s4{bottom:16px;right:140px}.wheel-button.p1{bottom:4px;right:92px}#stick{left:calc(var(--edge-left) + var(--space));bottom:calc(var(--edge-bottom) + var(--space));pointer-events:none;width:112px;height:112px;display:none;position:fixed}#stick-base,#stick-knob{border-radius:50%;position:absolute}#stick-base{border:2px solid var(--line);background:#0d1b1b73;inset:0}#stick-knob{background:#e4ba58cc;width:48px;height:48px;top:32px;left:32px}#class-panel{padding:calc(var(--space) * 2);background:#0c130f99;place-items:center;display:grid;position:fixed;inset:0}#class-card{gap:var(--space);width:min(440px,90vw);padding:calc(var(--space) * 2);border:1px solid var(--line);border-radius:var(--radius);background:#122;display:grid}#class-card h2{margin:0;font-size:18px}#class-options{gap:var(--space);grid-template-columns:repeat(2,1fr);display:grid}.class-option{min-height:56px;padding:calc(var(--space) / 2) var(--space);gap:2px;display:grid}.class-option span{color:var(--text-dim);font-size:12px}.class-option:disabled{cursor:default;opacity:.55}@keyframes hint-fade{to{opacity:0}}#hint{left:50%;bottom:calc(var(--edge-bottom) + 56px);padding:calc(var(--space) / 2) var(--space);border-radius:var(--radius);background:var(--surface);color:var(--text-dim);white-space:nowrap;pointer-events:none;animation:.2s 10s forwards hint-fade;position:fixed;transform:translate(-50%)}.hint-touch{display:none}#status{max-width:80vw;padding:var(--space) calc(var(--space) * 2);border-radius:var(--radius);background:var(--surface);text-align:center;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#rotate-device{display:none}#monster-bars,#floaters{pointer-events:none;position:fixed;inset:0;overflow:hidden}.monster-bar{background:var(--track);border-radius:2px;width:40px;height:5px;position:absolute;top:0;left:-20px;overflow:hidden}.monster-bar>div{background:var(--health);height:100%}@keyframes floater-rise{to{opacity:0;transform:translate(-50%,-48px)}}.floater{color:var(--text);text-shadow:0 1px 2px #000,0 0 4px #000;font-size:18px;font-weight:800;animation:.8s ease-out forwards floater-rise;position:absolute;transform:translate(-50%,-8px)}.floater[data-kind=heal]{color:var(--heal)}.floater[data-kind=item]{color:var(--text);font-size:12px}.floater[data-kind=hurt]{color:#f17e8a}.floater[data-kind=coin],.floater[data-kind=level]{color:var(--accent)}#defeat-notice{padding:var(--space) calc(var(--space) * 2);pointer-events:none;font-weight:700;position:fixed;top:40%;left:50%;transform:translate(-50%)}@media (pointer:coarse){.hint-mouse,#skill-bar,.menu-later,.ui-button.mini{display:none}.hint-touch{display:inline}#action-wheel,#stick{display:block}#hint{bottom:var(--edge-bottom);text-overflow:ellipsis;max-width:calc(100vw - 340px);font-size:12px;overflow:hidden}#quest-hint{bottom:calc(var(--edge-bottom) + 32px);max-width:calc(100vw - 340px);font-size:12px}#player-frame{width:208px;padding:calc(var(--space) / 2)}#player-portrait{width:44px;height:44px}#target-frame{width:176px;padding:calc(var(--space) / 2)}#target-portrait{width:36px;height:36px}#clock-period{display:none}#perf-summary{padding:0 var(--space);flex-direction:column;gap:0;line-height:1.15}#perf-ping{font-size:10px}#online-count{width:56px;padding:0 calc(var(--space) / 2);text-align:center;white-space:normal;font-size:11px;line-height:1.15}#minimap-frame{width:88px;height:88px}#clock,#online-count,#perf-summary{min-width:var(--touch-size);padding:0 var(--space);font-size:12px}#menu-bar{top:calc(var(--edge-top) + var(--touch-size) + var(--space) / 2);right:calc(var(--edge-right) + 96px);flex-direction:column;bottom:auto}#character-panel{top:calc(var(--edge-top) + var(--touch-size) + var(--space) / 2);right:calc(var(--edge-right) + 96px + var(--touch-size) + var(--space));bottom:auto}#quest-tracker{top:calc(var(--edge-top) + var(--touch-size) + var(--space) / 2);right:calc(var(--edge-right) + 148px);width:184px;font-size:12px;position:fixed}}@media (pointer:coarse) and (max-width:720px){#target-frame{top:calc(var(--edge-top) + 80px);left:var(--edge-left);transform:none}}@media (pointer:coarse) and (orientation:portrait){#rotate-device{z-index:2;padding:calc(var(--space) * 3);text-align:center;background:#0d1b1b;place-items:center;font-size:18px;display:grid;position:fixed;inset:0}}#player-names{pointer-events:none;position:fixed;inset:0;overflow:hidden}.player-tag{color:#abe3f7;text-align:center;text-shadow:0 1px 2px #070e0d,0 0 2px #070e0d;white-space:nowrap;width:160px;margin-left:-80px;font-size:12px;font-weight:600;position:absolute;top:-22px;left:0}.player-tag[hidden]{display:none}#chat-panel{bottom:calc(var(--edge-bottom) + 72px);left:var(--edge-left);gap:var(--space);width:320px;padding:var(--space);flex-direction:column;display:flex;position:fixed}#chat-panel[hidden]{display:none}#chat-title{color:var(--accent);font-size:12px;font-weight:600}#chat-log{overscroll-behavior:contain;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;height:112px;font-size:13px;line-height:1.4;overflow-y:auto}#chat-log p{margin:0}.chat-name{color:#90d9f4;font-weight:600}#chat-input{width:100%;min-height:var(--touch-size);padding:0 var(--space);border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--track);color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;transition:border-color .15s}#chat-input:focus{border-color:var(--accent);outline:none}#chat-button{display:none}@media (pointer:coarse){#chat-panel{top:var(--edge-top);z-index:5;bottom:auto;left:calc(var(--edge-left) + var(--touch-size) + var(--space));width:min(360px,55vw);display:none}#chat-panel.is-open:not([hidden]){background:#0d1b1bf5;display:flex}#chat-log{height:72px}#chat-button:not([hidden]){top:104px;left:var(--edge-left);width:var(--touch-size);font-size:12px;display:inline-flex;position:fixed}}#world-map{z-index:6;gap:var(--space);padding:var(--space);background:#0d1b1bf5;flex-direction:column;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#world-map[hidden]{display:none}#world-map-header{align-items:center;gap:calc(var(--space) * 2);display:flex}#world-map-title{color:var(--accent);white-space:nowrap;font-weight:600}#world-map-legend{gap:var(--space);color:var(--text-dim);white-space:nowrap;flex:1;margin:0;padding:0;font-size:12px;list-style:none;display:flex}#world-map-legend li{align-items:center;gap:calc(var(--space) / 2);display:flex}.legend-dot{width:var(--space);height:var(--space);background:#e14756}.legend-dot.self{background:#f8f8f2}.legend-dot.other{background:#61c9ef}#world-map-canvas{border-radius:var(--radius);width:min(72vh,88vw);height:min(72vh,88vw);image-rendering:pixelated;align-self:center;display:block}@media (pointer:coarse){#world-map{top:var(--edge-top);flex-direction:row;transform:translate(-50%)}#world-map-header{flex-direction:column;justify-content:space-between;align-items:flex-start}#world-map-legend{flex-direction:column;flex:none}#world-map-canvas{width:calc(100dvh - var(--edge-top) - var(--edge-bottom) - var(--space) * 2);height:calc(100dvh - var(--edge-top) - var(--edge-bottom) - var(--space) * 2)}}