/* Phone HUD: keep a clear map between the top controls and the build dock.
 * Measured bounds from mobile.ts keep drawers and guidance aligned after resize. */
.mobile-dock-head, .mobile-map-toggle, .mobile-lb-close { display: none; }

@media (max-width: 900px), (max-width: 1100px) and (max-height: 500px) {
  #ui {
    --mobile-left: max(6px, env(safe-area-inset-left));
    --mobile-right: max(6px, env(safe-area-inset-right));
    --mobile-top: max(6px, env(safe-area-inset-top));
    --mobile-build-bottom: max(6px, env(safe-area-inset-bottom));
    --mobile-top-bottom: 106px;
    --mobile-build-height: 184px;
    --mobile-dock-top: calc(100dvh - var(--mobile-build-height) - var(--mobile-build-bottom));
  }
  #ui .mobile-build-toggle, #ui .mobile-map-toggle, #ui .mobile-lb-close {
    color: var(--parch); background: #1c3029; border: 1px solid var(--line);
    border-radius: 8px; font-family: var(--font-body); cursor: pointer; pointer-events: auto;
    touch-action: manipulation;
  }
  #ui .mobile-map-icon { margin-right: 5px; }
  #ui .topbar {
    top: var(--mobile-top); left: var(--mobile-left); right: var(--mobile-right);
    height: 100px; padding: 4px; display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 46px 44px; gap: 2px; border-radius: 12px; overflow: visible;
  }
  #ui .tb-res {
    grid-row: 1; width: 100%; min-width: 0; gap: 4px; height: 46px;
    overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: #b9a27455 transparent;
  }
  #ui .tb-res::-webkit-scrollbar { display: block; height: 2px; }
  #ui .tb-res::-webkit-scrollbar-thumb { background: #b9a27455; border-radius: 2px; }
  #ui .chip.res {
    flex: 0 0 66px; min-width: 66px; height: 44px; padding: 5px 6px;
    grid-template-columns: 17px minmax(0, 1fr); column-gap: 4px; row-gap: 2px;
  }
  #ui .chip.res .chip-icon { font-size: 17px; }
  #ui .chip.res .chip-name { font-size: 9px; letter-spacing: .035em; }
  #ui .chip.res .chip-amt { font-size: 14px; line-height: 16px; }
  #ui .chip.res .chip-delta { display: none; }
  #ui .tb-right { grid-row: 2; justify-content: flex-end; min-width: 0; gap: 3px; }
  #ui .tb-right > .btn-top, #ui .tb-right > .discord-top { display: none; }
  #ui .settings-menu .mobile-only-item { display: flex; }
  #ui .chip.day .chip-icon { display: none; }
  #ui .population-chip, #ui .idle-chip {
    position: absolute; left: 5px; bottom: 4px; height: 44px; min-width: 74px;
    justify-content: center; font-size: 13px; padding: 5px; border-radius: 7px;
  }
  #ui .idle-chip { left: 82px; min-width: 42px; font-size: 12px; }
  #ui .chip.day { padding: 4px; font-size: 11px; max-width: calc(100% - 125px); overflow: hidden; }
  #ui .chip.day .chip-amt { overflow: hidden; text-overflow: ellipsis; }
  #ui .online-chip { display: none; }
  #ui .settings-wrap > .btn-top { width: 44px; height: 44px; font-size: 19px; border: 1px solid var(--line); }
  #ui .alpha-tag { display: none; }

  /* Permanent shortcuts use one row; their full details open on demand. */
  #ui .journal-launch.camp-launch, #ui .adventure-launch, #ui .chronicle {
    top: calc(var(--mobile-top-bottom) + 6px); width: calc((100% - var(--mobile-left) - var(--mobile-right) - 12px) / 3);
    height: 44px; min-height: 44px; margin: 0; border-radius: 9px;
  }
  #ui .journal-launch.camp-launch {
    left: var(--mobile-left); padding: 8px; align-items: center; justify-content: center;
  }
  #ui .journal-launch.camp-launch::before { content: '🏛 Council'; font: 600 12px var(--font-body); white-space: nowrap; }
  #ui .journal-launch.camp-launch > * { display: none; }
  #ui .adventure-launch {
    left: calc(var(--mobile-left) + (100% - var(--mobile-left) - var(--mobile-right) - 12px) / 3 + 6px);
    right: auto; padding: 8px; display: flex; align-items: center; justify-content: center;
  }
  #ui .adventure-launch::before { content: '🧭 Explore'; font: 600 12px var(--font-body); white-space: nowrap; }
  #ui .adventure-launch > * { display: none; }
  #ui .adventure-launch.ready::after { content: ''; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--gold-bright); }
  #ui .chronicle { right: var(--mobile-right); left: auto; z-index: 43; padding: 0; }
  #ui .chron-head { height: 44px; min-height: 44px; width: 100%; padding: 6px; gap: 3px; font-size: 11px; justify-content: center; letter-spacing: 0; }
  #ui .chron-title { font-size: 11px; white-space: nowrap; }
  #ui .chron-body {
    position: absolute; right: -1px; top: 49px;
    width: calc(100vw - var(--mobile-left) - var(--mobile-right));
    max-height: min(40dvh, calc(var(--mobile-dock-top) - var(--mobile-top-bottom) - 65px));
    overflow-y: auto; overscroll-behavior: contain; padding: 10px;
    background: var(--panel-deep); border: 1px solid var(--line); border-radius: 10px;
  }
  #ui .chat, body:has(.journal-launch:not(.hidden)) #ui .chat {
    top: calc(var(--mobile-top-bottom) + 56px); left: var(--mobile-left);
    width: min(220px, calc(100% - 100px)); z-index: 31;
  }
  #ui .chat:not(.typing) .chat-lines { display: none; }
  #ui .chat-input-row { opacity: 1; margin: 0; }
  #ui .chat-prompt { display: none; }
  #ui .chat-input { height: 44px; min-width: 0; font-size: 16px; padding: 7px 10px; background: #142522cc; border-radius: 8px; }
  #ui .chat.typing { width: calc(100% - var(--mobile-left) - var(--mobile-right)); z-index: 49; }
  #ui .chat.typing .chat-lines { max-height: 24dvh; overflow-y: auto; padding: 8px; background: var(--panel-deep); }
  #ui .mobile-map-toggle {
    display: block; position: absolute; top: calc(var(--mobile-top-bottom) + 56px); right: var(--mobile-right);
    min-width: 72px; height: 44px; padding: 8px; font-size: 12px; z-index: 32;
  }
  #ui .minimap-wrap { display: none; }
  #ui.mobile-map-open .minimap-wrap {
    display: block; top: calc(var(--mobile-top-bottom) + 106px); right: var(--mobile-right); bottom: auto;
    padding: 7px; z-index: 44; width: min(210px, 60vw); max-height: calc(100dvh - var(--mobile-top-bottom) - 118px); overflow: auto;
  }
  #ui.mobile-map-open #minimap { width: 100%; height: auto; aspect-ratio: 1; }
  #ui .mm-head { display: none; }
  #ui .toasts {
    top: calc(var(--mobile-top-bottom) + 106px); right: var(--mobile-right);
    width: min(290px, calc(100% - var(--mobile-left) - var(--mobile-right))); max-height: 24dvh; overflow: hidden;
    pointer-events: none;
  }
  #ui .toasts .toast { font-size: 12px; pointer-events: auto; }
  #ui .toasts .toast:nth-child(n+3) { display: none; }

  #ui .buildbar {
    left: var(--mobile-left); right: var(--mobile-right); bottom: var(--mobile-build-bottom);
    width: auto; max-width: none; padding: 5px; gap: 3px; transform: none; z-index: 42;
    max-height: min(48dvh, 280px); overflow-x: hidden; overflow-y: auto; border-radius: 12px; overscroll-behavior: contain;
  }
  #ui .dock-head { display: none; }
  #ui .mobile-dock-head { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 44px; gap: 8px; padding-left: 5px; }
  #ui .mobile-dock-title { font: 600 13px var(--font-body); color: var(--gold-bright); }
  #ui .mobile-build-toggle { height: 44px; min-height: 44px; padding: 4px 10px; font-size: 12px; }
  #ui .bld-tabs { min-width: 0; flex: none; gap: 3px; margin: 0; padding-bottom: 3px; overflow-x: auto; touch-action: pan-x; }
  #ui .bld-tab { flex: 0 0 auto; min-height: 44px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  #ui .bld-row { min-width: 0; flex: none; gap: 5px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scroll-snap-type: x proximity; padding-bottom: 3px; }
  #ui .bld-btn { flex: 0 0 76px; width: 76px; min-height: 83px; height: 83px; gap: 1px; padding: 3px; scroll-snap-align: start; }
  #ui .bld-preview, #ui .bld-icon { width: 64px; height: 40px; font-size: 25px; }
  #ui .bld-name { display: block; font-size: 11px; line-height: 14px; white-space: normal; }
  #ui .bld-cost { display: block; font-size: 10px; line-height: 13px; }
  #ui .bld-key { display: none; }
  #ui .bld-btn .tip { display: none; }
  /* Hover-only cards otherwise linger over the next recipe after a phone tap. */
  #ui .crafttip { display: none; }
  #ui .restip {
    left: var(--mobile-left) !important; right: var(--mobile-right) !important;
    width: auto; min-width: 0; max-width: none; max-height: 45dvh; overflow-y: auto;
  }
  #ui .chop-mode { flex: none; margin: 0; padding: 0; }
  #ui .chop-mode button { min-height: 44px; }
  #ui .forestry-build-hint { margin: 2px; font-size: 11px; line-height: 15px; }
  #ui.mobile-build-collapsed .bld-tabs, #ui.mobile-build-collapsed .bld-row,
  #ui.mobile-build-collapsed .chop-mode, #ui.mobile-build-collapsed .forestry-build-hint { display: none; }
  #ui.mobile-build-collapsed .mobile-dock-head, #ui.mobile-build-collapsed .mobile-build-toggle { min-height: 44px; }

  #ui .tut-card, #ui .tut-card.tut-opening {
    left: var(--mobile-left); right: var(--mobile-right); width: auto; transform: none;
    padding: 10px; gap: 5px 8px; border-radius: 10px; z-index: 40;
    max-height: max(64px, min(180px, calc(100dvh - var(--tutorial-bottom) - var(--mobile-top-bottom) - 106px)));
    overflow-x: hidden; overflow-y: auto;
  }
  #ui .tut-text, #ui .tut-opening .tut-text { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
  #ui .tut-opening .tut-progress { min-width: 0; font-size: 10px; letter-spacing: .035em; }
  #ui .tut-skip { min-width: 44px; min-height: 44px; position: sticky; top: 0; font-size: 16px; background: #182a24; }
  #ui .tut-craft-status { font-size: 12px; }
  #ui .tut-opening:has(.tut-crafting:not(.hidden)) .tut-crafting { grid-row: 2; grid-column: 1; }
  #ui .tut-opening:has(.tut-crafting:not(.hidden)) .tut-text { grid-row: 3; grid-column: 1 / -1; }
  #ui .hintbar {
    top: auto; left: var(--mobile-left); right: var(--mobile-right); transform: none; width: auto; max-width: none;
    bottom: calc(var(--mobile-build-height) + var(--mobile-build-bottom) + 6px); padding: 8px; gap: 6px;
  }
  #ui .hint-txt { min-width: 0; font-size: 12px; line-height: 1.4; }
  #ui .hintbar button { flex: none; width: 44px; min-height: 44px; }
  #ui:has(.tut-card:not(.hidden)) .hintbar, #ui:has(.sel-panel:not(.hidden)) .hintbar { display: none; }
  #ui .relocate-warn, #ui .pier-rotate-chip { bottom: calc(var(--mobile-build-height) + var(--mobile-build-bottom) + 6px); max-width: calc(100vw - 20px); font-size: 12px; }
  #ui:has(.tut-card:not(.hidden)) .relocate-warn { display: none; }
  #ui .lag-chip { top: calc(var(--mobile-top-bottom) + 106px); max-width: calc(100vw - 20px); }
  #ui .mobile-lb-close { display: block; margin-left: auto; min-width: 44px; min-height: 44px; }
}

/* A landscape phone has room beside the build menu, not above it. */
@media (min-width: 500px) and (max-width: 1100px) and (max-height: 500px) {
  #ui .topbar { height: 52px; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: 44px; gap: 6px; }
  #ui .tb-res { grid-column: 1; grid-row: 1; }
  #ui .tb-right { grid-column: 2; grid-row: 1; }
  #ui .population-chip { left: auto; right: 156px; bottom: 3px; min-width: 60px; }
  #ui .idle-chip { display: none; }
  #ui .chip.day { max-width: 99px; }
  #ui .journal-launch.camp-launch, #ui .adventure-launch, #ui .chronicle { width: 116px; }
  #ui .adventure-launch { left: calc(var(--mobile-left) + 122px); }
  #ui .chronicle { left: calc(var(--mobile-left) + 244px); right: auto; }
  #ui .chron-body { right: auto; left: -244px; width: min(430px, calc(100vw - 20px)); max-height: calc(100dvh - var(--mobile-top-bottom) - 62px); }
  #ui .chat, body:has(.journal-launch:not(.hidden)) #ui .chat { top: calc(var(--mobile-top-bottom) + 6px); left: calc(var(--mobile-left) + 366px); width: calc(100% - 464px); }
  #ui .mobile-map-toggle { top: calc(var(--mobile-top-bottom) + 6px); }
  #ui.mobile-map-open .minimap-wrap, #ui .toasts { top: calc(var(--mobile-top-bottom) + 56px); }
  #ui .buildbar { left: calc(50% + 3px); max-height: calc(100dvh - var(--mobile-top-bottom) - 62px); }
  #ui .tut-card, #ui .tut-card.tut-opening {
    right: calc(50% + 3px);
    max-height: max(64px, min(180px, calc(100dvh - var(--tutorial-bottom) - var(--mobile-top-bottom) - 56px)));
  }
  #ui .hintbar { right: calc(50% + 3px); bottom: var(--mobile-build-bottom); }
}