:root{--dock:104px;--safe-bottom:env(safe-area-inset-bottom,0px)}
#world{height:calc(100% - var(--dock) - var(--safe-bottom));width:100%}
#bottom-bar{position:absolute;left:0;right:0;bottom:calc(6px + var(--safe-bottom));height:calc(var(--dock) - 6px);display:grid;grid-template-columns:minmax(220px,280px) minmax(120px,1fr) auto;gap:18px;padding:10px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));align-items:center;background:linear-gradient(#1d211fee,#0c1215fa);border-top:1px solid #99744b78;box-shadow:0 -5px 24px #02060770}
#bottom-bar .vitals{position:static;width:auto;min-width:0;display:block;filter:none;padding:8px 10px;background:#080f12b8;border:1px solid #a886504f}
.identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:3px 8px;margin-bottom:4px;font-size:11px}
#bottom-bar .level{display:block;width:auto;height:auto;font:12px system-ui;background:none;border:0;color:#d3b676;white-space:nowrap}
#player-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1e2bf;font-size:12px}
#player-class{color:#92aeb0;font-size:10px}#gold{grid-column:3;grid-row:2;color:#d0b26c;font-size:10px;white-space:nowrap}.identity:has(#gold) #player-class{grid-column:2;grid-row:2}
.vital-bars .meter{height:13px;margin-top:3px;border:1px solid #99826650;border-radius:1px}.vital-bars .meter span{font:9px/11px system-ui}.vital-bars .hp i{background:linear-gradient(#b95e50,#873d3c)}.vital-bars .mana i{background:linear-gradient(#578db1,#345871)}
#bottom-bar #chat{position:static;width:auto;min-width:0;pointer-events:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:end}
#bottom-bar #chat-log{max-height:none;height:45px;min-height:0;overflow:auto;font-size:11px;line-height:1.5;background:none;padding:0 3px}
#bottom-bar #chat-input{height:26px;font-size:12px;padding:4px 7px;border-color:#907e5650;background:#060f13b0;border-radius:0}#bottom-bar #chat-form{opacity:1;gap:4px}#bottom-bar #chat-form button{width:32px;min-width:32px;height:26px;padding:0}
#action-bar{display:flex;gap:6px;align-items:center;pointer-events:auto}
#action-bar .action-slot{position:relative;width:56px;height:56px;min-width:0;padding:0;background:transparent url('../public/assets/ui-slot-v2.png') center/100% 100% no-repeat;border:0;border-radius:0;overflow:hidden;touch-action:none}
.action-slot>img,.action-icon{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;display:block;image-rendering:pixelated;pointer-events:none}
.action-icon{background-image:url('../public/assets/action-icons-v1.png');background-size:200% 200%;background-repeat:no-repeat}.action-icon.potion{background-position:0 0}.action-icon.dash{background-position:100% 0}.action-icon.jump{background-position:0 100%}.action-icon.rune{background-position:100% 100%}
.cooldown{position:absolute;inset:9%;border-radius:2px;background:conic-gradient(from 0deg,transparent 0deg var(--sweep,360deg),#020507ce var(--sweep,360deg) 360deg);pointer-events:none}
#action-bar kbd{display:block;position:absolute;left:6px;bottom:4px;margin:0;opacity:1;font:9px system-ui;color:#efdab0;text-shadow:0 1px 2px #000;pointer-events:none}
.cooldown-text{position:absolute;inset:0;display:grid;place-items:center;color:#fff3dc;font-size:14px;font-weight:bold;text-shadow:0 2px 3px #000;pointer-events:none}
#potions{position:absolute;right:6px;top:5px;font:11px system-ui;color:#f8e8c4;text-shadow:0 1px 2px #000}.action-slot.unavailable .action-icon,.action-slot.unavailable>img{filter:grayscale(.8);opacity:.4}#action-bar .held{filter:brightness(1.35)}
#experience{position:absolute;left:0;right:0;bottom:0;height:calc(6px + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:#030b0f;border-top:1px solid #675a36;pointer-events:auto}#experience i{display:block;height:100%;width:0;background:linear-gradient(#e4c477,#a78a48);box-shadow:0 0 5px #d4b67060;transition:width .2s}
#minimap-panel{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:210px;border:1px solid #98764b;background:#0a1219df;box-shadow:0 3px 16px #0006;pointer-events:auto}
#minimap-panel header{height:25px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;border-bottom:1px solid #b295623a;gap:5px}#zone{font-size:11px;color:#e1cfab;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#minimap-panel #online{position:static;font-size:9px;letter-spacing:0;white-space:nowrap;color:#7f9998}#minimap{width:100%;height:auto;aspect-ratio:2.5;opacity:.95}#minimap-panel #map-btn{width:100%;height:25px;min-height:25px;padding:0;font-size:10px;border:0;border-top:1px solid #93784b55;border-radius:0;background:#192023!important}#map-btn kbd{display:inline;opacity:.65}
#hud .tools{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}.tools button{min-width:48px;padding:7px 9px}.tools kbd{display:inline;font-size:8px}
#network-debug{position:absolute;top:52px;right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;padding:5px 7px;border:1px solid #98764b88;background:#091216dd;box-shadow:0 2px 9px #0008;font:9px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9fb7ad}#network-debug span{white-space:nowrap}#network-debug b{font-weight:600;color:#e5d1a2}#network-debug[data-ping="slow"] #ping{color:#efae86}#network-debug[data-fps="low"] #fps{color:#efae86}
#boss-hud{top:18px;width:min(420px,40%)}#boss-intent{font-size:10px}#toast,.touch #toast{bottom:calc(var(--dock) + 12px);font-size:12px;max-width:55%;padding:6px 14px;border:0}#interact,.touch #interact{bottom:calc(var(--dock) + 48px);min-height:32px;min-width:80px;padding:8px 14px}
.movement{bottom:calc(var(--dock) + 12px + var(--safe-bottom));left:max(14px,env(safe-area-inset-left));gap:12px}#touch-controls button{width:52px;height:52px}
@media(max-height:520px),(max-width:900px){
 :root{--dock:82px}#bottom-bar{grid-template-columns:190px minmax(100px,1fr) auto;gap:10px;padding:5px 10px}
 #bottom-bar .vitals{padding:4px 7px}.identity{gap:1px 5px;margin-bottom:2px}#player-name{font-size:10px}#bottom-bar .level{font-size:10px}#player-class,#gold{font-size:9px}.vital-bars .meter{height:11px;margin-top:2px}.vital-bars .meter span{font-size:8px;line-height:9px}
 #action-bar{gap:3px}#action-bar .action-slot{width:45px;height:45px}#action-bar kbd{font-size:8px;bottom:3px;left:5px}.touch #action-bar kbd{display:none}.cooldown-text{font-size:12px}
 #bottom-bar #chat-log{font-size:9px;height:38px}#bottom-bar #chat-input{font-size:12px;height:24px}#bottom-bar #chat-form button{height:24px;width:25px;min-width:25px}
 #minimap-panel{top:8px;left:10px;width:140px}#minimap-panel header{height:20px;padding:0 5px}#zone{font-size:9px}#minimap-panel #online{font-size:8px}#minimap-panel #map-btn{height:22px;min-height:22px;font-size:9px}
 #hud .tools{top:8px;right:10px}.tools button{min-width:40px;min-height:28px;font-size:9px;padding:5px 6px}#network-debug{top:43px;right:10px;padding:4px 5px;font-size:8px;gap:5px}#boss-hud{top:10px;width:32%}#boss-hud strong{font-size:12px}#boss-intent{font-size:9px}
 #toast,.touch #toast{font-size:10px;bottom:calc(var(--dock) + 6px)}#interact,.touch #interact{bottom:calc(var(--dock) + 32px);font-size:10px;min-height:28px;padding:7px 12px}
}
@media(max-width:690px){#bottom-bar{grid-template-columns:155px minmax(75px,1fr) auto;gap:5px;padding:5px}#action-bar .action-slot{width:39px;height:44px}#player-name{font-size:9px}.tools kbd{display:none}}
.appearance-choice{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;border-top:1px solid #9c7e4c55;padding-top:10px}.appearance-choice>span{margin-right:auto;color:#c7b78c}.appearance-choice button{min-height:32px;padding:5px 18px}.appearance-choice [aria-pressed=true]{outline:1px solid #e3c17c;filter:brightness(1.2)}
.vertical-movement{display:flex;flex-direction:column;gap:3px;align-self:center}#touch-controls .vertical-movement button{width:40px;height:31px;font-size:12px}.movement{align-items:center}