/* Desktop rules stay in index.html; this layer only applies to compact layouts. */
#mobile-controls{position:fixed;inset:0;pointer-events:none;z-index:20;user-select:none;-webkit-user-select:none}
#mobile-controls button{pointer-events:auto;min-height:44px;touch-action:manipulation;font-size:12px;padding:8px 10px;border:1px solid #b6cbe04d;background:#142536ed;box-shadow:0 3px 12px #0005}
#mobile-nav{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));display:flex;justify-content:flex-end;gap:5px;pointer-events:none}
#mobile-nav button{flex:0 1 58px;min-width:0;white-space:nowrap;padding:8px 6px}
#mobile-nav button[aria-expanded=true]{border-color:#e7c177;background:#66502e}
#mobile-nav button[data-notice=true]::after{content:' ●';color:#ffd66b}
#mobile-nav #mobile-panel-close{background:#713c3c}
#mobile-joystick{position:absolute;pointer-events:auto;touch-action:none;left:max(16px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:var(--joystick-size,116px);height:var(--joystick-size,116px);border-radius:50%;border:2px solid #daeafa70;background:radial-gradient(circle,#203e5799,#112536bb);box-shadow:0 3px 15px #0005}
#mobile-stick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#a8c9deb3;border:2px solid #deefff99;box-shadow:0 2px 8px #0006;pointer-events:none}
.mobile-move-label{position:absolute;bottom:7px;width:100%;text-align:center;letter-spacing:2px;font-size:9px;color:#e2ecf7;pointer-events:none}
#mobile-controls #mobile-attack{position:absolute;touch-action:none;right:max(20px,env(safe-area-inset-right));bottom:max(35px,env(safe-area-inset-bottom));width:78px;height:78px;border-radius:50%;font-size:15px;background:linear-gradient(#aa7842ed,#614126ed);border:2px solid #f0cc8c;box-shadow:0 3px 16px #0008}
#mobile-attack:active{filter:brightness(1.3)}
#mobile-help{position:absolute;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 122px);left:12px;right:12px;margin:0;text-align:center;font-size:10px;color:#e1edf8;text-shadow:0 1px 4px #000;pointer-events:none}
body.mobile-layout{overscroll-behavior:none}
body.mobile-layout>canvas{touch-action:none}
body.mobile-layout #start{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));height:100dvh}
body.mobile-layout #start>div{padding:18px}
body.mobile-layout input,body.mobile-layout select{font-size:16px!important}
body.mobile-layout button,body.mobile-layout summary{touch-action:manipulation}
body.mobile-layout #hud{top:calc(max(8px,env(safe-area-inset-top)) + 52px);left:max(8px,env(safe-area-inset-left));width:calc(50vw - 14px);max-width:250px;max-height:130px;padding:8px;border-radius:8px;overflow:hidden;pointer-events:none}
body.mobile-layout #hud:not(.mobile-open)>:not(#character-name):not(#character-status):not(#status){display:none}
body.mobile-layout #hud #character-name{font-size:11px;margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mobile-layout #character-status{display:grid;grid-template-columns:26px 1fr;gap:4px;margin:0;padding:0;border:0;background:none;align-items:center}
body.mobile-layout #character-status .status-bar-heading{font-size:9px;margin:0}
body.mobile-layout .character-resource{height:19px}
body.mobile-layout #character-status .resource-value{font-size:10px}
body.mobile-layout #status{font-size:10px;margin-bottom:0;max-height:28px;overflow:hidden;line-height:14px}
body.mobile-layout #selection-panel{left:auto;right:max(8px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 52px);bottom:auto;width:calc(50vw - 14px);max-width:250px;max-height:150px;padding:8px;overflow:hidden}
body.mobile-layout #selection-panel .eyebrow,body.mobile-layout #selection-emblem,body.mobile-layout #selection-panel dl dt,body.mobile-layout #selection-panel dl dd:not(#selection-distance),body.mobile-layout #selection-action{display:none}
body.mobile-layout #selection-panel header{gap:4px}
body.mobile-layout #selection-panel h2{font-size:16px;margin:0 0 2px}
body.mobile-layout #selection-level,body.mobile-layout #selection-hint{font-size:10px}
body.mobile-layout #selection-close{min-width:32px;min-height:32px;padding:2px}
body.mobile-layout #selection-panel dl{display:block;margin:3px 0}
body.mobile-layout #selection-distance{text-align:left;font-size:10px}
body.mobile-layout #selection-health-text{margin-top:4px;font-size:10px}
body.mobile-layout #selection-health{height:9px}
body.mobile-layout #selection-hint{margin:3px 0;line-height:12px}
body.mobile-layout #spellbar{left:50%;right:auto;top:auto;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 154px);transform:translateX(-50%);width:340px;max-width:calc(100vw - 24px);max-height:none;padding:6px;overflow:visible;border-radius:8px}
body.mobile-layout #spell-slots{margin:0;gap:6px}
body.mobile-layout .spell-slot{min-height:64px;padding:0 0 2px}
body.mobile-layout .spell-slot img{height:42px;width:100%;object-fit:contain}
body.mobile-layout .spell-name,body.mobile-layout .spell-slot kbd,body.mobile-layout #spell-controls{display:none}
body.mobile-layout .spell-cost,body.mobile-layout .spell-cooldown{font-size:9px;line-height:11px;padding:0}
body.mobile-layout #power-buffs{font-size:9px;margin:4px 0 0}
body.mobile-layout #power-buffs:empty{display:none}
body.mobile-layout #inventory:not(.mobile-open),body.mobile-layout #social-panel:not(.mobile-open),body.mobile-layout #actions-panel:not(.mobile-open),body.mobile-layout #trading-panel:not(.mobile-open),body.mobile-layout #player-trade-panel:not(.mobile-open){display:none!important}
body.mobile-layout :is(#hud,#inventory,#social-panel,#actions-panel,#trading-panel,#player-trade-panel).mobile-open,body.mobile-layout:has(#trading-panel:not([hidden])) #inventory.mobile-open{display:block!important;position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:calc(max(8px,env(safe-area-inset-top)) + 52px);bottom:auto;width:auto;max-width:none;min-width:0;height:auto;max-height:calc(var(--mobile-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 76px);overflow:auto;padding:12px;z-index:15;transform:none;pointer-events:auto;background:#101e2bfa}
body.mobile-layout #inventory.mobile-open{padding:0}
body.mobile-layout #hud.mobile-open #character-status{max-width:400px;margin:12px 0}
body.mobile-layout #hud.mobile-open #status{max-height:none}
body.mobile-layout #inventory-list{max-height:none;overflow:visible}
body.mobile-layout .inventory-item{min-height:44px;padding:8px}
body.mobile-layout .equipment-slot{min-height:44px}
body.mobile-layout .equipment-slot button,body.mobile-layout .inventory-tooltip button{min-height:44px;padding:10px!important}
body.mobile-layout .inventory-tooltip{left:8px!important;right:8px;top:auto!important;bottom:max(8px,env(safe-area-inset-bottom));width:auto!important;max-height:60dvh;padding:16px;font-size:14px}
body.mobile-layout #social-panel button,body.mobile-layout #player-trade-panel button,body.mobile-layout #trading-panel button,body.mobile-layout #actions-panel button{min-height:44px;min-width:44px;padding:10px}
body.mobile-layout .trade-row input{min-height:44px}
body.mobile-layout .chat-log{height:100px}
body.mobile-layout #social-panel>summary{min-height:32px}
body.mobile-layout #social-panel[data-party=true] #chat-boxes{grid-template-columns:1fr}
body.mobile-layout #options-dialog{max-height:calc(100dvh - 24px);overflow:auto;padding:18px}
body.mobile-panel-open #mobile-joystick,body.mobile-panel-open #mobile-attack,body.mobile-panel-open #mobile-help,body.mobile-panel-open #spellbar,body.mobile-panel-open #selection-panel{display:none!important}
body.mobile-panel-open #hud:not(.mobile-open){display:none}
@media(max-height:500px){
 body.mobile-layout #hud,body.mobile-layout #selection-panel{max-height:104px;max-width:205px;width:27vw}
 body.mobile-layout #selection-hint{display:none}
 body.mobile-layout #spellbar{bottom:max(12px,env(safe-area-inset-bottom));width:320px;max-width:calc(100vw - 240px)}
 #mobile-help{bottom:104px;font-size:9px}
 #mobile-joystick{width:var(--joystick-size-compact,94px);height:var(--joystick-size-compact,94px);bottom:max(12px,env(safe-area-inset-bottom))}
 #mobile-controls #mobile-attack{width:68px;height:68px;bottom:max(18px,env(safe-area-inset-bottom))}
}

#mobile-controls.controls-swapped #mobile-joystick{left:auto;right:max(16px,env(safe-area-inset-right))}
#mobile-controls.controls-swapped #mobile-attack{right:auto;left:max(20px,env(safe-area-inset-left))}
#options-touch{border:1px solid #718094;border-radius:8px;margin:12px 0;padding:8px 12px}#options-touch label{font-size:13px;margin:8px 0}#options-touch input[type=range]{padding:4px;min-height:28px}

body.mobile-layout #spell-slots{gap:4px}body.mobile-layout .spell-pages button{min-height:32px;padding:4px 10px}@media(max-height:500px){body.mobile-layout #mobile-help{display:none}}

/* Compact location strip above the navigation, without covering the world controls. */
body.mobile-layout #location-panel{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));width:auto;height:24px;padding:3px 6px;display:flex;align-items:center;gap:8px;font-size:9px;border-radius:6px}
body.mobile-layout #location-name{flex:1;min-width:0;font-size:10px}body.mobile-layout #location-coordinates,body.mobile-layout #location-fps{white-space:nowrap}
body.mobile-layout #mobile-nav{top:calc(max(8px,env(safe-area-inset-top)) + 28px)}
/* Combat messages remain visible independently of the Info tab. */
body.mobile-layout #combat-panel{left:max(8px,env(safe-area-inset-left));right:auto;top:calc(max(8px,env(safe-area-inset-top)) + 174px);width:calc(50vw - 14px);max-width:250px;height:14dvh;padding:6px;gap:3px}
body.mobile-layout #combat-panel h2{font-size:10px}body.mobile-layout #combat-panel small{display:none}body.mobile-layout #combat-log p{font-size:10px;line-height:1.3;margin:3px 0}
@media(max-height:500px){body.mobile-layout #combat-panel{width:27vw;max-width:205px}}
/* Keep vitals compact and visible independently of mobile information panels. */
body.mobile-layout #player-frame{top:calc(max(8px,env(safe-area-inset-top)) + 52px);left:max(8px,env(safe-area-inset-left));width:calc(50vw - 14px);max-width:250px;grid-template-columns:42px minmax(0,1fr);gap:7px;padding:6px;border-radius:9px}
body.mobile-layout #player-frame .portrait-ring{width:42px;height:42px}body.mobile-layout #player-frame #character-name{font-size:11px;line-height:14px;margin:0 0 3px}body.mobile-layout #player-frame #character-status{grid-template-columns:1fr;gap:4px;margin:0;padding:0;border:0}body.mobile-layout #player-frame .character-resource{height:14px}body.mobile-layout #player-frame .resource-value,body.mobile-layout #player-frame #mana-value{font-size:9px;line-height:12px}body.mobile-layout #player-frame .resource-label{font-size:7px;left:3px}body.mobile-layout #hud:not(.mobile-open){top:calc(max(8px,env(safe-area-inset-top)) + 124px);max-height:42px}body.mobile-layout #hud:not(.mobile-open)>:not(#status){display:none}
@media(max-height:500px){body.mobile-layout #player-frame{max-width:205px;width:27vw}}@media(max-width:360px){body.mobile-layout #player-frame{grid-template-columns:36px minmax(0,1fr);gap:6px}body.mobile-layout #player-frame .portrait-ring{width:36px;height:36px}}
body.mobile-layout #player-frame,body.mobile-layout #selection-panel{top:calc(max(8px,env(safe-area-inset-top)) + 80px)}body.mobile-layout #hud:not(.mobile-open){top:calc(max(8px,env(safe-area-inset-top)) + 150px);padding:2px 6px;max-height:20px}