/* ==========================================================================
   css-hardening.css — defensive layout rules for unusual screen sizes.
   Loaded last in play.html so it can correct the stacked overrides from
   modals.css, compact-modals.css and the injected <style> blocks.
   Rules are scoped to the windows they fix. Phones: under 700px wide.
   Short screens: under 600px tall. Very wide: 1920px and up.
   Layout only: no game logic lives in this file.
   ========================================================================== */

/* compact-ui.css zooms window content to .86, so a CSS minimum is drawn at
   86%. --tap-min is the rendered 44px target expressed in the zoomed space. */
:root { --tap-min: 44px; --win-zoom: .86; }

/* ---- Shop (merchant) buy and sell rows -------------------------------- */
/* One compact line per item: icon, name + muted info (ellipsis), price with
   a coin, quantity, Max, action. A sticky header labels the columns on wide
   windows. Under 520px of window width the row wraps to two lines: item and
   price on top, quantity and buttons beneath. The width test is a container
   query on the tab panel, so it follows the draggable/resizable window frame
   rather than the screen. Sizes are final values (the window content is drawn
   at zoom .86, so 15px here renders about 13px). */
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-tab-panel {
  container: shoprows / inline-size;
  --row-ctl: 34px;
  --row-cols: 28px minmax(0, 1fr) 72px 64px 84px 112px;
  --row-areas: "ico copy price qty max act";
}
@media (pointer: coarse) {
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-tab-panel {
    --row-ctl: calc(var(--tap-min) / var(--win-zoom));
  }
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-list,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-sell-list {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card {
  position: relative;
  display: grid !important;
  grid-template-columns: var(--row-cols) !important;
  grid-template-areas: var(--row-areas) !important;
  grid-template-rows: none !important;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto !important;
  max-height: none !important;
  min-height: calc(var(--row-ctl) + 8px);
  margin: 0;
  padding: 3px 10px !important;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid transparent;
  border-bottom-color: #3d4a3f;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row:hover,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card:hover,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row:focus-within,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card:focus-within {
  background: #2a4336 !important;
  border-color: #6b7456;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row:focus-visible,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card:focus-visible {
  outline: 2px solid #f1d39a;
  outline-offset: -2px;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-icon {
  grid-area: ico !important;
  width: 28px !important;
  height: 28px !important;
  max-width: 100%;
  object-fit: contain;
  align-self: center;
  justify-self: center;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  inset: auto !important;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-item-copy {
  grid-area: copy !important;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-item-copy h3,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card > h3 {
  display: block !important;
  flex: 0 1 auto;
  min-width: 5ch;
  max-width: 78%;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.3;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-item-copy p,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-item-copy span {
  flex: 0 20 auto;
  min-width: 0;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.3;
  color: #b9b49c !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-item-copy p {
  flex: 1 20 0;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-item-copy p .merchant-req {
  margin-left: 8px;
  font-size: 15px !important;
  font-weight: 700;
  overflow: visible;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-req-ok { color: #8fd18b !important; }
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-req-low { color: #ff8a7a !important; }
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row .merchant-price,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card .merchant-price {
  grid-area: price !important;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #f2d777;
  text-align: right;
  white-space: nowrap;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-price::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #d9b341 55%, #8a6a1f);
  box-shadow: 0 0 0 1px #3a2c0a;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row.is-unaffordable .merchant-price { color: #ff8a7a; }
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .is-unaffordable > .merchant-icon,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .is-unaffordable > .merchant-item-copy,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .is-disabled > .merchant-icon,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .is-disabled > .merchant-item-copy,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .is-disabled > .merchant-price {
  opacity: .62;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row > label,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card > label {
  grid-area: qty !important;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  color: #b9b49c;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row input,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card input {
  width: 64px !important;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  min-height: var(--row-ctl) !important;
  height: var(--row-ctl);
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
  font-size: 15px;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row button,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card button {
  min-height: var(--row-ctl) !important;
  height: var(--row-ctl) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0;
  padding: 0 8px !important;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row > button.merchant-max,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card > button.merchant-max { grid-area: max !important; }
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row > button:not(.merchant-max),
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card > button:not(.merchant-max) { grid-area: act !important; }
/* Wide windows: the header labels the quantity column, so the word is for screen readers only. */
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-qty-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The running total stays in the page for screen readers (live region). */
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-total {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Sticky column header (wide windows only). */
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--row-cols);
  gap: 4px 10px;
  box-sizing: border-box;
  padding: 4px 11px;
  border-bottom: 1px solid #5d654b;
  background: #16281f;
  color: #c9c4ae;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-list-head .mh-item { grid-column: 1 / 3; }
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-list-head .mh-price { grid-column: 3; text-align: right; }
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-list-head .mh-qty { grid-column: 4; }

@container shoprows (max-width: 520px) {
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-qty-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row,
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card {
    grid-template-columns: 28px minmax(0, 1fr) auto auto auto !important;
    grid-template-areas: "ico copy copy copy price" ". qty qty max act" !important;
    padding: 5px 8px !important;
    row-gap: 6px;
  }
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row > button:not(.merchant-max),
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card > button:not(.merchant-max) { min-width: 96px !important; }
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-shop-row > button.merchant-max,
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-loot-card > button.merchant-max { min-width: 76px !important; }
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-list-head { display: none; }
}

/* Very short screens: keep the buy list scrollable inside the window. */
@media (max-height: 600px) {
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="merchant"] .merchant-tab-panel {
    overflow-y: auto;
    min-height: 0;
  }
}

/* Images never push past their container. */
html body img {
  max-width: 100%;
}

/* ---- Journal -----------------------------------------------------------
   Tabs wrap instead of overflowing the book. The two-page spread stacks on
   phones so the entry text gets the full width. */
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-tabs {
  flex-wrap: wrap;
  row-gap: 2px;
  min-width: 0;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-tabs button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(var(--tap-min) / var(--win-zoom)) !important;
  padding: 2px 10px !important;
  font-size: clamp(16.5px, 4.2vw, 22px) !important;
  overflow-wrap: anywhere;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-toc-item {
  min-height: calc(var(--tap-min) / var(--win-zoom)) !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  height: auto !important;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-controls input,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-controls select {
  min-width: 0;
  max-width: 100%;
  min-height: calc(var(--tap-min) / var(--win-zoom));
  box-sizing: border-box;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-spread {
  min-width: 0;
  max-width: 100%;
}
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-leaf,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-title,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-story,
html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-steps li {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-spread {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-right: 0 !important;
    max-height: none !important;
    min-height: 0;
  }
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-leaf {
    max-height: 40vh;
  }
  html body #mmorpgOverlay #mmorpgWindow[data-subpanel="journal"] .journal-title {
    font-size: clamp(22px, 6vw, 31px) !important;
  }
}

/* ---- Inventory ---------------------------------------------------------
   Toolbar, tabs, chips and footer wrap. Tap targets reach 44px rendered. */
html body #mmorpgOverlay .k-inv,
html body #mmorpgOverlay .k-inv-main,
html body #mmorpgOverlay .k-inv-equip {
  min-width: 0;
  max-width: 100%;
}
html body #mmorpgOverlay .k-inv-tools {
  flex-wrap: wrap;
  min-width: 0;
}
html body #mmorpgOverlay .k-inv-search {
  flex: 1 1 160px;
  min-height: calc(var(--tap-min) / var(--win-zoom)) !important;
}
html body #mmorpgOverlay .k-inv-sort {
  min-height: calc(var(--tap-min) / var(--win-zoom)) !important;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
html body #mmorpgOverlay .k-inv-tabs {
  flex-wrap: wrap;
}
html body #mmorpgOverlay .k-inv-tabs button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(var(--tap-min) / var(--win-zoom)) !important;
  overflow-wrap: anywhere;
}
html body #mmorpgOverlay .k-inv-chips button {
  min-height: calc(var(--tap-min) / var(--win-zoom)) !important;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
html body #mmorpgOverlay .k-inv-foot {
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}
html body #mmorpgOverlay .k-inv-repair {
  min-height: calc(var(--tap-min) / var(--win-zoom)) !important;
  max-width: 100%;
  white-space: normal;
}
html body #mmorpgOverlay .k-equip-label {
  overflow-wrap: anywhere;
  max-width: 100%;
  hyphens: auto;
}
html body #mmorpgOverlay .k-inv-hint {
  max-width: 100%;
}

/* ---- HUD: utilities, chat, minimap, HUD menu, navigation finder -------- */
/* Utility buttons keep a 44px tap height; the grid already reflows by width. */
html body #mmorpgUtilities button {
  min-height: var(--tap-min) !important;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
html body #mmorpgUtilities {
  max-width: calc(100vw - 12px);
  box-sizing: border-box;
}
html body #hudMenu a,
html body #hudMenu button {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
html body #mmorpgChat #mmorpgCommandInput,
html body #mmorpgChat #mmorpgCommandSubmit {
  min-height: var(--tap-min) !important;
  height: auto !important;
}
html body #mmorpgChat .k-chat-toggle {
  min-width: var(--tap-min) !important;
  min-height: var(--tap-min) !important;
  height: auto !important;
}
html body #mmorpgMinimap button {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}
/* World Finder (#navigationGuide): floats above the hotbar, is at most 60% of the viewport tall and scrolls inside itself. */
/* Results and the Guide me row keep at least 8px between them. */
html body #navigationGuide {
  position: absolute;
  left: 12px;
  bottom: var(--k-hotbar-clear, 56px);
  z-index: var(--z-hud, 10);
  max-width: calc(100vw - 24px);
  max-height: 60dvh;
  overflow-y: auto;
  box-sizing: border-box;
}
html body #navigationGuide .navigation-finder-fields {
  padding-bottom: 8px;
}
html body #navigationGuide input,
html body #navigationGuide select,
html body #navigationGuide button {
  min-height: var(--tap-min);
  max-width: 100%;
  box-sizing: border-box;
}
/* The second action bar's toggle sits beside the bar; on phones it moves above it. */
html body #hudBar2Toggle {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  width: var(--tap-min);
  height: var(--tap-min);
}
@media (max-width: 700px) {
  html body #hudBar2Toggle {
    right: auto;
    left: 50%;
    top: -52px;
    transform: translateX(-50%);
  }
}

/* K1-010: the Activity dock sat on the hotbar at tablet widths and on a landscape phone (overlap 272x66, 238x30, 275x30).
   The hotbar is centred, 56px above the bottom edge and 48..66px tall, so below 1100px the dock rides above it instead of beside it.
   Phones in portrait (max-width 600px) have their own stack in phone-layout.css and are not touched. */
@media (min-width: 601px) and (max-width: 1100px) {
  html body #mmorpgChat.k-chat { bottom: 184px !important; }
}
@media (min-width: 601px) and (max-height: 520px) {
  html body #mmorpgChat.k-chat { bottom: 112px !important; }
}
/* K4: phone landscape drops the hotbar to the bottom edge (single row, 44px slots), so the dock sits just above it. */
@media (min-width: 701px) and (max-height: 420px) and (orientation: landscape) {
  html body #mmorpgChat.k-chat { bottom: 68px !important; }
}

/* K1-011 / K1-013: nothing player-facing below 12px, chat channels readable, and 44px targets on touch.
   Measured before (desktop 1920x1080): 33 text nodes under 12px (chat tabs 9px, hotbar keys 8px, bar numbers 8px, Lv text 10px, zone label 10px,
   Show context 11px, Go 11px); chat tabs 22x16 with labels cut to "L..", "P..", "G..". Tabs now keep their whole label and the row scrolls sideways
   when the dock is narrow. Phones in portrait keep the stricter rules in phone-layout.css (it has higher specificity). */
html body #mmorpgChat .k-chat-tabs { overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; flex-wrap: nowrap; }
html body #mmorpgChat .k-chat-tabs::-webkit-scrollbar { display: none; }
html body #mmorpgChat .k-chat-tab { flex: 0 0 auto; min-width: 0; height: 24px; min-height: 24px !important; padding: 0 8px !important; font: 700 13px/1 Grenze Gotisch,Georgia,serif !important; overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (pointer: coarse) {
  html body #mmorpgChat .k-chat-tab { height: 44px; min-height: 44px !important; min-width: 44px; }
  html body #mmorpgChat .k-chat-toggle { min-width: 44px !important; min-height: 44px !important; height: 44px !important; width: 44px !important; }
  html body #mmorpgChat #mmorpgCommandInput, html body #mmorpgChat #mmorpgCommandSubmit { height: 44px; min-height: 44px; }
  /* Touch screens show the dock labels (fine pointers get icon-only buttons), so those labels need the 12px floor too. */
  html body #mmorpgUtilities button { font-size: 13px !important; line-height: 1.1 !important; }
}
/* ...which makes the tablet dock taller than the screen in two columns (497px at 768 high), so it scrolls inside itself instead. */
@media (pointer: coarse) and (min-width: 601px) and (min-height: 521px) {
  html body #mmorpgUtilities { max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); overflow-y: auto; overscroll-behavior: contain; }
}
html body .hud-top .hud-action .hud-caption, html body #kTouch .kt-btn { font-size: 13px; }
html body #mmorpgChat strong, html body #mmorpgChat .k-chat-head strong, html body #mmorpgChat .k-chat-head h3, html body div#kMessages, html body div#kMessages .k-msg { font-size: 13px !important; }
@media (max-width: 1100px) { html body #kheldraTopBar button { min-width: 48px; padding-left: 3px; padding-right: 3px; } }
html body #hudContextToggle, html body #mmorpgCommandSubmit, html body #kheldraAreaName, html body #mmorpgZone .k-zone-label,
html body .k-name, html body .k-coach-2, html body .k-coach-skip, html body .k-onb-title, html body .k-onb-txt, html body .k-tr-head,
html body .npc-bark, html body .k-tr-quest small, html body #kTracker b, html body #kTracker span, html body #kTracker small { font-size: 13px !important; }
html body #mmorpgChat #mmorpgCommandSubmit, html body #mmorpgChat form button, html body .k-bar.xp b, html body #kheldraTopBar button { font-size: 13px !important; }
html body #kheldraTopBar button { letter-spacing: 0; }
html body .k-bar, html body .k-bar.xp { height: 16px !important; }
html body .k-bar.xp b { line-height: 14px !important; }
html body .k-bar b { font: 700 13px/14px Grenze Gotisch,Georgia,serif; }
html body .k-level, html body .hud-bottom .hud-action .hud-key { font-size: 13px; }
html body .hud-bottom .hud-action .hud-key { line-height: 14px; }

/* K1-020: play.html now asks for viewport-fit=cover, so the page runs under the notch, the rounded corners and the home indicator.
   Margins (not offsets) move each fixed HUD group by the safe-area inset, so every per-breakpoint top/left/right/bottom rule keeps working.
   env() is 0 on screens without cutouts, so nothing moves there. Whole groups shift together, which keeps the stack spacing intact. */
@supports (margin: env(safe-area-inset-top)) {
  html body .hud-top, html body #kPlayerFrame, html body #kheldraTopBar, html body #hudContextToggle, html body #kTracker, html body .k-coach,
  html body .kheldra-next-steps, html body .k-onb, html body #mmorpgMinimap, html body #mmorpgZone, html body #mmorpgUtilities,
  html body #kaudioToggle, html body #khelpToggle, html body div#kMessages { margin-top: env(safe-area-inset-top, 0px); }
  html body #kPlayerFrame, html body #kTracker, html body .k-coach, html body .kheldra-next-steps, html body .k-onb, html body #mmorpgChat.k-chat,
  html body .k-lore-button, html body .hud-top { margin-left: env(safe-area-inset-left, 0px); }
  html body #mmorpgMinimap, html body #mmorpgZone, html body #mmorpgUtilities, html body .k-mg-button, html body .hud-top { margin-right: env(safe-area-inset-right, 0px); }
  html body .hud-bottom, html body #mmorpgChat.k-chat, html body .k-lore-button, html body .k-feat-button, html body .k-mg-button,
  html body #kTouch .kt-btns, html body #kTouch .kt-joy { margin-bottom: env(safe-area-inset-bottom, 0px); }
}

/* K1 layout fixes (Grenze Gotisch Light pass). */
/* K1-012: HUD chrome under the login/character gates is neither focusable nor hit-testable. */
body:has(#kheldraLogin:not([hidden])) :is(#mmorpgChat,.hud-bottom,#mmorpgMinimap,#mmorpgUtilities,#kTracker,.k-coach,.k-onb,#kPlayerFrame,#kheldraTopBar,#hudContextToggle,#kDockToggle,#khelpToggle,#kaudioToggle,#hudBar2Toggle){visibility:hidden}
/* K1-014/015: tracker sits below the player frame; coach below the compass and notices (desktop pointer). */
@media (min-width:1101px){
  html body #kTracker{top:112px}
  html body .k-coach{top:134px}
}
/* K1-017: zoom buttons stay inside the viewport, hanging off the minimap's right edge. */
@media (min-width:481px) and (max-width:1100px) and (min-height:600px){
  html body #kTracker{top:129px}
}
@media (min-width:481px){
  html body #mmorpgMinimap .mm-zoom{right:0!important;left:auto!important}
}
/* Tablet portrait: context toggle moves under the menu bar instead of sitting under its right end. */
@media (min-width:481px) and (max-width:900px){
  html body #hudContextToggle{position:fixed;top:66px;right:120px;left:auto;margin-right:0}
}
/* Phone landscape: coach clears the player frame and chat; checklist chip stays above chat. */
@media (max-height:480px) and (orientation:landscape){
  html body .k-coach{left:344px;right:auto;transform:none;top:100px;width:min(320px,calc(100vw - 344px - 150px))}
  html body .k-coach .k-coach-2,html body .k-coach .k-coach-skip{display:none}
  html body .k-onb .k-onb-btn{min-width:32px;min-height:32px}
}

/* K1b layout fixes. */
/* Player frame x topbar (tablets, phone landscape): compact frame, topbar starts right of it and scrolls instead of running under it. */
@media (min-width:481px) and (max-width:1100px){
  html body #kPlayerFrame{padding:4px 10px 4px 4px;gap:7px}
  html body #kPlayerFrame .k-portrait{width:48px;height:48px}
  html body #kPlayerFrame .k-bars{width:96px}
  html body #kheldraTopBar{left:200px;transform:none;max-width:calc(100vw - 200px - 150px);box-sizing:border-box;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  html body #kheldraTopBar::-webkit-scrollbar{display:none}
  html body #kheldraTopBar button{flex:0 0 auto}
}
/* Compass (desktop and tablet-landscape) sits above the notices; the coach prompt moves down with them. */
/* Toast log (#kMessages) starts 8px below the top bar (top 8px + --k-topbar-h + 8px), so it no longer covers the Shop label. */
@media (min-width:901px){
  html body div#kMessages{top:calc(var(--k-topbar-h,60px) + 16px)!important}
  html body .k-coach{top:160px}
}
/* Phone landscape: the checklist chip ends above the chat (chat top = 176px). Same specificity as compact-ui's .k-onb.k-onb, no !important. */
@media (max-height:480px) and (orientation:landscape){
  html body .k-onb.k-onb{top:112px;max-height:58px}
}
/* K1-018: login/character backdrop art never widens the page. */
html body #kheldraLogin>.k-backdrop,html body #kheldraCharacters>.k-backdrop{overflow:hidden;max-width:100vw}
html body #kheldraLogin,html body #kheldraCharacters{overflow-x:clip}
/* K1-016: 44px hit areas without moving anything. */
html body #kDockToggle::after,html body #kaudioToggle::after,html body #kTracker .k-tr-x::after,html body .k-onb .k-onb-btn::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
html body .k-onb .k-onb-btn{position:relative}
/* K1-019: phone landscape notices sit under the topbar and above the coach so the newest line is never clipped. */
@media (max-height:480px) and (orientation:landscape){
  html body div#kMessages{top:64px!important;max-height:34px!important}
}

/* K1c: leftover HUD overlaps measured after K1/K1b. */
/* Phone portrait: zone panel clears the dock toggle (zone b=411 vs dock t=402). */
@media (max-width:480px) and (orientation:portrait){
  html body #mmorpgZone{transform:translateY(-10px)}
}
/* Tablet landscape: utilities start below the zone panel (zone b=309 vs utilities t=292). */
@media (min-width:901px) and (max-width:1100px){
  html body #mmorpgUtilities{top:316px}
}
/* Phone landscape: minimap drops below the help and sound buttons (they end at y=51); context toggle stays clear of the zoom buttons. */
@media (max-height:480px) and (orientation:landscape){
  html body #mmorpgMinimap{top:54px!important}
  html body #hudContextToggle{right:132px}
  html body #mmorpgZone{transform:translateY(6px)}
}

/* K1d: the verify banner grew with the 1.10 font scale; keep its old height so it does not reach the coach/messages/context toggle below it. */
html body .k-verify-banner{line-height:1.05;padding-top:6px;padding-bottom:6px}
@media (max-height:480px) and (orientation:landscape){ html body .k-verify-banner.k-verify-banner{right:148px!important} }

/* ---- Favorite vendor star ---------------------------------------------- */
.vendor-fav {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  padding: 0 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #b9b49c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.vendor-fav[aria-pressed="true"] { color: #f2d777; }
.vendor-fav:hover, .vendor-fav:focus-visible { border-color: #b49a6a; outline: none; }
@media (pointer: coarse) { .vendor-fav { min-width: 44px; min-height: 44px; } }
.vendor-fav-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vendor-fav-chips button[aria-pressed="true"] { border-color: #f1d39a; color: #fff4d4; }
html body #mmorpgOverlay .merchant-identity { display: flex; align-items: center; gap: 6px; }

/* K4: remaining HUD overlaps after the 1.10 font scale. */
/* Minimap clears the sound toggle (audio button ends at y=50, minimap started at 48). */
@media (min-width:1101px){
  html body #mmorpgMinimap{top:54px}
}
/* Tablet portrait: 44px hotbar slots need a wider bar than the 285px-reserve rule in play.html allowed (483px at 768). */
@media (min-width:601px) and (max-width:900px){
  html body .hud-bottom{max-width:min(560px,calc(100vw - 205px))}
}
/* Phone landscape: one hotbar row at the bottom edge; row two and its toggle are hidden as on portrait phones. */
@media (min-width:701px) and (max-height:420px) and (orientation:landscape){
  html body .hud-bottom{bottom:6px}
  html body #hudBar2,html body #hudBar2Toggle{display:none!important}
  html body div#kMessages{top:66px!important}
  html body .k-coach{top:112px}
}
/* 44px hit areas without moving anything (same technique as K1-016). Dense fine-pointer icon grids (hotbar slots, utilities dock) are left alone. */
html body :is(.k-tr-head,.k-coach-skip,.k-coach-x,#kheldraTopBar button,#mmorpgChat .k-chat-tab,#mmorpgCommandSubmit,.k-verify-banner button){position:relative}
html body :is(#hudContextToggle,#khelpToggle,#hudMenuToggle,.k-tr-head,.k-coach-skip,.k-coach-x,#kheldraTopBar button,#mmorpgChat .k-chat-tab,#mmorpgCommandSubmit,.k-verify-banner button)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
/* Tablet landscape: the touch Menu/Loot/Run column sits left of the utilities dock instead of on top of it. */
@media (min-width:901px) and (max-width:1100px){
  html body #kTouch .kt-btns{right:190px}
}
/* Tablet portrait: notices (top 66px, up to 48px tall) end at 114px, so the coach starts below them. */
@media (min-width:481px) and (max-width:900px) and (min-height:481px){
  html body .k-coach{top:118px}
}

/* K5: leftovers after the 1.10 font scale. Phone portrait: the zone panel sits 4px lower and its line height is tighter, so the minimap zoom row (ends y=333) and the dock (starts y=402) both clear it;
   the coach moves 4px down so the tracker (ends y=226) does not sit under it. Same specificity as the phone-layout rules, and this file loads after them. */
@media (max-width:480px) and (orientation:portrait){
  html body #mmorpgZone{transform:translateY(-4px);line-height:1.05}
  html body .k-coach{top:228px}
  /* The dock tab's top is set inline by hud.js, so it moves with a transform: 6px lower it clears the zone panel's bottom edge. */
  html body #kDockToggle{transform:translateY(6px)}
}
/* Tablet touch (481-1100px): the menu dock buttons were 40px tall; 44px is the touch floor. Fine pointers keep the dense grid. */
@media (pointer:coarse) and (min-width:481px) and (max-width:1100px){
  html body #mmorpgUtilities button{min-height:44px}
}