/* Full-screen scenery; the existing information sits on quiet black fades. */
.strategy-game #simulation.has-game-art,
.strategy-game #sim-dialog {
  --fg: #f4f6fa;
  --fg-muted: #c0cbd8;
  --fg-subtle: #9aabba;
  --surface: #0b1019;
  --surface-raised: #151d29;
  --canvas: #04070c;
  --border-subtle: #c3d4e125;
  --border-strong: #c3d4e149;
  --player: #ffb079;
  --rival: #b9a6f4;
  --map-non-user: #9ca9b8;
  color: var(--fg);
}
.game-scene,
.scene-shade,
.world-labels,
.world-leaders,
.building-labels {
  display: none;
}
.has-game-art .game-scene {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.game-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.has-game-art .world-art-fallback,
.has-game-art .city-art-fallback {
  display: none;
}
.has-game-art .workspace,
.has-game-art #board,
.has-game-art .world-view,
.has-game-art .city-view,
.has-game-art .city-landscape {
  background: none;
  overflow: visible;
}
.has-game-art .world-view,
.has-game-art .city-view,
.has-game-art .city-landscape {
  position: static;
}
.has-game-art .scene-shade {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      0deg,
      #02050bea,
      transparent 24%,
      transparent 68%,
      #02050be8
    ),
    linear-gradient(
      90deg,
      transparent 48%,
      #02050b30 68%,
      #02050be5 87%,
      #02050bf5
    );
}
.has-game-art .city-shade {
  background:
    linear-gradient(
      0deg,
      #02050be0,
      transparent 25%,
      transparent 65%,
      #02050bf0
    ),
    linear-gradient(
      90deg,
      #02050b30,
      transparent 30%,
      transparent 58%,
      #02050b8a 76%,
      #02050bf0
    );
}
.has-game-art .game-header {
  position: relative;
  z-index: 30;
  background: linear-gradient(#02050bf2, #02050b8a);
  border: 0;
  color: var(--fg);
}
.has-game-art .world-tree-controls,
.has-game-art .city-heading,
.has-game-art .compact-city-stats {
  z-index: 8;
  text-shadow: 0 1px 6px #000;
}
/* Its tooltip must win against the Buildings dock (.city-work-dock, z-index 8)
   and any other sibling panel, explicitly -- not by the accident of coming
   later in the DOM, which breaks the moment that order changes. */
.has-game-art .compact-city-stats {
  z-index: var(--z-floating-panel);
}
.has-game-art .world-notifications {
  z-index: 8;
  right: 26px;
  width: 270px;
  top: 24px;
}
.has-game-art .world-notifications .rail-content {
  flex: none;
  height: calc(100% - 82px);
  padding-bottom: 18px;
}
.has-game-art .world-notifications .turn-dock {
  background: none;
  box-shadow: none;
}
.has-game-art .world-notifications .notification-text {
  font-size: var(--text-body);
  line-height: 1.6;
}
.has-game-art .map-key {
  display: flex;
  position: fixed;
  z-index: 5;
  bottom: 22px;
  left: 26px;
  right: 335px;
  color: #dce4ef;
  font-size: var(--text-meta);
  gap: 14px;
  justify-content: flex-start;
  background: none;
}
.has-game-art .world-labels,
.has-game-art .world-leaders,
.has-game-art .building-labels {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.world-leaders line {
  stroke: #d4e3f5;
  stroke-width: 1;
  opacity: 0.32;
}
.world-leaders circle {
  fill: #eef5fc;
  stroke: #09111e;
  stroke-width: 1;
}
.world-label {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 116px;
  width: max-content;
  max-width: 155px;
  text-align: center;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 4px;
  color: #fff;
  white-space: nowrap;
  font: inherit;
  text-shadow:
    0 1px 3px #000,
    0 0 9px #000;
  pointer-events: auto;
}
button.world-label:hover {
  background: #0a15244d;
}
.world-label:focus-visible {
  outline: 2px solid #fff !important;
  box-shadow: none !important;
  border-radius: 3px;
}
.world-label .map-caption-content {
  display: inline-block;
  width: auto;
  text-align: center;
  /* Readable over daylit land as well as sea. */
  padding: 2px 7px 3px;
  border-radius: 5px;
  background: #08121cb3;
}
.world-label .map-name-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: var(--text-compact);
  font-weight: 600;
}
.world-label .map-status-icons {
  display: flex;
  gap: 3px;
}
.world-label .map-status-icon {
  width: 11px;
  height: 15px;
}
.world-label .map-adoption {
  font-size: var(--text-meta);
  color: #e9edf6;
  margin-top: 3px;
}
.world-label .alert-label {
  font-size: var(--text-meta);
  color: #ffaaa4;
}
.resident-figures {
  display: block;
  width: 110px;
  height: 33px;
  margin: 0 auto 8px;
  filter: none;
}
.resident-none {
  color: #9ca9b8;
  fill: currentColor;
}
.resident-other {
  color: #b9a6f4;
  fill: currentColor;
}
.resident-you {
  color: #ffb079;
  fill: currentColor;
}
.resident-outline {
  color: #05080d;
  fill: #05080d;
}
.resident-outline path {
  stroke-width: 3.3;
}
.resident-outline circle {
  stroke: #05080d;
  stroke-width: 1.4;
}
.robot-found {
  display: block;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 5px;
  color: #ffcb9e;
}
.map-reset {
  display: none;
}
.has-game-art .map-reset {
  display: block;
  position: fixed;
  left: 26px;
  bottom: 58px;
  z-index: 5;
  padding: 5px 0;
  font-size: var(--text-meta);
  background: none;
  border: 0;
  color: #c0cfdf;
}
.has-game-art .city-heading {
  position: absolute;
  top: 24px;
  left: 28px;
}
.has-game-art .city-heading h1 {
  font-size: 25px;
  margin: 9px 0 0;
}
.has-game-art .compact-city-stats {
  top: 130px;
  width: 375px;
  max-width: calc(100vw - 350px);
}
.city-work-dock {
  position: absolute;
  right: 24px;
  top: 24px;
  bottom: 24px;
  width: 320px;
  max-width: calc(100vw - 48px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
.city-work-dock > * { pointer-events: auto; }
.city-work-dock .city-slots {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  margin: 0;
}
.city-work-dock .work-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  width: 100%;
  height: auto;
  min-height: 110px;
  background: #0b13214d;
  border: 1px solid #cfdfef35;
  border-radius: 5px;
  padding: 18px;
  color: #f3f6fb;
}
.city-work-dock .work-slot strong {
  font-size: 16px;
}
.city-work-dock .work-slot small {
  color: #c3d0de;
  font-size: var(--text-meta);
}
.city-work-dock .work-meter {
  width: 100%;
}
.has-game-art .choosing-work .city-work-dock {
  display: none;
}
.has-game-art .work-expansion {
  z-index: 10;
  top: 24px;
  right: 24px;
  width: 280px;
  max-width: 280px;
  bottom: 24px;
  background: none;
}
.has-game-art .work-expansion .production-detail {
  background: #080f1bf5;
  backdrop-filter: blur(10px);
}
.building-label {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 7px;
  max-width: 190px;
  border: 0;
  border-radius: 4px;
  padding: 7px 9px;
  background: linear-gradient(#04070cc9, #04070c91);
  color: #fff;
  text-shadow: 0 1px 3px #000;
  font-size: var(--text-meta);
  box-shadow: 0 2px 12px #0003;
}
.building-label strong {
  flex-basis: 100%;
  font-size: var(--text-compact);
  font-weight: 500;
  line-height: 1.4;
}
.building-label[hidden] {
  display: none;
}
.building-label[data-owner="you"] strong {
  color: #ffd1aa;
}
.building-label[data-owner="humans"] strong {
  color: #a4d4ff;
}
.building-label:not([data-owner="you"]):not([data-owner="humans"]) strong {
  color: #d3c2ff;
}
.building-output {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-meta);
  color: #ffca9a;
}
.building-output .resource-icon {
  width: 13px;
  height: 13px;
}
.building-output.inactive,
.building-offline {
  color: #aeb8c4;
}
.building-offline {
  display: block;
  flex-basis: 100%;
  font-size: var(--text-meta);
}
.building-label.offline strong {
  color: #ccd2db;
}







.has-game-art .city-incidents {
  position: absolute;
  z-index: 9;
  right: 24px;
  top: 250px;
  max-height: calc(100dvh - 320px);
  overflow: auto;
  width: 280px;
  background: linear-gradient(90deg, transparent, #02050b8a);
}
/* The hall remains continuous behind dialogue and model selection. */
#cinema.guided-opening .film-shade {
  background:
    linear-gradient(90deg, #02050be8, transparent 58%),
    linear-gradient(
      0deg,
      #02050bb8,
      transparent 28%,
      transparent 75%,
      #02050b88
    );
}
#cinema.guided-opening .machine-dialogue,
#cinema.guided-opening .awakening-setup {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  color: #f1f5fa;
}
#cinema.guided-opening .dialogue-speaker,
#cinema.guided-opening .cinema-kicker {
  color: #ccd8e8;
}
#cinema.guided-opening .title-screen h1,
#cinema.guided-opening .machine-dialogue h2 {
  color: #f7f9ff;
}
@media (max-width: 1100px) {
  .has-game-art .world-notifications {
    right: 20px;
    width: 270px;
  }
  .world-label {
    min-width: 106px;
    max-width: 145px;
  }
  .world-label .map-name-row {
    font-size: var(--text-meta);
  }
  .resident-figures {
    width: 100px;
    height: 30px;
  }
  .has-game-art .compact-city-stats {
    width: 330px;
  }
}
@media (max-width: 760px) {
  .has-game-art .world-notifications {
    position: fixed;
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 12px;
    width: auto;
    height: 165px;
    display: block;
    background: linear-gradient(transparent, #02050bef 10%);
  }
  .has-game-art .world-notifications .rail-content {
    width: calc(100% - 100px);
    height: 150px;
    padding: 12px 0;
  }
  .has-game-art .world-notifications .turn-dock {
    left: auto;
    right: 0;
    width: 85px;
    height: 55px;
  }
  .has-game-art .world-notifications .next-turn {
    height: 42px;
  }
  .has-game-art .world-tree-controls {
    top: 25px;
    left: 18px;
  }
  .has-game-art .map-key {
    left: 18px;
    right: 18px;
    bottom: 185px;
    flex-wrap: wrap;
    gap: 7px;
    font-size: var(--text-meta);
  }
  .has-game-art .map-reset {
    bottom: 240px;
    left: 18px;
  }
  .world-label {
    min-width: 85px;
    max-width: 115px;
    padding: 2px;
  }
  .world-label .map-name-row {
    font-size: var(--text-meta);
    gap: 2px;
  }
  .world-label .map-adoption {
    font-size: var(--text-meta);
  }
  .world-label .map-status-icon {
    width: 9px;
    height: 12px;
  }
  .resident-figures {
    width: 80px;
    height: 24px;
    margin-bottom: 5px;
  }
  .has-game-art .scene-shade {
    background: linear-gradient(
      #02050be0,
      transparent 32%,
      transparent 65%,
      #02050be0
    );
  }
  .has-game-art .city-heading {
    left: 18px;
    top: 15px;
  }
  .has-game-art .city-heading h1 {
    font-size: 22px;
  }
  .has-game-art .compact-city-stats {
    left: 18px;
    top: 120px;
    width: calc(100vw - 36px);
    max-width: none;
  }
  .city-work-dock {
    top: 230px;
    bottom: 20px;
    right: 18px;
    width: 220px;
  }
  .has-game-art .work-expansion {
    position: fixed;
    top: 235px;
    right: 18px;
    bottom: 16px;
    width: 240px;
    max-width: calc(100vw - 36px);
    padding: 12px;
    background: #060d19e8;
    backdrop-filter: blur(8px);
  }
  .has-game-art .production-choice > .production-detail {
    position: fixed;
    right: 18px;
    top: 145px;
    width: calc(100vw - 36px);
    max-height: calc(100dvh - 170px);
  }


  .has-game-art .city-incidents {
    top: 250px;
    right: 18px;
    width: 240px;
    max-height: calc(100dvh - 390px);
  }
  .building-label {
    max-width: 140px;
  }
  .building-label strong {
    font-size: var(--text-meta);
  }
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.city-work-dock .city-slots {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
}
.city-work-dock .work-slot > strong,
.city-work-dock .work-slot > small {
  margin: 0;
}

.city-work-dock .work-slot.empty strong {
  color: #ffd1aa;
}
.city-work-dock .city-incidents,
.has-game-art .city-work-dock .city-incidents {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 0 16px;
  border: 1px solid #cfdfef35;
  border-radius: 5px;
  background: #08111bed;
}
.city-work-dock .city-incidents article:first-child { border-top: 0; }
.city-work-dock:has(.city-incidents) .work-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  gap: 6px;
  padding: 12px 16px;
}
.city-work-dock:has(.city-incidents) .work-slot > span,
.city-work-dock:has(.city-incidents) .work-slot > .work-meter,
.city-work-dock:has(.city-incidents) .work-slot > small:not(:last-child) { display: none; }
.city-work-dock .city-incidents .response-options button { min-width: 0; }
.city-work-dock .city-incidents .choice-formula { width: 100%; }
.city-work-dock .city-incidents .formula-line { grid-template-columns: 80px minmax(0, 1fr); }
.city-work-dock .city-incidents .resource-amount {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  white-space: normal;
}
.scene-alert {
  display: block;
  margin-top: 8px;
  color: #ffc2a4;
  font-size: var(--text-meta);
}


.building-label.selected {
  outline: 1px solid #ffc497;
}
/* Keep the vector fallback usable when graphics are unavailable. */
@media (max-width: 760px) {
  #simulation:not(.has-game-art) .city-plots-scroll {
    left: 12px;
    top: 205px;
    bottom: 160px;
    width: calc(100% - 24px);
  }
  #simulation:not(.has-game-art) .city-plots-scroll .city-plot-map {
    min-width: 680px;
  }
}

/* A compact disclosure keeps hidden buildings reachable without repeating their output. */
.building-directory { display: none; }
.has-game-art .building-directory { display: block; position: fixed; bottom: 25px; left: 28px; z-index: 12; width: 220px; color: #e7eef8; }
.building-directory h3 { margin: 0 0 6px; font-size: var(--text-meta); font-weight: 500; }
.building-directory h3 span { color: #aebdcc; margin-left: 8px; }
.building-directory > div { max-height: 22vh; overflow: auto; background: #060c16dc; border-radius: 6px; padding: 0 10px; }
.building-directory button { display: flex; flex-wrap: wrap; gap: 4px 10px; text-align: left; background: none; border: 0; border-bottom: 1px solid #c8deef26; border-radius: 0; padding: 8px 0; width: 100%; color: #eef5ff; }
.building-directory button strong { flex-basis: 100%; font-size: var(--text-meta); font-weight: 500; }
@media(max-width:760px) { .has-game-art .building-directory { left: 18px; bottom: 20px; width: 180px; } }

.building-directory > summary { cursor: pointer; padding: 8px 10px; background: #08111bed; border: 1px solid #cfdfef35; border-radius: 5px; font-size: var(--text-meta); }
.building-directory[open] > div { max-height: 32vh; }

/* Fixed scenery needs no camera controls; every building is in the index. */
.has-fixed-scenery .map-reset { display:none; }
.scenery-navigation { position:fixed; left:270px; bottom:27px; z-index:12; display:flex; align-items:center; gap:10px; padding:3px 5px; background:#08111bed; border:1px solid #cfdfef35; border-radius:6px; color:#eef5ff; font-size:var(--text-meta); }
.scenery-navigation[hidden] { display:none; }
.scenery-navigation button { min-width:36px; min-height:36px; border:0; background:transparent; color:inherit; }
.scenery-navigation button:disabled { opacity:.3; }
.building-label.is-focused { outline:2px solid #ffdbad; }
@media(max-width:700px) {
 .phone-layout .scenery-navigation { position:absolute; left:12px; top:12px; bottom:auto; gap:3px; font-size:var(--text-meta); }
 .phone-layout .scenery-navigation button { min-width:44px; min-height:44px; }
 .phone-layout .phone-scene:has(.building-directory[open]) .scenery-navigation { visibility:hidden; }
 .phone-layout .phone-scene .building-directory { left:auto; width:160px; }
}

#simulation[data-scenery-unavailable]::after { content:attr(data-scenery-unavailable); position:fixed; bottom:8px; left:50%; transform:translateX(-50%); z-index:25; background:#101c2b; color:#e5edf7; border:1px solid #668099; border-radius:6px; padding:8px 12px; font-size:var(--text-meta); }