html,
body {
  height: 100%;
  overflow: hidden;
}
.screen {
  height: 100vh;
  min-height: 780px;
  min-width: 1000px;
}
.screen.A .map,
.screen.A.has-details .map,
.screen.A.building .map {
  top: 215px;
  height: calc(100% - 425px);
  min-height: 300px;
  max-height: 420px;
}
.screen.A .legend {
  bottom: 80px;
}
.screen.A.building .legend {
  bottom: 310px;
}
.screen.A.building .map {
  height: calc(100% - 560px);
  min-height: 290px;
}
.resources {
  right: 26px;
}
.resource {
  min-width: 126px;
}
.resource b {
  font-variant-numeric: tabular-nums;
}
.toolbar {
  top: 126px;
}
.projects {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  max-height: 185px;
  overflow: auto;
}
.drawer {
  bottom: 70px;
}
.project small {
  line-height: 1.65;
}
.project b {
  min-height: 18px;
}
.modal {
  max-height: 85vh;
  overflow: auto;
  width: min(1050px, 94vw);
}
.modal header {
  margin-bottom: 18px;
}
.research-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.research-branch {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.research-branch h3 {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  margin: 6px;
}
.tech {
  text-align: left;
  width: 100%;
  padding: 15px;
  min-height: 130px;
  background: #10202a;
}
.tech b {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.tech small {
  display: block;
  line-height: 1.6;
  margin-top: 8px;
}
.tech.done {
  border-color: #689e8b;
  background: #19332f;
}
.tech.running {
  border-color: var(--amber);
}
.tech .state {
  color: var(--green);
  font-size: 11px;
  margin-top: 10px;
}
.tech:disabled {
  opacity: 0.72;
}
.tech .progress {
  width: 100%;
}
.modal .subhead {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 20px;
}
.queue-dock {
  width: 370px;
  height: min(530px, 65vh);
  top: 179px;
}
.dock-order {
  font-size: 12px;
  padding: 14px;
}
.dock-order .row {
  align-items: start;
}
.queue-actions {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.dock-order[draggable] {
  cursor: grab;
}
.dock-order.drag-over {
  border-top: 2px solid var(--green);
}
.dock-order .progress {
  height: 5px;
}
.setting-content {
  min-height: 230px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #32464f66;
  gap: 20px;
}
.setting-row label {
  flex: 1;
}
.setting-row small {
  display: block;
  line-height: 1.6;
  margin-top: 5px;
}
.setting-row input[type="range"] {
  width: 240px;
}
.setting-row input[type="number"] {
  width: 85px;
}
.settings-tabs {
  display: flex;
  gap: 8px;
}
.settings-tabs button {
  flex: 1;
}
.save-list {
  margin-top: 14px;
}
.save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.save-row small {
  display: block;
  margin-top: 4px;
}
.empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--muted);
  line-height: 1.9;
}
.world-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
input,
select {
  background: #11232c;
  color: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px;
  font: inherit;
}
.explore-map {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 22px;
  background: #0d1b24;
  border-radius: 9px;
  margin-bottom: 20px;
}
.explore-star {
  text-align: center;
  font-size: 21px;
}
.explore-star small {
  display: block;
  font-size: 12px;
  margin-top: 8px;
}
.route {
  width: 38%;
  border-top: 1px dashed #76949c;
  text-align: center;
  color: var(--muted);
  padding-top: 10px;
}
.drive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.drive-grid button {
  text-align: left;
  padding: 16px;
  line-height: 1.8;
}
.drive-grid small {
  display: block;
}
.footer .notification {
  max-width: 36%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time {
  gap: 12px;
}
.time input {
  width: 140px;
  padding: 0;
  accent-color: var(--green);
}
.time #speed-value {
  min-width: 78px;
}
.ambient-mode .identity,
.ambient-mode .resources,
.ambient-mode .toolbar,
.ambient-mode .menu-btn,
.ambient-mode .map-title,
.ambient-mode .legend,
.ambient-mode .drawer,
.ambient-mode .queue-dock,
.ambient-mode .planet-details {
  display: none !important;
}
.ambient-mode .footer {
  opacity: 0.25;
}
.ambient-mode .footer:hover {
  opacity: 1;
}
.status-key {
  font-size: 10px;
}
.body .reason {
  max-width: 175px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
.hover-summary {
  z-index: 18;
}
.planet-details {
  max-height: calc(100vh - 260px);
}
.slot {
  flex-shrink: 0;
}
.slots {
  flex-wrap: wrap;
  max-width: 180px;
}
.progress i {
  transition: width 0.15s linear;
}
.toast {
  max-width: 65%;
  text-align: center;
}
.project.locked {
  border-style: dashed;
}
.map {
  transform-origin: center center;
}
.map.panning {
  cursor: grabbing;
}
.modal a {
  color: var(--green);
}

/* Overlay changes never alter star map coordinates. */
.screen.A .map,
.screen.A.has-details .map,
.screen.A.building .map {
  top: 215px;
  height: 350px;
  min-height: 350px;
  max-height: 350px;
}
.screen.A .body {
  height: 155px;
}
.screen.A.building .legend {
  bottom: 290px;
}
.projects {
  max-height: none;
  min-height: 120px;
}
.drawer-head #build-category {
  font-size: 11px;
  padding: 7px 10px;
}
.research-branch .tech + .tech:before {
  content: "↓";
  position: absolute;
  top: -18px;
  left: 50%;
  color: var(--muted);
}
.research-branch .tech {
  position: relative;
}
.research-branch {
  gap: 22px;
}
.tech:disabled .state {
  color: var(--muted);
}
.tech.done .state {
  color: var(--green);
}
.screen.A .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.screen.A .body .orb {
  flex-shrink: 0;
}

.queue-dock header { flex-wrap: wrap; }
.queue-capacity { flex-basis: 100%; color: var(--muted, #8aa4ad); font-size: 12px; }
/* Modular is a sibling of Parallel Construction, not its dependent. */
.research-branch .tech[data-tech="modular"]:before {
  content: "↳ Advanced Industry";
  font-size: 10px;
  width: 100%;
  left: 0;
}

/* Research planning stays distinct from the technology branches. */
.research-plan { display:grid;grid-template-columns:240px 1fr;gap:20px;margin:18px 0 24px;padding:18px;background:#11242c;border:1px solid #324f5b;border-radius:10px; }
.research-current,.research-pending {display:flex;flex-direction:column;gap:9px;}
.research-plan span {font-size:11px;letter-spacing:1.5px;color:var(--muted);}
.research-current b {color:#a9e2cb;font-size:16px;}
.research-plan small {display:block;color:var(--muted);font-size:12px;line-height:1.5;}
.research-pending {max-height:180px;overflow:auto;}
.research-order {display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #29404a;}
.research-order>div {flex:1;}.research-order b{font-size:13px;}.research-order strong{color:#a9e2cb;font-size:12px;}
.research-order button{padding:4px 9px;min-width:30px;}

.ore-summary { margin: 14px 0; padding: 12px 14px; border: 1px solid #314b56; border-radius: 10px; background: #12242d; display: grid; gap: 7px; }
.ore-summary b { color: #a9ddcd; font-size: 13px; }
.ore-summary small, .knowledge-summary { color: #99afb8; font-size: 12px; line-height: 1.5; }

/* Compact forecast shares each stock column's width and text origin. */
.resources { top: 16px; }
.resource { padding: 10px 17px 8px; }
.resource:nth-child(4) { border-right: 0; }
.production-forecast { border-top: 1px solid #32464f; margin: 9px -17px -8px; padding: 7px 17px 9px; background: #19362f44; }
.production-forecast small { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; }
.production-forecast strong { display: block; margin-top: 4px; color: var(--green); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
#forecast-toggle { position: absolute; right: 3px; bottom: 5px; border: 0; padding: 2px 4px; color: var(--muted); font-size: 12px; }
.toolbar { top: 169px; }
.menu-btn { top: 169px; }
.screen.A .map-title { top: 217px; }
.screen.A .map, .screen.A.has-details .map, .screen.A.building .map { top: 250px; }
.forecast-table { display: grid; grid-template-columns: 1fr 1fr 1fr; font-variant-numeric: tabular-nums; }
.forecast-table div { padding: 12px; border-bottom: 1px solid var(--line); }
.forecast-table div:nth-child(3n) { color: var(--green); }
.forecast-event { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--line); }
#forecast-body h3 { margin-top: 24px; font-size: 13px; }
.queue-dock { top: 244px; }
.planet-details { top: 244px; }

/* Language preference is browser-wide, independent of world saves. */
#language-select{font:inherit;font-size:12px;color:var(--white);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:88px}
html[lang="en"] .resource label{letter-spacing:.8px}
html[lang="en"] .toolbar button{padding-left:12px;padding-right:12px}

/* Operating economy: compact stock/capacity and an explicit power balance. */
.resource b small { font-size: 13px; color: var(--muted); font-weight: 500; }
.resource:nth-child(3) > span { max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.power-summary { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #10252de0; }
.power-summary b, .power-summary small { display: block; font-size: 12px; line-height: 1.6; }
.power-summary small { color: var(--muted); }
.power-shortage { color: #e8bd79; }
.starting-profile { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #122630; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.starting-profile label { font-size: 13px; color: var(--green); }
.starting-profile select { font: inherit; color: var(--white); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
#profile-description { grid-column: 1 / -1; }
#profile-description b, #profile-description small { display: block; font-size: 12px; line-height: 1.7; }
#profile-description small { color: var(--muted); }

.resource{position:relative}.energy-toggle{position:absolute;right:6px;top:5px;background:transparent;border:0;color:var(--muted);padding:4px;cursor:pointer}.energy-toggle:hover{color:var(--green)}.energy-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.energy-totals>div{padding:14px;background:#0c1c25;border-radius:8px;color:var(--muted)}.energy-totals b{display:block;color:var(--green);font-size:18px;margin-top:7px}.energy-table{width:100%;border-collapse:collapse;font-size:13px}.energy-table th,.energy-table td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}.energy-table th{color:var(--muted)}
.facility-flow { margin: 8px 0; }
.facility-flow small { display: block; line-height: 1.7; }
.facility-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.facility-actions button { padding: 7px 10px; font-size: 11px; }
.facility-actions [aria-pressed="false"] { color: var(--muted); }
.hover-project .yield small, .energy-table td small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
#replacement-kind { margin: 12px; padding: 9px; background: var(--panel); color: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.demolition-impact { padding: 12px 16px; margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; }
#confirm-demolition, #cancel-demolition { margin: 8px 8px 0 0; }
#fuel-reserve { max-width: 110px; }

/* C activity view: bottom-anchored, independent of the map and detail layout. */
.activity-panel { position:absolute;right:26px;bottom:73px;width:292px;max-height:calc(100vh - 330px);z-index:12;background:#10212bf5;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px #0005;display:flex;flex-direction:column;overflow:hidden; }
.activity-panel header {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.activity-panel header b {font-size:11px;letter-spacing:.5px}.activity-panel header small {font-size:10px;color:var(--green)}
.activity-tasks {max-height:190px;overflow:auto;padding:0 12px;flex-shrink:0}.activity-task {display:block;text-align:left;width:100%;border:0;border-radius:0;border-bottom:1px solid #31444c;background:transparent;padding:11px 0;white-space:normal}
.activity-task > span:first-child {display:flex;align-items:start;justify-content:space-between;gap:8px}.activity-task b {font-size:11px;font-weight:600}.activity-task strong {font-size:10px;color:var(--green);flex-shrink:0}.activity-task small {display:block;font-size:10px;color:var(--muted);line-height:1.5;margin-top:5px}
.activity-bar {display:block;height:3px;background:#2d414b;margin-top:7px}.activity-bar i {display:block;height:100%;background:var(--green);transition:width .12s linear}.activity-task.research .activity-bar i {background:#99c8ec}
.activity-wait,.activity-empty {font-size:10px;color:var(--muted);line-height:1.5;margin:10px 0}.activity-log-head {display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.activity-log-head b {font-size:10px;letter-spacing:.7px}.activity-log-head button {font-size:10px;padding:4px 6px;border:0}
.activity-history {overflow:auto;min-height:0;max-height:160px;padding:0 12px;overscroll-behavior:contain}.activity-panel.expanded .activity-history {max-height:calc(100vh - 500px)}
.activity-event {display:flex;gap:9px;padding:10px 0;border-bottom:1px solid #263b45}.activity-event .event-icon {color:var(--green);font-size:15px}.activity-event.research .event-icon{color:#99c8ec}.activity-event.travel .event-icon{color:#c3a9e9}.activity-event.warning .event-icon{color:#e9c17d}.activity-event b{font-size:11px;font-weight:500}.activity-event p{font-size:10px;color:var(--muted);margin:3px 0;line-height:1.4}.activity-event small{font-size:9px;color:var(--muted)}
.activity-filters {display:flex;gap:2px;padding:6px 10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.activity-filters button {padding:4px 5px;font-size:9px;border:0}.activity-filters .active{color:#102a25;background:var(--green)}
.activity-panel footer {font-size:9px;color:var(--muted);padding:9px 12px;border-top:1px solid var(--line);flex-shrink:0}
.activity-chip {position:absolute;right:26px;bottom:73px;width:292px;z-index:13;border:1px solid var(--line);background:#10212bf5;font-size:11px;padding:12px;text-align:left}
.screen.activity-details .planet-details {bottom:126px;max-height:calc(100vh - 375px)}
.body-activity {display:block;width:130px;margin:6px auto 0;color:var(--green)}.body-activity:empty {display:none}.body-work-label{display:block;font-size:9px;line-height:1.4;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.body-work-bar{display:block;background:#2b424c;height:3px;margin-top:4px}.body-work-bar i{display:block;height:100%;background:var(--green);transition:width .12s linear}
.activity-focus .orb {box-shadow:0 0 0 4px #a9e4d0,0 0 26px #a9e4d055!important}
@media(max-height:850px){.activity-panel{max-height:calc(100vh - 300px)}.activity-tasks{max-height:145px}.activity-history{max-height:125px}.activity-panel.expanded .activity-history{max-height:240px}}

/* Product update history: data and renderer are separate from world activity. */
.changelog-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:8px 0 24px;border-bottom:1px solid var(--line)}
.changelog-intro small{font-size:10px;letter-spacing:2px;color:var(--muted)}
.changelog-intro h2{margin:10px 0;font-size:25px}
.changelog-intro p,.changelog-footnote{max-width:600px;color:var(--muted);font-size:13px;line-height:1.7}
.changelog-status{font-size:11px;white-space:nowrap;border:1px solid var(--line);border-radius:20px;padding:8px 12px;color:var(--green)}
.changelog-timeline{padding:0 0 0 18px;border-left:1px solid var(--line);margin:22px 0 20px 5px}
.changelog-entry{position:relative;padding:0 0 25px 12px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.changelog-entry:before{content:"";position:absolute;left:-23px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--panel)}
.changelog-entry:last-child{margin-bottom:0;border-bottom:0}
.changelog-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.change-kind{padding:4px 9px;border-radius:6px;background:#a9e2cb14;color:var(--green);font-size:11px}
.change-kind.fixed{color:var(--amber);background:#e8bd7e14}.change-kind.improved{color:#9bc4ed;background:#9bc4ed14}
.change-latest{font-size:10px;letter-spacing:1px;color:var(--green)}
.changelog-entry h3{margin:13px 0 12px;font-size:18px;color:var(--white)}
.changelog-entry ul{margin:0;padding-left:19px;line-height:1.8;font-size:14px;color:#becfd5}.changelog-entry li+li{margin-top:6px}
@media(max-width:650px){.changelog-intro{flex-direction:column;gap:10px}.changelog-entry{padding-left:4px}.changelog-entry ul{font-size:13px}}