/* Viewport and safe areas also follow browser bars, rotation and the keyboard. */
.game3d{--header-height:62px;height:var(--game-height,100dvh);min-height:0;overscroll-behavior:none}
.game3d .gamewrap{height:calc(var(--game-height,100dvh) - var(--header-height));flex:1;min-height:0}
.game3d [hidden]{display:none!important}
.game3d .hud-top{flex-shrink:0}
.game3d .mobile-controls{display:none}
.game3d #landscape-toggle{display:none}
.game3d button{touch-action:manipulation}
@media (any-pointer:coarse) and (max-width:1400px), (max-width:900px){
 .game3d{--header-height:calc(68px + env(safe-area-inset-top));user-select:none;-webkit-user-select:none}
 .game3d .hud-top{height:var(--header-height);min-height:var(--header-height);padding:calc(3px + env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 3px max(6px,env(safe-area-inset-left));display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:40px 18px;gap:2px 4px}
 .game3d .hud-top .brand{font-size:16px}
 .game3d .hud-actions{gap:3px;justify-content:flex-end;min-width:0}
 .game3d .hud-actions button{font-size:0!important;padding:3px;min-width:38px;height:40px;border-radius:9px}
 .game3d .hud-actions button::before{font-size:20px;line-height:1}
 .game3d #menu-toggle::before{content:'☰'}
 .game3d #sound-toggle::before{content:'♪'}
 .game3d #staff-toggle::before{content:'⌘'}
 .game3d #fullscreen-toggle::before{content:'⛶'}
 .game3d #landscape-toggle{display:inline-block}
 .game3d #landscape-toggle::before{content:'↻'}
 .game3d #inventory-toggle img{width:26px;height:26px}
 .game3d #inventory-toggle span,.game3d .hud-actions #stats{display:none}
 .game3d .hud-status{grid-column:1/-1;gap:8px;font-size:10px;width:100%;justify-content:space-between}
 .game3d #region{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:60%}
 .game3d #online{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
 .game3d #ping{display:none}
 .game3d .world-tag,.game3d #compass{display:none}
 .game3d #vitals{top:8px;left:max(8px,env(safe-area-inset-left));width:min(185px,49%);padding:6px 8px;z-index:4}
 .game3d .vitals-head{font-size:11px;margin-bottom:3px}
 .game3d #hero-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .game3d .meter{height:15px;margin:3px 0}
 .game3d .meter span{font-size:9px}
 .game3d #attributes{font-size:9px}
 .game3d #pvp-status,.game3d #haste-status{display:none}
 .game3d #minimap-shell{top:8px;right:max(8px,env(safe-area-inset-right));width:104px}
 .game3d #minimap{width:100%;height:52px}
 .game3d #minimap-shell small{display:none}
 .game3d #minimap-shell button{font-size:9px;min-height:24px;padding:3px;letter-spacing:0}
 .game3d .mobile-controls{display:block;position:absolute;inset:0;z-index:7;pointer-events:none}
 .game3d .mobile-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:auto;height:auto;background:linear-gradient(#614327dd,#241b16ed),url('ui-wood.png') center/210px;border:1px solid #d4ac71;border-radius:12px;color:#fff0cf;box-shadow:0 3px 10px #0008;font:700 12px sans-serif;text-shadow:0 1px 2px #000}
 .game3d .mobile-controls button:active,.game3d #mobile-run[aria-pressed=true]{background:#967049e8;border-color:#ffe1a0}
 .game3d .mobile-controls button:disabled{opacity:.45}
 .game3d .mobile-dpad{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template:repeat(3,40px)/repeat(3,40px);gap:3px}
 .game3d [data-key=ArrowUp]{grid-area:1/2;font-size:20px}
 .game3d [data-key=ArrowLeft]{grid-area:2/1;font-size:20px}
 .game3d #mobile-run{grid-area:2/2;font-size:9px}
 .game3d [data-key=ArrowRight]{grid-area:2/3;font-size:20px}
 .game3d [data-key=ArrowDown]{grid-area:3/2;font-size:20px}
 .game3d .mobile-actions{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,54px);grid-auto-rows:40px;gap:4px}
 .game3d .mobile-actions .mobile-main{grid-column:1/-1;font-size:15px}
 .game3d .mobile-zoom{position:absolute;right:max(8px,env(safe-area-inset-right));top:92px;display:flex;gap:4px}
 .game3d .mobile-zoom button{width:40px;height:36px;font-size:21px}
 .game3d #powerbar{bottom:calc(151px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);gap:4px;padding:5px;max-width:calc(100% - 16px);z-index:8}
 .game3d #powerbar button{width:48px;height:48px;min-width:0;margin:0;touch-action:manipulation}
 .game3d #powerbar button small{font-size:8px;letter-spacing:0;max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .game3d #powerbar button:hover{transform:none}
 .game3d #powerbar button::after{display:none}
 .game3d #quickslots{bottom:calc(213px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);display:flex;gap:4px;max-width:calc(100% - 16px);z-index:8}
 .game3d .quickslot{min-width:0;width:54px}
 .game3d .quickslot button:first-child{width:100%;height:38px}
 .game3d .quickslot button:nth-child(2){display:none}
 .game3d #mobile-target{position:absolute;left:50%;bottom:calc(290px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:65%;padding:4px 9px;border:1px solid #d4ac71;border-radius:12px;background:#281d15df;color:#ffe1a1;text-align:center;font:11px sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .game3d #hud-chat{top:96px;bottom:auto;left:max(8px,env(safe-area-inset-left));width:min(310px,calc(100% - 24px));z-index:12}
 .game3d #hud-chat.collapsed{width:76px}
 .game3d #chat-toggle{height:36px;font-size:11px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
 .game3d #chat-content{max-height:calc(var(--game-height,100dvh) - var(--header-height) - 138px);overflow:auto}
 .game3d #chatlog{height:90px;min-height:35px}
 .game3d #chat-form input,.game3d input,.game3d select{font-size:16px}
 .game3d #chat-form{flex-wrap:wrap}
 .game3d #quest-hint,.game3d #loot-hint{top:86px;max-width:calc(100% - 210px);font-size:9px;overflow:hidden;text-overflow:ellipsis}
 .game3d .canvas-wrap #toast{top:139px;font-size:11px;white-space:normal;text-align:center;max-width:calc(100% - 22px);width:max-content;padding:6px 9px}
 .game3d #hud-menu,.game3d #inventory-panel,.game3d #staff-console{top:10px;bottom:auto;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto;max-width:none;transform:none;max-height:calc(100% - 20px);overflow:auto;z-index:25}
 .game3d #inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .game3d .item-slot{min-width:0}
 .game3d .quest-card{max-height:calc(var(--game-height,100dvh) - var(--header-height) - 30px);overflow:auto;padding:16px}
 .game3d #world-map-panel{width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;z-index:25}
 .game3d #world-map-panel header{font-size:12px}
 .game3d #trade-panel,.game3d #trade-invite,.game3d #pvp-invite{max-height:calc(100% - 24px);width:calc(100% - 24px);overflow:auto;z-index:30}
 .game3d #hud-menu button,.game3d #inventory-panel button,.game3d .quest-card button,.game3d #trade-panel button,.game3d #pvp-invite button,.game3d #staff-console button{min-height:40px}
 .game3d .loading-card{padding:20px;max-height:100%;overflow:auto}
}
@media (max-height:540px) and (orientation:landscape) and (max-width:900px), (any-pointer:coarse) and (max-height:540px) and (orientation:landscape) and (max-width:1400px){
 .game3d{--header-height:calc(44px + env(safe-area-inset-top))}
 .game3d .hud-top{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:36px}
 .game3d .hud-status{grid-column:2;grid-row:1;font-size:9px;justify-content:flex-start;gap:6px}
 .game3d .hud-actions{grid-column:3;grid-row:1}
 .game3d .hud-actions button{height:36px;min-width:36px}
 .game3d #online{display:none}
 .game3d #region{max-width:100%}
 .game3d #powerbar{bottom:calc(10px + env(safe-area-inset-bottom))}
 .game3d #quickslots{bottom:calc(73px + env(safe-area-inset-bottom))}
 .game3d #mobile-target{bottom:calc(151px + env(safe-area-inset-bottom))}
 .game3d .mobile-dpad{grid-template:repeat(3,36px)/repeat(3,36px)}
 .game3d .mobile-actions{grid-auto-rows:35px}
 .game3d .canvas-wrap #toast{top:87px;max-width:55%}
 .game3d #hud-chat{top:94px}
 .game3d #chat-content{max-height:calc(var(--game-height,100dvh) - var(--header-height) - 138px)}
 .game3d .mobile-zoom{top:86px}
 .game3d .hud-guide{display:none}
}
@media(max-width:360px){.game3d .hud-top .brand{font-size:13px}.game3d .hud-actions{gap:2px}.game3d .hud-actions button{min-width:34px;width:34px}.game3d #minimap-shell{width:90px}.game3d #minimap{height:45px}}

@media(any-pointer:coarse) and (max-width:1400px),(max-width:900px){.game3d #sound-toggle[aria-pressed=true]::before{content:"♫";color:#e9c580}.game3d #sound-toggle[aria-pressed=false]::before{content:"♪";color:#87958a}.game3d .quickslot select{font-size:12px;width:100%;height:23px}.game3d #mobile-target{z-index:1}}

/* Compact combat dock: items beside skills, in a single row on phones. */
.game3d #mobile-combat-dock{display:contents}
@media(any-pointer:coarse) and (max-width:1400px),(max-width:900px){
 .game3d #mobile-combat-dock{position:absolute;display:flex;align-items:flex-end;justify-content:center;gap:5px;left:50%;bottom:calc(148px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;max-width:calc(100% - 16px)}
 .game3d #mobile-combat-dock #powerbar,.game3d #mobile-combat-dock #quickslots{position:static;left:auto;right:auto;bottom:auto;transform:none;margin:0;max-width:none;padding:4px;gap:3px}
 .game3d #mobile-combat-dock #powerbar{order:1}
 .game3d #mobile-combat-dock #quickslots{order:2}
 .game3d #mobile-combat-dock #powerbar button{width:35px;height:38px;flex-shrink:0;border-radius:7px}
 .game3d #mobile-combat-dock .power-icon{width:23px;height:23px}
 .game3d #mobile-combat-dock #powerbar button small{font-size:7px;max-width:31px}
 .game3d #mobile-combat-dock #powerbar i{font-size:7px;right:3px}
 .game3d #mobile-combat-dock .quickslot{width:30px;gap:2px}
 .game3d #mobile-combat-dock .quickslot button:first-child{width:30px;height:32px;font-size:8px;border-radius:6px;overflow:hidden;padding:1px}
 .game3d #mobile-combat-dock .quickslot img{width:19px;height:19px}
 .game3d #mobile-combat-dock .quickslot select{font-size:10px;height:20px;width:30px}
 .game3d #mobile-target{bottom:calc(218px + env(safe-area-inset-bottom))}
}
@media(max-height:540px) and (orientation:landscape) and (max-width:900px),(any-pointer:coarse) and (max-height:540px) and (orientation:landscape) and (max-width:1400px){
 .game3d #mobile-combat-dock{bottom:calc(10px + env(safe-area-inset-bottom))}
 .game3d #mobile-target{bottom:calc(80px + env(safe-area-inset-bottom))}
}

@media(any-pointer:coarse) and (max-width:1400px),(max-width:900px){
 .game3d .mobile-zoom #mobile-hud-toggle{width:52px;font-size:10px}
 .game3d.minimal-hud{--header-height:0px}
 .game3d.minimal-hud .hud-top,.game3d.minimal-hud #minimap-shell,.game3d.minimal-hud #hud-chat,.game3d.minimal-hud .world-tag,.game3d.minimal-hud #compass,.game3d.minimal-hud #quest-hint,.game3d.minimal-hud #loot-hint,.game3d.minimal-hud #attributes{display:none!important}
 .game3d.minimal-hud #vitals{top:calc(8px + env(safe-area-inset-top))}
 .game3d.minimal-hud .mobile-zoom{top:calc(8px + env(safe-area-inset-top))}
 .game3d.minimal-hud #mobile-target{display:none!important}
 .game3d.minimal-hud .canvas-wrap #toast{top:calc(85px + env(safe-area-inset-top))}
 .game3d.minimal-hud #mobile-combat-dock .quickslot select{display:none}
}

.game3d #death-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;display:grid;place-items:center;background:radial-gradient(ellipse,transparent 25%,#240817a8 100%);animation:death-arrival .5s ease-out}
.game3d #death-overlay>div{text-align:center;padding:15px 22px;border:1px solid #a25769;border-radius:14px;background:#21131bdc;box-shadow:0 0 35px #a22e4144;color:#f5c1cb;text-shadow:0 2px 3px #000}
.game3d #death-overlay strong{display:block;font:700 28px Georgia}
.game3d #death-overlay span{display:block;margin-top:8px;font:12px sans-serif}
@keyframes death-arrival{from{opacity:0}to{opacity:1}}
@media(any-pointer:coarse) and (max-width:1400px),(max-width:900px){.game3d #death-overlay strong{font-size:22px}.game3d #death-overlay>div{padding:10px 16px}}
@media(prefers-reduced-motion:reduce){.game3d #death-overlay{animation:none}}
@media(any-pointer:coarse) and (max-width:1400px),(max-width:900px){
 .game3d.minimal-hud .mobile-zoom{display:grid;grid-template-columns:40px 40px;gap:4px}
 .game3d.minimal-hud .mobile-zoom #mobile-hud-toggle{grid-column:1/-1;width:84px}
}

@media(any-pointer:coarse) and (max-width:1400px),(max-width:900px){
 .game3d #mobile-stick{position:absolute;pointer-events:auto;touch-action:none;left:max(8px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#4b392a88,#171a1edb);border:2px solid #d4ac7177;box-shadow:inset 0 0 24px #0009,0 3px 12px #0007}
 .game3d .stick-ring{position:absolute;inset:16px;border-radius:50%;border:1px solid #e5c49644;pointer-events:none}
 .game3d #mobile-stick-knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#c19968,#61442c 65%,#2d2018);border:2px solid #e5c496;box-shadow:0 4px 12px #000a;pointer-events:none}
 .game3d .mobile-controls #mobile-run{position:absolute;left:calc(max(8px,env(safe-area-inset-left)) + 86px);bottom:calc(12px + env(safe-area-inset-bottom));width:44px;height:28px;font-size:9px;z-index:1}
}

.game3d .hud-icon-group{display:flex;flex-flow:row nowrap;gap:5px;align-items:center;flex:0 0 auto}.game3d .hud-icon-group button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;min-width:38px;padding:4px}.game3d .hud-icon-group img{width:28px;height:28px;object-fit:contain}.game3d .hud-actions{flex-wrap:nowrap}.game3d #sky-day,.game3d #sky-night{display:none!important}@media (any-pointer:coarse) and (max-width:1400px),(max-width:900px){.game3d .hud-icon-group{gap:3px}.game3d .hud-icon-group button{width:34px;height:34px;min-width:34px}.game3d .hud-icon-group img{width:25px;height:25px}.game3d .hud-actions{overflow-x:auto;scrollbar-width:none;max-width:100%;margin-left:0}.game3d .hud-actions::-webkit-scrollbar{display:none}.game3d .hud-icon-group{order:-1}.game3d .hud-top .brand{font-size:13px}}

.game3d #weather-moon,.game3d #weather-clouds{display:none!important}

@media (any-pointer:coarse) and (max-width:1400px),(max-width:900px){.game3d .hud-actions{justify-content:flex-start}.game3d .hud-actions>button{flex:0 0 auto}}

@media(max-width:900px),(any-pointer:coarse){.game3d #powerbar{display:grid;grid-template-columns:repeat(4,36px);gap:3px}.game3d #powerbar button{width:36px;height:36px;min-width:0;padding:2px}.game3d #powerbar .power-icon{width:25px;height:25px}.game3d #powerbar button small{display:none}.game3d #powerbar button i{font-size:9px}.game3d #mobile-combat-dock{max-width:65vw}}

/* Compact desktop-like placement, while keeping touch movement controls. */
@media(max-width:900px),(any-pointer:coarse) and (max-width:1400px){
.game3d #vitals{width:145px;max-width:40vw;padding:4px 6px;left:6px;top:6px;font-size:9px}.game3d #vitals strong{font-size:11px}.game3d #vitals .bar{height:13px}.game3d #vitals #attributes{font-size:8px}.game3d #minimap-shell{width:86px;right:6px;top:6px;padding:3px}.game3d #minimap{height:54px}.game3d #minimap-shell button{font-size:8px;min-height:18px;padding:2px}
.game3d #hud-chat{top:auto;bottom:calc(112px + env(safe-area-inset-bottom));left:6px;width:175px;max-width:43vw;font-size:10px}.game3d #hud-chat.collapsed{width:65px}.game3d #chat-lines{max-height:75px;font-size:10px}.game3d #chat-form{gap:2px}.game3d #chat-form input,.game3d #chat-form button,.game3d #chat-form select{font-size:9px;min-width:0;padding:3px}.game3d #chat-form input{width:70px}
.game3d #mobile-combat-dock{bottom:calc(8px + env(safe-area-inset-bottom));left:50%;max-width:50vw;gap:3px}.game3d #mobile-combat-dock #powerbar{display:grid;grid-template-columns:repeat(4,29px);gap:2px;padding:3px}.game3d #mobile-combat-dock #powerbar button{width:29px;height:29px;padding:1px}.game3d #mobile-combat-dock .power-icon{width:23px;height:23px}.game3d #mobile-combat-dock #powerbar button small{display:none}.game3d #mobile-combat-dock #quickslots{display:grid;grid-template-columns:repeat(3,24px);gap:2px;padding:2px}.game3d #mobile-combat-dock .quickslot{width:24px;gap:1px}.game3d #mobile-combat-dock .quickslot button:first-child{width:24px;height:27px}.game3d #mobile-combat-dock .quickslot img{width:18px;height:18px}.game3d #mobile-combat-dock .quickslot select{width:24px;font-size:8px;height:16px}
.game3d #mobile-stick{width:94px;height:94px;left:6px;bottom:8px}.game3d #mobile-stick-knob{width:35px;height:35px}.game3d .mobile-controls #mobile-run{left:73px;bottom:8px;width:34px;height:23px;font-size:8px}.game3d #mobile-target{bottom:calc(86px + env(safe-area-inset-bottom));font-size:9px}
}
@media(max-width:540px){.game3d #mobile-combat-dock{display:block;max-width:calc(100vw - 220px)}.game3d #mobile-combat-dock #quickslots{margin-top:2px;justify-content:center}.game3d #hud-chat{bottom:calc(114px + env(safe-area-inset-bottom))}.game3d #mobile-target{bottom:calc(122px + env(safe-area-inset-bottom))}}
@media(max-width:900px),(any-pointer:coarse) and (max-width:1400px){
.game3d #hud-chat #chatlog{height:55px;max-height:55px;font-size:9px}.game3d #hud-chat #chat-toggle{padding:5px;font-size:10px}.game3d .mobile-zoom button{min-width:28px;width:28px;height:28px;font-size:11px}.game3d .mobile-zoom #mobile-hud-toggle{width:42px;font-size:8px}.game3d .mobile-controls .mobile-actions{grid-template-columns:repeat(2,44px);gap:3px}.game3d .mobile-controls .mobile-actions button{width:44px;height:34px;font-size:10px}
}