/* Layout only: existing LOGGER II art, saved slots, inputs and status widgets. */
.gamepad{--mobile-unit:clamp(.82px,.2564vh,1.12px);--hud-edge:clamp(8px,calc(12 * var(--mobile-unit)),16px);--mobile-hud-width:clamp(156px,calc(176 * var(--mobile-unit)),196px);--mobile-status-height:max(52px,calc(56 * var(--mobile-unit)));--mobile-utility:max(36px,calc(38 * var(--mobile-unit)));--mobile-attack:max(64px,calc(76 * var(--mobile-unit)));--mobile-jump:max(42px,calc(48 * var(--mobile-unit)));--pad-left:calc(120 * var(--mobile-unit));--pad-right:calc(146 * var(--mobile-unit));--pad-unit:calc(38 * var(--mobile-unit));--mobile-combat-height:calc(var(--mobile-attack) + 12px + var(--mobile-jump));--touch-slot:clamp(24px,4.3vw,40px);--touch-gap:clamp(2px,.35vw,3px);--touch-slots-width:calc(10 * var(--touch-slot) + 9 * var(--touch-gap));--touch-slots-height:var(--touch-slot);--touch-left-rail:calc(var(--pad-left) + 26px);--touch-right-rail:calc(var(--pad-right) + 26px)}
.gamepad #game #bottom-bar{left:0;right:auto;bottom:0;width:var(--screen-width);height:var(--screen-height);padding:0;display:block;border:0;background:none;box-shadow:none;transform-origin:bottom left;transform:scale(var(--inverse-ui-scale));pointer-events:none;z-index:8}
.gamepad #game #bottom-bar .vitals{position:absolute;left:calc(var(--hud-edge) + env(safe-area-inset-left));top:calc(var(--hud-edge) + env(safe-area-inset-top));right:auto;bottom:auto;width:var(--mobile-hud-width);height:var(--mobile-status-height);max-width:none;padding:4px 6px;border:1px solid #736d5f80;background:#171d18d9!important;box-shadow:none;justify-content:center}
.gamepad #game #bottom-bar .vitals::before{display:none}
.gamepad #game #bottom-bar .identity{gap:5px;margin-bottom:2px;grid-template-columns:auto minmax(0,1fr) auto}
.gamepad #game #bottom-bar :is(.level,#player-name,#gold){font:clamp(11px,calc(12 * var(--mobile-unit)),13px)/14px system-ui}
.gamepad #game #bottom-bar #player-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gamepad #game #bottom-bar #gold{max-width:46px;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.gamepad #game #bottom-bar .vital-bars{gap:2px}
.gamepad #game #bottom-bar .vital-line{grid-template-columns:18px minmax(0,1fr);gap:3px}
.gamepad #game #bottom-bar .vital-line>small{font:600 11px/12px system-ui}
.gamepad #game #bottom-bar .meter{height:13px}
.gamepad #game #bottom-bar .meter span{font:600 11px/11px system-ui}

/* A central always-visible loadout, separate from the two thumb zones. */
.gamepad #game #bottom-bar #action-bar{position:absolute;left:calc((var(--screen-width) + var(--touch-left-rail) + env(safe-area-inset-left) - var(--touch-right-rail) - env(safe-area-inset-right) - var(--touch-slots-width))/2);right:auto;bottom:calc(10px + env(safe-area-inset-bottom));width:var(--touch-slots-width);height:var(--touch-slots-height);padding:0;display:grid;grid-template-columns:repeat(10,var(--touch-slot));grid-template-rows:var(--touch-slot);gap:var(--touch-gap);pointer-events:auto;opacity:1;visibility:visible;transform:none;border:0;background:none;box-shadow:none}
.gamepad #game #action-bar>.quick-slot{width:var(--touch-slot);height:var(--touch-slot);min-width:0;min-height:0}
.gamepad #game #action-bar>.quick-slot:nth-of-type(n){grid-row:1;grid-column:auto}
.gamepad #game #action-bar .cooldown-text{font-size:clamp(10px,1.8vw,14px)}
.gamepad #game #action-bar .quick-count{top:1px;right:1px;padding:0 1px;font-size:10px}
.gamepad #game #action-bar>#quick-edit{display:none}
.gamepad #game #action-bar kbd{display:none}
.gamepad #mobile-actions [data-mobile-skill]{display:none}

/* Main attack outside; utility buttons above and to its left. */
.gamepad #game #touch-controls .movement,.gamepad #game #mobile-actions{bottom:calc(var(--hud-edge) + env(safe-area-inset-bottom))}
.gamepad #game #touch-controls .movement{left:calc(var(--hud-edge) + env(safe-area-inset-left))}
.gamepad #game #mobile-actions{right:calc(var(--hud-edge) + env(safe-area-inset-right))}
.gamepad #touch-controls .movement button{font-size:clamp(14px,calc(17 * var(--mobile-unit)),20px)}
.gamepad #mobile-actions .pad-attack{width:var(--mobile-attack);height:var(--mobile-attack);right:0;bottom:0}
.gamepad #mobile-actions .pad-jump{width:var(--mobile-jump);height:var(--mobile-jump);right:0;bottom:calc(var(--mobile-attack) + 12px)}
.gamepad #mobile-actions .pad-potion:is(.hp,.mp){position:fixed;top:calc(var(--hud-edge) + (var(--mobile-status-height) - var(--mobile-utility))/2 + env(safe-area-inset-top));right:auto;bottom:auto;width:var(--mobile-utility);height:var(--mobile-utility)}
.gamepad #mobile-actions .pad-potion.hp{left:calc(var(--hud-edge) + var(--mobile-hud-width) + 12px + env(safe-area-inset-left))}
.gamepad #mobile-actions .pad-potion.mp{left:calc(var(--hud-edge) + var(--mobile-hud-width) + var(--mobile-utility) + 20px + env(safe-area-inset-left))}
.gamepad #mobile-actions .pad-pickup{left:0;right:auto;bottom:calc(var(--mobile-attack)/2);width:var(--mobile-utility);height:var(--mobile-utility)}
.gamepad #mobile-actions .pad-swap{left:auto;right:calc(var(--mobile-jump) + 8px);bottom:calc(var(--mobile-attack) + 12px);width:var(--mobile-utility);height:var(--mobile-utility)}
.gamepad #mobile-actions .pad-label{font-size:10px;bottom:2px}
.gamepad #mobile-actions .pickup-caption{font-size:10px}
.gamepad #mobile-actions .pickup-icon{font-size:22px}
.gamepad #mobile-actions .pad-potion .pad-art{inset:4px 8px 10px}
.gamepad #touch-controls .movement{background:radial-gradient(circle,#14201944 0 58%,#d2c69f18 59% 60%,transparent 61%)}
.gamepad #touch-controls .movement::before{content:'';position:absolute;inset:-9px;border-radius:50%;pointer-events:auto;touch-action:none}

/* Chat is always on the field, directly above the one-row loadout. */
.gamepad #game #bottom-bar #chat{position:absolute;--chat-width:min(var(--touch-slots-width),calc(var(--screen-width) - var(--touch-left-rail) - var(--touch-right-rail) - env(safe-area-inset-left) - env(safe-area-inset-right)));left:calc((var(--screen-width) + var(--touch-left-rail) + env(safe-area-inset-left) - var(--touch-right-rail) - env(safe-area-inset-right) - var(--chat-width))/2);right:auto;bottom:calc(var(--touch-slots-height) + 20px + env(safe-area-inset-bottom));width:var(--chat-width);height:clamp(72px,calc(80 * var(--mobile-unit)),92px);padding:4px;gap:2px;pointer-events:auto;opacity:1;visibility:visible;transform:translateY(calc(-1 * var(--keyboard-shift,0px) * var(--ui-scale)));border:1px solid #857a604d;background:#111811a6;box-shadow:none}
.gamepad #game #bottom-bar #chat:focus-within{bottom:calc(8px + env(safe-area-inset-bottom));height:clamp(80px,calc(var(--screen-height) - var(--keyboard-shift,0px) * var(--ui-scale) - 24px),160px);background:#171d18f5}
.gamepad #game #bottom-bar .chat-channel-row{min-height:18px;height:18px;display:flex;gap:5px;align-items:center}
.gamepad #game #bottom-bar .chat-channel-row>label{font-size:10px}
.gamepad #game #bottom-bar #chat-channel{height:18px;min-height:0;max-width:90px;padding:0;font-size:11px}
.gamepad #game #bottom-bar #whisper-target{width:45%;min-width:0;height:24px;font-size:16px}
.gamepad #game #bottom-bar #chat-log{font:11px/1.4 system-ui;padding:0 2px;min-height:18px}
.gamepad #game #bottom-bar #chat-input{height:24px;min-height:0;padding:0 4px;font-size:16px}
/* Keep actual input at 16px for iOS focus zoom; scale the idle hint only. */
.gamepad #game #bottom-bar #chat-input::placeholder{font-size:13px}
.gamepad #game #bottom-bar #chat-form button{width:28px;min-width:28px;height:24px;min-height:0;padding:0}
.gamepad #game[data-touch-panel=chat] #touch-controls,.gamepad #game[data-touch-panel=chat] #interact{visibility:hidden}

.gamepad #hud .tools{padding:0;right:calc((var(--hud-edge) + env(safe-area-inset-right)) * var(--inverse-ui-scale));top:calc((var(--hud-edge) + env(safe-area-inset-top)) * var(--inverse-ui-scale))}
.gamepad #hud .tools #pause-btn{width:calc(56px * var(--inverse-ui-scale));min-width:0;height:calc(44px * var(--inverse-ui-scale));min-height:0;font-size:calc(12px * var(--inverse-ui-scale));padding:0;gap:calc(6px * var(--inverse-ui-scale))}
.gamepad #hud .tools .hud-icon{width:calc(16px * var(--inverse-ui-scale));height:calc(16px * var(--inverse-ui-scale))}
.gamepad #game #network-debug,.gamepad #game #network-debug b{font-size:calc(10px * var(--inverse-ui-scale))}
.gamepad #top-menu-actions{width:min(calc(600px * var(--inverse-ui-scale)),var(--menu-room));gap:calc(4px * var(--inverse-ui-scale));padding:calc(6px * var(--inverse-ui-scale))}
.gamepad #hud .tools #top-menu-actions button{height:calc(48px * var(--inverse-ui-scale));min-height:0;font-size:calc(12px * var(--inverse-ui-scale));gap:calc(5px * var(--inverse-ui-scale));padding:calc(4px * var(--inverse-ui-scale))}
.gamepad #game:has(.tools[data-expanded=true]) #quest-tracker{visibility:hidden}
.gamepad #game #minimap-panel{width:calc(clamp(126px,calc(144 * var(--mobile-unit)),162px) * var(--inverse-ui-scale));left:calc((var(--hud-edge) + env(safe-area-inset-left)) * var(--inverse-ui-scale));top:calc((var(--hud-edge) + var(--mobile-status-height) + 8px + env(safe-area-inset-top)) * var(--inverse-ui-scale))}
.gamepad #game #minimap-panel header{height:calc(20px * var(--inverse-ui-scale));padding:0 calc(6px * var(--inverse-ui-scale))}
.gamepad #game #minimap-panel :is(#zone,#online){font-size:calc(12px * var(--inverse-ui-scale))}
.gamepad #game #minimap-panel .minimap-viewport{margin:calc(3px * var(--inverse-ui-scale)) calc(5px * var(--inverse-ui-scale)) calc(2px * var(--inverse-ui-scale))}
.gamepad #game #minimap-panel #minimap{height:calc(clamp(24px,calc(30 * var(--mobile-unit)),34px) * var(--inverse-ui-scale))}
.gamepad #game #minimap-panel :is(#map-btn,#channel-btn){height:calc(max(30px,calc(32 * var(--mobile-unit))) * var(--inverse-ui-scale));min-height:0;padding:0 calc(5px * var(--inverse-ui-scale));font-size:calc(11px * var(--inverse-ui-scale))}
.gamepad #game #minimap-panel #map-btn{min-width:0}
.gamepad #game #minimap-panel kbd{display:none}
.gamepad #game #toast{bottom:calc(176px * var(--inverse-ui-scale))}
.gamepad #game #interact{left:calc((var(--screen-width) + var(--touch-left-rail) - var(--touch-right-rail))/2 * var(--inverse-ui-scale));min-height:calc(44px * var(--inverse-ui-scale));font-size:calc(12px * var(--inverse-ui-scale));bottom:calc((var(--touch-slots-height) + 20px) * var(--inverse-ui-scale));padding:0 calc(16px * var(--inverse-ui-scale))}