:root { --game-ui-scale: 1; }
#topbar, #toolbar, #flyout, #tooltip, #query, .panel, .menu, #minimap, #statusbar, #toast, #view-settings { zoom: var(--game-ui-scale); }
#toolbar { width: 128px; grid-template-columns: repeat(2, 54px); gap: 4px; padding: 6px; max-height: calc(100dvh / var(--game-ui-scale) - 104px); }
#toolbar button.tool, #toolbar button.menu-btn { width: 54px; height: 54px; }
#toolbar button.tool .ico { width: 48px; height: 48px; }
#toolbar button.tool .ico canvas { max-width: 48px; max-height: 48px; object-fit: contain; }
#toolbar button.menu-btn { height: 40px; font-size: 23px; }
#toolbar hr { width: 106px; }
#flyout, .panel, .menu { left: 148px; }
#panel-cities { left: 50%; }
#query { max-height: calc(100dvh / var(--game-ui-scale) - 232px); }
#topbar { left: 0; right: 0; width: auto; overflow-x: auto; scrollbar-width: none; }
#topbar { height: 46px; gap: 4px; padding: 0 8px; border-bottom-width: 2px; }
#topbar .brand { font-size: 17px; margin-right: 2px; }
#topbar .stat { height: 34px; gap: 5px; padding: 0 7px; border-radius: 7px; }
#topbar .stat .ico { font-size: 16px; }
#topbar .stat .val { font-size: 14px; }
#topbar .stat .val.small { font-size: 12px; }
#topbar .stat .sub { font-size: 9px; }
#topbar .rci .bars { gap: 4px; height: 15px; margin-bottom: 9px; }
#topbar .bar { width: 11px; }
#topbar .bar span { bottom: -9px; }
#topbar .group.menus { gap: 3px; }
#topbar .group.menus button, #topbar #speed button { height: 34px; padding: 0 7px; border-radius: 7px; font-size: 12px; }
#topbar #speed { gap: 2px; }
#topbar #speed button { width: 34px; padding: 0; }
#topbar #speed button .tri { border-width: 5px; border-left-width: 8px; border-right-width: 0; }
#topbar #speed button.pause i { height: 11px; width: 3px; }
#topbar #city-name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
#topbar #btn-view-settings { width: 34px; padding: 7px; }
#topbar #btn-view-settings svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  #topbar { height: 50px; }
  #topbar .group.menus button, #topbar #speed button { min-width: 40px; height: 40px; }
  #topbar .stat { height: 38px; }
}
#topbar::-webkit-scrollbar { display: none; }
#topbar > * { flex-shrink: 0; }
#statusbar { left: 0; right: 0; width: auto; }
#btn-view-settings { width: 36px; height: 36px; padding: 7px; flex-shrink: 0; }
#btn-view-settings svg, #view-settings svg { width: 20px; height: 20px; display: block; }
#view-settings { position: fixed; z-index: 12; top: 64px; right: 12px; width: 280px; max-width: calc(100vw / var(--game-ui-scale) - 24px); padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-flat); box-shadow: 0 8px 24px #0006; }
.view-settings-head, .view-scale-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#view-settings h2 { font-size: 16px; margin: 0; }
.view-settings-head { margin-bottom: 18px; }
.view-settings-head button { padding: 6px; }
.view-scale-label output { color: var(--accent); font-variant-numeric: tabular-nums; }
#game-ui-scale { width: 100%; margin: 12px 0 4px; accent-color: var(--accent); }
#view-settings p { font-size: 12px; color: #c4cbd9; line-height: 1.5; margin: 8px 0 16px; }
#view-settings button:focus-visible, #btn-view-settings:focus-visible, #minimap-zoom button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#minimap-zoom { display: flex; gap: 3px; margin-left: auto; }
#minimap #minimap-zoom button { width: 24px; }
#minimap-zoom svg { width: 14px; height: 14px; }
#minimap-zoom button:disabled { opacity: 0.4; cursor: default; }
#minimap .head > span:first-child { margin-right: auto; }
@media (max-width: 900px) {
  #toolbar { left: 0; right: 0; width: auto; grid-template-columns: none; }
  #toolbar button.tool, #toolbar button.menu-btn { width: 44px; height: 44px; }
  #toolbar button.tool .ico, #toolbar button.tool .ico canvas { width: 40px; height: 40px; }
  #flyout, .panel, .menu { left: 10px; }
  #panel-cities { left: 50%; }
}
@media (max-width: 600px) {
  #query { max-height: calc(48dvh / var(--game-ui-scale)); }
}
@media (max-height: 480px) and (min-width: 601px) {
  #query { max-height: calc(100dvh / var(--game-ui-scale) - 110px); }
}
@media (max-width: 900px) {
  #toolbar hr { width: 1px; }
  #minimap { width: 200px; }
  #query { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
#view-settings { max-height: calc(100dvh / var(--game-ui-scale) - 88px); overflow-y: auto; }
.view-rotation-settings { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.view-rotation-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#enable-map-rotation, #enable-manual-disasters { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); }
#settings-map-rotation { display: flex; align-items: center; justify-content: center; gap: 12px; }
#settings-map-rotation button { width: 36px; height: 32px; padding: 6px 8px; }
#settings-map-angle { min-width: 42px; text-align: center; color: #c4cbd9; font-variant-numeric: tabular-nums; }
#settings-map-rotation button:focus-visible, #enable-map-rotation:focus-visible, #enable-manual-disasters:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Keep simulation controls visible; secondary actions live in the game menu. */
#topbar .topbar-secondary { display: none; }
#topbar { background: #20293c; border-bottom: 1px solid #47516a; box-shadow: 0 2px 8px #0b112540; }
#topbar .brand { padding-right: 10px; margin-right: 3px; border-right: 1px solid #46516a; text-shadow: none; }
#topbar .stat { background: #151d2d80; box-shadow: none; border: 1px solid #46516a70; border-radius: 6px; }
#topbar .stat .val { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
#topbar .stat .sub { color: #bec6d5; font-weight: 600; }
#topbar .stat .ico { filter: none; opacity: 0.85; }
#topbar .money .val { color: #f5d68e; }
#topbar .group.menus button, #topbar #speed button { background: #303b51; color: #edf0f5; border: 1px solid #526079; box-shadow: none; font-family: var(--font-body); font-weight: 700; }
#topbar .group.menus button:hover, #topbar #speed button:hover { background: #3d4b65; filter: none; }
#topbar button:focus-visible { outline: 2px solid #f2c14e; outline-offset: -3px; }
#topbar button:active { margin-bottom: 0; transform: none; }
#topbar #btn-cities { background: transparent; border-color: transparent; gap: 7px; }
#topbar #btn-game-menu { width: 34px; display: flex; align-items: center; justify-content: center; }
#topbar #btn-game-menu svg, #topbar #btn-play-toggle svg { width: 17px; height: 17px; }
#topbar #speed { background: #121a29; padding: 3px; border: 1px solid #46516a; border-radius: 8px; gap: 3px; }
#topbar #speed button { height: 28px; border: 0; border-radius: 5px; }
#topbar #speed #btn-play-toggle { background: #f2c14e; color: #292411; }
#topbar #speed #btn-play-toggle:hover { background: #f8d476; }
#topbar #speed #btn-play-toggle.is-paused { background: #41526d; color: #edf0f5; }
#topbar #speed #btn-speed-menu { width: 52px; display: flex; align-items: center; justify-content: center; gap: 3px; background: transparent; font-variant-numeric: tabular-nums; }
#topbar #btn-speed-menu svg { width: 12px; height: 12px; }
#topbar-popup { position: fixed; top: calc(52px * var(--game-ui-scale)); right: 12px; z-index: 14; width: 224px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 76px); overflow-y: auto; padding: 6px; background: #202a3d; border: 1px solid #596780; border-radius: 10px; box-shadow: 0 12px 32px #080e2070; font-family: var(--font-body); }
#topbar-popup[hidden] { display: none; }
.topbar-popup-heading { padding: 8px 10px 10px; color: #acb9cd; font-size: 11px; font-weight: 700; border-bottom: 1px solid #43516a; margin-bottom: 4px; }
#topbar-popup button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 9px 10px; text-align: left; font: inherit; font-size: 13px; color: #edf0f5; background: transparent; border: 0; border-radius: 6px; box-shadow: none; }
#topbar-popup button:hover, #topbar-popup button:focus-visible { background: #35445f; outline: none; }
#topbar-popup button[aria-pressed="true"] { background: #3d4b61; color: #f7d281; }
#topbar-popup button:active { transform: none; margin-bottom: 0; }
#topbar-popup svg { width: 18px; height: 18px; flex-shrink: 0; color: #a5b8d0; }
@media (max-width: 900px) {
  #topbar #btn-game-menu { width: 40px; }
  #topbar #speed button { height: 36px; }
  #topbar #speed { padding: 2px; }
}

#panel-cities { width: min(520px, calc(100vw / var(--game-ui-scale) - 24px)); max-height: calc(100dvh / var(--game-ui-scale) - 100px); background: #202a3d; border: 1px solid #526079; border-radius: 12px; box-shadow: 0 16px 48px #080e2070; overflow: hidden; }
#panel-cities > .head { padding: 14px 16px; font-family: var(--font-body); font-size: 18px; border-bottom: 1px solid #43516a; }
#panel-cities > .head .close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; font-size: 19px; color: #b8c3d5; }
#panel-cities > .body { padding: 10px 12px 12px; }
#cities-list { max-height: calc(100dvh / var(--game-ui-scale) - 292px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
#panel-cities .row.city { grid-template-columns: minmax(0, 1fr) 70px 32px 32px; gap: 6px; min-height: 64px; margin: 0 0 5px; padding: 10px; border: 1px solid #43516a; border-radius: 8px; background: #18223560; }
#panel-cities .row.city:has(> button:first-of-type:disabled) { background: #26394c; border-color: #668699; }
#panel-cities .row.city > span { min-width: 0; font-size: 12px; line-height: 1.6; }
#panel-cities .row.city b { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; font-family: var(--font-body); font-size: 14px; font-weight: 800; color: #edf0f5; }
#panel-cities .row.city .muted { color: #b4bfd1; font-size: 11px; font-weight: 500; }
#panel-cities .row.city > button { height: 32px; padding: 0 8px; border: 1px solid #526079; border-radius: 6px; background: #34425a; color: #edf0f5; box-shadow: none; font-size: 11px; }
#panel-cities .row.city > button:disabled { background: transparent; border-color: transparent; color: #a1beca; opacity: 1; }
#panel-cities .row.city > button.ghost { width: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border-color: transparent; color: #aab8cd; }
#panel-cities .row.city > button.ghost:last-child:not(:disabled):hover { color: #ff9587; background: #603b43; }
#panel-cities button:not(:disabled):hover { filter: none; background: #3c4c68; }
#panel-cities button:active { margin-bottom: 0; transform: none; }
#panel-cities button:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; }
#panel-cities #cities-new { width: 100%; min-height: 36px; margin-top: 8px; padding: 7px 12px; background: #f2c14e; color: #292411; border: 0; border-radius: 7px; box-shadow: none; font-family: var(--font-body); font-size: 13px; }
#panel-cities #cities-new:hover { background: #f8d476; }
#panel-cities #save-mgr-actions { margin-top: 12px; padding-top: 12px; border-color: #43516a; }
#panel-cities .save-actions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#panel-cities .save-btn { min-height: 36px; padding: 7px 6px; gap: 5px; background: #28364c; border: 1px solid #465977; font-size: 11px; line-height: 1.4; box-shadow: none; }
#panel-cities .save-btn.import-btn { color: #9bd6d7; }
#panel-cities .save-btn.backup-btn { color: #ebcf95; }
#panel-cities .btn-row-export svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
  #panel-cities .row.city { grid-template-columns: minmax(0, 1fr) 56px 28px 28px; gap: 4px; padding: 9px 7px; }
  #panel-cities .row.city > button.ghost { width: 28px; }
  #panel-cities .row.city b { font-size: 13px; }
}

#encounter-frequency { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-flat); color: var(--text); font: inherit; }
#encounter-frequency:disabled { opacity: 0.5; }