/* Phone layout (480px and below). Loaded after the per-feature stylesheets, so it wins on equal specificity.
   Stack from the bottom: Activity dock, hotbar (two rows), launcher row (Lore | Features | Minigames).
   Top-left: vitals (untouched), context toggle, tracker, next-step card. Top-right: menu, sound, help,
   minimap with its zoom row, and the location card. Every tap target is at least 44px. Desktop is not affected. */
@media (max-width: 480px) {
  /* Right column: menu (in the top bar flow), sound and help stacked under it. */
  html body #hudMenuToggle.hud-action { width: 44px !important; min-width: 44px; height: 44px !important; min-height: 44px; }
  html body #kaudioToggle { top: 55px !important; right: 8px !important; left: auto !important; width: 44px !important; min-width: 44px; height: 44px !important; min-height: 44px; }
  /* help.js writes inline top/left/height next to the menu button; !important keeps it in the right column. */
  html body #khelpToggle { top: 103px !important; right: 8px !important; left: auto !important; width: 44px; min-width: 44px; height: 44px !important; min-height: 44px; padding: 0; }

  /* Minimap and location card sit below the help button. The zoom row sits under the minimap, not on it. */
  html body #mmorpgMinimap { width: 88px !important; height: 88px !important; top: 151px !important; right: 8px !important; }
  html body #mmorpgMinimap .mm-zoom { top: calc(100% + 4px) !important; bottom: auto !important; left: 0 !important; right: auto !important; width: 88px; height: 44px; }
  html body #mmorpgMinimap .mm-zoom > * { min-width: 44px; min-height: 44px; }
  html body #mmorpgZone { top: 291px !important; right: 8px !important; width: 76px !important; height: 76px !important; padding: 4px !important; font-size: 11px !important; }
  html body #mmorpgZone svg { width: 14px; height: 14px; }

  /* Left column: context toggle, then tracker, then next-step card. */
  html body #hudContextToggle { position: fixed; top: 146px; left: 8px; right: auto; z-index: var(--z-hud-top,19); min-height: 44px; padding: 4px 10px; font-size: 13px; }
  html body #kTracker { left: 8px; top: 196px; width: min(228px, calc(100vw - 132px)); max-height: 16vh; }
  html body #kTracker .k-tr-head { min-height: 44px; }
  html body #kTracker .k-tr-x { min-width: 44px; min-height: 44px; margin: -12px -12px -12px 0; }
  html body .k-coach { left: 8px; right: 120px; top: 290px; bottom: auto; transform: none; width: auto; padding: 2px 4px 2px 8px; }
  html body .k-coach .k-coach-2, html body .k-coach .k-coach-skip { display: none; }
  html body .k-coach .k-coach-1 { font-size: 13px; }
  html body .k-coach .k-coach-x { min-width: 44px; min-height: 44px; margin: -6px -8px -6px 0; }

  /* Launchers: one row above the hotbar. */
  html body .k-lore-button, html body .k-feat-button, html body .k-mg-button { min-width: 44px; min-height: 44px; padding: 4px 10px; font-size: 14.5px; bottom: 164px; }
  html body .k-lore-button { left: 8px; }
  html body .k-mg-button { left: auto; right: 8px; }
  html body .k-feat-button { left: 50%; transform: translateX(-50%); }

  /* Activity dock: one slim row at the bottom. */
  html body #mmorpgChat.k-chat { left: 6px; bottom: 4px; width: min(230px, 60vw); height: 44px; min-height: 44px; max-height: 44px; overflow: hidden; padding: 4px 6px; }
  html body #mmorpgChat.k-chat .k-chat-head { flex-wrap: nowrap; overflow-x: auto; }
  html body #mmorpgChat.k-chat .k-chat-toggle { min-width: 44px; min-height: 44px; margin: -12px -8px -12px 0; }

  /* Hotbar: two rows of 44px slots sitting above the Activity dock. Room on the right for the second-bar toggle. */
  html body #hudBar2, html body #hudBar2Toggle { display: none !important; }
  html body .hud-bottom { left: 4px; right: 4px; bottom: 54px; transform: none; width: auto; max-width: none; display: grid; grid-template-columns: repeat(5, 44px); justify-content: space-between; gap: 6px 0; padding: 5px 52px 5px 5px; }
  html body .hud-bottom .hud-action { width: 44px !important; min-width: 44px; height: 44px !important; min-height: 44px; max-height: none; padding: 0; }
  html body .hud-bottom .hud-action { background-position: center center; background-size: 70% auto, cover; background-origin: content-box, padding-box; }
  html body #hudBar2Toggle { right: 4px; top: 50%; width: 44px; min-width: 44px; height: 44px; min-height: 44px; transform: translateY(-50%); }
  html body #kDockToggle { width: 44px; min-width: 44px; height: 48px; }

  /* Next-step card and chat toasts: the toast sits under the next-step card on the left, clear of the location card. */
  html body div#kMessages { left: 8px !important; right: auto !important; top: 344px !important; transform: none; width: min(236px, calc(100vw - 16px)) !important; max-height: 48px !important; }
  html body div#kMessages:empty { display: none; }

  /* Quest markers are world-anchored: keep them under the HUD cards so no card is covered. */
  html body #questMarkers { z-index: 20; }

  /* Panels open above the launcher row and fit the phone width. */
  html body .k-lore-panel, html body .k-feat-panel, html body .k-mg-panel { left: 8px; right: 8px; width: auto; bottom: 212px; max-height: min(70vh, calc(100vh - 230px)); z-index: var(--z-window-base,1000); }
}

/* Phone width: the verify-email banner sits below the HUD layer (sheets and windows live in a z-index 2 stacking context; News is 10000),
   so it never draws over window content. It stays visible on the bare world view and is still dismissible. */
@media (max-width: 700px) {
  html body .k-verify-banner { z-index: 1; }
}

/* Phone width: the News / feedback popups keep a 16px gutter, scroll inside themselves and use readable text and 44px buttons. */
@media (max-width: 700px) {
  html body .k-player-back { padding: 16px; box-sizing: border-box; }
  html body .k-player { width: 100%; max-width: 100%; box-sizing: border-box; max-height: calc(100dvh - 96px); font-size: 16.5px; line-height: 1.45; padding: 14px; }
  html body .k-player-news p, html body .k-player-news h3 { font-size: 16.5px; }
  html body .k-player button { min-height: 44px; min-width: 44px; }
  html body .k-player h2 { font-size: 20px; }
}

/* Phone width: the character/context sheet (#hudMenu) is always on screen, so it sits in the band between the tracker and the
   round Menu / Loot / Run buttons instead of running down to the hotbar. Its list scrolls inside, and the touch buttons,
   hotbar and launchers stay uncovered. */
@media (max-width: 700px) {
  html body #hudMenu { top: auto !important; bottom: 315px !important; max-height: clamp(160px, calc(100dvh - 660px), 300px) !important; }
}


/* Phones: the verify notice sits above the action row (Menu, Loot, Run) so it never covers those buttons. */
@media (max-width: 700px) {
 html body .k-verify-banner.k-verify-banner { bottom: 330px !important; top: auto !important; }
}

/* Narrow phones (480px and below), pass 9: side menu, chat Go button, floating numbers, inventory, verify banner and tracker.
   Desktop (900px and up) is untouched; nothing here applies above 480px. */
@media (max-width: 480px) {
  /* Side menu: a scrolling band with a 16px gutter. Labels wrap at word boundaries, never mid-word, and the list scrolls
     so Group finder and News stay reachable. */
  html body #hudMenu { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; z-index: var(--z-menu,900); padding-left: 16px !important; padding-right: 16px !important; top: auto !important; bottom: 300px !important; max-height: clamp(200px, calc(100dvh - 560px), 300px) !important; overflow-y: auto !important; overscroll-behavior: contain; }
  html body #hudMenu .hud-group-links { padding-left: 0; padding-right: 0; }
  html body #hudMenu .hud-group-links a, html body #hudMenu .hud-group-links button { overflow-wrap: normal !important; word-break: normal !important; hyphens: none; min-width: 0; min-height: 44px; font-size: 14.5px; line-height: 1.2; white-space: normal; text-align: left; }
  html body #hudMenu details.hud-group > summary { overflow-wrap: normal; word-break: normal; }

  /* Floating combat and XP numbers draw under the HUD layers (menu, cards, hotbar), not over them. */
  html body #kFxLayer { z-index: 1; }

  /* Activity dock: the command row (input and Go) is part of the dock, so the dock grows to show it in full.
     The hotbar, launchers and panels move up by the same amount. */
  html body #mmorpgChat.k-chat { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
  html body #mmorpgChat.k-chat .k-chat-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  html body #mmorpgChat.k-chat #mmorpgCommandForm { display: flex; gap: 4px; align-items: stretch; width: 100%; box-sizing: border-box; }
  html body #mmorpgChat.k-chat #mmorpgCommandForm input { min-width: 0; flex: 1 1 auto; min-height: 44px; }
  html body #mmorpgChat.k-chat #mmorpgCommandForm button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }

  html body .hud-bottom { bottom: 137px; }
  html body .k-lore-button, html body .k-feat-button, html body .k-mg-button { bottom: 247px; }
  html body .k-lore-panel, html body .k-feat-panel, html body .k-mg-panel { bottom: 295px; max-height: min(70vh, calc(100dvh - 330px)); }

  /* Quest tracker: a short card at the top-left, scrolling inside, so the map centre stays clear. */
  html body #kTracker { max-height: 88px !important; }

  /* Verify-email banner: one compact strip. The message takes the free width and wraps; buttons keep 44px. */
  html body .k-verify-banner.k-verify-banner { left: 8px !important; right: 52px !important; width: auto !important; max-height: 60px; padding: 4px 8px !important; overflow: hidden; }
  html body .k-verify-banner.k-verify-banner span { flex: 1 1 150px; min-width: 0; overflow-wrap: normal; word-break: normal; }
  html body .k-verify-banner.k-verify-banner button { flex: 0 0 auto; }

  /* Inventory: equipment doll uses a bigger cell, labels wrap at word breaks and ellipsize instead of splitting mid-word,
     and the item grid gets the remaining height so it shows several rows. */
  html body #mmorpgOverlay .k-inv { grid-template-rows: auto minmax(0, 1fr); }
  html body #mmorpgOverlay .k-inv-equip { grid-template-rows: auto auto; align-content: start; }
  html body #mmorpgOverlay .k-doll { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(4, 38px); gap: 4px; }
  html body #mmorpgOverlay .k-equip { width: 46px; height: 38px; }
  html body #mmorpgOverlay .k-equip-label { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: 9px; letter-spacing: 0; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
  html body #mmorpgOverlay .k-inv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(44px, auto); }
}

/* Phone width: the side menu (utility dock) buttons are wide enough for their longest word ("Character"), and labels wrap
   only at word boundaries. css-hardening sets overflow-wrap:anywhere on these buttons, which split words mid-word. */
@media (max-width: 480px) {
  /* The side menu stops above the round Menu / Loot / Run buttons and scrolls inside itself, so Group finder and News stay reachable. */
  html body #mmorpgUtilities { grid-template-columns: repeat(2, 60px) !important; gap: 4px; max-height: max(160px, calc(100dvh - 582px)) !important; overflow-y: auto; overscroll-behavior: contain; }
  html body #mmorpgUtilities button { width: 60px !important; padding-left: 3px !important; padding-right: 3px !important; font-size: 11px !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none; }
}

/* ===== Phone layout, cycle 14 (max-width 600px): clean stack for 412x915 and 390x844 portrait phones =====
   Nothing here applies above 600px, so desktop and tablet rules above are untouched. This block loads last in this file, so it wins
   over the 480px passes above on equal specificity.
   Top to bottom, left column: character card, game menu bar (its own row, scrolls sideways), then one-line rows for the context toggle,
   Quests (tap to open), next step and Next steps (tap to open). Right column: Menu, sound, help, minimap with its zoom row, location card.
   Bottom: Activity dock (tabs scroll sideways, input row), hotbar (two rows of 56px slots), launchers, then the Menu / Loot / Run circles.
   --k-dock-h is the dock height; the hotbar, launchers, circles and side menu are all placed from it, so an open dock moves them up instead of covering them.
   Every tap target is at least 44px. */
@media (max-width: 600px) {
  html body { --k-dock-h: 104px; --k-rcol: 112px; --k-slot: 56px; --k-hotbar-clear: calc(var(--k-dock-h) + 72px); }
  html body:has(#mmorpgChat:not(.k-chat-collapsed)) { --k-dock-h: 196px; }

  /* Game menu bar: its own row under the character card instead of sitting over it. Scrolls sideways when the icons do not fit. */
  html body #kheldraTopBar { position: fixed; top: 116px; left: 8px; right: 64px; transform: none; width: auto; max-width: none; box-sizing: border-box; justify-content: flex-start; flex-wrap: nowrap; gap: 2px; padding: 3px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  html body #kheldraTopBar::-webkit-scrollbar { display: none; }
  html body #kheldraTopBar button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }

  /* Right column: minimap is larger, its zoom row sits under it, and the location card is a compact card that fits the column. */
  /* K1-009: the menu bar is 116..168px, so the minimap column starts at 172px (it used to start at 151 and sat under the bar's right end). */
  html body #mmorpgMinimap { width: var(--k-rcol) !important; height: var(--k-rcol) !important; top: 172px !important; right: 8px !important; }
  /* The minimap is a clipped circle; the zoom buttons live just below it, so the circle clips its canvas instead of the whole box. */
  html body #mmorpgMinimap { overflow: visible; }
  html body #mmorpgMinimap canvas { border-radius: 50%; }
  html body #mmorpgMinimap .mm-zoom { width: var(--k-rcol); }
  html body #mmorpgZone { top: calc(172px + var(--k-rcol) + 54px) !important; right: 8px !important; width: var(--k-rcol) !important; height: auto !important; min-height: 0; box-sizing: border-box; padding: 3px 6px !important; font-size: 12px !important; overflow: hidden; }
  html body #mmorpgZone #kheldraAreaName { overflow-wrap: anywhere; }

  /* Left column: one 44px row each. The context toggle and Quests share the first row. */
  html body #hudContextToggle { top: 174px; left: 8px; width: 100px; min-width: 44px; min-height: 44px; box-sizing: border-box; }
  html body #kTracker { top: 174px; left: 114px; right: auto; width: calc(100vw - 114px - var(--k-rcol) - 16px); min-width: 120px; box-sizing: border-box; max-height: 160px !important; padding: 0 6px 6px; }
  html body #kTracker .k-tr-head { min-height: 44px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .k-coach { top: 224px; left: 8px; right: calc(var(--k-rcol) + 16px); min-height: 44px; box-sizing: border-box; align-items: center; }
  html body .k-coach .k-coach-1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  html body .k-coach .k-coach-x { margin: 0 -4px 0 0; }

  /* Next steps: docked in the left column on phones (next-steps.css holds the rest). A dragged or resized frame keeps its saved spot. */
  html body .kheldra-next-steps, html body .kheldra-next-steps-chip { top: 274px; bottom: auto; left: 8px; }
  html body .kheldra-next-steps { width: calc(100vw - 16px - var(--k-rcol) - 8px); max-width: none; }

  /* Activity dock: full width. Tabs and the open/close button share one row (tabs scroll sideways, never clip), the input row is below. */
  html body #mmorpgChat.k-chat.k-chat { left: 6px; right: 6px; bottom: 4px; width: auto !important; max-width: none; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px !important; }
  html body #mmorpgChat .k-chat-head { display: contents; }
  html body #mmorpgChat .k-chat-head strong { display: none; }
  html body #mmorpgChat .k-chat-tabs { order: 1; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 4px; overflow-x: auto !important; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  html body #mmorpgChat .k-chat-tabs::-webkit-scrollbar { display: none; }
  html body #mmorpgChat .k-chat-tabs .k-chat-tab.k-chat-tab { flex: 0 0 auto; min-width: 44px; height: 44px; min-height: 44px !important; padding: 0 12px !important; font-size: 13px !important; overflow: visible; text-overflow: clip; white-space: nowrap; }
  html body #mmorpgChat .k-chat-toggle.k-chat-toggle { order: 2; flex: 0 0 auto; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; }
  html body #mmorpgChat .k-chat-log { order: 3; flex: 0 0 100%; height: 84px; max-height: 84px; font-size: 13px; }
  html body #mmorpgChat .k-chat-log * { font-size: 13px !important; }
  html body #mmorpgChat #mmorpgCommandForm { order: 4; flex: 0 0 100%; margin: 0; }
  html body #mmorpgChat.k-chat #mmorpgCommandForm input { height: 44px; font-size: 15.5px !important; }
  html body #mmorpgChat.k-chat #mmorpgCommandForm button { height: 44px; min-width: 56px; font-size: 14.5px !important; }

  /* Hotbar: two rows of larger slots directly above the dock. */
  html body .hud-bottom { left: 6px; right: 6px; bottom: calc(var(--k-dock-h) + 8px); grid-template-columns: repeat(5, var(--k-slot)); padding: 6px; }
  html body .hud-bottom .hud-action { width: var(--k-slot) !important; min-width: var(--k-slot); height: var(--k-slot) !important; min-height: var(--k-slot); background-size: 72% auto, cover; }
  /* Row two (#hudBar2, slots 11 to 20) and its toggle are hidden on phones, as in the 480px block. */
  html body #hudBar2, html body #hudBar2Toggle { display: none !important; }

  /* Launchers sit above the hotbar; the Menu / Loot / Run circles sit above the launchers, right-aligned, clear of every other control. */
  html body .k-lore-button, html body .k-feat-button, html body .k-mg-button { bottom: calc(var(--k-dock-h) + 150px); }
  html body #kTouch .kt-joy { bottom: calc(var(--k-dock-h) + 150px); }
  html body #kTouch .kt-btns { bottom: calc(var(--k-dock-h) + 202px); right: 8px; }
  html body .k-lore-panel, html body .k-feat-panel, html body .k-mg-panel { bottom: calc(var(--k-dock-h) + 202px); max-height: calc(100dvh - var(--k-dock-h) - 260px); }

  /* The character / side menu sheet and the verify-email strip stop above the circles and scroll inside themselves. */
  html body #hudMenu { bottom: calc(var(--k-dock-h) + 256px) !important; max-height: clamp(200px, calc(100dvh - var(--k-dock-h) - 560px), 300px) !important; }
  html body:has(#kheldraTopBar:not([hidden])) .k-verify-banner.k-verify-banner { top: auto !important; bottom: calc(var(--k-dock-h) + 256px) !important; }
}

/* Narrow phones (380px and below, for example 360px): a slightly smaller right column so the left column keeps its width. */
@media (max-width: 380px) {
  html body { --k-rcol: 96px; --k-slot: 52px; }
}