@font-face {
  font-family: Bebas-Regular;
  src: url('fonts/Bebas-Regular.otf');
}

html, body {
  height: 100%;
  margin: 0;
  font-family: Bebas-Regular, sans-serif;

  background: linear-gradient(0deg, #3a5177, #81b1e0);
}

h1 {
  text-align: center;
  font-size: x-large;
  font-weight: normal;
  margin: 0;
  color: white;
}

#root-window {
  height: 100%;
}

#render-target {
  position: relative;
  height: 100%;
}

#instructions {
  position: absolute;
  color: white;
  left: 0;
  bottom: 0;
  margin: 8px;
}

#version {
  position: absolute;
  color: white;
  right: 0;
  bottom: 0;
  margin: 8px;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  font-size: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: #00000048;
  padding: 12px;
}

#ui-toolbar {
  position: absolute;
  top: 64px;
  bottom: 0px;

  box-shadow: 0px 0px 1px black;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ui-button {
  height: 48px;
  width: 48px;
  margin: 4px 0;

  transition: background-color 0.1s ease-in-out;
  
  background-color: #1e2331cd;
  border: none;
  border-radius: 8px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.ui-button.selected {
  background-color: #3a3f50d3;
  outline: 2px solid rgb(101, 101, 135);
}

.ui-button:not(.selected):hover {
  background-color: #121622d3;
}

.ui-container {
  background-color: #33333355;
  padding: 16px;
}

.toolbar-icon {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

/* TITLE BAR */

#title-bar {
  position: fixed;

  top: 0;
  left: 0px;
  right: 0;
  height: 48px;

  background-color: #00000048;
  color: white;
  padding: 8px;

  box-shadow: 0px 0px 1px black;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.title-bar-items {
  flex: 1 1 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

.title-bar-items.title-bar-center-items {
  font-size: 2em;
}

#population-icon {
  position: relative;
  width: 32px;
  height: 32px;
  top: -3px;
}

#population-counter {
  margin-left: 8px;
}

/* INFO PANEL */

#info-panel {
  visibility: hidden;
  position: fixed;
  top: 64px;
  right: 0px;
  padding: 0; 
  padding-bottom: 16px;
  width: 300px;

  background-color: #00000048;
}

.info-heading {
  text-align: center;
  font-size: 1em;
  margin-top: 12px;
  margin-bottom: 12px;

  background-color: #00000060;

  box-shadow: 0px 0px 1px black;

  color: white;
  padding: 4px;
}

.info-heading:first-of-type {
  margin-top: 0px;
}

.info-label {
  margin-left: 12px;
  font-size: 1em;
  color: rgb(193, 193, 193)
}

.info-value {
  margin-left: 4px;
  font-size: 1.2em;
  color: #ffffff;
  text-align: right;
}

.info-citizen-list {
  list-style-type: none;
  padding: 0;
}

.info-citizen {
  background-color: #222941a0;
  color: white;
  padding: 4px 16px;
  margin: 4px 0;
  border-radius: 8px;
  box-shadow: 0 2px 0 0px #151820;
}

.info-citizen-name {
  font-size: 1.1em;
}

.info-citizen-icon {
  position: relative;
  width: 18px;
  height: 18px;
  top: 2px;
  margin-right: 2px;
}

.info-citizen-details {
  font-size: 1em;
  display: flex;
  justify-content: flex-start;
  gap: 16px;
}/* Copyright (c) 2026 Brad Moore. MIT. Street edition. */
html,body{font-family:Arial,Helvetica,sans-serif;background:linear-gradient(160deg,#c4dbcf,#6b9991);overflow:hidden;color:#f3eee3}
#title-bar{height:60px;box-sizing:border-box;padding:0 28px;background:#162c2deF;justify-content:space-between;border-bottom:1px solid #ffffff20}
.title-bar-items{font-size:13px;letter-spacing:1px;flex:initial;gap:10px}.title-bar-items.title-bar-center-items{font-size:14px}.title-bar-left-items{gap:12px}#title-bar strong{font-size:25px;letter-spacing:3px;color:#ff783e}#title-bar small{font-size:9px;max-width:80px;line-height:1.5;color:#a9b1bc}#population-icon{width:20px;height:20px;top:0}
#ui-toolbar{top:82px;left:20px;bottom:auto;border-radius:14px;padding:8px;background:#162c2deb;border:1px solid #ffffff20}.ui-button{width:42px;height:42px;margin:3px 0;background:transparent;border-radius:8px}.ui-button.selected{background:#e1b969;outline:none}.toolbar-icon{width:26px;height:26px}#instructions{left:24px;bottom:24px;font:10px/1.8 monospace;letter-spacing:1px;color:#1a3636}#version{font:10px monospace;letter-spacing:2px;color:#1a3636;bottom:28px;right:28px}#info-panel{right:24px;top:82px;background:#162c2deb;border-radius:12px;overflow:hidden;font-size:13px}#loading{background:#162c2d;font-size:30px;letter-spacing:5px;pointer-events:none}
#mayor-launch{position:absolute;right:30px;bottom:80px;width:300px;background:#11151bef;padding:26px;border:1px solid #ffffff25;border-radius:16px;box-shadow:0 15px 45px #152e2d30}.eyebrow{font:9px/1.5 monospace;letter-spacing:2px;color:#a9b1bc}#mayor-launch h1{text-align:left;font:700 44px/.98 Arial;letter-spacing:-2px;margin:18px 0;color:#f3efdf}#mayor-launch h1 span{color:#ff783e}#mayor-launch p{font-size:12px;color:#b0b5bf;margin:15px 0 24px}#mayor-launch button{display:block;width:100%;border:1px solid #ffffff30;background:#232832;color:#f6eddb;padding:14px 12px;margin-top:9px;text-align:left;border-radius:7px;font-size:10px;letter-spacing:1px;cursor:pointer}#mayor-launch button:first-of-type{background:#ff783e;color:#11151b;border-color:#ff783e}#mayor-launch small{display:block;font-size:10px;line-height:1.6;margin-top:15px;color:#929aa7}kbd{font:10px monospace;border:1px solid currentColor;border-radius:3px;padding:3px 5px;opacity:.8}#mayor-launch kbd{float:right;margin-top:-3px}#mayor-launch.compact{width:245px;padding:18px;bottom:75px}#mayor-launch.compact h1{font-size:28px;margin:10px 0}#mayor-launch.compact h1 br{display:none}#mayor-launch.compact p,#mayor-launch.compact small{display:none}
.street-active #ui-toolbar,.street-active #info-panel,.street-active #instructions,.street-active #mayor-launch{display:none!important}#street-hud{position:absolute;inset:0;pointer-events:none;display:none}.street-status{position:absolute;top:88px;left:28px;background:#11151bed;padding:18px 22px;border-radius:10px;border-left:3px solid #ff783e}#stars{color:#ffcd71;letter-spacing:7px;font:30px Arial;margin:8px 0}#health{font:10px monospace;letter-spacing:3px;color:#f7d5ae}#street-readout{position:absolute;right:28px;top:88px;background:#11151bed;border-radius:10px;padding:18px 22px;text-align:right}#street-readout b{display:block;font-size:19px;color:#f3efdf}#street-readout span{display:block;margin-top:8px;font:9px monospace;letter-spacing:1px;color:#ff783e}#street-prompt{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#11151bf2;padding:18px 24px;border-radius:9px;font-size:11px;color:#e9e7d8;box-shadow:0 8px 30px #11151b40}#street-prompt kbd{margin:0 5px 0 12px}#street-result{position:absolute;top:50%;width:100%;text-align:center;transform:translateY(-50%);font:900 90px Arial;letter-spacing:9px;color:#db6c5d;text-shadow:0 4px 0 #11151b,0 0 80px #11151b}
#mayor-launch.compact{width:190px;padding:12px;bottom:70px}#mayor-launch.compact h1{font-size:18px;letter-spacing:-.5px;margin:0 0 8px}.compact .eyebrow,.compact p,.compact small,.compact button:first-of-type{display:none!important}.compact button:last-of-type{padding:10px;margin:0}
.nitro-label{font:9px monospace;letter-spacing:2px;color:#92ccd5;margin-top:14px}.nitro{width:150px;height:5px;background:#3a5356;margin:7px 0 0 auto}.nitro i{display:block;height:100%;background:#88cfdb;transition:width .08s linear}#street-score{position:absolute;left:28px;bottom:118px;display:flex;flex-direction:column;gap:5px;color:#f3efdf}#street-score small{font:9px monospace;letter-spacing:3px;color:#b4c7b7}#street-score strong{font:900 38px monospace;text-shadow:3px 3px #11151b}#street-score span{font:10px monospace;color:#ff783e;letter-spacing:2px}#street-sound{position:absolute;right:28px;bottom:118px;pointer-events:auto;border:1px solid #ffffff30;background:#11151bed;color:#a9c6bb;padding:10px 12px;font:9px monospace;letter-spacing:1px;cursor:pointer}#street-prompt{padding:16px 18px;font-size:10px}#street-prompt kbd{margin:0 3px 0 8px}.street-status,#street-readout{border-radius:3px}#street-readout b{font:700 28px monospace}
/* A living city: compact readout, progressively disclosed management desk. */
#district-bar{position:fixed;top:73px;left:94px;z-index:10;max-width:calc(100vw - 410px)}
#district-bar>button{display:flex;gap:22px;align-items:center;background:#11151bf2;color:#d6dfcc;border:1px solid #718b773d;border-bottom:2px solid #d3ad65;padding:12px 16px;cursor:pointer;font:10px monospace;letter-spacing:.6px;text-align:left}
#district-bar b{color:#ffe2a4;font-size:16px;display:block;margin-top:3px}#district-bar strong{color:#edcb81;font-size:10px;white-space:nowrap}.positive{color:#95c4a2!important}.negative{color:#f1937d!important}
#district-console{position:fixed;top:135px;left:94px;width:340px;max-height:calc(100vh - 165px);z-index:20;background:#132a2af7;border:1px solid #8b9c7e4f;box-shadow:0 12px 50px #0a242a55;display:flex;flex-direction:column;font:12px/1.5 Arial;color:#d2ded1}#district-console[hidden]{display:none}
#district-console header{display:flex;justify-content:space-between;align-items:center;padding:15px 18px 11px;border-bottom:1px solid #78927c36}#district-console h2{font:700 23px Georgia;margin:3px 0;color:#f3efdf}.desk-eyebrow{font:8px monospace;letter-spacing:1.6px;color:#a5baa3}#district-console header>button{font-size:25px;border:0;background:transparent;color:#acc4b2;padding:0 6px}
#district-console nav{display:flex;padding:9px 12px;gap:5px;border-bottom:1px solid #78927c36}#district-console nav button{flex:1;font:11px Arial;padding:9px 6px}.desk-content{padding:0 17px 15px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#688376 #11151b}
#district-console h3,.economic-inspection h3{font:700 13px Georgia;letter-spacing:.4px;color:#efd29a;margin:18px 0 9px}#district-console p,.economic-inspection p{font:11px/1.6 Arial;color:#aec0b3;margin:10px 0}
#district-console button,.economic-inspection button{cursor:pointer;border:1px solid #6c8c744f;background:#284342;color:#e9dec2;padding:8px 10px;font:10px Arial;border-radius:2px}#district-console button:hover,.economic-inspection button:hover{background:#385b50}#district-console button.active,#district-console .gold-button,#district-console button.selected{background:#ddbd76;color:#1a3030;border-color:#ddbd76}#district-console button:disabled,.economic-inspection button:disabled{opacity:.4;cursor:default}
#district-console footer{border-top:1px solid #7f9c7940;padding:10px 17px;background:#1f3933;color:#ebcd8a;font:10px/1.5 monospace;flex-shrink:0}.desk-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:17px}.desk-stat-grid small{font:8px monospace;letter-spacing:1px;color:#92aa9d;display:block}.desk-stat-grid b{font:700 23px monospace;color:#ead7a8}.treasury-chart{width:100%;height:50px;margin-top:10px;background:#ffffff04}
.need-row{display:grid;grid-template-columns:90px 1fr 35px;gap:9px;align-items:center;font-size:10px;margin:8px 0}.need-row>span{text-transform:capitalize}.need-row i{height:5px;background:#82938225}.need-row em{display:block;height:100%;background:#a8bd82}.need-row b{text-align:right;font:10px monospace;color:#ddc590}
#district-console label{display:flex;flex-wrap:wrap;justify-content:space-between;font:11px Arial;margin:12px 0;color:#b9caba}#district-console label b{color:#edcc80}#district-console input[type=range]{width:100%;margin-top:8px;accent-color:#eac47c}.desk-actions{display:flex;flex-wrap:wrap;gap:6px}.desk-actions button{flex:1}.ledger-row{display:flex;justify-content:space-between;font:10px/1.6 Arial;gap:12px;margin:6px 0}.ledger-row b{white-space:nowrap;font-family:monospace}.achievement.complete{color:#e0d09e!important}.chain-diagram{font:700 14px/1.9 monospace!important;color:#efcc84!important;border-left:2px solid #9fba84;padding-left:12px}
.supply-heading{display:flex;justify-content:space-between;font:8px monospace;letter-spacing:1px;padding:10px 0;color:#8faa96}.goods-row{display:grid;grid-template-columns:80px 1fr 43px 43px;gap:5px;align-items:center;border-top:1px solid #65857125;padding:8px 0;font:10px Arial}.goods-row>div{display:flex;flex-direction:column}.goods-row b{font:13px monospace;color:#e8d1a6}.goods-row small{font:9px monospace}.goods-row button{font-size:9px!important;padding:7px 3px!important}.producer-row{padding:8px 0;border-top:1px solid #78907825}.producer-row b{display:block;color:#d6d7bc;font-size:11px}.producer-row small{font-size:10px;color:#90a995}.freight-line{margin:4px 0!important}
#district-console .build-choice{display:flex;width:100%;gap:8px;align-items:center;justify-content:space-between;text-align:left;padding:10px;margin:6px 0;font-size:12px}.build-choice small{display:block;font:9px/1.5 Arial;color:#a1b4a2}.build-choice b{font:11px monospace;color:#e6cd95;white-space:nowrap}.build-choice.selected small,.build-choice.selected b{color:#28413c}.economic-inspection{padding:15px 16px 8px;background:#1e3936}.economic-inspection h3{margin:6px 0}.economic-inspection>button{width:100%;margin:6px 0}.inspect-line{font:11px/1.7 Arial;color:#c7d2bb}#info-panel{max-height:calc(100vh - 150px);overflow-y:auto!important;scrollbar-width:thin}.street-active #district-bar{top:65px;left:0;right:0;max-width:none}.street-active #district-bar>button{padding:5px 28px;gap:20px;width:100%;border-bottom-width:1px}.street-active #district-bar b{display:inline;font-size:11px;margin-left:4px}.street-active #district-console{top:110px;left:50%;transform:translateX(-50%);max-height:calc(100vh - 165px)}.street-status,#street-readout{top:116px}
@media(max-width:1050px){#district-bar{max-width:calc(100vw - 120px)}#district-bar>button{gap:12px}#district-bar>button>span:nth-child(4){display:none}#district-console{width:305px}#info-panel{width:265px}#title-bar small{display:none}.title-bar-items.title-bar-center-items{font-size:12px}}
/* Incident choices remain readable while the city runs. */
.challenge-card{padding:14px 0;border-bottom:1px solid #78927c36}.challenge-card h3{margin-top:5px!important}
.incident-card{margin-top:12px;padding:12px;border:1px solid #df997261;background:#432e264d}
.incident-card .desk-eyebrow{color:#ffc58c}.incident-card .desk-actions{margin-top:10px;display:grid;grid-template-columns:1fr}
.incident-card small{color:#e1ba96}
#paused-text{position:absolute;z-index:30;top:74px;right:24px;display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid #e8c57788;border-radius:7px;background:#11151bf2;color:#eed099;font:11px monospace;letter-spacing:1px;cursor:pointer;box-shadow:0 5px 20px #0004}
#paused-text span{font:10px Arial;letter-spacing:0;color:#c1d0c1}
#paused-text:hover{background:#28433e}
.street-active #paused-text{top:156px}

#first-journey{position:absolute;left:110px;bottom:100px;width:280px;padding:16px;background:#11151bf2;border-left:3px solid #ff9c63;color:#f6eddb;z-index:11}#first-journey[hidden]{display:none}#first-journey small{font:10px monospace;letter-spacing:1px;color:#ff9c63}#first-journey h2{font:700 18px monospace;margin:9px 0}#first-journey p{font:12px/1.6 Arial;margin:8px 0 12px;color:#c7d2bb}#first-journey button{background:#ff783e;color:#11151b;border:1px solid #ff783e;padding:9px;margin:3px 8px 0 0;cursor:pointer;font:11px monospace}#first-journey button:last-child{background:transparent;color:#c7d2bb;border-color:#718b77}.street-active #first-journey{left:28px;bottom:112px}.journey-visible.street-active #street-score{display:none}@media(max-width:700px){#first-journey{width:230px;left:85px;bottom:90px}.street-active #first-journey{left:14px;bottom:95px}}

#first-journey:has(button[data-journey-action="resume"]){width:auto;padding:7px;border:0}#first-journey:has(button[data-journey-action="resume"]) small,#first-journey:has(button[data-journey-action="resume"]) h2,#first-journey:has(button[data-journey-action="resume"]) p{display:none}#first-journey:has(button[data-journey-action="resume"]) button{margin:0}

#journey-navigation{position:absolute;right:28px;bottom:173px;width:180px;background:#11151bf2;color:#f6eddb;padding:12px;pointer-events:none;z-index:9;border-top:2px solid #ff9c63}#journey-navigation[hidden]{display:none}#journey-navigation h3{font:700 12px monospace;margin:0 0 7px}#journey-navigation p{font:11px/1.4 Arial;margin:0 0 9px;color:#ff9c63}#journey-navigation svg{display:block;width:100%;height:155px;background:#232832}@media(max-width:700px){#journey-navigation{width:135px;right:14px;bottom:160px}#journey-navigation svg{height:115px}}

/* A1 modal main menu (R01 fix). APPEND-ONLY: no existing rule above is edited.
   Fixed centered overlay above canvas/HUD (HUD peaks at z-index 30);
   responsive card with internal scroll so no action clips at 1280x720. */
#retrocity-main-menu{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(10,22,22,.72);padding:24px;box-sizing:border-box}
#retrocity-main-menu .rc-menu-card{width:min(92vw,520px);max-width:520px;max-height:min(90vh,800px);overflow-y:auto;overscroll-behavior:contain;background:#11151bf2;border:1px solid #ffffff25;border-radius:16px;box-shadow:0 15px 45px #0008;padding:26px;color:#f6eddb;box-sizing:border-box}
#retrocity-main-menu .rc-menu-card h1{text-align:left;font-size:34px;letter-spacing:1px}
#retrocity-main-menu .rc-menu-sub{font-size:12px;color:#b0b5bf;margin:6px 0 16px}
#retrocity-main-menu .rc-menu-slots{display:grid;gap:8px}
#retrocity-main-menu .rc-menu-slots button{text-align:left;background:#232832;color:#f6eddb;border:1px solid #ffffff30;border-radius:7px;padding:10px 12px;font-size:12px;letter-spacing:.5px;cursor:pointer;min-height:44px}
#retrocity-main-menu .rc-menu-slots button[aria-pressed="true"]{background:#ff783e;color:#11151b;border-color:#ff783e}
#retrocity-main-menu .rc-menu-legacy{font-size:11px;color:#929aa7;margin-top:10px}
#retrocity-main-menu .rc-menu-legacy:empty{display:none}
#retrocity-main-menu .rc-menu-actions{display:grid;gap:8px;margin-top:14px}
#retrocity-main-menu .rc-menu-actions button{background:#ff783e;color:#11151b;border:1px solid #ff783e;border-radius:7px;padding:12px;font-size:13px;letter-spacing:1px;cursor:pointer;min-height:44px}
#retrocity-main-menu .rc-menu-actions button[data-act="close"]{background:transparent;color:#c7d2bb;border-color:#718b77}
#retrocity-main-menu .rc-menu-note{min-height:20px;font-size:12px;color:#eed099;margin:12px 0 0}
#retrocity-main-menu .rc-menu-actions button:focus-visible,#retrocity-main-menu .rc-menu-slots button:focus-visible{outline:3px solid #ff783e;outline-offset:2px}
@media(max-width:700px){#retrocity-main-menu{padding:12px}#retrocity-main-menu .rc-menu-card{padding:18px}}

#ride-actions{position:absolute;right:28px;bottom:165px;max-width:325px;padding:12px;background:#11151bf2;border:1px solid #8da895;color:#f3efdf;pointer-events:auto;font:11px monospace}#ride-actions[hidden]{display:none}#ride-actions strong,#ride-actions small{display:block;margin-bottom:8px}#ride-actions small{font:11px/1.5 monospace;color:#c7d2bb}#ride-actions button{background:#ff783e;border:1px solid #ff783e;color:#11151b;font:11px monospace;padding:8px;margin:3px 5px 0 0;cursor:pointer}#ride-actions button:disabled{background:#28413c;color:#adc3b6;border-color:#587566;cursor:default}#ride-actions[data-damage-stage="2"],#ride-actions[data-damage-stage="3"]{border-color:#e4a578}#ride-actions[data-damage-stage="3"] strong{color:#ffc199}#ride-actions .ride-directions{color:#ff9c63}#ride-actions small:empty{display:none}#ride-actions button:focus-visible{outline:2px solid #f3efdf;outline-offset:3px}@media(max-width:720px){#ride-actions{right:14px;bottom:150px;max-width:250px}#street-prompt{white-space:normal;width:calc(100% - 48px);bottom:12px;padding:8px}}

/* BLACKTOP RISING: asphalt, safety orange and a sharp industrial wordmark. */
:root{--brand-asphalt:#11151b;--brand-orange:#ff783e;--brand-paper:#f3efdf}
.brand-mark{display:block;width:34px;height:34px;image-rendering:pixelated;flex-shrink:0}
#title-bar .brand-header{font:26px/1 Bebas-Regular,Impact,sans-serif;letter-spacing:1.5px;color:var(--brand-paper);white-space:nowrap}
#title-bar .brand-header span{color:var(--brand-orange)}
#mayor-launch{background:#11151bf5;border-radius:2px;border:1px solid #454c59;border-top:4px solid var(--brand-orange)}
#mayor-launch h1.brand-wordmark,#retrocity-main-menu h1.brand-wordmark{font-family:Bebas-Regular,Impact,sans-serif;font-weight:normal;letter-spacing:2px;line-height:.9;color:var(--brand-paper)}
#mayor-launch h1.brand-wordmark{font-size:64px;margin:18px 0}
.brand-wordmark span{display:block;color:var(--brand-orange)}
#mayor-launch.compact{width:230px;padding:14px}
#mayor-launch.compact h1.brand-wordmark{font-size:30px;margin:0 0 12px;letter-spacing:1.5px}
#mayor-launch.compact h1.brand-wordmark span{display:inline;margin-left:7px}
#mayor-launch button,#retrocity-main-menu .rc-menu-slots button,#retrocity-main-menu .rc-menu-actions button{border-radius:2px}
#retrocity-main-menu{background:rgba(8,11,16,.8)}
#retrocity-main-menu .rc-menu-card{background:#11151bf7;border-radius:2px;border:1px solid #454c59;border-top:4px solid var(--brand-orange)}
.brand-menu-kicker{display:flex;align-items:center;gap:12px;font:10px monospace;letter-spacing:2px;color:#a9b1bc;margin-bottom:18px}
#retrocity-main-menu h1.brand-wordmark{font-size:clamp(44px,8vw,72px);margin:0 0 12px}
#retrocity-main-menu .rc-menu-sub{font:10px/1.6 monospace;letter-spacing:1px;color:#ff9c63;margin-bottom:20px}
#retrocity-main-menu .rc-menu-actions button:not([data-act="continue"]):not([data-act="new"]){background:#232832;border-color:#454c59;color:var(--brand-paper)}
#retrocity-main-menu .rc-menu-note{color:#ffba87}
@media(max-width:700px){#title-bar .brand-header{font-size:20px;letter-spacing:.6px}.title-bar-left-items{gap:5px}.brand-mark{width:26px;height:26px}#mayor-launch.compact{width:195px}#mayor-launch.compact h1.brand-wordmark{font-size:25px}}

/* Building identity stays readable in city view; shape and names accompany color. */
#building-type-legend{position:absolute;right:24px;top:145px;width:244px;z-index:5;background:#11151bed;border:1px solid #454c59;border-top:3px solid #ff783e;color:#f3efdf;padding:12px;font:11px/1.5 monospace;pointer-events:auto;box-sizing:border-box}
#building-type-legend[hidden]{display:none}
#building-type-legend summary{cursor:pointer;font-weight:bold;letter-spacing:1px}
#building-type-legend summary span{float:right;font-size:10px;color:#a9b1bc;letter-spacing:0}
#building-type-legend>div{display:grid;grid-template-columns:1fr 1fr;gap:8px 4px;margin-top:12px}
#building-type-legend>div span{display:flex;align-items:center;gap:7px}
#building-type-legend i{width:11px;height:11px;flex-shrink:0;border:1px solid #ffffff50}
#building-type-legend small{display:block;color:#a9b1bc;font-size:10px;margin-top:10px}
.building-type-badge{border-left:5px solid var(--building-color);background:#ffffff08;padding:8px 10px;color:#f3efdf;font:bold 12px/1.5 monospace;margin-bottom:10px}
@media(max-width:850px){#building-type-legend{right:14px;top:145px;width:208px;font-size:10px}}

/* Keep recovery controls alongside the route card, with every action reachable. */
#ride-actions{right:252px;bottom:173px}
@media(max-width:1000px){#ride-actions{right:14px;top:240px;bottom:auto;max-width:250px}.street-active #first-journey{left:14px;width:230px}}