[data-city-hub] { position: absolute; inset: 0; z-index: 60; padding: 14px; background: linear-gradient(125deg, #20363f, #14232b); color: #eaf1ed; font-family: inherit; text-align: left; }
[data-city-hub][hidden], [data-city-hub] [hidden] { display: none !important; }
[data-city-hub] * { box-sizing: border-box; }
[data-city-hub] button, [data-city-hub] select { font: inherit; }
[data-city-hub] button { cursor: pointer; }
[data-city-hub] button:disabled { cursor: default; }
[data-city-hub] :is(button, select, canvas):focus-visible, [data-city-hub] [data-gamepad-focus] { outline: 3px solid #f4c476; outline-offset: 3px; }
.city-hub-shell { height: 100%; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.city-hub-header { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.city-hub-title h2 { margin: 0; font-size: 27px; line-height: 1; letter-spacing: -.035em; }
.city-hub-eyebrow { display: block; margin-bottom: 4px; font-size: 9px; font-weight: 800; letter-spacing: .19em; color: #b3c4bd; }
.city-hub-tabs { display: flex; gap: 6px; }
.city-hub-tab, .city-hub-close, .city-map-control { color: #d9e5df; border: 1px solid #3a4e50; background: #18282e; border-radius: 5px; padding: 8px 12px; }
.city-hub-tab { font-size: 12px !important; font-weight: 750 !important; }
.city-hub-tab[aria-pressed="true"] { background: #efb468; border-color: #efb468; color: #111c21; }
.city-hub-close { margin-left: auto; font-size: 25px !important; line-height: 1; padding: 3px 10px; }
.city-hub-map-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.city-hub-map-container { flex: 1; min-height: 0; position: relative; border: 1px solid #728b8e; border-radius: 8px; overflow: hidden; }
[data-city-hub] .city-map-view { min-height: 0 !important; }
.city-map-view { container-type: inline-size; }
.city-map-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #afc7cd; }
.city-map-backdrop > div { position: absolute; left: -320px; right: -320px; top: -80px; bottom: -80px; }
.city-map-backdrop-sky { background: linear-gradient(#77b9db 4%, #b8d8de 35%, #e2d9b8 58%, #819898 78%); }
.city-map-backdrop > .city-map-backdrop-sun { left: -30px; right: -30px; top: -40px; bottom: -40px; background: radial-gradient(circle at 73% 27%, #fffedc 0 11px, #fff5c78c 14px, #ffe7a130 52px, transparent 120px); }
.city-map-backdrop-clouds { background: url('./assets/backgrounds/clouds.png') repeat-x 50% 7%; background-size: auto 58%; opacity: .45; }
.city-map-backdrop-far { background: url('./assets/backgrounds/far-city-day.png') repeat-x 50% -35px; background-size: auto 63%; opacity: .72; }
.city-map-backdrop-horizon { background: url('./assets/backgrounds/mid-buildings-day.png') repeat-x 50% 28px; background-size: auto 77%; }
.city-map-legend { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #d8e6df; background: #102027d9; border: 1px solid #41565a; padding: 6px 9px; border-radius: 4px; }
.city-map-help { font-size: 10px; color: #cad8d2; background: #102027d9; padding: 5px 7px; border-radius: 4px; }
.city-map-marker { color: #f9e4c5; background: #25353bed; border: 1px solid #e4ae62; border-radius: 5px; min-width: 78px; padding: 4px 7px; box-shadow: 0 4px 10px #0008; }
.city-map-route-line { position: absolute; height: 1px; background: #efbc6ba6; transform-origin: 0 50%; }
.city-map-route-dot { position: absolute; width: 7px; height: 7px; background: #edb96d; border: 1px solid #fff1bf; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 5px #0009; }
.city-map-route-line[data-kind="shop"], .city-map-route-dot[data-kind="shop"] { background: #7bc4b1; }
.city-map-route-line[data-kind="future"], .city-map-route-dot[data-kind="future"] { background: #799a96; border-color: #9cb6b1; }
.city-map-marker[data-kind="shop"] { border-color: #7bc4b1; color: #bde8d9; }
.city-map-marker:disabled { border-color: #56686c; background: #14242bdf; color: #91a6a7; opacity: .85; }
.city-map-marker-name { display: block; font-size: 11px; font-weight: 800; }
.city-map-marker-kind { display: block; font-size: 9px; margin-top: 3px; opacity: .85; }
.city-map-control { min-width: 30px; padding: 5px 8px; font-size: 13px !important; }
.city-map-toolbar { flex-wrap: wrap; justify-content: flex-end; max-width: 340px; }
.city-hub-map-caption, .city-hub-lore { margin: 0; font-size: 10px; line-height: 1.45; color: #b1c3bf; }
@container (max-width: 620px) {
  .city-map-legend { display: none; }
  .city-map-help { max-width: 145px; }
  .city-map-toolbar { max-width: 190px; }
}
.city-hub-lore { flex: 0 0 auto; border-top: 1px solid #253c43; padding-top: 7px; color: #8da6a3; }
.city-hub-shop-pane { flex: 1; min-height: 0; overflow: auto; padding: 2px 3px 2px 0; }
.gun-store { display: flex; flex-direction: column; gap: 9px; }
.gun-store-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gun-store-heading h3 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.gun-store-credits { margin: 0; color: #efc17d; font-size: 19px; font-weight: 800; white-space: nowrap; }
.gun-store-survivor { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #bdcec5; }
.gun-store-survivor select { color: #eaf3ec; background: #1c3037; border: 1px solid #475e61; border-radius: 4px; padding: 5px 23px 5px 7px; min-width: 120px; }
.gun-store-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gun-store-card { background: linear-gradient(135deg, #24373c, #15262d); border: 1px solid #3c5356; border-radius: 7px; padding: 11px 13px; }
.gun-store-card[data-owned="true"] { border-color: #56746c; }
.gun-store-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gun-store-card h4 { font-size: 14px; margin: 0; }
.gun-store-tag { font-size: 8px; letter-spacing: .08em; font-weight: 800; color: #c4d6c9; white-space: nowrap; }
.gun-store-description { margin: 7px 0 4px; font-size: 11px; line-height: 1.4; color: #bdd0c9; }
.gun-store-stats { margin: 0 0 9px; min-height: 14px; font-size: 10px; color: #8ca7a3; }
.gun-store-action { width: 100%; padding: 7px 8px; border-radius: 4px; border: 1px solid #e4b578; background: #e4b578; color: #112329; font-size: 11px !important; font-weight: 800 !important; }
.gun-store-action:disabled { background: #253a40; border-color: #3d555b; color: #809a9a; opacity: 1; }
.gun-store-status, .gun-store-note { margin: 0; font-size: 10px; line-height: 1.4; color: #c5d4cc; }
.gun-store-note { color: #819d98; }
@media (max-width: 620px) {
  [data-city-hub] { padding: 9px; }
  .city-hub-header { gap: 10px; }
  .city-hub-title h2 { font-size: 22px; }
  .city-hub-tab { padding: 7px 9px; }
  .city-map-help { max-width: 145px; }
  .city-map-toolbar { max-width: 190px; }
  .gun-store-credits { font-size: 15px; }
  .gun-store-card { padding: 9px; }
}
@media (max-height: 500px) {
  .city-hub-lore { font-size: 9px; }
}