.map-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  background: #09131b;
}

#palworld-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #09131b;
}

body.app-map-page #palworld-map {
  inset: 0;
  width: 100%;
  height: 100%;
}

.leaflet-container {
  font-family: "Palworld UI", system-ui, sans-serif;
  background: #09131b;
}
.leaflet-image-layer { filter: saturate(.96) contrast(1.03); }
.leaflet-control-attribution { display: none; }

.map-toolbar {
  position: absolute;
  z-index: 800;
  top: auto;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  font-family: "Exo", system-ui, sans-serif;
  pointer-events: none;
}

.map-status,
.map-buttons,
.map-buttons button {
  color: #dbeaec;
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
  font-family: "Exo", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: .015em;
}

.map-status {
  height: auto;
  display: inline-flex;
  align-items: flex-end;
  padding: 0 .5rem;
}

.map-buttons { height: auto; display: flex; align-items: flex-end; overflow: visible; pointer-events: auto; }
.map-buttons button {
  min-width: 39px;
  min-height: 0;
  padding: 0 .72rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.map-buttons button:hover,
.map-buttons button:focus-visible {
  color: #c6fbff;
  background: transparent;
  outline: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentcolor 72%, transparent);
  text-underline-offset: .42rem;
}
.map-buttons button:disabled { color: #557986; cursor: default; opacity: .48; pointer-events: none; }
.map-buttons button:disabled:hover { color: #557986; background: transparent; }

.coordinate-hud {
  position: absolute;
  z-index: 800;
  top: 18px;
  left: 22px;
  padding: 0;
  color: #8ff4ff;
  pointer-events: none;
}

body.app-map-page > .coordinate-hud {
  position: fixed;
  top: var(--map-header-top-gap);
  right: auto;
  left: 50%;
  z-index: 1800;
  transform: translateX(-50%);
  pointer-events: none;
}

.coordinate-value {
  color: #8ff4ff;
  font-family: "Palworld UI", system-ui, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 540;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 0 9px rgb(79 216 232 / 55%), -1px -1px 0 #092231, 1px -1px 0 #092231, -1px 1px 0 #092231, 1px 1px 0 #092231, 0 2px 3px rgb(0 0 0 / 72%);
}

.map-control-legend {
  position: absolute;
  z-index: 850;
  right: auto;
  bottom: 1rem;
  left: 50%;
  display: flex;
  min-height: 0;
  align-items: center;
  gap: 24px;
  padding: 0;
  color: #d9f5ff;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translateX(-50%);
  pointer-events: none;
}

body.app-map-page > .source-notice {
  position: absolute;
  z-index: 1700;
  bottom: 1rem;
  left: var(--map-sidebar-gap);
  width: min(20rem, calc(100% - 2rem));
  max-width: calc(100% - 2rem);
  margin: 0;
  background: rgb(5 20 29 / 100%);
  border-left: 2px solid var(--cyan);
  pointer-events: auto;
}
.control-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #dbeaec;
  font-family: "Exo", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: .015em;
  text-shadow: none;
}

.control-hint kbd {
  position: static;
  isolation: auto;
  display: inline;
  width: auto;
  height: auto;
  overflow: visible;
  color: inherit;
  font: inherit;
  text-shadow: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
}

.mouse-zoom-icon {
  display: inline-block;
  width: 29px;
  height: 34px;
  filter: drop-shadow(0 1px 2px rgb(0 13 20 / 58%));
}

.mouse-zoom-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }

.mouse-shell { fill: #bcd8df; stroke: #456f7d; stroke-width: 2; }
.mouse-axis { fill: none; stroke: #53dbe8; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 2; }
.mouse-wheel { fill: #ecfbff; stroke: #385f6d; stroke-width: 1.5; }

.map-hud-frame {
  position: absolute;
  z-index: 780;
  inset: 0;
  background: radial-gradient(ellipse 118% 104% at 50% 44%, transparent 62%, rgb(1 9 16 / 52%) 100%);
  pointer-events: none;
}

.map-hud-frame::before {
  display: none;
  content: none;
}

/* Map-only sidebar cleanup: let the map remain visible behind the sidebar. */
body.app-map-page .layers-panel,
body.app-map-page .sidebar-header,
body.app-map-page .sidebar-scroll,
body.app-map-page .world-tabs,
body.app-map-page .map-search,
body.app-map-page .layer-view-toggle,
body.app-map-page .filter-card,
body.app-map-page .filter-content {
  background: transparent;
}

body.app-map-page .layers-panel,
body.app-map-page .sidebar-header,
body.app-map-page .sidebar-scroll,
body.app-map-page .world-tabs,
body.app-map-page .filter-heading,
body.app-map-page .filter-option,
body.app-map-page .pal-habitat-search,
body.app-map-page .pal-habitat-all,
body.app-map-page .subfilter-panel,
body.app-map-page .subfilter-search input {
  border-color: transparent;
  box-shadow: none;
}

body.app-map-page > .layers-panel {
  position: fixed;
  z-index: 1600;
  inset: 0 auto 0 var(--map-sidebar-gap);
  height: 100dvh;
  max-height: none;
  background: rgb(5 20 29 / 65%);
  border-left: 2px solid var(--cyan);
}

body.app-map-page > .source-notice strong {
  color: var(--cyan);
}

body.app-map-page .sidebar-scroll {
  margin-bottom: calc(var(--map-source-notice-reserve) + 8px);
  scrollbar-color: #91a8ad transparent;
}

body.app-map-page .world-tab:not(.is-active):hover {
  background: transparent;
  border-color: transparent;
}

body.app-map-page .layers-panel::before,
body.app-map-page .world-tabs::before,
body.app-map-page .filter-heading::after,
body.app-map-page .filter-option-shell::after {
  display: none;
  background: none;
  border: 0;
  box-shadow: none;
  content: none;
}

body.app-map-page .filter-heading:hover,
body.app-map-page .filter-heading:focus-visible,
body.app-map-page .filter-card.is-open .filter-heading,
body.app-map-page .filter-option:not(:disabled):hover,
body.app-map-page .filter-option:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.app-map-page .filter-option.is-active,
body.app-map-page .filter-option.is-active:not(:disabled):hover,
body.app-map-page .filter-option.is-active:focus-visible,
body.app-map-page .pal-habitat-all.is-active,
body.app-map-page .subfilter-option.is-active {
  background: rgb(21 54 62 / 48%);
  border-color: transparent;
  box-shadow: none;
}

body.app-map-page .pal-habitat-search:focus-within,
body.app-map-page .subfilter-search:focus-within input {
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  body.app-map-page .map-toolbar {
    top: auto;
    right: .6rem;
    bottom: 1rem;
  }

  body.app-map-page .map-status,
  body.app-map-page .map-buttons {
    min-height: 44px;
    align-items: center;
  }

  body.app-map-page .map-buttons button {
    min-height: 44px;
    padding-block: 12px;
  }

  body.app-map-page #reset-view { padding: 12px .5rem; }

  body.app-map-page > .source-notice {
    z-index: 1700;
    bottom: calc(76px + 44px + 1rem + env(safe-area-inset-bottom));
    left: var(--map-sidebar-gap);
    width: min(20rem, calc(100% - 2rem));
    max-width: calc(100% - 2rem);
    padding: .5rem .65rem;
    font-size: clamp(.5rem, 2.15vw, .68rem);
  }
}

/* Map interaction frames are hover affordances, never persistent focus frames. */
body.app-chrome-page.app-map-page .layers-fab.app-interactive-corners {
  position: fixed;
}

body.app-map-page .app-interactive-corners > .app-interaction-frame {
  inset: -.05rem !important;
  opacity: 0 !important;
}

body.app-map-page .app-interactive-corners:hover > .app-interaction-frame {
  opacity: 1 !important;
}

body.app-map-page .subfilter-toggle.app-interactive-corners:is(:hover, :focus-visible, :focus-within) > .app-interaction-frame { opacity: 0 !important; animation: none !important; }
body.app-map-page .app-interactive-corners:focus-visible > .app-interaction-frame,
body.app-map-page .app-interactive-corners:focus-within > .app-interaction-frame {
  opacity: 0 !important;
}

body.app-map-page .app-interactive-corners > .app-interaction-frame i {
  width: .42rem !important;
  height: .42rem !important;
  border-width: 1px !important;
  animation: none !important;
  transform: none !important;
}
body.app-map-page .app-interactive-corners:focus-visible {
  outline: 2px solid var(--amber) !important;
  outline-offset: 2px;
}
body.app-chrome-page.app-map-page .filter-card:has(.filter-option-shell.has-subfilter.is-subfilter-open) { position: relative; z-index: 30; } body.app-chrome-page.app-map-page .filter-option-shell.has-subfilter.is-subfilter-open { z-index: 30; } body.app-chrome-page.app-map-page .filter-option-shell.has-subfilter.is-subfilter-open > .subfilter-toggle, body.app-chrome-page.app-map-page .layers-panel.is-compact .filter-option-shell.has-subfilter.is-subfilter-open > .subfilter-toggle { right: calc(50% + 4px); } body.app-chrome-page.app-map-page .subfilter-panel { position: absolute; top: calc(100% + 7px); right: auto; left: 0; width: 100%; z-index: 40; } body.app-map-page .filter-content { overflow: visible; }
/* The shared interaction layer adds position: relative; keep filter toggles anchored to their cards. */
body.app-chrome-page.app-map-page .filter-option-shell > .subfilter-toggle {
  position: absolute;
  right: 48px;
}
body.app-chrome-page.app-map-page .filter-option-shell.has-subfilter.is-subfilter-open > .subfilter-toggle { right: calc(50% + 51px); }
/* Keep Map navigation and reset controls compact while retaining shared Exo language. */
body.app-map-page .map-toolbar {
  gap: .35rem;
  font-family: "Exo", system-ui, sans-serif;
}
body.app-map-page .map-buttons {
  gap: .1rem;
}

body.app-map-page .map-buttons button {
  min-width: 2.2rem;
  padding-inline: .42rem;
  font-family: "Exo", system-ui, sans-serif;
}

body.app-map-page #reset-view { padding-inline: .5rem; }

/* Unselected Map controls are light; cyan is reserved for hover and selected states. */
body.app-map-page .world-tab,
body.app-map-page .world-tab small,
body.app-map-page .layer-view-toggle,
body.app-map-page .filter-heading,
body.app-map-page .filter-option,
body.app-map-page .filter-option > span:not(.count-pill),
body.app-map-page .filter-total,
body.app-map-page .count-pill {
  color: var(--map-ui-light) !important;
}

body.app-map-page .world-tab-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
  opacity: .9;
}

body.app-map-page .filter-option .layer-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
  opacity: .9;
}

body.app-map-page .world-tab:hover,
body.app-map-page .world-tab:hover small,
body.app-map-page .layer-view-toggle:hover,
body.app-map-page .filter-heading:hover,
body.app-map-page .filter-heading:hover .filter-total,
body.app-map-page .filter-option:not(.is-active):hover,
body.app-map-page .filter-option:not(.is-active):hover > span:not(.count-pill),
body.app-map-page .filter-option:not(.is-active):hover .count-pill {
  color: var(--map-ui-cyan) !important;
}

body.app-map-page .world-tab:hover .world-tab-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
}

body.app-map-page .filter-option:not(.is-active):hover .layer-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
}

body.app-map-page .world-tab.is-active,
body.app-map-page .world-tab.is-active small,
body.app-map-page .world-tab.is-active .world-tab-icon,
body.app-map-page .layer-view-toggle[aria-pressed="true"],
body.app-map-page .filter-card.is-open .filter-heading,
body.app-map-page .filter-card.is-open .filter-heading .filter-total,
body.app-map-page .filter-option.is-active,
body.app-map-page .filter-option.is-active > span:not(.count-pill),
body.app-map-page .filter-option.is-active .count-pill {
  color: var(--map-ui-cyan) !important;
}

body.app-map-page .world-tab.is-active .world-tab-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
}

body.app-map-page .filter-option.is-active .layer-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
}

/* Focus remains visible through an outline, but does not turn an unselected control cyan. */
body.app-map-page .world-tab:not(.is-active):focus-visible,
body.app-map-page .world-tab:not(.is-active):focus-visible small,
body.app-map-page .layer-view-toggle:not([aria-pressed="true"]):focus-visible,
body.app-map-page .filter-heading:focus-visible,
body.app-map-page .filter-heading:focus-visible .filter-total,
body.app-map-page .filter-option:not(.is-active):focus-visible,
body.app-map-page .filter-option:not(.is-active):focus-visible > span:not(.count-pill),
body.app-map-page .filter-option:not(.is-active):focus-visible .count-pill {
  color: var(--map-ui-light) !important;
}

body.app-map-page .world-tab:not(.is-active):focus-visible .world-tab-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
}

body.app-map-page .filter-option:not(.is-active):focus-visible .layer-icon {
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 72%)) !important;
}

body.app-map-page .filter-card.is-open .filter-heading:focus-visible,
body.app-map-page .filter-card.is-open .filter-heading:focus-visible .filter-total {
  color: var(--map-ui-cyan) !important;
}

/* F toggles this Map-only state without changing the shared header geometry. */
body.app-map-page.map-header-hidden > .app-header { visibility: hidden; opacity: 0; pointer-events: none; }

/* Map-only subfilter surfaces override the transparent cleanup above. */
body.app-chrome-page.app-map-page .subfilter-panel { margin-top: 1px; padding: 8px; background: linear-gradient(180deg, rgb(8 31 42 / 98%), rgb(4 18 26 / 98%)) !important; border: 1px solid rgb(63 210 221 / 76%) !important; border-radius: 6px; box-shadow: inset 0 1px rgb(222 253 255 / 12%), 0 0 0 1px rgb(22 119 132 / 36%), 0 10px 22px rgb(0 0 0 / 48%) !important; overflow: hidden; }
body.app-chrome-page.app-map-page .subfilter-actions { gap: 6px; margin-bottom: 8px; }
body.app-chrome-page.app-map-page .subfilter-actions button { min-height: 30px; color: #dffff8; font-size: 9px; font-weight: 850; background: linear-gradient(180deg, rgb(18 122 105 / 72%), rgb(8 73 67 / 82%)); border: 1px solid rgb(93 239 218 / 72%) !important; border-radius: 4px; box-shadow: inset 0 1px rgb(226 255 250 / 18%), 0 2px 6px rgb(0 0 0 / 24%); }
body.app-chrome-page.app-map-page .subfilter-actions button:last-child { color: #ffe8e8; background: linear-gradient(180deg, rgb(137 56 61 / 76%), rgb(77 29 35 / 86%)); border-color: rgb(246 140 146 / 68%) !important; }
body.app-chrome-page.app-map-page .subfilter-actions button:is(:hover, :focus-visible) { color: #fff; background: linear-gradient(180deg, rgb(26 159 139 / 88%), rgb(10 96 86 / 92%)); border-color: #9bfff0 !important; box-shadow: 0 0 0 1px rgb(87 237 224 / 30%), 0 4px 10px rgb(0 0 0 / 32%); outline: 0; }
body.app-chrome-page.app-map-page .subfilter-actions button:last-child:is(:hover, :focus-visible) { background: linear-gradient(180deg, rgb(170 69 76 / 90%), rgb(100 34 42 / 94%)); border-color: #ffc3c6 !important; }
body.app-chrome-page.app-map-page .subfilter-search input { color: #f0ffff !important; background: rgb(3 16 24 / 96%) !important; border: 1px solid rgb(78 169 180 / 78%) !important; border-radius: 4px; box-shadow: inset 0 1px 3px rgb(0 0 0 / 42%), 0 0 0 1px rgb(12 72 83 / 34%) !important; caret-color: var(--map-ui-cyan); }
body.app-chrome-page.app-map-page .subfilter-search input::placeholder { color: #91b9c1; }
body.app-chrome-page.app-map-page .subfilter-search:focus-within input { border-color: var(--map-ui-cyan) !important; box-shadow: 0 0 0 2px rgb(81 232 242 / 20%), inset 0 1px 3px rgb(0 0 0 / 42%) !important; }
body.app-chrome-page.app-map-page .subfilter-grid { gap: 4px 6px; padding-right: 3px; scrollbar-color: #2eb8c4 #06151d; scrollbar-width: thin; }
body.app-chrome-page.app-map-page .subfilter-grid::-webkit-scrollbar { width: 6px; height: 6px; }
body.app-chrome-page.app-map-page .subfilter-grid::-webkit-scrollbar-track { background: #06151d; border-radius: 999px; }
body.app-chrome-page.app-map-page .subfilter-grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #45d7df, #167984); border: 1px solid #082b35; border-radius: 999px; }
body.app-chrome-page.app-map-page .subfilter-option { min-height: 38px; color: #d8f5f7; background: transparent; border: 0 !important; border-radius: 0; box-shadow: inset 0 -1px rgb(75 159 169 / 24%); }
body.app-chrome-page.app-map-page .subfilter-option:is(:hover, :focus-visible) { color: #fff; background: rgb(25 78 88 / 34%); border-color: transparent !important; box-shadow: inset 0 -1px #64d5de; outline: 0; }
body.app-chrome-page.app-map-page .subfilter-option.is-active { color: #f5ffff; background: rgb(17 104 111 / 38%); border-color: transparent !important; box-shadow: inset 0 -1px #61dce3; }
body.app-chrome-page.app-map-page .subfilter-option.is-active:is(:hover, :focus-visible) { background: rgb(26 130 137 / 48%); border-color: transparent !important; box-shadow: inset 0 -1px #a2fbff; }
body.app-chrome-page.app-map-page .subfilter-option small { color: #9ceaf0; }
body.app-chrome-page.app-map-page .subfilter-option i { background: #172b32; border-color: #6a949b; box-shadow: inset 0 1px 2px rgb(0 0 0 / 45%); }
body.app-chrome-page.app-map-page .subfilter-option.is-active i { color: #03242b; background: var(--map-ui-cyan); border-color: #c2ffff; box-shadow: 0 0 0 1px rgb(94 240 194 / 25%), 0 0 7px rgb(81 232 242 / 38%); }
body.app-chrome-page.app-map-page .subfilter-option.is-active i::after { color: #03242b; }