/* Mobile HUD: unscaled controls, native game canvas, shared equipment and chat. */
body.mobile-layout #text-wrapper { z-index: 100; }
body.mobile-layout {
  --mobile-left: 168px; --mobile-right: 216px; --mobile-top: 46px;
  --mobile-pad: 156px; --mobile-vh: 100dvh;
  overflow: hidden; overscroll-behavior: none; letter-spacing: 0;
}
body.mobile-layout #game-wrapper {
  position: fixed; inset: 0; width: 100% !important; height: var(--mobile-vh) !important;
  min-width: 0; min-height: 0; transform: none !important; box-sizing: border-box;
  padding: calc(var(--mobile-top) + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #141615;
}
body.mobile-layout .touch-control[hidden],
body.mobile-layout [data-mobile-hidden],
body.mobile-layout .mobile-inactive-container,
body.mobile-layout .mobile-hidden-tool { display: none !important; }
#mobile-topbar, #mobile-menu-dropdown { display: none; }
body.mobile-layout #mobile-topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--mobile-right);
  position: absolute; z-index: 1300;
  inset: env(safe-area-inset-top) env(safe-area-inset-right) auto calc(var(--mobile-left) + env(safe-area-inset-left));
  height: var(--mobile-top); gap: 0; padding: 0; align-items: center; box-sizing: border-box;
  background: #202322 url('../png/bg2.png'); border-bottom: 2px solid #4a4e4c;
}
body.mobile-layout button { touch-action: manipulation; }
body.mobile-layout .mobile-icon-button {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 38px; height: 38px; min-width: 0; margin: 0; padding: 6px; color: #ededeb;
  border: 1px solid #626663; border-radius: 4px; background: #292c2b url('../png/bg3.png');
  box-shadow: inset 0 1px #ffffff18, 0 1px 2px #0009; font-size: 20px; line-height: 1;
}
body.mobile-layout .mobile-icon-button:active,
body.mobile-layout .mobile-icon-button[aria-expanded='true'],
body.mobile-layout .mobile-icon-button[aria-pressed='true'] { border-color: #d5c174; background-color: #555039; }
.mobile-menu-glyph { width: 20px; height: 12px; border-block: 2px solid currentColor; position: relative; }
.mobile-menu-glyph::after { content: ''; position: absolute; inset: 5px 0 auto; border-top: 2px solid currentColor; }
.mobile-sprite { display: block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: left center; background-size: 200% 100%; image-rendering: pixelated; pointer-events: none; }
.mobile-skills-icon { background-image: url('../png/options/button_skills.png'); }
.mobile-map-icon { background-image: url('../png/minimap/automap-button-cyclopediamap-up.png'); background-size: 100% 100%; }
body.mobile-layout #mobile-map-button:active .mobile-map-icon { background-image: url('../png/minimap/automap-button-cyclopediamap-down.png'); }
.mobile-hunt-icon { background-image: url('../png/options/analyzers.png'); }
.mobile-friends-icon { background-image: url('../png/options/button_vip.png'); }
.mobile-battle-icon { background-image: url('../png/options/button_battlelist.png'); }
.mobile-settings-icon { background-image: url('../png/options/button_options.png'); }
.mobile-logout-icon { background-image: url('../png/options/button_logout.png'); }
body.mobile-layout .mobile-topbar-icons { display: flex; justify-content: space-evenly; gap: 1px; }
body.mobile-layout #mobile-topbar .mobile-icon-button { width: 32px; height: 34px; padding: 4px; }
body.mobile-layout #mobile-topbar-bars { min-width: 0; padding: 0 6px; }
body.mobile-layout #mobile-topbar-bars .character-status { display: flex; gap: 10px; margin: 0; }
body.mobile-layout #mobile-topbar-bars .bar-row { position: relative; display: block; flex: 1 1 0; min-width: 0; margin: 0; }
body.mobile-layout #mobile-topbar-bars .bar { height: 26px; box-sizing: border-box; border-radius: 4px; border: 1px solid #101312; box-shadow: inset 0 1px 2px #0008; background: #292d2c; image-rendering: auto; }
body.mobile-layout #mobile-topbar-bars .bar-fill { border-radius: 2px; background-image: none; box-shadow: none; }
body.mobile-layout #mobile-topbar-bars .character-health { background-color: #c83f4b; }
body.mobile-layout #mobile-topbar-bars .character-mana { background-color: #287bce; }
body.mobile-layout #mobile-topbar-bars .bar-symbol,
body.mobile-layout #mobile-topbar-bars .percentage,
body.mobile-layout #mobile-topbar-bars .bar-current { display: none; }
body.mobile-layout #mobile-topbar-bars .bar-fill { height: 100%; }
.mobile-bar-value { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; color: #fff; font: bold 12px Verdana, sans-serif; pointer-events: none; white-space: nowrap; }
body.mobile-layout #game-wrapper > .oogwrap { position: relative; z-index: 500; flex: 0 0 var(--mobile-left); width: var(--mobile-left); min-width: 0; height: 100%; flex-direction: column; background: #343735 url('../png/bg2.png'); border-right: 2px solid #111; box-sizing: border-box; padding: 5px; gap: 5px; }
body.mobile-layout #game-wrapper > .mobile-right-rail { flex-basis: var(--mobile-right); width: var(--mobile-right); border-right: 0; border-left: 2px solid #111; overflow-y: auto; }
body.mobile-layout #game-wrapper > .mobile-left-rail { margin-top: calc(-1 * var(--mobile-top)); height: calc(100% + var(--mobile-top)); max-height: none; }
body.mobile-layout .side-drawer,
body.mobile-layout .health-mana-circles,
body.mobile-layout .main > .middle,
body.mobile-layout .main .hotbar,
body.mobile-layout #toggleEquipmentButtons,
body.mobile-layout .equipment-buttons .icon-grid { display: none !important; }
body.mobile-layout #game-wrapper .main { min-width: 0; min-height: 0; position: relative; overflow: visible; }
body.mobile-layout #game-wrapper .upper { flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; background: #101311 url('../png/bg.png'); }
body.mobile-layout #canvas-id { min-width: 0; min-height: 0; flex: none; }
body.mobile-layout #screen { flex: none; touch-action: none; box-shadow: none; }
body.mobile-layout .right-sidebar-content { min-width: 0; width: 100%; height: auto; flex: 1; }
body.mobile-layout .right-sidebar-content > .column { flex: 0; overflow: visible; }
body.mobile-layout .oogwrap2 { min-width: 0; }
body.mobile-layout .equipment-options-wrapper { margin: 0; display: block; }
body.mobile-layout .first-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 2px 4px; align-items: center; width: 100%; }
body.mobile-layout .equipment.wrapper { grid-column: 1 / -1; display: flex; justify-content: center; margin: 0; padding: 0; }
body.mobile-layout .equipment-column { display: flex; flex-direction: column; flex-shrink: 0; }
body.mobile-layout .equipment .slot { width: 32px; height: 32px; flex-shrink: 0; background-size: 100% 100%; touch-action: none; }
body.mobile-layout .equipment .slot::after { width: 100%; height: 100%; background-size: 100% 100%; }
body.mobile-layout .equipment-padding { box-sizing: border-box; height: 34px; font-size: 10px; text-align: center; }
body.mobile-layout .combat-modes { grid-template-columns: repeat(2, 30px); gap: 2px; margin-left: 3px; align-content: start; }
body.mobile-layout button.combat-mode { width: 30px; height: 32px; margin: 0; background-size: 22px auto; }
body.mobile-layout #secure-mode { visibility: hidden; }
body.mobile-layout .combat-stop { height: 28px; margin: 0; padding: 0; font-size: 16px; }
body.mobile-layout #stop-actions { background: url('../png/button_gray.png') no-repeat left center / 200% 100%; }
body.mobile-layout #stop-actions:active { background-position: right center; }
body.mobile-layout .status-bar { grid-column: 1; box-sizing: border-box; height: 13px; min-height: 0; min-width: 0; width: 100%; margin: 0; padding: 1px 2px; display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; }
body.mobile-layout .status-bar img { max-height: 9px; width: auto; }
body.mobile-layout .equipment-buttons { grid-column: 2; display: block; min-width: 0; margin: 0; }
body.mobile-layout .equipment-buttons #openStore { display: flex; align-items: center; justify-content: center; gap: 3px; box-sizing: border-box; width: 100%; height: 24px; border: 1px solid #587987; border-radius: 3px; background: #263b45 url('../png/bg3.png'); padding: 0 3px; }
body.mobile-layout #openStore::before { content: ''; width: 16px; height: 16px; flex: 0 0 16px; background: url('../png/store/coin.png') center / contain no-repeat; }
body.mobile-layout #openStore::after { content: 'Store'; color: #e3e6d6; font: bold 10px Verdana, sans-serif; }
body.mobile-layout .equipment-buttons #openStore:active { background-color: #49636b; border-color: #d4c481; }
.mobile-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 5px; box-sizing: border-box; height: 28px; flex-shrink: 0; font-size: 11px; color: #d2d5d1; background: #171a18 url('../png/bg4.png'); border-bottom: 1px solid #080a09; }
.mobile-panel-heading > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-layout .mobile-panel-heading button { width: 28px; height: 26px; padding: 2px; background: transparent; border: 0; box-shadow: none; }
body.mobile-layout #mobile-containers { display: flex; flex-direction: column; min-height: 80px; flex: 1 1 0; border: 1px solid #111; background: #252826; }
body.mobile-layout #mobile-containers > .mobile-panel-heading { touch-action: none; cursor: grab; }
#mobile-container-tabs { display: flex; flex: 0 0 32px; overflow-x: auto; scrollbar-width: thin; gap: 2px; background: #1b1d1c; }
body.mobile-layout .mobile-container-tab { flex: 0 0 auto; max-width: 125px; height: 30px; margin: 0; padding: 0 8px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: #272a28; color: #aeb4ae; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; touch-action: none; }
body.mobile-layout .mobile-container-tab[aria-selected='true'] { color: #ede7cb; border-bottom-color: #c6b46c; background: #3a3e37; }
body.mobile-layout .mobile-container-tab.mobile-tab-pending { background: #57513b; border-bottom-color: #f0d58a; }
body.mobile-layout #mobile-containers .column { width: 100%; min-width: 0; flex: 1 1 0; overflow: hidden; background: transparent; }
body.mobile-layout #mobile-containers .window { flex: 1 1 auto; min-height: 0 !important; width: 100%; border: 0; }
body.mobile-layout #mobile-containers .window > .header { height: 28px; flex-shrink: 0; }
body.mobile-layout #mobile-containers .window > .header .title { font-size: 10px; padding-left: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-layout #mobile-containers .window > .header button { margin: 0; width: 27px; height: 26px; }
body.mobile-layout #mobile-containers .window > .header [action='minimize'],
body.mobile-layout #mobile-containers .window > .header .window-lock,
body.mobile-layout #mobile-containers .window > .footer { display: none; }
body.mobile-layout #mobile-containers .window > .body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 34px; align-content: start; gap: 2px; padding: 3px; max-height: none !important; min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
body.mobile-layout #mobile-containers .slot { width: auto; height: 32px; background-size: 100% 100%; }
body.mobile-layout #mobile-containers .slot canvas { left: 50%; transform: translateX(-50%); }
body.mobile-layout #game-wrapper > .mobile-depot-window { position: fixed; flex: none; box-sizing: border-box; border: 1px solid #747b70; background: #252826 url('../png/bg2.png'); box-shadow: 0 4px 12px #0009; }
body.mobile-layout .mobile-depot-window > .header { flex: 0 0 30px; }
body.mobile-layout .mobile-depot-window > .header .title { font-size: 11px; }
body.mobile-layout .mobile-depot-window > .header button { width: 28px; height: 28px; margin: 0; }
body.mobile-layout .mobile-depot-window > .header [action='minimize'],
body.mobile-layout .mobile-depot-window > .header .window-lock,
body.mobile-layout .mobile-depot-window > .footer { display: none; }
body.mobile-layout .mobile-depot-window > .body { display: grid; grid-template-columns: repeat(4,34px); grid-auto-rows: 34px; gap: 2px; padding: 4px; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto; touch-action: pan-y; align-content: start; }
body.mobile-layout .mobile-depot-window .slot { box-sizing: content-box; width: 32px; height: 32px; margin: 0; background-size: 32px 32px; touch-action: none; }
body.mobile-layout #mobile-containers.mobile-floating { position: fixed; z-index: 2100; width: var(--mobile-left); height: min(280px, calc(var(--mobile-vh) - 60px)); flex: none; box-shadow: 0 6px 20px #0009; }
.mobile-drag-ready { outline: 2px solid #d5c174; outline-offset: -2px; }
.mobile-drop-target { box-shadow: inset 0 0 0 2px #aade90 !important; }
body.mobile-layout #touch-joystick { position: relative; inset: auto; width: min(100%, var(--mobile-pad)); height: auto; aspect-ratio: 1; flex: 0 0 auto; align-self: center; display: block; padding: 0; box-sizing: border-box; border-radius: 50%; background: #1c201d; border: 2px solid #606a5d; box-shadow: inset 0 1px 4px #0009, 0 2px 5px #0008; }
body.mobile-layout #touch-joystick::before { content: ''; position: absolute; left: 50%; top: 50%; width: var(--pad-turn-diameter); height: var(--pad-turn-diameter); transform: translate(-50%, -50%); border: 1px solid #656e5d; border-radius: 50%; box-sizing: border-box; pointer-events: none; }
body.mobile-layout #touch-joystick button { position: absolute; transform: translate(-50%, -50%); width: 23px; height: 23px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 16px; color: #8c9685; touch-action: none; line-height: 1; }
body.mobile-layout #touch-joystick button[data-direction='nw'], body.mobile-layout #touch-joystick button[data-direction='ne'], body.mobile-layout #touch-joystick button[data-direction='sw'], body.mobile-layout #touch-joystick button[data-direction='se'] { opacity: 0; }
body.mobile-layout #touch-joystick button.active { color: #f0de94; opacity: 1; }
body.mobile-layout .mobile-pad-thumb { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(calc(-50% + var(--pad-thumb-x, 0px)), calc(-50% + var(--pad-thumb-y, 0px))); display: flex; align-items: center; justify-content: center; border: 2px solid #7c8773; border-radius: 50%; background: linear-gradient(#525c4c, #30392e); box-shadow: 0 3px 6px #000a, inset 0 1px #b5c39a33; pointer-events: none; }
body.mobile-layout .mobile-pad-thumb > span { width: 7px; height: 7px; border-radius: 2px; background: #b7c2a8; }
body.mobile-layout #touch-joystick[data-mode='turn']::before { border-color: #d3bd72; }
body.mobile-layout #touch-joystick[data-mode='walk'] .mobile-pad-thumb { border-color: #b9cfa4; }
body.mobile-layout #mobile-menu-dropdown:not([hidden]) { display: flex; }
body.mobile-layout #mobile-menu-dropdown { position: absolute; z-index: 2200; top: calc(var(--mobile-top) + env(safe-area-inset-top)); left: calc(env(safe-area-inset-left) + 6px); width: 210px; max-height: calc(var(--mobile-vh) - var(--mobile-top) - 10px); overflow-y: auto; flex-direction: column; padding: 5px; box-sizing: border-box; border: 1px solid #72776d; border-radius: 4px; background: #252925; box-shadow: 0 6px 20px #000a; }
body.mobile-layout #mobile-menu-dropdown button { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0; padding: 6px 10px; border: 0; border-radius: 0; background: transparent; text-align: left; font-size: 12px; }
body.mobile-layout #mobile-menu-dropdown button:active { background: #464b40; }
body.mobile-layout .mobile-tool-window { position: fixed; z-index: 1800; right: calc(var(--mobile-right) + env(safe-area-inset-right) + 6px); top: calc(var(--mobile-top) + env(safe-area-inset-top) + 6px); width: 220px !important; max-width: calc(100vw - 20px); height: auto; max-height: calc(var(--mobile-vh) - var(--mobile-top) - 18px); box-shadow: 0 6px 20px #000a; border: 1px solid #62685e; }
body.mobile-layout .mobile-tool-window > .header { min-height: 34px; }
body.mobile-layout .mobile-tool-window > .header button { width: 30px; height: 30px; }
body.mobile-layout .mobile-tool-window .body { min-height: 0; }
body.mobile-layout #skill-window { min-height: 0 !important; }
body.mobile-layout #skill-window > .body {
  height: min(460px, calc(var(--mobile-vh) - var(--mobile-top) - 64px)) !important;
  max-height: none !important;
  overflow-y: auto;
  touch-action: pan-y;
}
body.mobile-layout .minimap-container.mobile-tool-window { display: none; padding: 6px; box-sizing: border-box; }
body.mobile-layout .minimap-wrapper { margin: auto; }
body.mobile-layout .minimap-wrapper .minimap-icon-button { width: 30px; height: 30px; background-size: 30px 30px; }
body.mobile-layout #touch-actions { position: absolute; z-index: 2000; right: calc(var(--mobile-right) + env(safe-area-inset-right) + 8px); bottom: calc(env(safe-area-inset-bottom) + 8px); display: flex; flex-direction: column; gap: 8px; }
body.mobile-layout #touch-actions button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 2px solid #778075; border-radius: 50%; background: #17201df2; box-shadow: 0 2px 5px #000b; }
body.mobile-layout #touch-actions #touch-hand-button { border-color: #778075; }
body.mobile-layout #touch-actions #touch-hand-button[aria-pressed='true'] { border-color: #ff6b63; }
body.mobile-layout #touch-chat-button[aria-expanded='true'] { background: #475641; border-color: #c5cb8c; }
body.mobile-layout .mobile-pvp-skull { width: 26px; height: 26px; background-color: #898e8b; mask: url('../png/mobile-targeting/skull.svg') center / contain no-repeat; pointer-events: none; }
body.mobile-layout #touch-hand-button[aria-pressed='true'] .mobile-pvp-skull { background-color: #ff6b63; }
body.mobile-layout .mobile-chat-icon { width: 24px; height: 24px; background: url('../png/npcicons/icon_chat.png') center / contain no-repeat; image-rendering: pixelated; pointer-events: none; }
body.mobile-layout .main > .lower { display: none; position: fixed; z-index: 1900; left: calc(var(--mobile-left) + env(safe-area-inset-left)); right: calc(var(--mobile-right) + env(safe-area-inset-right) + 58px); bottom: env(safe-area-inset-bottom); height: min(220px, 58%); max-height: none; border: 1px solid #72796c; box-shadow: 0 -4px 15px #0008; overflow: hidden; }
body.mobile-layout.mobile-chat-open .main > .lower { display: flex; }
body.mobile-layout .chatbox-wrapper { width: 100%; height: 100%; min-width: 0; display: flex; flex-direction: column; box-sizing: border-box; }
body.mobile-layout .chatbox-wrapper .wrapper-header { display: flex; flex: 0 0 36px; min-width: 0; }
body.mobile-layout #cheader { min-width: 0; flex: 1; overflow-x: auto; }
body.mobile-layout .chat-title span { margin: 0; }
body.mobile-layout .chat-title { min-height: 30px; box-sizing: border-box; padding: 7px 8px; white-space: nowrap; }
body.mobile-layout #chat-text { flex: 1; min-height: 0; }
body.mobile-layout .chat-footer { display: flex; flex: 0 0 40px; min-width: 0; }
body.mobile-layout .chatbox-wrapper button { min-width: 30px; height: 34px; margin: 1px; padding: 2px 5px; }
body.mobile-layout #chat-input { flex: 1; min-width: 0; width: 0; height: 34px; box-sizing: border-box; font-size: 16px; }
body.mobile-layout .contextmenu { max-width: calc(100vw - 12px); max-height: calc(var(--mobile-vh) - 12px); overflow-y: auto; }
body.mobile-layout .contextmenu button { min-height: 34px; }
body.mobile-layout #mobile-move-modal { width: 320px; }
body.mobile-layout #mobile-move-destinations { display: grid; gap: 4px; max-height: calc(var(--mobile-vh) - 120px); overflow-y: auto; }
body.mobile-layout .mobile-container-choice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 6px 10px; text-align: left; }
body.mobile-layout .mobile-container-choice canvas { width: 32px; height: 32px; flex-shrink: 0; image-rendering: pixelated; pointer-events: none; }
body.mobile-layout .mobile-container-choice span { min-width: 0; overflow-wrap: anywhere; }
body.mobile-layout #mobile-trade-cursor { position: fixed; z-index: 4500; width: 32px; height: 32px; transform: translate(-50%, -50%); background: url('../png/cursors/targetcursor.png') center / contain no-repeat; image-rendering: pixelated; pointer-events: none; }
body.mobile-layout #mobile-trade-cancel { position: fixed; z-index: 4500; width: 40px; height: 40px; }
body.mobile-layout #mobile-trade-cursor[hidden], body.mobile-layout #mobile-trade-cancel[hidden] { display: none !important; }
body.mobile-layout #trade-window .trade-window-actions button { min-height: 40px; }
/* Adapt existing dialogs without changing their chrome or desktop layout. */
body.mobile-layout .modal-wrapper { position: fixed; inset: 0; z-index: 50000; width: 100%; height: var(--mobile-vh); box-sizing: border-box; padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); }
body.mobile-layout .modal:not(.contextmenu) { position: relative !important; inset: auto !important; transform: none !important; margin: 0; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; overflow: auto; box-sizing: border-box; }
body.mobile-layout .modal-header, body.mobile-layout .market-title { min-height: 30px; box-sizing: border-box; flex-shrink: 0; line-height: 22px; }
body.mobile-layout .modal-body { min-width: 0; padding: 8px; }
body.mobile-layout #map-modal { width: min(506px, calc((var(--mobile-vh) - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 10 / 7 + 18px)); overflow: hidden; }
body.mobile-layout #map-modal-canvas { width: 100%; height: auto; aspect-ratio: 10 / 7; touch-action: none; -webkit-touch-callout: none; }
body.mobile-layout #map-modal > .modal-body > .modal-footer { display: flex; justify-content: space-between; align-items: center; }
body.mobile-layout #map-modal .map-touch-zoom { display: flex; gap: 4px; }
body.mobile-layout #map-modal .map-touch-zoom button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }
body.mobile-layout #map-modal .map-touch-zoom img { width: 24px; height: 24px; image-rendering: pixelated; pointer-events: none; }
body.mobile-layout #map-modal .map-marker-overlay { position: fixed; inset: 0; height: var(--mobile-vh); box-sizing: border-box; padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); z-index: 3; }
body.mobile-layout #map-modal .map-marker-panel { width: 460px; max-width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
body.mobile-layout #map-modal .map-marker-icons { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
body.mobile-layout #map-modal .map-marker-icon { width: 100%; height: 36px; }
body.mobile-layout #map-modal #map-marker-description { font-size: 16px; height: 36px; }
body.mobile-layout #map-modal .map-marker-panel-buttons button { min-width: 76px; min-height: 40px; }
@media (orientation: portrait) {
  body.mobile-layout #map-modal .map-marker-icons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.mobile-layout #map-modal .map-marker-icon { height: 44px; }
}
body.mobile-layout #character-rows-scroll-wrapper { max-height: 204px; }
body.mobile-layout #select-character #character-list { margin-bottom: 4px; }
body.mobile-layout #select-character .modal-body > p, body.mobile-layout #select-character hr { margin: 4px 0; }
body.mobile-layout .character-row { box-sizing: border-box; height: 68px; touch-action: pan-y; }
body.mobile-layout .character-head, body.mobile-layout .character-row { grid-template-columns: 64px minmax(80px, 1fr) 52px minmax(70px, .8fr) minmax(80px, 1fr); gap: 6px; }
body.mobile-layout .character-head > span, body.mobile-layout .character-row > span { min-width: 0; overflow-wrap: anywhere; }
body.mobile-layout .modal .modal-footer button, body.mobile-layout .market-footer button { min-height: 32px; height: auto; }
body.mobile-layout .modal .close-button-transparent { width: 30px; height: 30px; z-index: 2; }
body.mobile-layout .modal input:not([type='checkbox']):not([type='radio']), body.mobile-layout .modal select,
body.mobile-layout .market-window input:not([type='checkbox']):not([type='radio']), body.mobile-layout .market-window select { min-width: 0; min-height: 30px; max-width: 100%; box-sizing: border-box; }
body.mobile-layout .market-window { position: fixed; z-index: 40000; box-sizing: border-box; left: calc(8px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); transform: none; width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(var(--mobile-vh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-width: 0; min-height: 0; max-width: 900px; overflow: hidden; }
body.mobile-layout .market-footer { flex-shrink: 0; flex-wrap: wrap; gap: 4px; padding: 5px 8px; }
body.mobile-layout .market-footer nav { display: flex; flex-wrap: wrap; gap: 3px; }
body.mobile-layout .market-content { grid-template-columns: 150px minmax(0, 1fr); gap: 6px; padding: 0 8px 6px; }
body.mobile-layout .market-main { min-width: 0; overflow: auto; overscroll-behavior: contain; }
body.mobile-layout .market-categories.tibia-scroll-wrapper { flex-basis: 80px; }
body.mobile-layout .market-items.tibia-scroll-wrapper { min-height: 64px; }
body.mobile-layout .market-item, body.mobile-layout .market-categories button { min-height: 28px; }
body.mobile-layout .market-create-grid { gap: 4px; grid-template-columns: 96px minmax(130px, 1fr) minmax(130px, .8fr); }
body.mobile-layout .market-create { flex-shrink: 0; min-width: 370px; min-height: 120px; }
body.mobile-layout .market-section-head { grid-template-columns: 1fr auto; gap: 4px; padding-bottom: 4px; }
body.mobile-layout .market-section-head > b { grid-column: 1; }
body.mobile-layout .market-offer-section, body.mobile-layout .market-mine-section, body.mobile-layout .market-wide-table { flex-shrink: 0; min-width: 370px; min-height: 168px; }
body.mobile-layout .stash-window { max-width: 660px; }
body.mobile-layout .stash-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 8px; }
body.mobile-layout .stash-category, body.mobile-layout .stash-trader { width: 100%; }
body.mobile-layout .stash-search { grid-column: 1 / -1; min-width: 0; }
body.mobile-layout .stash-search button { min-width: 30px; min-height: 30px; }
body.mobile-layout .stash-grid.tibia-scroll-wrapper { margin: 6px 8px 0; }
body.mobile-layout .stash-grid.tibia-scroll-content { gap: 6px; }
body.mobile-layout .stash-slot { width: 40px; height: 40px; touch-action: pan-y; }
body.mobile-layout .stash-slot canvas { left: 4px; top: 4px; }
body.mobile-layout .store-modal { width: 900px; height: calc(var(--mobile-vh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
body.mobile-layout .store-modal[style*='display: block'] { display: flex !important; }
body.mobile-layout .store-body { grid-template-columns: 130px minmax(180px, 1.2fr) minmax(180px, 1fr); gap: 6px; padding: 6px; overflow: hidden; }
body.mobile-layout .store-sidebar, body.mobile-layout .store-main, body.mobile-layout .store-detail { min-width: 0; }
body.mobile-layout .store-category, body.mobile-layout .store-subcategory { min-height: 28px; box-sizing: border-box; }
body.mobile-layout .store-category, body.mobile-layout .store-item-name, body.mobile-layout .store-detail-name { white-space: normal; overflow-wrap: anywhere; }
body.mobile-layout .store-item-icon { width: 44px; height: 44px; }
body.mobile-layout .store-item-icon canvas { max-width: 100%; max-height: 100%; }
body.mobile-layout .store-detail { padding: 6px; }
body.mobile-layout .store-detail-icon { width: 80px; height: 80px; flex-shrink: 0; }
body.mobile-layout .store-detail-icon canvas { max-width: 100%; max-height: 100%; }
body.mobile-layout .store-footer { flex-shrink: 0; flex-wrap: wrap; gap: 5px; padding: 5px 8px; }
body.mobile-layout .store-footer-buttons { flex-wrap: wrap; gap: 4px; }
body.mobile-layout .store-footer .store-footer-buttons button, body.mobile-layout .store-detail button { min-height: 32px; }
body.mobile-layout #spellbook-modal { width: 520px; }
body.mobile-layout #spellbook-list-scroll-wrapper { width: 100%; height: clamp(90px, calc(var(--mobile-vh) - 240px), 250px); }
body.mobile-layout #spellbook-modal .spellbook-tab, body.mobile-layout #spellbook-modal .spellbook-target-button, body.mobile-layout #spellbook-text-add { min-height: 32px; height: auto; }
body.mobile-layout .spellbook-wrapper { min-width: 0; min-height: 44px; }
body.mobile-layout .spellbook-wrapper span { min-width: 0; overflow-wrap: anywhere; }
body.mobile-layout .spellbook-target-buttons { display: flex; flex-wrap: wrap; gap: 3px; }
body.mobile-layout .spellbook-target-button { flex: 1 1 100px; margin: 0; white-space: normal; }
body.mobile-layout .spellbook-text-row { min-width: 0; }
body.mobile-layout #spellbook-text-input { width: 0; flex: 1; font-size: 16px; }
@media (max-width: 600px) {
  body.mobile-layout .character-head, body.mobile-layout .character-row { grid-template-columns: 40px minmax(60px, 1fr) 30px minmax(52px, .8fr) minmax(56px, 1fr); gap: 3px; font-size: 10px; }
  body.mobile-layout .character-outfit { width: 40px; height: 40px; }
  body.mobile-layout .market-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: 210px minmax(0, 1fr); }
  body.mobile-layout .market-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  body.mobile-layout .market-categories.tibia-scroll-wrapper { grid-column: 1; grid-row: 1 / 3; }
  body.mobile-layout .market-label { grid-column: 2; grid-row: 1; }
  body.mobile-layout .market-items.tibia-scroll-wrapper { grid-column: 2; grid-row: 2; }
  body.mobile-layout .market-check { grid-column: 1; grid-row: 3; }
  body.mobile-layout .market-search { grid-column: 2; grid-row: 3; }
  body.mobile-layout .store-body { display: flex; flex-direction: column; overflow-y: auto; }
  body.mobile-layout .store-sidebar { flex: 0 0 145px; }
  body.mobile-layout .store-main { flex: 0 0 260px; }
  body.mobile-layout .store-detail { flex: 0 0 auto; overflow: visible; }
  body.mobile-layout .store-detail-empty { margin: 0; }
  body.mobile-layout .store-toolbar { flex-wrap: wrap; }
  body.mobile-layout .store-subcategory-select, body.mobile-layout .store-sort-select { flex-basis: 120px; }
  body.mobile-layout .spellbook-wrapper { flex-basis: 100%; }
}
/* The hotkey grid sizes itself off whatever width the equipment panel actually has, instead of
   the 4x48px + 204px square it was pinned to before. That square was the same on every device:
   it overflowed the panel on the narrowest phones, and on a big one it left a strip of dead
   space while the buttons stayed smaller than a thumb. Columns are 1fr and the buttons are
   square by aspect-ratio, so the whole grid follows the panel and can never overflow it
   sideways. No min-width on purpose: on a panel too narrow for four 44px columns the buttons
   go slightly oblong (min-height keeps them tappable) rather than pushing a horizontal
   scrollbar into the HUD. The max-width is the ceiling -- four rows grow in height as fast as
   they grow in width, and past roughly this the grid starts crowding the panel it sits in. */
body.mobile-layout #mobile-actionbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; width: 100%; max-width: 264px; column-gap: 4px; row-gap: 8px; margin: 4px auto 0; container-type: inline-size; }

#spellbook-tab-targeting[hidden] { display: none; }
body.mobile-layout .mobile-target-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 5px 8px; border: 0; border-bottom: 1px solid #484d47; border-radius: 0; text-align: left; background: #252925; color: #eee; font-size: 11px; }
body.mobile-layout .mobile-target-option:active { background: #444c3c; }
body.mobile-layout .mobile-target-icon { position: relative; display: block; width: 32px; height: 32px; flex: 0 0 32px; pointer-events: none; }
.mobile-target-icon::before {
  content: '';
  position: absolute;
  inset: 2px;
  background-color: var(--target-color);
  mask: var(--target-icon) center / contain no-repeat;
}
.mobile-target-icon[data-target-action='attack-nearest'] { --target-color: #ffae59; --target-icon: url('../png/mobile-targeting/crosshair.svg'); }
.mobile-target-icon[data-target-action='attack-weakest'] { --target-color: #ff789d; --target-icon: url('../png/mobile-targeting/heart-pulse.svg'); }
.mobile-target-icon[data-target-action='attack-player'] { --target-color: #62bdff; --target-icon: url('../png/mobile-targeting/user-round.svg'); }
.mobile-target-icon[data-target-action='attack-skull'] { --target-color: #c59aff; --target-icon: url('../png/mobile-targeting/skull.svg'); }
.mobile-target-icon[data-target-action='attack-leader'] { --target-color: #f4d35e; --target-icon: url('../png/mobile-targeting/crown.svg'); }
.mobile-target-icon[data-target-action='attack-next'] { --target-color: #7de291; --target-icon: url('../png/mobile-targeting/skip-forward.svg'); }
.mobile-target-icon[data-target-action='attack-last'] { --target-color: #5edbda; --target-icon: url('../png/mobile-targeting/undo-2.svg'); }
.mobile-target-icon[data-target-action='clear-target'] { --target-color: #ff6b63; --target-icon: url('../png/mobile-targeting/circle-x.svg'); }
body.mobile-layout .mobile-action { position: relative; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #666d62; border-bottom: 2px solid var(--priority-color, #757b70); border-radius: 8px; background: #222622 url('../png/bg3.png'); touch-action: none; overflow: hidden; }
body.mobile-layout .mobile-action[data-priority='1'] { --priority-color: #dd8979; }
body.mobile-layout .mobile-action[data-priority='2'] { --priority-color: #cabb83; }
body.mobile-layout .mobile-action[data-priority='3'] { --priority-color: #84abbc; }
body.mobile-layout .mobile-action:active, body.mobile-layout .mobile-action.active { background-color: #596444; border-color: #cabe7d; }
/* 32/48 of the old fixed button: the backing store stays 32x32 (see MobileActions' own canvas),
   only the drawn size follows the button, and pixelated keeps it crisp scaled up. */
.mobile-action canvas { width: 66%; height: 66%; image-rendering: pixelated; pointer-events: none; }
.mobile-action-empty { font: 20px Verdana, sans-serif; color: #747c72; pointer-events: none; }
.mobile-action-number { position: absolute; top: 3px; left: 5px; font: 8px Verdana, sans-serif; color: #a7ada3; pointer-events: none; }
.mobile-action-count { position: absolute; bottom: 3px; right: 5px; color: #d2e8b3; font-size: 10px; pointer-events: none; }
.mobile-action-symbol { color: #ded9ba; font-size: 22px; pointer-events: none; }
.mobile-action-cooldown { position: absolute; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; pointer-events: none; }
/* The labels track the bar's own width so they stay in proportion as the buttons grow or shrink
   -- each value is what it used to be at the old fixed 204px bar. Declared after the plain px
   rules above on purpose: a browser without container query support keeps those instead. */
@container (min-width: 0px) {
  .mobile-action-empty { font-size: 9.8cqw; }
  .mobile-action-number { font-size: clamp(7px, 3.9cqw, 11px); top: 6%; left: 10%; }
  .mobile-action-count { font-size: clamp(9px, 4.9cqw, 13px); bottom: 6%; right: 10%; }
  .mobile-action-symbol { font-size: 10.8cqw; }
  .mobile-action-cooldown { font-size: clamp(11px, 5.9cqw, 16px); }
}
.mobile-action-cooldown:empty { display: none; }
body.mobile-layout .mobile-action [hidden] { display: none; }
body.mobile-layout #mobile-containers .slot { touch-action: none; }
#mobile-drag-ghost { position: fixed; z-index: 65000; width: 40px; height: 40px; box-sizing: border-box; background: #232a20e8; border: 2px solid #e3d28e; pointer-events: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
#mobile-drag-ghost canvas { width: 32px; height: 32px; image-rendering: pixelated; }
@media (max-height: 440px) and (orientation: landscape) {
  body.mobile-layout { --mobile-left: 168px; --mobile-right: 212px; --mobile-top: 40px; --mobile-pad: 156px; }
  body.mobile-layout .equipment-options-wrapper > .mobile-panel-heading { display: none; }
  body.mobile-layout .first-wrapper { row-gap: 0; }
  body.mobile-layout #mobile-actionbar { margin-top: 3px; }
  body.mobile-layout #mobile-topbar { gap: 0; }
  body.mobile-layout #mobile-topbar .mobile-icon-button { width: 32px; height: 34px; }
  body.mobile-layout .equipment .slot { height: 27px; }
  body.mobile-layout .equipment .slot canvas { width: 27px; height: 27px; left: 2px; }
  body.mobile-layout .equipment-padding { height: 27px; }
  body.mobile-layout .combat-modes { grid-template-columns: repeat(2, 29px); }
  body.mobile-layout button.combat-mode { width: 29px; height: 26px; }
  body.mobile-layout .combat-stop { height: 24px; }
  body.mobile-layout .equipment-buttons #openStore { height: 22px; }
  body.mobile-layout .mobile-panel-heading { height: 24px; }
  body.mobile-layout #game-wrapper > .oogwrap { padding: 3px; gap: 3px; }
}
@media (max-height: 380px) and (orientation: landscape) {
  body.mobile-layout #mobile-actionbar { margin-top: 1px; }
  body.mobile-layout .equipment .slot { height: 24px; }
  body.mobile-layout .equipment .slot canvas { width: 24px; height: 24px; left: 4px; }
  body.mobile-layout .equipment-padding { height: 24px; }
  body.mobile-layout button.combat-mode { height: 24px; }
}
@media (orientation: portrait) {
  body.mobile-layout { --mobile-left: calc(100% - var(--mobile-right)); --mobile-right: max(216px, 56%); --mobile-top: 78px; --mobile-pad: 176px; --mobile-content-height: calc(var(--mobile-vh) - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); --mobile-game-height: max(120px, calc(var(--mobile-content-height) * .43)); }
  body.mobile-layout #game-wrapper { flex-wrap: wrap; align-content: flex-start; }
  body.mobile-layout #mobile-topbar { left: env(safe-area-inset-left); grid-template-columns: minmax(0, 1fr); grid-template-rows: 34px 36px; height: 78px; gap: 2px 8px; padding: 4px 6px; }
  body.mobile-layout #game-wrapper > .mobile-left-rail { margin-top: 0; }
  body.mobile-layout #mobile-topbar .mobile-topbar-icons { grid-column: 1 / -1; justify-content: flex-end; }
  body.mobile-layout #mobile-topbar .mobile-icon-button { width: 34px; height: 34px; }
  body.mobile-layout #game-wrapper .main { order: -1; flex: 0 0 100%; height: var(--mobile-game-height); }
  body.mobile-layout #game-wrapper > .oogwrap { height: calc(var(--mobile-content-height) - var(--mobile-game-height)); }
  body.mobile-layout #touch-actions { right: calc(env(safe-area-inset-right) + 6px); bottom: auto; top: calc(78px + env(safe-area-inset-top) + var(--mobile-game-height) - 156px); }
  body.mobile-layout .main > .lower { left: 4px; right: 56px; bottom: auto; top: calc(78px + env(safe-area-inset-top)); height: var(--mobile-game-height); }
  body.mobile-layout .mobile-tool-window { right: 6px; top: calc(78px + env(safe-area-inset-top)); }
  body.mobile-layout #mobile-containers.mobile-floating { width: 168px; }
}

/* Nothing on the mobile layout is meant to be text-selected by an accidental drag of the
   thumb -- a stray touch on the capacity readout, a label, anything -- except the chat log
   and its own input, which people genuinely want to select/copy from (Douglas 2026-09-23). */
body.mobile-layout {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.mobile-layout #chat-text,
body.mobile-layout #chat-text * {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* The resize grip on every window (skills, battle, and the rest) is a drag gesture that is
   too easy to trigger by accident on a touchscreen -- it was leaving windows minimized at a
   size that maximizing back out of never actually recovered (Douglas 2026-09-23). Minimizing
   and maximizing themselves are separate button clicks, untouched by this -- only the resize
   drag itself is disabled here, and its grip hidden so it does not invite a touch it will not
   answer. See WindowManager.__handleMouseDown for where the drag itself is refused. */
body.mobile-layout .window > .footer {
  cursor: default;
  pointer-events: none;
}
body.mobile-layout .window > .footer::before {
  display: none;
}