/* Presentation-only layout. The existing widgets retain their state and handlers. */
#hudMenuButton[hidden], #hudJourneyStack[hidden], #hudMenuPanel [hidden], #hudQuestDetails[hidden] { display:none!important; }
#hudMenuButton {
  position:absolute;top:12px;right:12px;z-index:39;min-height:40px;min-width:78px;
  padding:8px 15px;border:1px solid #ac936977;border-radius:8px;background:#14212dee;
  box-shadow:0 3px 12px #0005;color:#f1e3c5;font:700 12px/1.4 system-ui;cursor:pointer;
}
#hudMenuButton::before {content:'☰';margin-right:8px;color:#cdb987;}
#hudMenuButton[aria-expanded="true"] {border-color:#e2c995;background:#26333c;}
#hudMenuPanel {
  position:fixed;inset:var(--hud-menu-top,72px) var(--hud-menu-right,12px) auto var(--hud-menu-left,auto);margin:0;width:min(290px,calc(100vw - 24px));
  max-height:calc(100dvh - var(--hud-menu-top,72px) - 12px);overflow:auto;box-sizing:border-box;
  padding:14px;border:1px solid #a18b6377;border-radius:12px;background:linear-gradient(145deg,#23303c,#111b28);
  color:#f0e5cf;box-shadow:0 14px 48px #0009;font:13px/1.5 system-ui;overscroll-behavior:contain;
}
#hudMenuPanel::backdrop {background:#070d1629;}
.hudMenuHeader {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.hudMenuHeader strong {font:700 20px/1.2 Georgia,serif;}
#hudMenuPanel .hudMenuAction, #hudMenuPanel .exploreMenuPromptButton, #hudMenuPanel .runToggleButton {
  position:static;display:flex!important;align-items:center;gap:9px!important;width:100%!important;
  min-width:0!important;min-height:42px;height:auto!important;margin:0;padding:9px 11px!important;
  box-sizing:border-box;border:1px solid #9baac331;border-radius:7px;background:#2b3747;
  color:#eee9df;text-align:left;font:600 12px/1.35 system-ui;cursor:pointer;transform:none;filter:none;box-shadow:none;
}
#hudMenuPanel #hudMenuClose {width:auto!important;min-height:34px;padding:5px 9px!important;background:transparent;color:#c6c9ce;}
#hudMenuPanel .exploreMenuPrompts {position:static;display:grid;grid-template-columns:1fr;gap:6px;width:100%;padding:0;border:0;background:none;box-shadow:none;}
#hudMenuPanel .exploreMenuPrompts.hidden {display:none!important;}
#hudMenuPanel .exploreMenuPromptButton .hudMenuLabel {position:static;background:none;border:0;padding:0;font:600 12px/1.4 system-ui;letter-spacing:0;color:inherit;}
#hudMenuPanel :is(.exploreMenuPromptButton,.runToggleButton) kbd {display:grid;place-items:center;min-width:25px;height:23px;padding:0 3px;border:1px solid #af9c7166;border-radius:4px;background:#141f2e;color:#e9d4aa;font:700 10px system-ui;}
.hudMenuExplore {display:grid;gap:6px;margin-bottom:12px;}
.hudMenuUtilities {display:grid;gap:6px;padding-top:12px;border-top:1px solid #b8ae8b26;}
#hudMenuPanel .activeRuneHud {position:static;width:100%;margin:5px 0 0;box-sizing:border-box;box-shadow:none;}
#hudMenuPanel .activeRuneHud:not(.hidden) {display:grid!important;}
#hudMenuPanel .activeRuneHudCopy small {font-size:9px;}
#hudMenuPanel .activeRuneHudCopy strong {font:600 12px/1.4 system-ui;}
#hudMenuPanel .activeRuneHudCopy i {font-size:10px;}
#hudMenuPanel .exploreMenuPromptButton {opacity:1;}
/* Legacy shortcut focus art is absolutely positioned. After grouping these
   buttons it would cover the dialog and intercept other menu actions. */
#hudMenuPanel .exploreMenuPromptButton::before, #hudMenuPanel .exploreMenuPromptButton::after {content:none!important;pointer-events:none;}
#hudMenuPanel .runToggleButton[aria-pressed="false"] {color:#b4c0d4;}
.hudMenuNote {margin:12px 0 0;color:#aab7c4;font:11px/1.5 system-ui;}
#hudMenuPanel button:hover, #hudMenuButton:hover {background:#344254;border-color:#cdb889;}
#hudMenuPanel button:focus-visible, #hudMenuButton:focus-visible, #hudQuestToggle:focus-visible {outline:2px solid #f1d79b;outline-offset:3px;}

.hudLayoutActive .hudJourneyStack {position:absolute;left:12px;top:12px;z-index:18;width:230px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:7px;pointer-events:none;}
.hudLayoutActive .hudJourneyStack #exploreMinimapHud {position:static!important;left:auto;top:auto;width:100%!important;min-width:0;box-sizing:border-box;pointer-events:auto;}
#hudJourneyStack .exploreMapOpen {min-width:0;max-width:100%;box-sizing:border-box;}
/* The legacy touch rule sizes every canvas to the viewport. Only the game
   canvas should fill it; the lazily created minimap keeps its own aspect. */
#hudJourneyStack #exploreMinimapHud .exploreMinimapCanvas {width:100%!important;height:auto!important;max-width:100%;aspect-ratio:312/203;box-sizing:border-box;}
body.touchDevice.mobileMatchMode:has(.hudLayoutActive) .questMapPanel .questMapCanvas {width:100%!important;height:auto!important;max-width:100%;aspect-ratio:990/644;}
.hudLayoutActive .hudJourneyStack #questTracker {position:static;width:100%;box-sizing:border-box;padding:0;border-radius:7px;pointer-events:auto;}
.hudLayoutActive #questTracker[data-hud-suppressed="true"] {display:none!important;}
#questTracker>#hudQuestToggle {position:relative;display:block;width:100%;max-width:100%;min-height:42px;margin:0;box-sizing:border-box;text-align:left;padding:9px 29px 9px 10px;background:transparent;border:0;border-radius:7px;color:inherit;font:600 12px/1.35 system-ui;box-shadow:none;cursor:pointer;}
#hudQuestToggle::after {content:'+';position:absolute;right:10px;top:12px;font:600 15px system-ui;color:#dbc08c;}
#hudQuestToggle[aria-expanded="true"]::after {content:'−';}
#hudQuestToggle .questTrackerHead {gap:3px;text-align:left;}
#hudQuestToggle .questTrackerHead strong {line-height:1.35;font-size:12px;overflow-wrap:anywhere;}
.hudQuestDetails {padding:0 10px 10px;}
.hudQuestDetails>button {margin-top:7px;min-height:34px;border:1px solid #a8997166;border-radius:5px;padding:5px 9px;background:#283544;color:#f3dfb2;font:600 11px system-ui;cursor:pointer;}
.hudQuestDetails>button[hidden] {display:none!important;}
.hudLayoutActive[data-hud-mode="compact"] .hudJourneyStack {width:164px;gap:5px;}
.hudLayoutActive[data-hud-mode="compact"] #exploreMinimapHud {padding:5px;gap:4px;border-color:#aa8a5577;box-shadow:0 3px 12px #0005;}
.hudLayoutActive[data-hud-mode="compact"] .exploreMinimapHead strong, .hudLayoutActive[data-hud-mode="compact"] .exploreMinimapHint {display:none;}
.hudLayoutActive[data-hud-mode="compact"] .exploreMinimapHead {min-height:10px;}
.hudLayoutActive[data-hud-mode="compact"] .exploreMinimapArea {font-size:11px;}
.hudLayoutActive[data-hud-mode="compact"] #exploreProgressHud,
#gameUi.hudLayoutActive[data-hud-mode="compact"]>.topbar>div>p {display:none!important;}
#gameUi.hudLayoutActive[data-hud-mode="compact"]:has(.gameFrame[data-hud-game-mode="explore"])>#battleBuildGuidance {display:none!important;}
#gameUi.hudLayoutActive[data-hud-mode="compact"] .mobileRotateHint {display:none!important;}
.hudLayoutActive[data-hud-mode="expanded"] #exploreProgressHud {top:64px;}
.gameFrame.hudLayoutActive #exploreHudQuickDock {left:auto;right:12px;bottom:36px;width:148px;max-width:148px;gap:0;}
.gameFrame.hudLayoutActive .exploreHudQuickDockTop {width:100%;}
.gameFrame.hudLayoutActive #quickItemSlot {flex:1 1 auto;width:100%;min-height:60px;}
@media(max-width:1100px) {
  .gameFrame.hudLayoutActive #exploreHudQuickDock {bottom:142px;}
}
@media(max-width:740px) {
  .hudLayoutActive .hudJourneyStack {left:8px;top:8px;width:180px;}
  .hudLayoutActive[data-hud-mode="compact"] .hudJourneyStack {width:142px;}
  #hudMenuButton {top:8px;right:8px;min-height:42px;min-width:75px;}
  .gameFrame.hudLayoutActive #exploreHudQuickDock {right:8px;bottom:142px;width:118px;max-width:118px;}
  .hudLayoutActive #hudQuestToggle .questTrackerHead strong {font-size:11px;}
}
body.touchDevice.mobileMatchMode .hudLayoutActive .hudJourneyStack {top:68px;}
body.touchDevice.mobileMatchMode .gameFrame.hudLayoutActive #exploreHudQuickDock {bottom:150px;}
body.touchDevice.mobileMatchMode .hudLayoutActive[data-hud-game-mode="ffa"] #hudMenuButton {left:8px;right:auto;top:56px;}
body.touchDevice.mobileMatchMode .hudLayoutActive[data-hud-game-mode="pvp"] #hudMenuButton {top:68px;}
body.touchDevice.mobileMatchMode .hudLayoutActive[data-hud-game-mode="coop"] #hudMenuButton {top:88px;}
body.touchDevice.mobileMatchMode .hudLayoutActive[data-hud-game-mode="siege"] #hudMenuButton {top:132px;}
@media(max-height:500px) {
  body.touchDevice.mobileMatchMode .hudLayoutActive[data-hud-mode="compact"] .hudJourneyStack {width:112px;top:56px;}
  body.touchDevice.mobileMatchMode .hudLayoutActive #questTracker[data-hud-expanded="false"] .questTrackerHead strong {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  body.touchDevice.mobileMatchMode .hudLayoutActive .exploreMinimapGuidance {display:none;}
  #hudMenuPanel {max-height:calc(100dvh - var(--hud-menu-top,56px) - 8px);}
}