/* Top tabs with upright, right-to-left labels. */
#view-city #city-top-panels {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 30; display: flex; direction: rtl; align-items: flex-start; gap: 6px;
  width: max-content; max-width: calc(100% - 16px); pointer-events: none;
}
#view-city #city-top-panels[hidden] { display: none; }
#city-top-panels > * { pointer-events: auto; }
#city-top-panels #city-stats-drawer,
#city-top-panels .bld-drawer,
html body #city-top-panels #tutorial-panel.tut-drawer {
  position: static !important; inset: auto !important; transform: none !important;
  display: block; width: auto !important; max-height: none !important;
  margin: 0; padding: 0; border: 0 !important; border-image: none !important;
  background: none !important; box-shadow: none !important; overflow: visible !important;
}
#city-top-panels .bld-tab,
#city-top-panels .city-stats-tab,
html body #tutorial-panel.tut-drawer .tut-tab {
  position: relative; display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 6px; writing-mode: horizontal-tb; direction: rtl; white-space: nowrap;
  box-sizing: border-box; width: clamp(94px, 28vw, 145px) !important; height: 44px !important;
  min-height: 44px !important; padding: 8px 6px !important;
  border: 1px solid #ad853d !important; border-image: none !important;
  border-radius: 0 0 8px 8px !important; background: #192331 !important;
  color: #ffe0a0 !important; font: 700 13px Heebo,Arial,sans-serif;
  cursor: pointer; box-shadow: 0 3px 9px #0005 !important;
}
#city-top-panels button:focus-visible,
html body #tutorial-panel .tut-tab:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 3px; }
#city-top-panels .open > button { background: #34404b !important; }
#city-top-panels .bld-tab .ui-ico,
html body #tutorial-panel .tut-tab .ui-ico { transform: none; }
#city-top-panels .city-panel-arrow { writing-mode: horizontal-tb; }
#city-top-panels .bld-panel,
#city-top-panels #city-hub-stats,
html body #city-top-panels #tutorial-panel.tut-drawer .tut-panel {
  position: absolute !important; top: 52px !important; bottom: auto !important;
  left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  box-sizing: border-box; width: min(360px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  max-height: min(65vh, calc(100dvh - var(--hud-h, 56px) - 80px)) !important;
  overflow-y: auto !important; margin: 0 !important; padding: 12px !important;
  border: 1px solid #ad853d !important; border-image: none !important;
  border-radius: 8px !important; background: #192331f7 !important;
  color: var(--text-body); box-shadow: 0 8px 24px #0007 !important;
}
#city-top-panels #city-stats-drawer:not(.open) #city-hub-stats { display: none !important; }
#city-top-panels #city-hub-stats .chf-collapsed-bar { pointer-events: none; cursor: default; }
#city-top-panels #city-hub-stats .chf-toggle-arrow { display: none; }
#city-top-panels #city-hub-stats .chf-body {
  position: static; display: block; width: auto; min-width: 0; max-width: none;
  max-height: none; padding: 10px 0 0; margin-top: 8px; border: 0;
  border-top: 1px solid #ad853d66; border-image: none !important; box-shadow: none;
}
/* The guide remains available on other pages, using the same top tab. */
html body > #tutorial-panel.tut-drawer {
  top: calc(var(--hud-h, 56px) + 8px) !important; left: 50% !important;
  right: auto !important; bottom: auto !important; transform: translateX(-50%);
  z-index: 30 !important; display: block; border: 0 !important;
  border-image: none !important; background: none !important; box-shadow: none !important;
}
html body > #tutorial-panel.tut-drawer .tut-panel {
  position: absolute !important; top: 52px !important; left: 50% !important;
  right: auto !important; transform: translateX(-50%) !important;
  width: min(360px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - var(--hud-h, 56px) - 80px) !important;
}
@media(max-width: 600px) {
  #city-top-panels .bld-tab, #city-top-panels .city-stats-tab,
  html body #tutorial-panel.tut-drawer .tut-tab { font-size: 11px; gap: 4px; }
}