/* 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. */
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;
}
body.touchDevice.mobileMatchMode #gameFrame {
  height: 100dvh;
  isolation: isolate;
}
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 :is(.mobileHint, .mobileRotateHint) { 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 #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; }
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; }
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-action-width: clamp(64px, 9vw, 82px);
    --mobile-actions-height: 114px;
  }
  body.touchDevice.mobileMatchMode .mobileGestureHud { grid-template-columns: repeat(3, var(--mobile-action-width)); }
  body.touchDevice.mobileMatchMode .hudLayoutActive #hudJourneyStack {
    width: 118px;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 216px);
  }
  body.touchDevice.mobileMatchMode .hudJourneyStack #exploreMinimapHud { padding: 4px; gap: 3px; }
  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 #mobileMoveBase { width: 100px; height: 100px; }
  body.touchDevice.mobileMatchMode .gameFrame #explorePrompt {
    left: 50%;
    bottom: var(--mobile-control-bottom);
    width: min(260px, calc(100vw - 390px));
    transform: translateX(-50%);
  }
}
@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; }
}