/* Phone layout shares the same breakpoint with mobile.js. */
.mobile-control, #mobileMenu { display: none; }

@media (max-width: 700px), (max-width: 1100px) and (max-height: 600px), (pointer: coarse) and (max-width: 1400px) and (max-height: 900px) {
  #gameUI.mobile-hud {
    --mobile-left: max(calc(8 * var(--mobile-unit, 1px)), env(safe-area-inset-left));
    --mobile-right: max(calc(8 * var(--mobile-unit, 1px)), env(safe-area-inset-right));
    --mobile-top: max(calc(8 * var(--mobile-unit, 1px)), env(safe-area-inset-top));
    --mobile-bottom: max(calc(10 * var(--mobile-unit, 1px)), env(safe-area-inset-bottom));
    --mobile-screen-left: env(safe-area-inset-left, 0px);
    --mobile-screen-bottom: env(safe-area-inset-bottom, 0px);
    height: 100dvh;
  }
  .mobile-hud *, .mobile-hud *::before, .mobile-hud *::after { box-sizing: border-box; }
  .mobile-hud button { touch-action: manipulation; }
  #gameUI.mobile-hud.joystick-centered .movement-controls:not(.hud-floating) {
    left: var(--mobile-joystick-x); top: var(--mobile-joystick-y); bottom: auto;
  }
  .mobile-hud .window-grip, .mobile-hud #controlTip, .mobile-hud kbd,
  .mobile-hud .brand, .mobile-hud #connectionStatus { display: none !important; }
  .mobile-hud .window-handle { cursor: default; touch-action: auto !important; }

  #gameUI.mobile-hud .topbar {
    inset: var(--mobile-top) auto auto var(--mobile-left);
    display: block; width: clamp(calc(142 * var(--mobile-unit, 1px)), calc(100vw - calc(184 * var(--mobile-unit, 1px))), calc(216 * var(--mobile-unit, 1px)));
    margin: 0; padding: 0;
  }
  #gameUI.mobile-hud .topbar .player-card {
    width: 100%; max-width: none; padding: calc(4 * var(--mobile-unit, 1px)) calc(8 * var(--mobile-unit, 1px));
  }
  .mobile-hud .player-top { font-size: calc(12 * var(--mobile-unit, 1px)); line-height: calc(14 * var(--mobile-unit, 1px)); gap: calc(6 * var(--mobile-unit, 1px)); }
  .mobile-hud .player-top strong { min-width: 0; max-width: none; }
  .mobile-hud .player-top > span { font-size: calc(10 * var(--mobile-unit, 1px)); }
  .mobile-hud .player-sub { margin: calc(1 * var(--mobile-unit, 1px)) 0 calc(2 * var(--mobile-unit, 1px)); font-size: calc(9 * var(--mobile-unit, 1px)); line-height: calc(10 * var(--mobile-unit, 1px)); }
  .mobile-hud .health-track, .mobile-hud .mana-track { height: calc(12 * var(--mobile-unit, 1px)); margin-top: calc(2 * var(--mobile-unit, 1px)); }
  .mobile-hud .health-track > span, .mobile-hud .mana-track > span { font-size: calc(9 * var(--mobile-unit, 1px)); line-height: calc(10 * var(--mobile-unit, 1px)); }
  .mobile-hud .xp-track { margin-top: calc(3 * var(--mobile-unit, 1px)); height: calc(2 * var(--mobile-unit, 1px)); }

  #gameUI.mobile-hud #hudLeftRail {
    left: var(--mobile-left); right: auto; top: calc(var(--mobile-top) + calc(77 * var(--mobile-unit, 1px)));
    width: clamp(calc(142 * var(--mobile-unit, 1px)), calc(100vw - calc(184 * var(--mobile-unit, 1px))), calc(216 * var(--mobile-unit, 1px))); gap: calc(4 * var(--mobile-unit, 1px));
    max-height: max(calc(48 * var(--mobile-unit, 1px)), calc(100dvh - calc(188 * var(--mobile-unit, 1px)) - var(--mobile-top) - var(--mobile-bottom)));
    overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; pointer-events: auto;
  }
  #gameUI.mobile-hud #hudLeftRail > * { flex-shrink: 0; }
  #gameUI.mobile-hud #hudLeftRail > .world-status {
    padding: calc(3 * var(--mobile-unit, 1px)) calc(7 * var(--mobile-unit, 1px)); min-height: 0; max-width: none; gap: calc(2 * var(--mobile-unit, 1px));
  }
  #gameUI.mobile-hud #hudLeftRail .world-status strong {
    font-size: calc(13 * var(--mobile-unit, 1px)); line-height: calc(18 * var(--mobile-unit, 1px)); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  }
  .mobile-hud #movementStatus, .mobile-hud #zoneStatus { display: none; }
  #gameUI.mobile-hud #hudLeftRail #combatStatus { font-size: calc(10 * var(--mobile-unit, 1px)); line-height: calc(14 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #hudLeftRail > #questTracker {
    min-height: calc(44 * var(--mobile-unit, 1px)); padding: calc(6 * var(--mobile-unit, 1px)) calc(7 * var(--mobile-unit, 1px)); justify-content: center; gap: 0;
  }
  #gameUI.mobile-hud #questTracker > span { display: none; }
  #gameUI.mobile-hud #questTracker strong {
    font: calc(12 * var(--mobile-unit, 1px))/calc(16 * var(--mobile-unit, 1px)) Georgia, serif; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  }
  #gameUI.mobile-hud #hudLeftRail > .pvp-bar { padding: 0; gap: 0; }
  #gameUI.mobile-hud #hudLeftRail .target-card { padding: calc(3 * var(--mobile-unit, 1px)) calc(4 * var(--mobile-unit, 1px)) calc(3 * var(--mobile-unit, 1px)) calc(7 * var(--mobile-unit, 1px)); font-size: calc(11 * var(--mobile-unit, 1px)); }
  .mobile-hud #clearTarget, .mobile-hud #targetLoot { min-width: calc(44 * var(--mobile-unit, 1px)); min-height: calc(44 * var(--mobile-unit, 1px)); }

  #gameUI.mobile-hud #hudRightRail {
    top: var(--mobile-top); right: calc(var(--mobile-right) + calc(52 * var(--mobile-unit, 1px)));
    left: auto; width: calc(100 * var(--mobile-unit, 1px)); max-height: none; gap: 0; overflow: visible;
  }
  #gameUI.mobile-hud #minimapCard { width: 100%; padding: calc(4 * var(--mobile-unit, 1px)); min-height: calc(68 * var(--mobile-unit, 1px)); }
  .mobile-hud #minimapCard canvas { display: block; width: 100%; height: auto; }
  .mobile-hud #minimapCard > div, .mobile-hud #battleList { display: none !important; }

  .mobile-hud .mobile-control {
    display: block; min-width: calc(44 * var(--mobile-unit, 1px)); min-height: calc(44 * var(--mobile-unit, 1px)); padding: calc(4 * var(--mobile-unit, 1px));
    color: #f1dfa8; border: calc(1 * var(--mobile-unit, 1px)) solid #b7a57488; border-radius: calc(5 * var(--mobile-unit, 1px));
    background: linear-gradient(#354936f5, #1a2c23fa); font: calc(24 * var(--mobile-unit, 1px))/1 system-ui;
    box-shadow: 0 calc(2 * var(--mobile-unit, 1px)) calc(5 * var(--mobile-unit, 1px)) #0004; pointer-events: auto;
  }
  .mobile-hud #mobileMenuButton {
    position: absolute; top: var(--mobile-top); right: var(--mobile-right); z-index: 30;
  }
  #gameUI.mobile-hud #mobileMenu:not([hidden]) {
    position: absolute; display: flex; flex-direction: column; gap: calc(12 * var(--mobile-unit, 1px));
    top: var(--mobile-top); right: var(--mobile-right);
    width: min(calc(340 * var(--mobile-unit, 1px)), calc(100% - var(--mobile-left) - var(--mobile-right)));
    max-height: calc(100dvh - var(--mobile-top) - var(--mobile-bottom)); overflow-y: auto;
    padding: calc(12 * var(--mobile-unit, 1px)); border: calc(1 * var(--mobile-unit, 1px)) solid #c6b37b; border-radius: calc(6 * var(--mobile-unit, 1px));
    background: linear-gradient(135deg, #263d2f, #142a23); box-shadow: 0 calc(8 * var(--mobile-unit, 1px)) calc(28 * var(--mobile-unit, 1px)) #0008;
    pointer-events: auto; overscroll-behavior: contain; z-index: 100;
  }
  .mobile-hud #mobileMenu > header { display: flex; align-items: center; justify-content: space-between; }
  .mobile-hud #mobileMenu > header strong { font: calc(21 * var(--mobile-unit, 1px)) Georgia, serif; color: #ebd39a; }
  .mobile-hud #mobileMenu .gold-chip { position: static; margin: 0; padding: 0; font-size: calc(14 * var(--mobile-unit, 1px)); max-width: none; }
  #gameUI.mobile-hud #mobileMenu .top-actions {
    position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; gap: calc(6 * var(--mobile-unit, 1px)); margin: 0; padding: 0;
  }
  #gameUI.mobile-hud #mobileMenu .icon-button {
    width: 100%; height: auto; min-height: calc(48 * var(--mobile-unit, 1px)); padding: calc(6 * var(--mobile-unit, 1px)) calc(8 * var(--mobile-unit, 1px));
    display: flex; align-items: center; gap: calc(8 * var(--mobile-unit, 1px)); text-align: left; font-size: calc(22 * var(--mobile-unit, 1px));
  }
  .mobile-hud #mobileMenu .icon-button::after { content: attr(data-mobile-label); font: calc(11 * var(--mobile-unit, 1px))/calc(15 * var(--mobile-unit, 1px)) system-ui; }
  .mobile-hud #mobileMenu .safety-button { align-self: stretch; min-height: calc(44 * var(--mobile-unit, 1px)); font-size: calc(12 * var(--mobile-unit, 1px)); }
  .mobile-hud #mobileMenu #skullStatus { font-size: calc(12 * var(--mobile-unit, 1px)); white-space: normal; }
  /* Menu controls stay inside the drawer; their grips must not cover Close. */
  #gameUI.mobile-hud #mobileMenu .window-grip { display: none !important; }
  .mobile-hud #mobileMenu .hud-visibility { padding: 0; position: static; }
  .mobile-hud #mobileMenu .hud-visibility > button { min-width: calc(44 * var(--mobile-unit, 1px)); min-height: calc(44 * var(--mobile-unit, 1px)); font-size: calc(12 * var(--mobile-unit, 1px)); }
  .mobile-hud #hudVisibilityMenu { max-height: none; }
  .mobile-hud #hudVisibilityMenu label { min-height: calc(44 * var(--mobile-unit, 1px)); }
  .mobile-hud #hudVisibilityMenu small { display: none; }
  .mobile-hud.mobile-menu-open #mobileMenuButton { visibility: hidden; }

  /* Reserve both lower corners for thumbs. Only spells scroll sideways. */
  #gameUI.mobile-hud .movement-controls { left: var(--mobile-left); bottom: var(--mobile-bottom); }
  #gameUI.mobile-hud .joystick { display: block; width: calc(88 * var(--mobile-unit, 1px)); height: calc(88 * var(--mobile-unit, 1px)); touch-action: none; }
  #gameUI.mobile-hud .combat-controls { right: var(--mobile-right); bottom: var(--mobile-bottom); gap: calc(8 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .attack-button { width: calc(76 * var(--mobile-unit, 1px)); height: calc(76 * var(--mobile-unit, 1px)); border-radius: 50%; touch-action: none; }
  #gameUI.mobile-hud .interact-button { width: calc(52 * var(--mobile-unit, 1px)); height: calc(52 * var(--mobile-unit, 1px)); margin: 0; border-radius: 50%; }
  .mobile-hud .attack-button > span { font-size: calc(28 * var(--mobile-unit, 1px)); line-height: calc(32 * var(--mobile-unit, 1px)); }
  .mobile-hud .interact-button > span { font-size: calc(20 * var(--mobile-unit, 1px)); line-height: calc(22 * var(--mobile-unit, 1px)); }
  .mobile-hud .action-button small { font-size: calc(9 * var(--mobile-unit, 1px)); letter-spacing: 0; }
  #gameUI.mobile-hud #actionDock {
    --slot-height: calc(56 * var(--mobile-unit, 1px));
    left: calc(var(--mobile-left) + calc(104 * var(--mobile-unit, 1px))); right: calc(var(--mobile-right) + calc(148 * var(--mobile-unit, 1px)));
    bottom: var(--mobile-bottom); display: block; height: calc(56 * var(--mobile-unit, 1px)); z-index: 10;
  }
  #gameUI.mobile-hud .action-dock .spellbar {
    position: relative; inset: auto; transform: none; width: 100%; height: calc(56 * var(--mobile-unit, 1px));
    max-width: none; display: block; margin: 0;
  }
  #gameUI.mobile-hud .hotbar-viewport {
    display: flex; align-items: stretch; gap: calc(4 * var(--mobile-unit, 1px)); width: 100%; height: calc(60 * var(--mobile-unit, 1px));
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    touch-action: none; scrollbar-width: thin; scroll-snap-type: none;
  }
  #gameUI.mobile-hud .hotbar-slots { display: contents; min-width: 0; margin: 0; }
  #gameUI.mobile-hud .spellbar .hotbar-slot {
    flex: 0 0 calc(54 * var(--mobile-unit, 1px)); width: calc(54 * var(--mobile-unit, 1px)); min-width: calc(54 * var(--mobile-unit, 1px)); height: calc(56 * var(--mobile-unit, 1px));
    padding: calc(3 * var(--mobile-unit, 1px)); touch-action: none;
  }
  #gameUI.mobile-hud .spellbar .hotbar-slot:disabled { pointer-events: none; }
  #gameUI.mobile-hud .hotbar-slot.empty { display: none; }
  .mobile-hud .hotbar-slot span:has(.spell-icon) { height: calc(26 * var(--mobile-unit, 1px)); }
  .mobile-hud .hotbar-slot .spell-icon { width: calc(26 * var(--mobile-unit, 1px)); height: calc(26 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .hotbar-slot small { font-size: calc(9 * var(--mobile-unit, 1px)); line-height: calc(12 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .hotbar-slot b { font-size: calc(9 * var(--mobile-unit, 1px)); line-height: calc(11 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .action-dock .quickbar {
    position: absolute; inset: auto auto calc(64 * var(--mobile-unit, 1px)) 0; transform: none;
    display: flex; flex-direction: row; gap: calc(4 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px));
  }
  #gameUI.mobile-hud .action-dock .quickbar > button { width: calc(44 * var(--mobile-unit, 1px)); min-width: calc(44 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px)); padding: calc(3 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .quickbar img { width: calc(26 * var(--mobile-unit, 1px)); height: calc(26 * var(--mobile-unit, 1px)); }
  .mobile-hud .quickbar small { display: none; }
  .mobile-hud .quickbar b { font-size: calc(10 * var(--mobile-unit, 1px)); right: calc(3 * var(--mobile-unit, 1px)); top: calc(2 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .action-dock .hotbar-toolbar {
    position: absolute; inset: auto 0 calc(64 * var(--mobile-unit, 1px)) auto; display: flex; flex-direction: row;
    align-items: center; gap: calc(4 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px));
  }
  #gameUI.mobile-hud .book-favorite-controls { gap: calc(4 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .spellbar #bookSpell { width: calc(44 * var(--mobile-unit, 1px)); min-width: calc(44 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px)); font-size: calc(11 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .action-dock #abilityButton { width: calc(52 * var(--mobile-unit, 1px)); min-width: calc(52 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #abilityButton > span { height: calc(24 * var(--mobile-unit, 1px)); line-height: calc(24 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #abilityIcon img { width: calc(24 * var(--mobile-unit, 1px)); height: calc(24 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #abilityName { font-size: calc(8 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .spellbar .hotbar-pages { position: static; height: calc(44 * var(--mobile-unit, 1px)); gap: 0; }
  #gameUI.mobile-hud .spellbar .hotbar-pages button { width: calc(44 * var(--mobile-unit, 1px)); min-width: calc(44 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px)); font-size: calc(22 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .hotbar-pages output { min-width: calc(22 * var(--mobile-unit, 1px)); font-size: calc(10 * var(--mobile-unit, 1px)); }

  /* Chat occupies screen space only while the player is writing. */
  #gameUI.mobile-hud .action-dock .chat-wrap {
    position: fixed; inset: calc(var(--mobile-top) + calc(52 * var(--mobile-unit, 1px))) var(--mobile-right) auto auto;
    transform: none; display: block; width: calc(44 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px)); z-index: 30;
  }
  #gameUI.mobile-hud .chat-wrap .chat-log { display: none; }
  #gameUI.mobile-hud .chat-button { width: calc(44 * var(--mobile-unit, 1px)); height: calc(44 * var(--mobile-unit, 1px)); padding: 0; font: calc(11 * var(--mobile-unit, 1px)) system-ui; border-radius: calc(5 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .chat-wrap #mobileChatClose { display: none; }
  #gameUI.mobile-hud .action-dock .chat-wrap.writing {
    visibility: visible;
    top: calc(var(--mobile-visual-top, 0px) + var(--mobile-top));
    left: max(var(--mobile-left), calc(50% - calc(230 * var(--mobile-unit, 1px)))); right: max(var(--mobile-right), calc(50% - calc(230 * var(--mobile-unit, 1px))));
    bottom: auto; width: auto; height: auto; max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-top) - calc(8 * var(--mobile-unit, 1px)));
    padding: calc(8 * var(--mobile-unit, 1px)); overflow-y: auto; border: calc(1 * var(--mobile-unit, 1px)) solid #c6b37b; border-radius: calc(6 * var(--mobile-unit, 1px));
    background: #172f26fa; box-shadow: 0 calc(8 * var(--mobile-unit, 1px)) calc(30 * var(--mobile-unit, 1px)) #0009; pointer-events: auto; z-index: 120;
  }
  #gameUI.mobile-hud .chat-wrap.writing .chat-button { display: none; }
  #gameUI.mobile-hud .chat-wrap.writing #mobileChatClose { display: block; position: absolute; top: calc(4 * var(--mobile-unit, 1px)); right: calc(4 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .chat-wrap.writing .chat-log {
    position: static; display: block; max-height: max(calc(44 * var(--mobile-unit, 1px)), calc(var(--mobile-visual-height, 100dvh) - calc(128 * var(--mobile-unit, 1px))));
    min-height: calc(48 * var(--mobile-unit, 1px)); padding: calc(8 * var(--mobile-unit, 1px)) calc(48 * var(--mobile-unit, 1px)) calc(8 * var(--mobile-unit, 1px)) calc(8 * var(--mobile-unit, 1px)); border: 0; font: calc(12 * var(--mobile-unit, 1px))/calc(18 * var(--mobile-unit, 1px)) system-ui;
  }
  #gameUI.mobile-hud #chatForm { margin-top: calc(6 * var(--mobile-unit, 1px)); gap: calc(6 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #chatInput { min-width: 0; min-height: calc(44 * var(--mobile-unit, 1px)); font-size: calc(16 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #chatForm button { min-width: calc(44 * var(--mobile-unit, 1px)); min-height: calc(44 * var(--mobile-unit, 1px)); }
  .mobile-hud.mobile-chat-open #mobileMenuButton { visibility: hidden; }
  #gameUI.mobile-hud.mobile-chat-open #actionDock { z-index: 120; }

  #gameUI.mobile-hud #effectsPanel {
    left: calc(var(--mobile-left) + calc(228 * var(--mobile-unit, 1px))); right: calc(var(--mobile-right) + calc(164 * var(--mobile-unit, 1px)));
    top: calc(var(--mobile-top) + calc(76 * var(--mobile-unit, 1px))); bottom: auto; width: auto; height: auto;
    max-height: none; display: flex; flex-direction: column; gap: calc(3 * var(--mobile-unit, 1px));
  }
  #gameUI.mobile-hud #effectsPanel[hidden] { display: none; }
  #gameUI.mobile-hud #effectsPanel .effect-chip { min-height: calc(32 * var(--mobile-unit, 1px)); padding: calc(4 * var(--mobile-unit, 1px)) calc(7 * var(--mobile-unit, 1px)); font-size: calc(10 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #effectsPanel .effect-detail { max-height: min(calc(180 * var(--mobile-unit, 1px)), 45dvh); }
  #gameUI.mobile-hud #effectDetail > button { min-width: calc(44 * var(--mobile-unit, 1px)); min-height: calc(44 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .notice-feed {
    top: var(--mobile-top); bottom: auto; left: calc(var(--mobile-left) + calc(228 * var(--mobile-unit, 1px)));
    right: calc(var(--mobile-right) + calc(164 * var(--mobile-unit, 1px))); width: auto; max-height: calc(68 * var(--mobile-unit, 1px)); overflow: hidden;
  }
  .mobile-hud .notice { font-size: calc(10 * var(--mobile-unit, 1px)); padding: calc(4 * var(--mobile-unit, 1px)) calc(6 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #interactPrompt { display: none; }
  .mobile-hud .fps-counter { font-size: calc(9 * var(--mobile-unit, 1px)); line-height: calc(10 * var(--mobile-unit, 1px)); bottom: 0; }

  /* Open windows use the available screen and keep their Close buttons reachable. */
  #gameUI.mobile-hud :is(#characterPanel, #sidePanel, #helpPanel, #merchantPanel, #lootPreview, #legacyClassPanel) {
    position: absolute; top: var(--mobile-top); bottom: var(--mobile-bottom);
    left: var(--mobile-left); right: var(--mobile-right); transform: none;
    width: auto; max-width: none; height: auto;
    max-height: calc(100dvh - var(--mobile-top) - var(--mobile-bottom)); z-index: 70;
  }
  #gameUI.mobile-hud :is(#helpPanel, #lootPreview, #legacyClassPanel) { overflow-y: auto; padding: 18px; }
  .mobile-hud .character-header, .mobile-hud .merchant-header { padding: 8px 12px; }
  .mobile-hud .character-header h2, .mobile-hud .merchant-header h2 { font-size: 22px; }
  .mobile-hud .character-header .eyebrow { display: none; }
  .mobile-hud .character-tabs { padding: 0 8px; }
  .mobile-hud .character-tabs button { min-height: 44px; padding: 6px 3px; font-size: 11px; }
  #gameUI.mobile-hud .panel-head { padding: 5px 52px 5px 6px; }
  .mobile-hud .panel-head .tabs { overflow-x: auto; }
  .mobile-hud .panel-head .tabs button { min-height: 44px; padding: 5px 7px; font-size: 11px; }
  #gameUI.mobile-hud :is(.character-close, .close-button, .merchant-header button) { min-width: 44px; min-height: 44px; }
  .mobile-hud .character-content { padding: 10px; }
  #gameUI.mobile-hud #levelUpCascade {
    left: calc(var(--mobile-left) + 100px); top: calc(var(--mobile-top) + 12px);
    width: min(310px, calc(100% - 220px)); height: calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - 136px);
    min-height: 100px; bottom: auto; z-index: 40;
  }
  .mobile-hud .level-up-close, .mobile-hud .level-up-x { min-height: 44px; }
  .mobile-hud .level-up-x { min-width: 44px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  #gameUI.mobile-hud #actionDock {
    left: var(--mobile-left); right: var(--mobile-right); bottom: calc(var(--mobile-bottom) + calc(116 * var(--mobile-unit, 1px)));
  }
  #gameUI.mobile-hud .joystick { width: calc(100 * var(--mobile-unit, 1px)); height: calc(100 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .attack-button { width: calc(84 * var(--mobile-unit, 1px)); height: calc(84 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #hudLeftRail { max-height: calc(78 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud #effectsPanel {
    left: var(--mobile-left); right: var(--mobile-right); top: calc(var(--mobile-top) + calc(163 * var(--mobile-unit, 1px)));
  }
  #gameUI.mobile-hud .notice-feed {
    left: var(--mobile-left); right: var(--mobile-right); top: auto;
    bottom: calc(var(--mobile-bottom) + calc(236 * var(--mobile-unit, 1px))); max-height: calc(64 * var(--mobile-unit, 1px));
  }
  #gameUI.mobile-hud #levelUpCascade {
    left: var(--mobile-left); top: calc(var(--mobile-top) + calc(80 * var(--mobile-unit, 1px))); width: calc(100% - var(--mobile-left) - var(--mobile-right));
    height: max(calc(140 * var(--mobile-unit, 1px)), calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - calc(320 * var(--mobile-unit, 1px))));
  }
}

@media (max-width: 620px) and (orientation: landscape) {
  #gameUI.mobile-hud .spellbar .hotbar-pages { position: absolute; right: 0; bottom: calc(52 * var(--mobile-unit, 1px)); }
  #gameUI.mobile-hud .hotbar-pages output { background: #172f26ed; }
}

@media (max-width: 355px) {
  #gameUI.mobile-hud .hotbar-pages output { display: none; }
}

.mobile-hud #bookSpell br { display: none; }

/* Prioritize the selected target and thumb controls on very shallow screens. */
.mobile-hud #hudLeftRail:has(#targetCard:not([hidden])) #questTracker { display: none; }
@media (max-height: 330px) and (orientation: landscape) {
  #gameUI.mobile-hud #hudLeftRail > #questTracker { display: none; }
  #gameUI.mobile-hud #hudLeftRail:has(#targetCard:not([hidden])) > .world-status { display: none; }
  #gameUI.mobile-hud #effectsPanel { flex-direction: row; }
  #gameUI.mobile-hud #effectsPanel .effects-row { min-width: 0; flex: 1; margin-top: 0; }
}

/* Keep user-facing dialogs and the typing field readable; compactness is for HUD. */
#gameUI.mobile-hud { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#gameUI.mobile-hud #chatInput { font-size: 16px; min-height: 44px; }