/* Touch gameplay uses the existing HUD and its fixed 1000:650 arena view.
   Keep this after the desktop sheets: no global canvas or desktop overrides. */
/* Safari can extend a long-press selection from one HUD label across the whole
   page. Protect all touch UI, including panels mounted outside the game frame;
   preserve native editing explicitly rather than maintaining a HUD ID list. */
body.touchDevice,
body.touchDevice * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
body.touchDevice [contenteditable],
body.touchDevice [contenteditable] * {
  -webkit-user-select: inherit;
  user-select: inherit;
  -webkit-touch-callout: inherit;
  -webkit-user-drag: inherit;
}
body.touchDevice :is(input, textarea, select, [contenteditable=""], [contenteditable="true" i], [contenteditable="plaintext-only" i]) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  -webkit-user-drag: auto;
}
body.touchDevice [contenteditable="false" i] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
body.touchDevice.mobileMatchMode {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-edge: 8px;
  --mobile-control-bottom: calc(var(--mobile-safe-bottom) + 32px);
  --mobile-action-height: 54px;
  --mobile-action-width: clamp(70px, 19vw, 86px);
  --mobile-actions-height: 174px;
  height: 100dvh;
  /* A blanket touch-action:none on body also prevents panel/chat scrolling. */
  touch-action: auto;
}
body.touchDevice.mobileMatchMode #gameFrame {
  height: 100dvh;
  isolation: isolate;
  touch-action: auto;
}
body.touchDevice.mobileMatchMode #gameFrame :is(#game, #mobileMoveBase, .mobileActionButton) {
  touch-action: none;
}
body.touchDevice.mobileMatchMode :is(button, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}
body.touchDevice.mobileMatchMode #mobileControls {
  inset: 0;
  padding: 0;
}
body.touchDevice.mobileMatchMode .mobileControlsTop {
  padding: 0;
  min-height: 0;
}
body.touchDevice.mobileMatchMode .mobileHint { display: none !important; }
body.touchDevice.mobileMatchMode #mobileExitButton,
body.touchDevice.mobileMatchMode .hudLayoutActive[data-hud-game-mode] #hudMenuButton {
  top: calc(var(--mobile-safe-top) + var(--mobile-edge));
  min-height: 44px;
  height: 44px;
  padding: 8px 12px;
  box-sizing: border-box;
  font: 700 12px/1.2 system-ui, sans-serif;
  touch-action: manipulation;
}
body.touchDevice.mobileMatchMode #mobileExitButton {
  left: calc(var(--mobile-safe-left) + var(--mobile-edge));
  min-width: 56px;
}
body.touchDevice.mobileMatchMode .hudLayoutActive[data-hud-game-mode] #hudMenuButton {
  left: auto;
  right: calc(var(--mobile-safe-right) + var(--mobile-edge));
  min-width: 78px;
}
body.touchDevice.mobileMatchMode #mobileFullscreenButton {
  position: absolute;
  top: calc(var(--mobile-safe-top) + var(--mobile-edge));
  right: calc(var(--mobile-safe-right) + var(--mobile-edge) + 86px);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: manipulation;
}
body.touchDevice.mobileMatchMode #hudMenuPanel :is(.hudMenuAction, .exploreMenuPromptButton, .runToggleButton, #hudMenuClose) {
  min-height: 44px;
  font-size: 13px;
}
body.touchDevice.mobileMatchMode #hudMenuPanel kbd,
body.touchDevice.mobileMatchMode :is(.quickItemKey, .exploreMinimapHint, .matchChatOpen kbd) { display: none !important; }

/* These are persistent actions; only chat messages expand below the launcher. */
body.touchDevice.mobileMatchMode .matchChat:not(.is-open) {
  position: absolute;
  top: calc(var(--mobile-safe-top) + var(--mobile-edge));
  bottom: auto;
  left: calc(var(--mobile-safe-left) + 72px);
  right: auto;
  width: auto;
  max-width: none;
  display: flex;
  align-items: flex-start;
  flex-direction: column-reverse;
  gap: 6px;
}
body.touchDevice.mobileMatchMode .matchChat:not(.is-open) .matchChatLog {
  position: absolute;
  top: 50px;
  left: 0;
  right: auto;
  width: min(280px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 88px));
  max-height: 78px;
  margin: 0;
  font-size: 11px;
}
body.touchDevice.mobileMatchMode .gameFrame[data-hud-mode="compact"] .matchChat:not(.is-open) .matchChatLog { display: none; }
body.touchDevice.mobileMatchMode .matchChatOpen {
  min-width: 66px;
  min-height: 44px;
  box-sizing: border-box;
  justify-content: center;
  font-size: 12px;
}
body.touchDevice.mobileMatchMode .quickChatFeed {
  top: calc(var(--mobile-safe-top) + 60px);
  width: min(48vw, 320px);
}

/* Put the map beside the quest on portrait screens, making use of letterboxing. */
body.touchDevice.mobileMatchMode .hudLayoutActive #hudJourneyStack {
  top: calc(var(--mobile-safe-top) + 64px);
  left: calc(var(--mobile-safe-left) + var(--mobile-edge));
  width: calc(100% - var(--mobile-safe-left) - var(--mobile-safe-right) - 16px);
  max-width: 430px;
  display: grid;
  grid-template-columns: minmax(0, min(36vw, 154px)) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  max-height: min(32dvh, 230px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
  pointer-events: auto;
}
body.touchDevice.mobileMatchMode .hudJourneyStack #exploreMinimapHud {
  padding: 5px;
  gap: 4px;
}
body.touchDevice.mobileMatchMode .hudJourneyStack :is(.exploreMinimapHead, .exploreMinimapGuidance) { display: none; }
body.touchDevice.mobileMatchMode .hudJourneyStack .exploreMinimapArea {
  font: 600 11px/1.35 system-ui, sans-serif;
}
body.touchDevice.mobileMatchMode #hudQuestToggle {
  min-height: 48px;
  padding: 8px 25px 8px 9px;
}
body.touchDevice.mobileMatchMode #hudQuestToggle .questTrackerHead strong {
  font: 600 11px/1.4 system-ui, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.touchDevice.mobileMatchMode .hudQuestDetails {
  max-height: min(32dvh, 210px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
body.touchDevice.mobileMatchMode .hudQuestDetails > button { min-height: 44px; }

/* The experience strip owns its own safe-area lane below all thumb controls. */
body.touchDevice.mobileMatchMode #experienceHud {
  left: calc(var(--mobile-safe-left) + var(--mobile-edge));
  right: calc(var(--mobile-safe-right) + var(--mobile-edge));
  bottom: calc(var(--mobile-safe-bottom) + 5px);
  height: 18px;
  font-size: 9px;
  box-shadow: none;
}
body.touchDevice.mobileMatchMode .mobileControlsRow {
  position: absolute;
  bottom: var(--mobile-control-bottom);
  left: calc(var(--mobile-safe-left) + var(--mobile-edge));
  right: calc(var(--mobile-safe-right) + var(--mobile-edge));
  padding: 0;
  gap: 12px;
  align-items: flex-end;
}
body.touchDevice.mobileMatchMode .mobileMoveArea { gap: 5px; }
body.touchDevice.mobileMatchMode #mobileMoveBase {
  width: clamp(96px, 25vw, 120px);
  height: clamp(96px, 25vw, 120px);
  box-sizing: border-box;
  border: 1px solid #c1d4ea66;
  background: radial-gradient(circle, #3e506754, #101923bf);
  box-shadow: inset 0 0 18px #96bcce12;
}
body.touchDevice.mobileMatchMode #mobileMoveStick { width: 42px; height: 42px; }
body.touchDevice.mobileMatchMode .mobilePadLabel { font: 600 10px/1.3 system-ui, sans-serif; }
body.touchDevice.mobileMatchMode .mobileGestureHud {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, var(--mobile-action-width));
  grid-auto-rows: var(--mobile-action-height);
  gap: 6px;
  align-self: flex-end;
}
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton {
  width: auto;
  max-width: none;
  min-width: 44px;
  min-height: 44px;
  height: var(--mobile-action-height);
  margin: 0;
  padding: 6px 7px 8px;
  box-sizing: border-box;
  border-radius: 9px;
  border-color: #a5b8d34d;
  background: #152133e8;
  box-shadow: 0 3px 9px #0005;
  align-items: flex-start;
  justify-content: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
body.touchDevice.mobileMatchMode .mobileGestureHud button.mobileActionButton { pointer-events: auto !important; touch-action: none; }
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton.utility { background: #20344ae8; }
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton.ultimate { background: #413047e8; }
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton:is([aria-pressed="true"], .selected) {
  border: 2px solid #f3d492;
  background: #474531f2;
  box-shadow: 0 0 0 2px #09111dd9, 0 0 15px #e2bf552f;
}
body.touchDevice.mobileMatchMode .mobileGestureHud button:focus-visible { outline: 2px solid #f3d492; outline-offset: 2px; }
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionKey { font: 700 9px/1.1 system-ui; letter-spacing: .04em; }
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionName {
  width: 100%;
  max-width: none;
  margin-top: 3px;
  font: 700 11px/1.15 system-ui;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionCooldown { font: 600 9px/1.1 system-ui; margin-top: 3px; }
/* Portrait remains a compact fallback while the landscape prompt is open. */
body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionIcon { display: none; }
body.touchDevice.mobileMatchMode #mobileActionHint {
  position: absolute;
  bottom: calc(100% + 7px);
  right: 0;
  width: min(270px, calc(100vw - 24px));
  box-sizing: border-box;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid #c2ab744d;
  border-radius: 7px;
  background: #101a29ed;
  color: #f2e2be;
  font: 600 11px/1.4 system-ui;
  pointer-events: none;
}
body.touchDevice.mobileMatchMode .gameFrame.hudLayoutActive #exploreHudQuickDock {
  left: auto;
  right: calc(var(--mobile-safe-right) + var(--mobile-edge));
  bottom: calc(var(--mobile-control-bottom) + var(--mobile-actions-height) + 50px);
  width: 128px;
  max-width: 128px;
}
body.touchDevice.mobileMatchMode #quickItemSlot {
  min-height: 48px;
  padding: 7px;
}
body.touchDevice.mobileMatchMode .quickItemSlot .quickItemIcon { margin-top: 0; }
body.touchDevice.mobileMatchMode .gameFrame #explorePrompt {
  left: calc(var(--mobile-safe-left) + var(--mobile-edge));
  right: auto;
  bottom: calc(var(--mobile-control-bottom) + clamp(96px, 25vw, 120px) + 28px);
  width: min(146px, calc(100vw - var(--mobile-action-width) * 2 - 38px));
  min-height: 48px;
  padding: 8px;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 3px;
  gap: 5px;
  transform: none;
  text-align: left;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
body.touchDevice.mobileMatchMode #explorePrompt strong { display: none; }
body.touchDevice.mobileMatchMode #explorePrompt span { white-space: normal; font: 700 11px/1.4 system-ui; }
body.touchDevice.mobileMatchMode #explorePrompt:focus-visible { outline: 2px solid #f3d492; outline-offset: 2px; }
body.touchDevice.mobileMatchMode:has(dialog[open],
  #exploreInventoryPanel:not(.hidden), #spellbookPanel:not(.hidden),
  #exploreMasteryPanel:not(.hidden), #runicCorePanel:not(.hidden),
  #exploreVendorShopPanel:not(.hidden), #npcDialogue:not(.hidden),
  #npcInteractionMenu:not(.hidden), #matchChat.is-open)
  :is(.mobileControlsRow, #exploreHudQuickDock, #explorePrompt) {
  visibility: hidden;
  pointer-events: none;
}

/* Mode objectives use a second header lane; Exit already invokes each mode's
   existing leave/forfeit confirmation, so its duplicate header action can go. */
body.touchDevice.mobileMatchMode :is(#duelScorebar, #coopBossHud, #siegeHud),
body.touchDevice.mobileMatchMode.pvpDuelActive .pvpDuelHeader,
body.touchDevice.mobileMatchMode.siegeActive .sg-header {
  position: fixed;
  top: calc(var(--mobile-safe-top) + 62px);
  left: calc(var(--mobile-safe-left) + var(--mobile-edge));
  right: calc(var(--mobile-safe-right) + var(--mobile-edge));
  width: auto;
  max-width: 720px;
  margin: 0 auto;
  transform: none;
  box-sizing: border-box;
  z-index: 25;
}
body.touchDevice.mobileMatchMode #ffaLeaderboard {
  top: calc(var(--mobile-safe-top) + 62px);
  left: auto;
  right: calc(var(--mobile-safe-right) + var(--mobile-edge));
  width: min(220px, 58vw);
  max-height: min(29dvh, 170px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-sizing: border-box;
}
body.touchDevice.mobileMatchMode :is(.pvpCourtLine, .sg-courtline) { display: none; }
body.touchDevice.mobileMatchMode .pvpDuelHeader { padding: 0; }
body.touchDevice.mobileMatchMode .pvpScoreboard { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 5px; }
body.touchDevice.mobileMatchMode .pvpHealth { display: block; padding: 6px; }
body.touchDevice.mobileMatchMode .pvpHealth > .pvpPortrait { display: none; }
body.touchDevice.mobileMatchMode .pvpNameRow { display: block; margin-bottom: 4px; }
body.touchDevice.mobileMatchMode .pvpPlayerName { display: block; font-size: 12px; }
body.touchDevice.mobileMatchMode .pvpHpText { display: block; font-size: 10px; margin-top: 2px; }
body.touchDevice.mobileMatchMode .pvpSide { display: none; }
body.touchDevice.mobileMatchMode .pvpHealthMeta { margin-top: 5px; min-height: 10px; }
body.touchDevice.mobileMatchMode .pvpRoundInfo strong { font-size: 11px; }
body.touchDevice.mobileMatchMode .pvpClock { font-size: 10px; }
body.touchDevice.mobileMatchMode :is(.pvpRoundInfo, .sg-match-info) { background: #152133ed; border-radius: 5px; }
body.touchDevice.mobileMatchMode .sg-header .sg-scoreboard { gap: 5px; }
body.touchDevice.mobileMatchMode .sg-objective { padding: 6px; }
body.touchDevice.mobileMatchMode .sg-objective-top { min-height: 20px; gap: 4px; }
body.touchDevice.mobileMatchMode .sg-portrait { display: none; }
body.touchDevice.mobileMatchMode .sg-guardian-name { display: none; }
body.touchDevice.mobileMatchMode .sg-tactical-line { min-height: 0; margin-top: 5px; padding: 5px; border-radius: 5px; background: #152133ed; font-size: 10px; }
body.touchDevice.mobileMatchMode.siegeActive :is(.sg-stage) { padding-top: calc(var(--mobile-safe-top) + 62px + var(--sg-overlay-top, 160px)); }
body.touchDevice.mobileMatchMode.siegeActive :is(.sg-respawn, .sg-connection) { top: calc(var(--mobile-safe-top) + 62px + var(--sg-overlay-top, 160px)); }

@media (orientation: landscape) {
  body.touchDevice.mobileMatchMode {
    --mobile-orbit-unit: clamp(60px, 17dvh, 70px);
    --mobile-action-icon: calc(var(--mobile-orbit-unit) * .34);
    --mobile-move-size: clamp(120px, 32dvh, 144px);
    --mobile-orbit-width: calc(var(--mobile-orbit-unit) * 3.5);
    --mobile-actions-height: calc(var(--mobile-orbit-unit) * 3.3);
    --mobile-control-bottom: calc(var(--mobile-safe-bottom) + 28px);
    --mobile-action-width: var(--mobile-orbit-unit);
  }
  /* Arc placement follows the resting right thumb. Transparent gaps pass
     through to the arena; the larger basic attack is nearest the thumb. */
  body.touchDevice.mobileMatchMode .mobileGestureHud {
    display: block;
    width: var(--mobile-orbit-width);
    height: var(--mobile-actions-height);
    flex: 0 0 var(--mobile-orbit-width);
    pointer-events: none;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton {
    position: absolute;
    width: var(--mobile-orbit-unit);
    height: var(--mobile-orbit-unit);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 50%;
    background: linear-gradient(145deg, #213044f5, #101a2aef) padding-box,
      conic-gradient(from 0deg, var(--mobile-action-color, #a8cbe7) var(--cooldown-progress, 100%), #354253 0) border-box;
    box-shadow: 0 3px 10px #0008, inset 0 0 0 1px #d6eaff1f;
    text-align: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: none;
    transform: none;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileSpell1 { left: 0; top: calc(var(--mobile-orbit-unit) * .95); }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileSpell2 { left: calc(var(--mobile-orbit-unit) * .64); top: 0; }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileSpell3 { left: calc(var(--mobile-orbit-unit) * 1.8); top: 0; }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileUltimate { left: calc(var(--mobile-orbit-unit) * 2.5); top: calc(var(--mobile-orbit-unit) * .95); }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileBlink { left: calc(var(--mobile-orbit-unit) * .45); bottom: calc(var(--mobile-orbit-unit) * .08); }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileBasicAttack {
    right: calc(var(--mobile-orbit-unit) * .15);
    bottom: 0;
    width: calc(var(--mobile-orbit-unit) * 1.25);
    height: calc(var(--mobile-orbit-unit) * 1.25);
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionKey,
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionFill { display: none; }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionIcon {
    position: absolute;
    display: grid;
    place-items: center;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--mobile-action-icon);
    height: var(--mobile-action-icon);
    pointer-events: none;
    filter: drop-shadow(0 1px 3px #0008);
  }
  body.touchDevice.mobileMatchMode .mobileActionIcon :is(img, svg, .gameAssetIcon) {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud :is(.mobileActionName, .ultimateAttunement) {
    position: absolute;
    top: calc(var(--mobile-action-icon) + 6px);
    left: 4px;
    right: 4px;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0;
    color: #f1f3f6;
    font: 700 10px/1.15 system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px #000;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionCooldown {
    position: absolute;
    bottom: 5px;
    left: 4px;
    right: 4px;
    margin: 0;
    color: #b7d6e8;
    font: 700 9px/1.1 system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileBasicAttack .mobileActionIcon {
    top: 8px;
    width: calc(var(--mobile-action-icon) * 1.15);
    height: calc(var(--mobile-action-icon) * 1.15);
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileBasicAttack .mobileActionName {
    top: calc(var(--mobile-action-icon) * 1.15 + 11px);
    font-size: 11px;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud #mobileBasicAttack .mobileActionCooldown { bottom: 9px; }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton.cooling .mobileActionIcon { opacity: .58; }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton.cooling .mobileActionCooldown { color: #fff0d1; }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton:is([aria-pressed="true"], .selected, .mobileActionAiming) {
    border: 3px solid transparent;
    background: linear-gradient(145deg, #39424b, #172535) padding-box,
      conic-gradient(var(--mobile-action-color, #f3d492) var(--cooldown-progress, 100%), #354253 0) border-box;
    outline: 2px solid #f3d492;
    outline-offset: 2px;
    box-shadow: 0 3px 10px #0008, inset 0 0 16px #d1e8ff14;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionButton.mobileActionCancelling { outline-color: #ff9a93; }
  body.touchDevice.mobileMatchMode .hudLayoutActive #hudJourneyStack {
    top: calc(var(--mobile-safe-top) + 60px);
    width: min(260px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - var(--mobile-orbit-width) - 34px));
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 7px;
    max-height: max(64px, calc(100dvh - var(--mobile-safe-top) - var(--mobile-control-bottom) - var(--mobile-move-size) - 82px));
  }
  body.touchDevice.mobileMatchMode .hudJourneyStack #exploreMinimapHud { padding: 4px; gap: 3px; }
  body.touchDevice.mobileMatchMode .hudJourneyStack .exploreMinimapArea { font-size: 10px; }
  body.touchDevice.mobileMatchMode #hudQuestToggle { min-height: 44px; padding: 5px 22px 5px 7px; }
  body.touchDevice.mobileMatchMode #hudQuestToggle .questTrackerHead > span { display: none; }
  body.touchDevice.mobileMatchMode .hudQuestDetails { max-height: 84px; }
  body.touchDevice.mobileMatchMode .mobileMoveArea { gap: 0; margin-bottom: 7px; }
  body.touchDevice.mobileMatchMode #mobileMoveBase {
    width: var(--mobile-move-size);
    height: var(--mobile-move-size);
    border: 2px solid #b4cadd66;
    background: radial-gradient(circle, #a3d7eb0a 0 33%, #a3d7eb28 34% 35%, #111e2c55 36% 65%, #a3d7eb16 66% 67%, #10192399 68%);
    box-shadow: 0 5px 20px #0004, inset 0 0 0 5px #0d162433;
    backdrop-filter: none;
  }
  body.touchDevice.mobileMatchMode #mobileMoveStick {
    width: 48px;
    height: 48px;
    border: 1px solid #c5e8f899;
    background: radial-gradient(circle at 36% 30%, #b1d4e0a6, #3a6488a6);
    box-shadow: 0 3px 9px #0005, inset 0 0 0 4px #d1edff0f;
  }
  body.touchDevice.mobileMatchMode .mobilePadLabel { display: none; }
  body.touchDevice.mobileMatchMode .gameFrame.hudLayoutActive #exploreHudQuickDock {
    right: auto;
    left: calc(var(--mobile-safe-left) + var(--mobile-edge) + var(--mobile-move-size) + 12px);
    bottom: var(--mobile-control-bottom);
    width: 52px;
    max-width: 52px;
  }
  body.touchDevice.mobileMatchMode .gameFrame.hudLayoutActive #quickItemSlot { min-height: 52px; height: 52px; padding: 6px; border-radius: 14px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; }
  body.touchDevice.mobileMatchMode #quickItemSlot .quickItemIcon { grid-row: auto; font-size: 26px; }
  body.touchDevice.mobileMatchMode #quickItemQuantity { position: absolute; right: 4px; bottom: 4px; padding: 1px 3px; border-radius: 4px; background: #122031e8; font-size: 10px; }
  body.touchDevice.mobileMatchMode #quickItemSlot .quickItemName { display: none; }
  body.touchDevice.mobileMatchMode .gameFrame #explorePrompt {
    left: calc(var(--mobile-safe-left) + var(--mobile-move-size) + 20px);
    bottom: calc(var(--mobile-control-bottom) + 62px);
    width: min(200px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - var(--mobile-move-size) - var(--mobile-orbit-width) - 52px));
    min-width: 80px;
    height: 52px;
    transform: none;
  }
  body.touchDevice.mobileMatchMode #mobileActionHint {
    position: fixed;
    top: calc(var(--mobile-safe-top) + var(--mobile-edge));
    left: calc(50% + (var(--mobile-safe-left) - var(--mobile-safe-right)) / 2);
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: min(260px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 302px));
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 10px;
    text-align: center;
  }
  /* Headers stop before the thumb arc, including the narrow 568px viewport.
     Health, objective progress and team status keep their original widgets. */
  body.touchDevice.mobileMatchMode :is(#duelScorebar, #coopBossHud, #siegeHud),
  body.touchDevice.mobileMatchMode.pvpDuelActive .pvpDuelHeader,
  body.touchDevice.mobileMatchMode.siegeActive .sg-header {
    top: calc(var(--mobile-safe-top) + 60px);
    left: calc(var(--mobile-safe-left) + var(--mobile-edge));
    right: calc(var(--mobile-safe-right) + var(--mobile-edge) + var(--mobile-orbit-width) + 12px);
    max-width: 560px;
    margin: 0;
  }
  body.touchDevice.mobileMatchMode #ffaLeaderboard {
    top: calc(var(--mobile-safe-top) + 60px);
    left: calc(var(--mobile-safe-left) + var(--mobile-edge));
    right: auto;
    width: min(220px, calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - var(--mobile-orbit-width) - 28px));
    max-height: max(64px, calc(100dvh - var(--mobile-safe-top) - var(--mobile-control-bottom) - var(--mobile-move-size) - 82px));
  }
  body.touchDevice.mobileMatchMode .sg-header .sg-scoreboard { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 4px; }
  body.touchDevice.mobileMatchMode.siegeActive .sg-header {
    max-height: max(64px, calc(100dvh - var(--mobile-safe-top) - var(--mobile-control-bottom) - var(--mobile-move-size) - 82px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    touch-action: pan-y;
  }
  body.touchDevice.mobileMatchMode .sg-header .sg-match-info { grid-column: 2; grid-row: 1; display: grid; align-content: center; gap: 5px; padding: 2px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-clock { font-size: 14px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-phase { font-size: 7px; letter-spacing: 0; }
  body.touchDevice.mobileMatchMode .sg-header .sg-objective { padding: 4px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-objective-top { min-height: 13px; flex-wrap: nowrap; gap: 3px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-objective-top > div { min-width: 0; }
  body.touchDevice.mobileMatchMode .sg-header .sg-kicker { font-size: 7px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.touchDevice.mobileMatchMode .sg-header .sg-guardian-state { font-size: 7px; padding: 1px 2px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-objective-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin-top: 4px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-step-arrow { display: none; }
  body.touchDevice.mobileMatchMode .sg-header .sg-objective-step > div:first-child { flex-direction: column; gap: 1px; font-size: 8px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-health-track { height: 6px; margin-top: 3px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-roster { padding-top: 4px; margin-top: 4px; gap: 4px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-teammate > div:first-child { flex-direction: column; align-items: flex-start; gap: 1px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-teammate strong { font-size: 8px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-teammate small { font-size: 7px; }
  body.touchDevice.mobileMatchMode .sg-header .sg-player-track { margin-top: 3px; }
}

/* A directional gesture remains visible at its starting point. It neither
   intercepts another finger nor covers the arena with an opaque panel. */
body.touchDevice.mobileMatchMode #mobileAbilityAimPad {
  position: fixed;
  z-index: 41;
  left: var(--mobile-aim-x, 0px);
  top: var(--mobile-aim-y, 0px);
  width: 96px;
  height: 96px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 1px solid #c8e8f299;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 28%, #aecbde24 29% 30%, transparent 31%);
  box-shadow: 0 0 0 5px #11223524;
  pointer-events: none;
  user-select: none;
}
body.touchDevice.mobileMatchMode #mobileAbilityAimPad .mobileAbilityAimThumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(calc(-50% + var(--mobile-thumb-x, 0px)), calc(-50% + var(--mobile-thumb-y, 0px)));
  border: 1px solid #e0f3ff;
  border-radius: 50%;
  background: #a7d9ed66;
  box-shadow: 0 2px 8px #0004;
  pointer-events: none;
}
body.touchDevice.mobileMatchMode #mobileAbilityAimPad[data-state="charging"] { border-color: #efcf87; }
body.touchDevice.mobileMatchMode #mobileAbilityAimPad[data-state="cancel"] { border-color: #ffb1a5; }
body.touchDevice.mobileMatchMode #mobileAbilityAimPad[data-state="cancel"] .mobileAbilityAimThumb { border-color: #ffc7c0; background: #c7767666; }
body.touchDevice.mobileMatchMode #mobileAbilityCancel {
  position: fixed;
  z-index: 42;
  bottom: calc(var(--mobile-control-bottom) + var(--mobile-actions-height) + 12px);
  right: calc(var(--mobile-safe-right) + var(--mobile-edge));
  width: 120px;
  min-height: 44px;
  padding: 8px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid #e59d9477;
  border-radius: 22px;
  background: #30212fed;
  color: #ffe1d9;
  font: 700 11px/1.3 system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
body.touchDevice.mobileMatchMode #mobileAbilityCancel:is(.active, .mobileActionCancelling) { background: #713535; border-color: #ffbeb7; }
body.touchDevice.mobileMatchMode :is(#mobileAbilityAimPad, #mobileAbilityCancel)[hidden],
body.touchDevice.mobileMatchMode:not(.mobileAbilityAiming) :is(#mobileAbilityAimPad, #mobileAbilityCancel) { display: none; }
@media (orientation: landscape) {
  body.touchDevice.mobileMatchMode #mobileAbilityCancel {
    right: calc(var(--mobile-safe-right) + var(--mobile-orbit-width) + 18px);
    bottom: calc(var(--mobile-control-bottom) + var(--mobile-actions-height) - 54px);
    width: clamp(100px, 17vw, 136px);
  }
}
@media (orientation: portrait) and (min-width: 600px) {
  body.touchDevice.mobileMatchMode { --mobile-action-width: 94px; --mobile-action-height: 62px; --mobile-actions-height: 198px; --mobile-edge: 14px; }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionName { font-size: 13px; }
  body.touchDevice.mobileMatchMode .mobileGestureHud .mobileActionCooldown { font-size: 10px; }
}