#neighborhood-ui {
  position: fixed;
  /* Keep the always-clickable balance/shop/voice HUD above this contextual
     map UI even during its one-frame measurement/update cycle. */
  z-index: 299;
  top: var(--neighborhood-hud-bottom, 60px);
  right: var(--neighborhood-hud-gutter, 14px);
  max-width: calc(100vw - var(--neighborhood-hud-gutter, 14px) - var(--neighborhood-hud-gutter, 14px));
  font: 14px 'Press Start 2P', monospace;
  color: #fff;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

#neighborhood-nav {
  pointer-events: none;
  background: rgba(21, 36, 56, 0.95);
  border: 2px solid #86b9d8;
  border-radius: 12px;
  padding: 9px 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

#neighborhood-title {
  color: #f5ce64;
  text-shadow: 1px 1px 0 #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Walking keeps the map unobscured without removing the nav from flex flow:
   any open home/shop panel remains below the reserved base HUD area. */
#neighborhood-ui.neighborhood-walking #neighborhood-title {
  opacity: 0.65;
}

#neighborhood-panel-toggle { pointer-events: auto; white-space: nowrap; }
#neighborhood-ui.panels-collapsed #home-panel,
#neighborhood-ui.panels-collapsed #shop-panel { display: none !important; }
/* Inventory is the single surface for selecting stored furniture. Keep the
   location plaque visible, but do not stack its larger contextual panel over
   an open inventory. Cashier conversations are active tasks and temporarily
   take priority over the inventory HUD. */
#neighborhood-ui.inventory-open #home-panel { display: none !important; }
#neighborhood-ui.inventory-open #neighborhood-panel-toggle { display: none; }
#neighborhood-ui.cashier-active ~ #inventory-hotbar { visibility: hidden; }
#neighborhood-panel-toggle:focus-visible { outline: 2px solid #f5ce64; outline-offset: 2px; }

#neighborhood-nav button, #home-panel button, #shop-panel button {
  font-family: inherit;
  font-size: 11px;
  color: #fff;
  background: #285271;
  border: 1px solid #427a9b;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

#neighborhood-nav button:hover, #home-panel button:hover, #shop-panel button:hover {
  background: #427a9b;
  transform: translateY(-1px);
}

#neighborhood-nav button:active, #home-panel button:active, #shop-panel button:active {
  transform: translateY(1px);
}

#home-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

#home-panel {
  pointer-events: auto;
  background: rgba(21, 36, 56, 0.95);
  border: 2px solid #86b9d8;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
  width: min(370px, calc(100vw - var(--neighborhood-hud-gutter, 14px) - var(--neighborhood-hud-gutter, 14px)));
  max-width: 100%;
  max-height: calc(100dvh - var(--neighborhood-hud-bottom, 60px) - 62px);
  overflow-y: auto;
  line-height: 1.45;
  font-family: monospace;
  font-size: 13px;
}

#home-panel b {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #f5ce64;
  display: block;
  margin: 0;
}
.home-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.home-panel-head b { flex: 1; }
.home-panel-note { display: block; color: #bad1e0; padding: 4px 2px; }

.home-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 9px;
  margin-bottom: 8px;
  border: 1px solid rgba(134, 185, 216, 0.3);
}

.home-section small {
  display: block;
  color: #bad1e0;
  margin-bottom: 8px;
  font-weight: bold;
}

.home-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
  padding: 6px 8px;
  background: #22384b;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.home-directory { max-height: 160px; overflow-y: auto; }
.home-directory-item { display: block; width: 100%; margin: 3px 0; text-align: left; color: #d7e7d2; }
.home-directory-item.selected { border-color: #f5ce64; background: #2a475e; }
.home-pager { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.home-pager button:disabled { cursor: default; opacity: 0.45; transform: none; }
.home-invite { display: flex; gap: 5px; margin: 8px 0; }
.home-invite input { min-width: 0; flex: 1; margin-right: 0 !important; }
.home-editor-controls > small { margin-top: 10px; }
.home-section[data-house-colors] { border-color: rgba(245, 206, 100, 0.48); }
.home-section[data-house-colors] [role="group"] button {
  min-width: 76px;
  border-radius: 5px;
  font-size: 10px;
}
.home-section[data-house-colors] [role="group"] button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #f5ce64, 0 2px 8px rgba(0, 0, 0, 0.5);
}
.construction-panel { border-color: rgba(245, 206, 100, 0.58); }
.construction-copy, .construction-archive { color: #d9e8b1 !important; font-weight: normal !important; }
.construction-complete { color: #f5dc84 !important; }
.construction-step { width: calc(100% - 16px); justify-content: space-between; }
.construction-step > span { min-width: 0; }
.construction-step small { display: inline; margin: 0 0 0 4px; color: #bad1e0; }
.construction-step.built { border-color: #77995c; background: #29452f; }

.home-item.selected {
  border-color: #f5ce64;
  background: #2a475e;
}

#home-panel input, #home-panel select {
  font-family: monospace;
  font-size: 13px;
  padding: 6px 10px;
  background: #111e2b;
  border: 1px solid #427a9b;
  color: #fff;
  border-radius: 6px;
  margin-right: 8px;
}

#home-panel input:focus, #home-panel select:focus {
  outline: none;
  border-color: #f5ce64;
}

/* Hide scrollbar for a cleaner look */
#home-panel::-webkit-scrollbar {
  width: 8px;
}
#home-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
#home-panel::-webkit-scrollbar-thumb {
  background: #427a9b;
  border-radius: 4px;
}

#shop-panel {
  pointer-events: auto;
  width: min(370px, calc(100vw - var(--neighborhood-hud-gutter, 14px) - var(--neighborhood-hud-gutter, 14px)));
  max-width: 100%;
  max-height: calc(100dvh - var(--neighborhood-hud-bottom, 60px) - 62px);
  overflow: auto;
  padding: 16px;
  background: #152438f5;
  border: 2px solid #86b9d8;
  border-radius: 12px;
  font: 14px/1.6 monospace;
}

/* Cashier dialogue is anchored to the NPC by neighborhood-ui.js instead of
   occupying the persistent HUD column. Inline left/top are updated once per
   animation frame from the Phaser camera transform. */
#shop-panel.cashier-speech-bubble {
  position: fixed;
  z-index: 340;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: none;
  padding: 11px;
  overflow: visible;
  background: rgba(21, 36, 56, 0.97);
  border: 2px solid #f5ce64;
  border-radius: 12px;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.68);
  font: 12px/1.42 monospace;
  transition: opacity 0.08s ease;
}
#shop-panel.cashier-speech-bubble::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--cashier-tail-x, 50%);
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #152438;
  border-right: 2px solid #f5ce64;
  border-bottom: 2px solid #f5ce64;
  transform: translateX(-50%) rotate(45deg);
}
#shop-panel.cashier-speech-bubble .cashier-speech-content {
  position: relative;
  z-index: 1;
  max-height: min(62dvh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
}
#shop-panel.cashier-speech-bubble[data-tail="top"]::after {
  top: -8px;
  bottom: auto;
  border: 0;
  border-left: 2px solid #f5ce64;
  border-top: 2px solid #f5ce64;
}
#shop-panel.cashier-speech-bubble .home-panel-head {
  margin-bottom: 5px;
}
#shop-panel.cashier-speech-bubble .home-panel-head b {
  font-size: 10px;
}
#shop-panel.cashier-speech-bubble .home-panel-note {
  padding: 2px 1px;
  font-size: 11px;
}
#shop-panel.cashier-speech-bubble .home-section {
  padding: 6px;
  margin-bottom: 5px;
}
#shop-panel.cashier-speech-bubble .home-section small {
  margin-bottom: 5px;
}
#shop-panel.cashier-speech-bubble .home-item {
  gap: 5px;
  margin: 2px 0;
  padding: 4px 5px;
}
#shop-panel.cashier-speech-bubble button {
  font-size: 10px;
  padding: 5px 7px;
}
#shop-panel.cashier-speech-bubble .showroom-section {
  margin-bottom: 0;
}
body:not(.playing) #neighborhood-ui { display: none; }
@media (max-width: 600px) {
  #coin-hud { top: 64px !important; right: 8px !important; }
  #neighborhood-ui {
    --neighborhood-hud-gutter: 8px;
    top: var(--neighborhood-hud-bottom, 52px);
    right: var(--neighborhood-hud-gutter);
  }
  #home-panel, #shop-panel {
    width: min(350px, calc(100vw - var(--neighborhood-hud-gutter) - var(--neighborhood-hud-gutter)));
    max-height: calc(100dvh - var(--neighborhood-hud-bottom, 52px) - 56px);
  }
  #shop-panel.cashier-speech-bubble {
    width: min(350px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: none;
    padding: 9px;
  }
  #shop-panel.cashier-speech-bubble .cashier-speech-content {
    max-height: min(68dvh, 520px);
  }
  #neighborhood-nav { padding: 7px 9px; }
}