/* HALWAHAS city UI. Opt-in map shell only; room/runtime styles stay unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

html body.hw-city-ui:not(.in-shop) {
  --hw-city-ink: #242424;
  --hw-city-muted: #666;
  --hw-city-yellow: #ffe500;
  --hw-city-neutral: #f1f3f5;
  --hw-city-focus: #079ceb;
  --hw-city-header: 76px;
  --hw-city-mobile-panel: 252px;
}
html body.hw-city-ui:not(.in-shop) :is(.topbar, #map-view, #search-results) {
  font-family: Onest, Arial, sans-serif;
  color: var(--hw-city-ink);
}
html body.hw-city-ui:not(.in-shop) .topbar {
  display: grid;
  grid-template-columns: auto auto minmax(150px, 1fr) auto auto 44px auto auto;
  gap: 12px;
  height: var(--hw-city-header);
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
html body.hw-city-ui:not(.in-shop) .topbar > * { min-width: 0; }
html body.hw-city-ui:not(.in-shop) .top-divider { display: none; }
html body.hw-city-ui:not(.in-shop) .brand {
  display: inline-flex;
  justify-content: flex-start;
  gap: 0;
  min-height: 44px;
  padding: 0;
  color: #111;
  background: transparent;
  font: 800 26px/1.1 Onest, Arial, sans-serif;
  letter-spacing: -1.3px;
}
html body.hw-city-ui:not(.in-shop) .brand::after {
  content: '.';
  color: var(--hw-city-yellow);
}
/* H and CITY are decorative legacy brand treatments; the named button remains. */
html body.hw-city-ui:not(.in-shop) .brand :is(.brand-mark, .edition) { display: none; }
html body.hw-city-ui:not(.in-shop) .topbar :is(.location, .market-home, .city-owner-top, .help-btn, .cart-button, .bc-topbar-inventory) {
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  font-family: Onest, Arial, sans-serif;
  font-weight: 600;
  color: var(--hw-city-ink);
  box-shadow: none;
}
html body.hw-city-ui:not(.in-shop) .location {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  font-size: 12px;
  background: #f2f3f4;
}
html body.hw-city-ui:not(.in-shop) .market-home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 12px;
  text-decoration: none;
}
html body.hw-city-ui:not(.in-shop) .city-owner-top {
  margin: 0;
  padding: 10px 13px;
  font-size: 12px;
  line-height: 1.3;
  background: var(--hw-city-yellow);
}
html body.hw-city-ui:not(.in-shop) .help-btn {
  display: grid;
  width: 44px;
  height: 44px;
  font-size: 18px;
  background: #f2f3f4;
}
html body.hw-city-ui:not(.in-shop) .cart-button {
  gap: 7px;
  padding: 8px;
  background: #f2f3f4;
  font-size: 12px;
}
html body.hw-city-ui:not(.in-shop) .cart-button b {
  min-width: 22px;
  height: 22px;
  color: #242424;
  background: var(--hw-city-yellow);
}
html body.hw-city-ui:not(.in-shop) .topbar .bc-topbar-inventory {
  position: static;
  width: auto;
  margin: 0;
  padding: 10px 12px;
  background: #f2f3f4;
  font-size: 12px;
}
html body.hw-city-ui:not(.in-shop) .search {
  position: static;
  display: flex;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 44px;
  margin: 0;
  padding: 8px 12px;
  gap: 8px;
  background: var(--hw-city-neutral);
  border: 1px solid transparent;
  border-radius: 13px;
  box-shadow: none;
}
html body.hw-city-ui:not(.in-shop) .search input {
  min-width: 0;
  font: 400 14px/1.3 Onest, Arial, sans-serif;
  color: var(--hw-city-ink);
}
html body.hw-city-ui:not(.in-shop) .search input::placeholder { color: #666; opacity: 1; }
html body.hw-city-ui:not(.in-shop) .search > span { color: #666; }
html body.hw-city-ui:not(.in-shop) .search kbd { color: #666; border-color: #cfd3d7; }
html body.hw-city-ui:not(.in-shop) .search:focus-within {
  border-color: #dadde0;
  box-shadow: 0 0 0 3px #079ceb;
}
html body.hw-city-ui:not(.in-shop) #map-view { top: var(--hw-city-header); }
html body.hw-city-ui:not(.in-shop) #map-view .explore-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  top: 24px;
  bottom: 24px;
  left: 24px;
  width: 320px;
  height: auto;
  max-height: none;
  padding: 20px 16px 16px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 19px;
  box-shadow: 0 10px 36px #24242412;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: auto;
}
html body.hw-city-ui:not(.in-shop) .explore-panel > * { flex-shrink: 0; }
html body.hw-city-ui:not(.in-shop) .explore-panel > .eyebrow {
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .09em;
  color: #666;
}
html body.hw-city-ui:not(.in-shop) .explore-panel .status-dot { background: #ffe500; box-shadow: 0 0 0 3px #fff7b8; }
html body.hw-city-ui:not(.in-shop) .explore-panel > h1 {
  margin: 12px 0 10px;
  font: 800 30px/1.06 Onest, Arial, sans-serif;
  letter-spacing: -.035em;
}
html body.hw-city-ui:not(.in-shop) .explore-panel > .intro {
  margin: 0 0 14px;
  color: #666;
  font-size: 12px;
  line-height: 1.5;
}
html body.hw-city-ui:not(.in-shop) .hw-city-destinations {
  margin: 0 0 12px;
  border: 1px solid #f0f0f0;
  border-radius: 13px;
  background: #f2f3f4;
}
html body.hw-city-ui:not(.in-shop) .hw-city-destinations > summary {
  min-height: 44px;
  padding: 12px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  border-radius: 13px;
}
html body.hw-city-ui:not(.in-shop) .hw-city-destinations[open] > summary { background: #fff1a5; }
html body.hw-city-ui:not(.in-shop) .hw-city-destination-links {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
}
html body.hw-city-ui:not(.in-shop) .hw-city-destination-links :is(.city-create-banner, .interiors-open) {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 12px;
  border: 1px solid #e7e9eb;
  border-radius: 12px;
  background: #fff !important;
  color: #242424 !important;
  font: 500 12px/1.5 Onest, Arial, sans-serif;
  text-align: left !important;
  text-decoration: none;
  white-space: normal;
}
html body.hw-city-ui:not(.in-shop) .hw-city-destination-links .city-create-banner { background: #fff0ba !important; }
html body.hw-city-ui:not(.in-shop) .city-create-banner > span { color: #666; font-size: 9px; }
html body.hw-city-ui:not(.in-shop) .city-create-banner strong { font-size: 13px; line-height: 1.4; margin: 6px 0; color: #242424; }
html body.hw-city-ui:not(.in-shop) .city-create-banner small { color: #666; font-size: 11px; line-height: 1.5; }
html body.hw-city-ui:not(.in-shop) #filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
html body.hw-city-ui:not(.in-shop) #filters button {
  min-height: 44px;
  padding: 9px 12px;
  background: #f2f3f4;
  color: #242424;
  font: 500 12px/1.3 Onest, Arial, sans-serif;
  border-radius: 12px;
}
html body.hw-city-ui:not(.in-shop) #filters button.active { background: #ffe500; font-weight: 700; }
html body.hw-city-ui:not(.in-shop) .list-heading { margin: 0 0 10px; gap: 8px; font-size: 12px; color: #242424; }
html body.hw-city-ui:not(.in-shop) .list-heading small { color: #666; font-size: 10px; }
html body.hw-city-ui:not(.in-shop) #store-list { gap: 10px; }
html body.hw-city-ui:not(.in-shop) .store-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #e7e9eb;
  border-radius: 13px;
  box-shadow: none;
}
html body.hw-city-ui:not(.in-shop) .store-card:hover { transform: none; border-color: #c8cdd2; }
html body.hw-city-ui:not(.in-shop) .store-card.active { border-color: #d7bc00; box-shadow: 0 0 0 2px #ffe500; }
html body.hw-city-ui:not(.in-shop) .store-card-top { gap: 10px; padding: 12px; min-height: 88px; background: #fff; }
html body.hw-city-ui:not(.in-shop) .store-card-top > div { min-width: 0; }
html body.hw-city-ui:not(.in-shop) .store-card-top :is(img, .store-placeholder) { width: 52px; height: 52px; border-radius: 10px; }
html body.hw-city-ui:not(.in-shop) .store-placeholder { color: #242424; background: #e1f0f8; }
html body.hw-city-ui:not(.in-shop) .store-card-top h2 { margin-bottom: 5px; font: 700 14px/1.3 Onest, Arial, sans-serif; overflow-wrap: anywhere; }
html body.hw-city-ui:not(.in-shop) .store-card-top p,
html body.hw-city-ui:not(.in-shop) .store-card .store-address { max-width: none; color: #666; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
html body.hw-city-ui:not(.in-shop) .store-card .store-presence { color: #3b574b; background: #dbf1e8; font: 500 11px/1.4 Onest, Arial, sans-serif; }
html body.hw-city-ui:not(.in-shop) .store-card .store-presence.is-unknown { color: #666; background: #f2f3f4; }
html body.hw-city-ui:not(.in-shop) .store-card .enter-store {
  min-height: 44px;
  gap: 8px;
  padding: 11px 12px;
  background: #fff1a5;
  border-top: 1px solid #f0e6af;
  color: #242424;
  font: 600 12px/1.4 Onest, Arial, sans-serif;
}
html body.hw-city-ui:not(.in-shop) .store-card.active .enter-store { background: #ffe500; }
html body.hw-city-ui:not(.in-shop) :is(.empty-city, .explore-note) { color: #666; font-size: 12px; line-height: 1.5; }
html body.hw-city-ui:not(.in-shop) .explore-note { margin-top: 16px; }
html body.hw-city-ui:not(.in-shop) .map-callout { bottom: 24px; padding: 12px 16px; border-radius: 13px; background: #fff; box-shadow: 0 6px 24px #24242412; }
html body.hw-city-ui:not(.in-shop) .map-callout .callout-symbol { background: #fff0ba; color: #242424; }
html body.hw-city-ui:not(.in-shop) .map-callout div > span { color: #666; }
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right {
  z-index: 9;
  top: 14px !important;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-group {
  display: flex;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #e7e9eb;
  box-shadow: 0 4px 16px #24242410;
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-group button { width: 44px; height: 44px; min-height: 44px; }
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls { display: grid; width: 196px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls button { width: auto !important; min-width: 0 !important; height: 44px !important; padding: 0 8px !important; color: #242424 !important; font: 500 12px/1.3 Onest, Arial, sans-serif !important; }
html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls select { grid-column: 1 / -1; min-height: 44px; height: 44px !important; color: #242424 !important; font-family: Onest, Arial, sans-serif !important; }
html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button { min-height: 44px; padding: 11px 14px; background: #ffe500; border-color: #e7cf00; border-radius: 13px; color: #242424; font: 600 12px/1.4 Onest, Arial, sans-serif; }
html body.hw-city-ui:not(.in-shop) #map-view :is(.hh-pin-enter, .hh-place-enter) { min-height: 44px; background: #ffe500; color: #242424; border-radius: 12px; font-family: Onest, Arial, sans-serif; }
html body.hw-city-ui:not(.in-shop) #map-view :is(.hh-pin-popup, .maplibregl-popup-content, .hh-malls-dialog) { background: #fff; border-color: #e7e9eb; color: #242424; border-radius: 15px; }
html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-top button { min-width: 44px; min-height: 44px; }
html body.hw-city-ui:not(.in-shop) #map-view .hh-mall-choice { font-family: Onest, Arial, sans-serif; color: #242424; }
html body.hw-city-ui:not(.in-shop) #map-view .hh-mall-choice small { color: #666; }
html body.hw-city-ui:not(.in-shop) #search-results {
  top: calc(var(--hw-city-header) + 8px);
  right: 24px;
  width: min(620px, calc(100% - 48px));
  max-height: calc(100dvh - var(--hw-city-header) - 24px);
  padding: 12px;
  background: #fff;
  border: 1px solid #e7e9eb;
  border-radius: 19px;
  box-shadow: 0 12px 40px #24242418;
  overflow-y: auto;
}
html body.hw-city-ui:not(.in-shop) #search-results button { min-height: 44px; font-family: Onest, Arial, sans-serif; }
html body.hw-city-ui:not(.in-shop) .city-search-top { color: #666; font-size: 12px; }
html body.hw-city-ui:not(.in-shop) .city-search-top button { width: 44px; min-height: 44px; background: #f2f3f4; color: #242424; }
html body.hw-city-ui:not(.in-shop) .city-search-place { min-height: 70px; }
html body.hw-city-ui:not(.in-shop) .city-search-symbol { background: #e1f0f8; color: #242424; border-color: transparent; }
html body.hw-city-ui:not(.in-shop) .city-search-copy b { color: #242424; font-size: 14px; }
html body.hw-city-ui:not(.in-shop) :is(.city-search-copy small, .city-search-product small, .city-search-status) { color: #666; font-size: 12px; line-height: 1.5; }
html body.hw-city-ui:not(.in-shop) .city-search-enter { background: #ffe500; color: #242424; font-size: 12px; border-radius: 12px; }
html body.hw-city-ui:not(.in-shop) .city-search-more { color: #242424; background: #f2f3f4; border-color: #e7e9eb; }
html body.hw-city-ui:not(.in-shop) .search-results .search-heading { color: #666; font-size: 10px; }
html body.hw-city-ui:not(.in-shop) .city-search-service-points > summary { min-height: 44px; color: #242424; }
html body.hw-city-ui:not(.in-shop) :is(.topbar, #map-view, #search-results) :is(button, a, summary, select):focus-visible {
  outline: 3px solid var(--hw-city-focus);
  outline-offset: -3px;
}
@media (hover: hover) {
  html body.hw-city-ui:not(.in-shop) :is(.city-owner-top, .city-search-enter, .hh-malls-button):hover { background: #ffeb38; }
  html body.hw-city-ui:not(.in-shop) #filters button:not(.active):hover,
  html body.hw-city-ui:not(.in-shop) .topbar :is(.location, .help-btn, .cart-button, .bc-topbar-inventory):hover { background: #e9ecef; }
}
@media (max-width: 1180px) and (min-width: 761px) and (min-height: 601px) {
  html body.hw-city-ui:not(.in-shop) .topbar { gap: 8px; padding: 0 16px; grid-template-columns: auto 44px minmax(130px, 1fr) auto auto 44px auto auto; }
  html body.hw-city-ui:not(.in-shop) .brand { font-size: 24px; }
  html body.hw-city-ui:not(.in-shop) .city-owner-top { max-width: 165px; white-space: normal; font-size: 11px; }
  html body.hw-city-ui:not(.in-shop) .location span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html body.hw-city-ui:not(.in-shop) .topbar .bc-topbar-inventory { padding: 8px; font-size: 11px; }
}
@media (max-width: 760px), (max-width: 1024px) and (max-height: 600px), (pointer: coarse) and (max-height: 600px) {
  html body.hw-city-ui:not(.in-shop) { --hw-city-header: 112px; }
  html body.hw-city-ui:not(.in-shop) .topbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 44px 44px;
    gap: 8px 6px;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    height: var(--hw-city-header);
  }
  html body.hw-city-ui:not(.in-shop) .brand { grid-column: 1 / 4; grid-row: 1; font-size: 24px; letter-spacing: -1.1px; }
  html body.hw-city-ui:not(.in-shop) .market-home { grid-column: 4; grid-row: 1; padding: 0; font-size: 10px; }
  html body.hw-city-ui:not(.in-shop) .help-btn { grid-column: 5; grid-row: 1; width: 100%; }
  html body.hw-city-ui:not(.in-shop) .cart-button { grid-column: 6; grid-row: 1; justify-content: center; padding: 4px 2px; gap: 3px; }
  html body.hw-city-ui:not(.in-shop) .cart-button svg { width: 20px; height: 20px; flex-shrink: 0; }
  html body.hw-city-ui:not(.in-shop) .cart-word { display: none; }
  html body.hw-city-ui:not(.in-shop) .city-owner-top { grid-column: 1 / 4; grid-row: 2; width: 100%; white-space: normal; font-size: 11px !important; padding: 6px 8px !important; }
  html body.hw-city-ui:not(.in-shop) .location { grid-column: 4; grid-row: 2; min-width: 44px; padding: 8px; font-size: 22px; }
  html body.hw-city-ui:not(.in-shop) .location span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html body.hw-city-ui:not(.in-shop) .topbar .bc-topbar-inventory { grid-column: 5 / 7; grid-row: 2; position: static; min-height: 44px; padding: 8px 4px; font-size: 11px; }
  html body.hw-city-ui:not(.in-shop) .search { position: absolute; top: calc(var(--hw-city-header) + 8px); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; max-width: none; height: 44px; z-index: 45; }
  html body.hw-city-ui:not(.in-shop) .search input { font-size: 16px; }
  html body.hw-city-ui:not(.in-shop) .search kbd { display: none; }
  html body.hw-city-ui:not(.in-shop) #search-results { top: calc(var(--hw-city-header) + 60px); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - var(--hw-city-header) - 72px); padding: 8px; border-radius: 15px; }
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: var(--hw-city-mobile-panel); max-height: 44%; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); border-radius: 17px 17px 0 0; }
  html body.hw-city-ui:not(.in-shop) .explore-panel > :is(.eyebrow, h1, .intro, .list-heading, .explore-note) { display: none; }
  html body.hw-city-ui:not(.in-shop) .hw-city-destinations { margin-bottom: 8px; }
  html body.hw-city-ui:not(.in-shop) .hw-city-destinations > summary { padding: 11px 12px; }
  html body.hw-city-ui:not(.in-shop) .hw-city-destination-links { max-height: 180px; }
  html body.hw-city-ui:not(.in-shop) #filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 8px; padding: 0 0 2px; }
  html body.hw-city-ui:not(.in-shop) #filters button { flex-shrink: 0; padding: 8px 12px; }
  html body.hw-city-ui:not(.in-shop) #store-list { display: flex; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 2px 2px 6px; min-height: 176px; scroll-snap-type: x mandatory; }
  html body.hw-city-ui:not(.in-shop) .store-card { min-width: 252px; flex: 0 0 252px; }
  html body.hw-city-ui:not(.in-shop) .store-card-top { min-height: 114px; gap: 9px; padding: 10px; }
  html body.hw-city-ui:not(.in-shop) .store-card-top :is(img, .store-placeholder) { width: 44px; height: 44px; }
  html body.hw-city-ui:not(.in-shop) .store-card-top h2 { font-size: 14px; }
  html body.hw-city-ui:not(.in-shop) .store-card .enter-store { padding: 10px; font-size: 11px; }
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right { top: 64px !important; right: 12px; }
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right { bottom: calc(var(--hw-city-mobile-panel) + 8px); right: 8px; }
  html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button { right: 12px; bottom: calc(var(--hw-city-mobile-panel) + 58px); max-width: calc(100% - 24px); }
  html body.hw-city-ui:not(.in-shop) .city-search-row { align-items: center; }
  html body.hw-city-ui:not(.in-shop) .city-search-enter { max-width: 100px; white-space: normal; }
}
@media (max-width: 359px) {
  html body.hw-city-ui:not(.in-shop) .brand { font-size: 22px; letter-spacing: -1.1px; }
  html body.hw-city-ui:not(.in-shop) .topbar { column-gap: 4px; }
  html body.hw-city-ui:not(.in-shop) .topbar .bc-topbar-inventory { font-size: 10px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  html body.hw-city-ui:not(.in-shop) { --hw-city-header: 60px; }
  html body.hw-city-ui:not(.in-shop) .topbar { grid-template-columns: auto 44px auto minmax(145px, 1fr) 44px auto auto; grid-template-rows: 44px; gap: 6px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  html body.hw-city-ui:not(.in-shop) .topbar > :is(.brand, .location, .market-home, .city-owner-top, .help-btn, .cart-button, .bc-topbar-inventory) { grid-column: auto; grid-row: 1; }
  html body.hw-city-ui:not(.in-shop) .brand { font-size: 22px; }
  html body.hw-city-ui:not(.in-shop) .location { grid-column: 2; }
  html body.hw-city-ui:not(.in-shop) .market-home { grid-column: 3; padding: 0 6px; }
  html body.hw-city-ui:not(.in-shop) .city-owner-top { grid-column: 4; max-width: 220px; }
  html body.hw-city-ui:not(.in-shop) .help-btn { grid-column: 5; width: 44px; }
  html body.hw-city-ui:not(.in-shop) .cart-button { grid-column: 6; padding: 4px; }
  html body.hw-city-ui:not(.in-shop) .topbar .bc-topbar-inventory { grid-column: 7; padding: 8px; white-space: nowrap; }
  html body.hw-city-ui:not(.in-shop) .search { left: 245px; right: 224px; top: calc(var(--hw-city-header) + 8px); }
  html body.hw-city-ui:not(.in-shop) #search-results { top: calc(var(--hw-city-header) + 60px); left: 245px; right: 12px; max-height: calc(100dvh - var(--hw-city-header) - 72px); }
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel { top: 8px; bottom: 8px; left: 8px; right: auto; width: 225px; height: auto; max-height: none; padding: 10px; border-radius: 15px; }
  html body.hw-city-ui:not(.in-shop) .hw-city-destinations > summary { font-size: 11px; padding: 12px 8px; }
  html body.hw-city-ui:not(.in-shop) .hw-city-destination-links { max-height: 150px; }
  html body.hw-city-ui:not(.in-shop) #store-list { display: grid; overflow: visible; min-height: 0; padding: 2px; }
  html body.hw-city-ui:not(.in-shop) .store-card { min-width: 0; }
  html body.hw-city-ui:not(.in-shop) .store-card-top { min-height: 114px; padding: 9px; align-items: flex-start; }
  html body.hw-city-ui:not(.in-shop) .store-card-top h2 { font-size: 13px; }
  html body.hw-city-ui:not(.in-shop) .store-card-top :is(img, .store-placeholder) { width: 34px; height: 34px; }
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right { top: 8px !important; }
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right { bottom: 4px; right: 8px; }
  html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button { bottom: 54px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.hw-city-ui:not(.in-shop) .store-card { transition: none; }
}
/* Verified overlay lanes: keep map actions separate from time and attribution. */
html body.hw-city-ui:not(.in-shop) #map-view .world-clock {
  left: 364px;
  right: auto !important;
  top: 14px !important;
  max-width: calc(100% - 604px);
}
html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right { bottom: 12px; right: 12px; }
html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button { bottom: 108px; }
@media (max-width: 760px), (max-width: 1024px) and (max-height: 600px), (pointer: coarse) and (max-height: 600px) {
  html body.hw-city-ui:not(.in-shop) { --hw-city-mobile-panel: 312px; }
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel { height: var(--hw-city-mobile-panel); min-height: 0; }
  html body.hw-city-ui:not(.in-shop) #store-list { align-items: flex-start; }
  html body.hw-city-ui:not(.in-shop) #map-view .world-clock { left: 12px; top: 64px !important; max-width: calc(100% - 232px); }
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right { bottom: calc(var(--hw-city-mobile-panel) + 8px); right: 8px; }
  html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button { bottom: calc(var(--hw-city-mobile-panel) + 104px); }
}
@media (orientation: landscape) and (max-height: 600px) {
  html body.hw-city-ui:not(.in-shop) #map-view .explore-panel { height: auto; }
  html body.hw-city-ui:not(.in-shop) #map-view .world-clock { left: 245px; top: 64px !important; max-width: calc(100% - 469px); }
  html body.hw-city-ui:not(.in-shop) #map-view .map-callout { display: none; }
  html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right { bottom: 8px; }
  html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button { bottom: 104px; }
}
/* Compact map layout: one measured shelf, independent scroll areas and clear control rows. */
html body.hw-city-ui:not(.in-shop) .store-card .store-presence:is(.is-empty,.is-unknown){color:#666;background:transparent;border:0;padding:0;font-weight:400}
html body.hw-city-ui:not(.in-shop) .store-card .store-presence.is-active{color:#315544;background:#e7f2eb}
@media(max-width:760px),(max-width:1024px) and (max-height:600px),(pointer:coarse) and (max-height:600px){
 html body.hw-city-ui:not(.in-shop){--hw-city-mobile-panel:calc(260px + env(safe-area-inset-bottom))}
 /* The owner action remains in Directions; city navigation remains in the map controls. */
 html body.hw-city-ui:not(.in-shop) .topbar :is(.city-owner-top,.location){display:none}
 html body.hw-city-ui:not(.in-shop) .search{position:static;grid-column:1 / 5;grid-row:2;inset:auto;width:100%;height:44px;z-index:auto}
 html body.hw-city-ui:not(.in-shop) #search-results{top:calc(var(--hw-city-header) + 8px);max-height:calc(var(--game-viewport-height,100dvh) - var(--hw-city-header) - 20px);z-index:46}
 html body.hw-city-ui:not(.in-shop) #map-view .explore-panel{height:var(--hw-city-mobile-panel)!important;max-height:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom));overflow:visible;z-index:12}
 html body.hw-city-ui:not(.in-shop) .hw-city-destinations{position:relative;margin:0 0 6px}
 html body.hw-city-ui:not(.in-shop) .hw-city-destinations > summary{min-height:44px;padding:11px 12px;font-size:11px;line-height:20px}
 html body.hw-city-ui:not(.in-shop) .hw-city-destination-links{position:absolute;left:-1px;right:-1px;bottom:calc(100% + 8px);z-index:35;max-height:calc(var(--game-viewport-height,100dvh) - var(--hw-city-header) - var(--hw-city-mobile-panel) - 20px);padding:8px;background:#fff;border:1px solid #e7e9eb;border-radius:15px;box-shadow:0 8px 32px #24242424}
 html body.hw-city-ui:not(.in-shop) #filters{flex:none;height:44px;min-height:44px;gap:6px;margin:0 0 6px;padding:0;scrollbar-width:none;overscroll-behavior-x:contain}
 html body.hw-city-ui:not(.in-shop) #filters button{min-width:44px;min-height:44px;padding:8px 12px}
 html body.hw-city-ui:not(.in-shop) #store-list{flex:1 1 0;min-height:0;height:140px;align-items:stretch;padding:2px 2px 4px;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-padding-inline:2px;scroll-snap-type:x proximity;scrollbar-width:thin}
 html body.hw-city-ui:not(.in-shop) .store-card{display:flex;flex-direction:column;min-width:0;flex:0 0 min(272px,calc(100vw - 56px));height:132px;scroll-snap-align:start;overflow:hidden}
 html body.hw-city-ui:not(.in-shop) .store-card-top{height:86px;min-height:86px;max-height:86px;gap:9px;padding:8px 10px;align-items:center;flex:1 1 auto;overflow:hidden}
 html body.hw-city-ui:not(.in-shop) .store-card-top :is(img,.store-placeholder){flex:0 0 42px;width:42px;height:42px}
 html body.hw-city-ui:not(.in-shop) .store-card-top > div{flex:1;min-width:0}
 html body.hw-city-ui:not(.in-shop) .store-card-top h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 3px;font-size:13px;line-height:16px;overflow-wrap:anywhere}
 html body.hw-city-ui:not(.in-shop) .store-card-top p{display:none}
 html body.hw-city-ui:not(.in-shop) .store-card .store-address{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:14px}
 html body.hw-city-ui:not(.in-shop) .store-card .store-presence{display:block;width:max-content;max-width:100%;margin-top:3px;font-size:10px;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html body.hw-city-ui:not(.in-shop) .store-card .enter-store{flex:0 0 44px;height:44px;min-height:44px;padding:9px 11px;font-size:12px}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right{top:12px!important;right:max(12px,env(safe-area-inset-right));gap:8px}
 html body.hw-city-ui:not(.in-shop) #map-view .world-clock{top:20px!important;left:max(12px,env(safe-area-inset-left));max-width:calc(100% - 164px);padding:7px 9px!important;font-size:9px!important;line-height:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls{width:calc(100vw - 24px);grid-template-columns:70px 92px minmax(0,1fr)}
 html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls button{font-size:11px!important;padding:0 6px!important}
 html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls select{grid-column:auto;min-width:0;max-width:none!important;border-top:0!important;border-left:1px solid #e7e9eb!important;font-size:11px!important}
 html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button{left:max(12px,env(safe-area-inset-left));right:auto;bottom:calc(var(--hw-city-mobile-panel) + 12px);max-width:calc(100% - 80px);min-height:44px;padding:10px 13px;font-size:12px}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right{right:max(12px,env(safe-area-inset-right));bottom:calc(var(--hw-city-mobile-panel) + 12px)!important;z-index:13}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-scale{display:none}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib.maplibregl-compact{min-width:44px;min-height:44px;padding:0 44px 0 0}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib-button{width:44px;height:44px;min-height:44px}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib.maplibregl-compact-show{position:absolute;right:0;bottom:52px;width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px);padding:10px 48px 10px 12px;border:1px solid #e7e9eb;box-shadow:0 4px 20px #24242418}
}
@media(orientation:landscape) and (max-height:600px){
 html body.hw-city-ui:not(.in-shop) .topbar{grid-template-columns:auto 44px 44px 44px minmax(120px,1fr) auto;gap:8px}
 html body.hw-city-ui:not(.in-shop) .brand{grid-column:1}
 html body.hw-city-ui:not(.in-shop) .market-home{grid-column:2;font-size:10px}
 html body.hw-city-ui:not(.in-shop) .help-btn{grid-column:3}
 html body.hw-city-ui:not(.in-shop) .cart-button{grid-column:4}
 html body.hw-city-ui:not(.in-shop) .search{grid-column:5;grid-row:1;min-width:0}
 html body.hw-city-ui:not(.in-shop) .topbar .bc-topbar-inventory{grid-column:6;grid-row:1}
 html body.hw-city-ui:not(.in-shop) #search-results{left:245px;right:12px;top:calc(var(--hw-city-header) + 8px)}
 html body.hw-city-ui:not(.in-shop) #map-view .explore-panel{left:8px;top:8px;bottom:8px;right:auto;width:225px;height:auto!important;padding:8px;overflow:hidden}
 html body.hw-city-ui:not(.in-shop) .hw-city-destinations{position:static}
 html body.hw-city-ui:not(.in-shop) .hw-city-destinations > summary{padding:11px 8px;font-size:10px}
 html body.hw-city-ui:not(.in-shop) .hw-city-destination-links{left:8px;right:8px;top:60px;bottom:8px;max-height:none}
 html body.hw-city-ui:not(.in-shop) #store-list{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;padding:2px 2px 4px;scroll-snap-type:y proximity;align-items:stretch}
 html body.hw-city-ui:not(.in-shop) .store-card{flex:0 0 132px;width:100%;height:132px}
 html body.hw-city-ui:not(.in-shop) .store-card-top{padding:8px;gap:8px}
 html body.hw-city-ui:not(.in-shop) .store-card-top :is(img,.store-placeholder){width:36px;height:36px;flex-basis:36px}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-top-right{top:8px!important}
 html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls{width:196px;grid-template-columns:repeat(2,minmax(0,1fr))}
 html body.hw-city-ui:not(.in-shop) #map-view .hh-world-controls select{grid-column:1 / -1;border-left:0!important;border-top:1px solid #e7e9eb!important}
 html body.hw-city-ui:not(.in-shop) #map-view .world-clock{left:245px;top:20px!important;max-width:calc(100% - 469px);font-size:10px!important}
 html body.hw-city-ui:not(.in-shop) #map-view .hh-malls-button{left:245px;bottom:12px;max-width:calc(100% - 325px)}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-bottom-right{bottom:12px!important}
 html body.hw-city-ui:not(.in-shop) #map-view .maplibregl-ctrl-attrib.maplibregl-compact-show{width:min(360px,calc(100vw - 269px));max-width:calc(100vw - 269px)}
}