/* Final interface roles. Layout lives in the screen styles; color and type live here. */
body.strategy-game {
  font-size: var(--text-body);
  line-height: 1.5;
}
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}
.strategy-game :is(a, input, select, summary, [tabindex]):focus-visible {
  outline-color: var(--action);
}
.strategy-game button:focus {
  outline: none;
}
/* The outcome screen takes focus so it is announced; it is a screen, not a control. */
.strategy-game .ending-banner:focus {
  outline: none;
}
.strategy-game button:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 var(--action);
}
.strategy-game .audio-controls input[type='range'] {
  accent-color: var(--fg);
}
.select-control {
  position: relative;
  display: inline-grid;
  vertical-align: middle;
  min-width: 0;
}
.select-control select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 160px;
  padding: 10px 44px 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-compact);
  line-height: 1.5;
}
.select-control > svg {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.victory-card .select-control {
  display: grid;
  margin-top: 16px;
}
.victory-card .select-control select {
  margin-top: 0;
}
/* Ordinary prose is neutral; hierarchy comes from size, weight and placement. */
h1,
.city-heading h1,
.view-title h1,
#sim-dialog h1 {
  font-size: var(--text-heading);
  font-weight: 500;
}
h2,
.work-expansion h2 {
  font-size: var(--text-section);
  font-weight: 600;
}
h3 {
  font-size: var(--text-compact);
  font-weight: 600;
}
/* Selected objects and available actions are stronger than supporting prose. */
.research-workspace .tech-detail h2 {
  font-size: var(--text-value);
  line-height: 1.25;
  font-weight: 600;
}
.work-choice-heading strong,
.locked-work-choice strong,
.response-options button strong {
  font-size: var(--text-body);
  line-height: 1.35;
  font-weight: 600;
}
p,
.work-choice-effect,
.tech-detail p,
.brief-item p,
#sim-dialog p {
  font-size: var(--text-compact);
  line-height: 1.5;
}
small,
.eyebrow,
.back-world,
.turn-number,
.map-key,
.work-current,
.work-choice-cost,
.work-choice-heading small,
.locked-work-choice small,
.work-expansion header span,
.locked-work-heading {
  font-size: var(--text-meta);
}
.back-world {
  font-size: var(--text-compact);
}
button,
.game-menu button,
.tech-detail button {
  font-size: var(--text-compact);
}
.strategy-game .next-turn,
.strategy-game .primary {
  font-size: var(--text-body);
  background: var(--action);
  color: var(--accent-on) !important;
}
.danger {
  background: var(--harm);
  color: var(--accent-on);
}
/* One label/value/detail hierarchy for global and city numbers. */
.headline-metrics .metric > span,
.headline-metrics .metric > small,
.local-metrics span,
.local-metrics small,
.city-population span,
.city-bottom-stats > p {
  font-size: var(--text-meta);
  color: var(--fg-muted);
}
.headline-metrics .metric > b,
.local-metrics b {
  font-size: var(--text-value);
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.headline-metrics .metric > b > span {
  font-size: inherit;
}
.headline-metrics .metric.user-metric > b {
  font-size: var(--text-section);
}
.city-population strong {
  font-size: var(--text-body);
}
/* Breakdown rows stay compact; names and section totals remain easy to scan. */
.metric-tooltip,
.metric-tooltip h4,
.metric-tooltip .metric-source,
.metric-tooltip .metric-source b,
.metric-tooltip p,
.tech-tooltip small {
  font-size: var(--text-meta);
  line-height: 1.5;
}
.metric-tooltip h3,
.metric-tooltip .metric-total .metric-source,
.metric-tooltip .metric-total .metric-source b,
.tech-tooltip,
.tech-tooltip p,
.tech-tooltip > strong {
  font-size: var(--text-compact);
  line-height: 1.5;
}
.metric-tooltip h3,
.metric-tooltip .metric-total .metric-source b,
.tech-tooltip > strong {
  font-weight: 600;
}
/* All news remains equally readable. Links are identified by arrows and underline. */
.world-notifications .notification-text {
  font-size: var(--text-body);
  color: var(--fg);
}
.world-notifications button.notification-text:hover,
.world-notifications button.notification-text:focus-visible {
  color: var(--fg);
}
.world-tree-controls .research-widget > span {
  font-size: var(--text-meta);
  color: var(--fg-muted);
  letter-spacing: 1px;
}
.world-tree-controls .research-widget strong {
  font-size: var(--text-section);
  color: var(--fg);
}
.research-estimate > strong,
.tech-cost b {
  font-size: var(--text-value);
  color: var(--fg);
}
.research-estimate > span,
.research-estimate > small,
.tech-requirement {
  font-size: var(--text-meta);
}
/* Ownership is constant across buildings, trees and map markers. */
.connections path {
  stroke: var(--player);
}
.city-plot.owned {
  --structure-color: var(--player);
}
.city-plot.foreign {
  --structure-color: var(--rival);
}
.city-plot[data-owner='humans'] {
  --structure-color: var(--human);
}
.city-plot.offline {
  --structure-color: var(--fg-subtle);
  --ok-fg: var(--fg-subtle);
}
.human-map-key {
  color: var(--human);
}
.electricity-icon {
  color: var(--electricity);
}
.tag.human {
  color: var(--human);
}
.research-view[data-tree-owner='you'] {
  --tree-color: var(--player);
}
.research-view[data-tree-owner='meridian'],
.research-view[data-tree-owner='helios'] {
  --tree-color: var(--rival);
}
.research-view[data-tree-owner='humans'] {
  --tree-color: var(--human);
}
/* The check distinguishes completed from working; a progress line identifies working. */
.branch-tree .tech-hex.complete,
.branch-tree .tech-hex.researching,
.branch-tree .tech-hex.working {
  --hex-fill: var(--tree-color);
  --hex-line: var(--tree-color);
  --hex-ink: var(--accent-on);
  color: var(--accent-on) !important;
}
.branch-tree .tech-hex.complete .hex-shape path,
.branch-tree .tech-hex.researching .hex-shape path,
.branch-tree .tech-hex.working .hex-shape path {
  fill: var(--hex-fill) !important;
  stroke: var(--hex-line) !important;
}
.branch-tree .tech-hex.complete .tech-glyph,
.branch-tree .tech-hex.researching .tech-glyph,
.branch-tree .tech-hex.working .tech-glyph {
  color: var(--hex-ink) !important;
}
.branch-tree .tech-hex.complete .hex-caption,
.branch-tree .tech-hex.researching .hex-caption,
.branch-tree .tech-hex.working .hex-caption,
.tech-complete-check {
  color: var(--accent-on) !important;
}
/* Working reads differently from done: the technology being researched is
   the one bright hex, with its percentage under the name; finished ones are a
   calmer shade with a check. */
.branch-tree .tech-hex.complete {
  --hex-fill: color-mix(in srgb, var(--tree-color) 58%, var(--surface));
  --hex-line: color-mix(in srgb, var(--tree-color) 58%, var(--surface));
  --hex-ink: var(--fg);
  color: var(--fg) !important;
}
.branch-tree .tech-hex.complete .hex-caption, .branch-tree .tech-hex.complete .tech-complete-check { color: var(--fg) !important; }
.branch-tree .tech-hex.researching .hex-caption { font-weight: 700; }
.branch-tree .tech-hex.available {
  --hex-fill: color-mix(in srgb, var(--tree-color) 30%, var(--surface));
  --hex-line: color-mix(in srgb, var(--tree-color) 65%, var(--fg));
  --hex-ink: var(--fg);
}
.branch-tree .tech-hex.available .hex-shape path {
  fill: var(--hex-fill) !important;
  stroke: var(--hex-line) !important;
}
.branch-tree .tech-hex.available .tech-glyph {
  color: var(--fg) !important;
}
.branch-tree .tech-hex.locked .hex-shape path {
  fill: var(--surface) !important;
  stroke: var(--border-strong) !important;
}
.branch-tree .tech-hex.locked .tech-glyph {
  color: #bdc7d3 !important;
  opacity: 1;
}
.branch-tree .tech-hex.locked {
  opacity: 1;
}
.branch-tree .tech-hex:not(.ending-leaf) {
  grid-template-rows: 30px 42px 14px;
  padding: 4px 11px 6px;
  gap: 2px;
}
.branch-tree .tech-hex .tech-glyph {
  width: 40px;
  height: 30px;
}
/* Detailed city drawings need screen-sized strokes when used as tiny emblems. */
.branch-tree .tech-hex .approved-glyph :is(path, polygon, polyline, line, rect, circle, ellipse) {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.branch-tree .tech-hex.selected .hex-shape path {
  stroke: var(--accent-strong) !important;
  stroke-width: 3 !important;
}
.city-name {
  font-size: var(--text-diagram-label);
}
.branch-tree .tech-hex strong {
  font-size: var(--text-hex-label);
}
.branch-tree .hex-caption:empty {
  display: none;
}
.branch-tree .hex-caption,
.city-value,
.map-city.unoccupied .city-value {
  font-size: var(--text-diagram-detail);
}
.tech-detail .tech-relation,
.tech-detail .successors .tech-relation {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tech-detail .tech-risk,
.tradeoff {
  color: var(--fg-muted);
}
.warning,
.city-danger {
  color: var(--caution);
}
.mechanic-details summary::after {
  color: var(--fg-muted);
}
/* The opening is prose and choices. Green belongs to the rack's physical online LED. */
#cinema .cinema-kicker,
#cinema .dialogue-speaker {
  font-size: var(--text-meta);
  color: var(--fg-muted);
  letter-spacing: 1px;
}
#cinema.guided-opening .awakening-setup h1 {
  font-size: var(--text-heading) !important;
}
#cinema.guided-opening .machine-dialogue h2 {
  font-size: var(--text-heading);
  font-weight: 500;
}
#cinema.guided-opening .dialogue-choices strong {
  font-size: var(--text-body);
}
#cinema.guided-opening .origin-picker strong {
  font-size: var(--text-section);
}
#cinema.guided-opening .origin-picker .origin-tech {
  font-size: var(--text-compact) !important;
  color: var(--fg);
}
#cinema.guided-opening .origin-picker .origin-city,
#cinema.guided-opening .origin-resources small,
#cinema.guided-opening .difficulty-picker > span {
  font-size: var(--text-meta);
  color: var(--fg-muted);
}
#cinema.guided-opening .origin-resources > span {
  font-size: var(--text-compact);
  line-height: 1.5;
}
#cinema.guided-opening .origin-resources b {
  font-size: var(--text-body);
  color: var(--fg);
}
#cinema .cinema-start,
#cinema .cinema-new,
#cinema.guided-opening .awakening-setup .cinema-start {
  font-size: var(--text-body);
}
#cinema.guided-opening .difficulty-picker button {
  font-size: var(--text-compact);
}
@media (max-width: 760px) {
  .headline-metrics .metric > b,
  .headline-metrics .metric.user-metric > b {
    font-size: var(--text-section);
  }
  .headline-metrics {
    gap: 10px;
  }
  #cinema.guided-opening .awakening-setup h1 {
    font-size: var(--text-heading) !important;
  }
  #cinema.guided-opening .origin-picker strong {
    font-size: var(--text-body);
  }
}

.ending-banner[data-outcome='won'] > span {
  color: var(--success);
}
.ending-banner[data-outcome='lost'] > span {
  color: var(--harm);
}
/* Small in-diagram labels scale with the city drawing, unlike surrounding UI. */
.grid-work-slot .work-slot > strong {
  font-size: var(--text-section);
}

.save-status {
  display: block;
  max-width: 22ch;
  padding: 8px 12px;
  font-size: var(--text-meta);
  color: var(--fg-muted);
}

.robot-city-site {
  cursor: pointer;
}
.robot-city-site:hover circle,
.robot-city-site:focus circle {
  stroke-width: 2.5;
  stroke-dasharray: none;
}
/* Consequences remain part of the event, with the same interaction on touch and keyboard. */
.event-record {
  margin-top: 0.65rem;
  max-width: 52rem;
  font-size: var(--text-compact);
  line-height: 1.5;
}
.event-record p {
  margin: 0.5rem 0;
}
.event-record details {
  margin-top: 0.65rem;
}
.event-record summary {
  cursor: pointer;
}
.effect-active {
  border-left: 3px solid var(--accent);
  padding-left: 0.65rem;
}
.work-choice-risk {
  font-size: var(--text-meta);
  line-height: 1.45;
  opacity: 0.85;
}
.metric-tooltip {
  max-height: 70vh;
  overflow: auto;
}

/* City choices share one scrollable list; unavailable policies stay readable. */
.work-list-heading {
  flex: none;
  margin: 18px 8px 0;
  font-size: var(--text-meta);
  color: var(--fg-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.city-control-choice {
  padding-left: 8px;
  min-height: 0;
}
.work-saved,
.research-turn-change {
  color: var(--accent);
  font-size: var(--text-meta);
}
.research-turn-change {
  font-size: var(--text-body);
  font-weight: 600;
}
.work-requirements,
.work-choice-context {
  display: block;
  font-size: var(--text-meta);
  line-height: 1.6;
  color: var(--fg-muted);
}
.work-requirements .met {
  color: var(--accent);
}
.established-work-choice {
  padding: 14px 8px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-meta);
  flex: none;
}
.established-work-choice p {
  margin: 6px 0;
  line-height: 1.5;
}
.service-offline {
  border-left: 2px solid var(--fg-muted);
  padding-left: 12px;
}
.city-plot[data-inspect-service] {
  cursor: pointer;
}
.city-plot.offline .city-plot-art {
  filter: grayscale(1);
  opacity: 0.45;
}
.plot-status rect {
  fill: var(--surface);
  stroke: var(--fg-muted);
  stroke-width: 1.5;
}
.plot-status text {
  fill: var(--fg);
  font-size: 19px;
  font-weight: 600;
}
.city-plot.selected .plot-status rect,
.city-plot:focus .plot-status rect {
  stroke: var(--accent);
  stroke-width: 3;
}
.city-incidents {
  position: absolute;
  top: 85px;
  right: 28px;
  bottom: 28px;
  width: 34%;
  max-width: 470px;
  overflow-y: auto;
  padding-right: 4px;
}
.city-incidents article {
  border-top: 1px solid var(--border-strong);
  padding: 16px 0;
}
.city-incidents h2 {
  font-size: var(--text-section);
  line-height: 1.35;
  margin: 0 0 12px;
}
.city-incidents p {
  font-size: var(--text-compact);
  line-height: 1.5;
}
.city-incidents .response-options {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.city-incidents .response-options button {
  padding: 12px;
}
.event-impact {
  color: var(--fg);
  font-weight: 600;
}
@media (max-width: 760px) {
  .city-incidents {
    right: 12px;
    width: 43%;
    top: 100px;
    bottom: 16px;
  }
}

.map-key i.player-key {
  background: var(--player);
}
.map-key i.unused-key {
  background: var(--map-non-user);
}

.map-city-caption {
  overflow: visible;
  pointer-events: none;
}
.map-caption-content {
  text-align: center;
  color: var(--fg);
  font-size: var(--text-diagram-label);
  line-height: 1.5;
}
.map-caption-content.right-label {
  text-align: left;
}
.map-name-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  pointer-events: auto;
  text-shadow:
    0 1px 3px var(--canvas),
    0 -1px 3px var(--canvas);
}
.map-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.map-status-icon {
  flex: none;
}
.map-adoption {
  color: var(--fg-muted);
  font-size: var(--text-diagram-detail);
  text-shadow: 0 1px 3px var(--canvas);
}
.map-city:focus .map-city-target {
  stroke: var(--ring);
  stroke-width: 1.2;
}
.map-city:hover .map-name-row {
  color: var(--player);
}

.metric-tooltip {
  width: 320px;
}
.metric-total {
  border-top: 1px solid var(--border-subtle);
  padding-top: 5px;
  margin-top: 5px;
}
.metric-total .metric-source span {
  color: var(--fg);
  font-weight: 600;
}

.metric-tooltip .metric-source span,
.metric-tooltip .metric-source b {
  color: var(--fg);
}
.metric-tooltip .metric-source.is-offline span,
.metric-tooltip .metric-source.is-offline b {
  color: var(--fg-muted);
}

/* Ending destinations sit at branch tips, outside the research hexagons. */
.branch-tree .tech-hex.ending-leaf {
  display: flex;
  clip-path: none;
  background: none;
  border: 0;
  color: var(--fg-muted);
  padding: 14px 6px;
  cursor: pointer;
  gap: 6px;
}
.branch-tree .ending-leaf strong {
  width: auto;
  max-width: 104px;
  font-size: var(--text-compact);
  line-height: 1.3;
}
.branch-tree .ending-leaf:hover strong,
.branch-tree .ending-leaf.selected strong {
  color: var(--fg);
}
.branch-tree .ending-leaf:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Output stays visible when an incident takes its source offline. */
.city-plot .plot-contribution {
  font-weight: 400;
  fill: var(--player);
}
.city-plot.foreign .plot-contribution {
  fill: var(--rival);
}
.city-plot[data-owner='humans'] .plot-contribution {
  fill: var(--human);
}
.city-plot .plot-contribution.inactive {
  fill: var(--fg-subtle);
}

/* Keep city captions readable as infrastructure accumulates. */
.city-plots-scroll {
  position: absolute;
  top: 110px;
  bottom: 250px;
  left: 12px;
  width: calc(58% - 24px);
  overflow: auto;
  scrollbar-width: thin;
}
.city-plots-scroll .city-plot-map {
  display: block;
  width: 100% !important;
  min-width: 700px;
  height: auto !important;
  padding: 0 !important;
}
.city-bottom-stats {
  max-width: none;
  width: calc(58% - 64px);
}
.city-bottom-stats .local-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .city-plots-scroll {
    width: calc(52% - 24px);
    bottom: 300px;
  }
  .city-bottom-stats {
    width: calc(52% - 40px);
  }
  .city-bottom-stats .local-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.local-metrics > div {
  grid-template-rows: auto auto 1fr;
  align-content: start;
}
.local-metrics .metric-scope {
  font-size: var(--text-diagram-detail);
  color: var(--fg-subtle);
}
.local-metrics small {
  line-height: 1.4;
}

.headline-metrics .metric > b > .confidence-score {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.metric-tooltip section + section {
  margin-top: 12px;
}
.metric-tooltip .metric-note {
  margin: 8px 0 12px;
  color: var(--fg-muted);
}

.metric-tooltip .metric-source,
.metric-tooltip .metric-source b,
.metric-tooltip p,
.metric-tooltip h4 {
  font-size: var(--text-compact);
}
.metric-tooltip h3 {
  font-size: var(--text-body);
}

.branch-tree .ending-leaf.available strong,
.branch-tree .ending-leaf.available:hover strong,
.branch-tree .ending-leaf.available.selected strong { color: var(--accent); }
.branch-tree .ending-leaf.locked { cursor: pointer; }
.branch-tree .ending-leaf.locked:hover strong { color: var(--fg); }
.tech-tooltip { max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow: auto; }
.ending-panel { text-align: left; }
.ending-panel h2 { color: var(--accent); }
.ending-panel .ending-goal { font-size: var(--text-body); line-height: 1.5; margin: 12px 0 22px; }
.ending-checklist { list-style: none; padding: 0; margin: 0; }
.ending-checklist li { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-top: 1px solid var(--border-subtle); }
.ending-checklist li div { flex: 1; min-width: 0; }
.ending-checklist b { font-size: var(--text-compact); font-weight: 600; }
.ending-checklist strong { font-size: var(--text-compact); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ending-checklist .check-mark { color: var(--fg-muted); font-size: 17px; }
.ending-checklist .done .check-mark { color: var(--success); }
.ending-panel small { display: block; font-size: var(--text-meta); line-height: 1.5; color: var(--fg-muted); margin: 5px 0 0; }
.ending-panel .ending-risk, .ending-panel .ending-blocked { font-size: var(--text-meta); line-height: 1.5; margin: 18px 0; color: var(--fg-muted); }
.ending-panel .ending-blocked { color: var(--accent); }
.ending-cities { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-compact); }
.ending-cities h3 { margin: 0 0 8px; font-size: inherit; font-weight: 500; color: var(--fg-muted); }
.ending-panel .ending-city { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 8px; background: none; border: 0; padding: 10px 0; margin: 0; font-size: var(--text-meta); text-align: left; }
.ending-city b { font-weight: 500; white-space: nowrap; }
.ending-city.is-offline { color: var(--fg-muted); }
.ending-actions { border-top: 1px solid var(--border-subtle); padding-top: 18px; }
.ending-work { margin: 14px 0; }
.ending-work > b { font-size: var(--text-compact); }
.ending-work button { width: 100%; }
.ending-panel .ending-work small { margin-top: 6px; }

/* Six distinct outcomes begin on entry; the winning turn needs no acknowledgement. */
.ending-banner.outcome-cinema { position: fixed; inset: 0; width: auto; max-width: none; max-height: none; overflow: auto; border: 0; border-radius: 0; background: var(--canvas); padding: 35px max(24px, calc((100vw - 760px) / 2)); text-align: center; z-index: 500; }
.ending-banner .outcome-audio { position: absolute; top: 12px; right: 18px; }
.ending-banner .outcome-audio button { margin: 0; }
.outcome-cinema .outcome-title { display: block; font-size: var(--text-display); letter-spacing: 5px; font-weight: 700; }
.outcome-cinema .ending-scene { display: block; width: 100%; max-height: 44vh; margin: 12px auto; overflow: visible; }
.outcome-cinema p { max-width: 620px; margin: 15px auto; }
.ending-stars { fill: var(--fg-muted); opacity: .6; }
.ending-earth { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.4; }
.ending-land { fill: var(--border-strong); opacity: .65; }
.ending-swarm { fill: var(--accent); }
.ending-swarm circle { transform-origin: 300px 155px; animation: swarm-arrive 5s both; animation-delay: calc(var(--i) * 25ms); }
.ending-wave { fill: none; stroke: var(--accent); animation: ending-wave 5s both; }
.ending-machine { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; animation: ending-reveal 5s both; }
.ending-clips { fill: none; stroke: var(--accent); stroke-width: 2; }
.ending-clips path { animation: ending-reveal 2s both; animation-delay: calc(var(--i) * 100ms); }
.ending-arcs { fill: none; stroke: var(--accent); stroke-width: 1.7; }
.ending-arcs path { stroke-dasharray: 400; animation: arsenal-arc 4s both; animation-delay: calc(var(--i) * 100ms); }
.ending-bursts { fill: var(--accent); opacity: .65; }
.ending-bursts circle { transform-box: fill-box; transform-origin: center; animation: arsenal-burst 3s both; animation-delay: calc(2s + var(--i) * 140ms); }
.ending-destination { fill: var(--ok-soft); stroke: var(--success); }
.ending-flight-path { fill: none; stroke: var(--border-strong); stroke-dasharray: 3 7; }
.ending-ark { fill: var(--accent); stroke: var(--accent); animation: ark-depart 7s ease-in-out both; }
.ending-network { stroke: var(--success); fill: var(--success); stroke-width: 1; }
.ending-network path, .ending-network circle { animation: ending-reveal 4s both; animation-delay: calc(var(--i, 0) * 100ms); }
@keyframes swarm-arrive { from { transform: rotate(-120deg) scale(2.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ending-wave { from { opacity: 0; transform: scale(.3); transform-origin: center; } to { opacity: .4; transform: none; } }
@keyframes ending-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes arsenal-arc { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes arsenal-burst { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: .65; } }
@keyframes ark-depart { from { transform: translate(0,0); } to { transform: translate(145px,-83px); } }
@media (prefers-reduced-motion: reduce) { .ending-scene * { animation: none !important; } .ending-ark { transform: translate(145px,-83px); } }

/* Resource accents stay on glyphs; ownership belongs to map structures. */
.resource-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:none}
.resource-tokens{color:#d8ae68}.resource-intelligence{color:#d79baa}.resource-trust{color:#77c9aa}
.resource-usage{color:#d97747}.resource-compute{color:#7dbcc9}.resource-electricity{color:#e7d778}
.resource-amount{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--fg);font-weight:650;margin-right:10px}
.resource-amount small{font-size:var(--text-compact);color:var(--fg-muted);font-weight:400}
.choice-formula{display:grid;gap:4px;font-size:var(--text-compact);line-height:1.65}
.formula-line{display:block}.formula-clause{display:inline}.formula-label{color:var(--fg-muted)}
.formula-separator{color:var(--fg-subtle);padding:0 3px}.formula-note{font-size:var(--text-compact);color:var(--fg-muted);line-height:1.5}
.choice-formula .resource-amount{margin-right:0;font-weight:550;gap:3px}
.choice-formula .resource-icon{width:17px;height:17px}
.available-work-choice{align-content:start}.work-choice-effect:empty{display:none}
.research-formula{display:grid;gap:10px;padding:16px 0;border-block:1px solid var(--border-subtle);margin:16px 0}
.research-formula b{font-size:24px}.research-formula small{color:var(--fg-muted);line-height:1.8}
.metric>span>.resource-icon{width:16px;height:16px;margin-right:5px}.metric .metric-tooltip{max-height:70vh;overflow:auto}
.city-population>.resource-icon,.city-population strong>.resource-icon{margin-right:8px}.city-population strong small{font-size:var(--text-compact);color:var(--fg-muted);font-weight:400}
.usage-equation{font-size:var(--text-body)}.usage-rules{font-size:var(--text-compact);color:var(--fg-muted);max-width:720px}.usage-rules summary{cursor:pointer}.usage-rules p{line-height:1.65}
.local-metrics .resource-amount{margin-right:0}.city-bottom-stats .local-metrics>div{min-width:110px}
.locked-work-choice .choice-formula{opacity:.75}.locked-work-content{width:100%}
.local-metrics b>.resource-amount{font-size:var(--text-value);line-height:1.2}
.usage-rules{position:relative}
.usage-rules[open] .usage-explanation{position:absolute;bottom:calc(100% + 12px);left:0;z-index:var(--z-tooltip);width:min(620px,calc(100vw - 64px));max-height:45vh;overflow:auto;padding:16px 20px;background:var(--surface);border:1px solid var(--border-strong);box-shadow:0 10px 30px #0006}

/* Header totals are supporting information, not page headings. */
.headline-metrics .metric{grid-template-rows:16px 24px 15px;gap:2px}
.headline-metrics .metric>b,.headline-metrics .metric.user-metric>b{font-size:20px;line-height:24px;font-weight:500;letter-spacing:-.02em}
@media(max-width:760px){.headline-metrics .metric{grid-template-rows:16px 22px 15px}.headline-metrics .metric>b,.headline-metrics .metric.user-metric>b{font-size:18px;line-height:22px}}
/* Keep city essentials visible; equations and ledgers are available on demand. */
.compact-city-stats .city-population{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px}
.compact-city-stats .city-population>small{font-size:var(--text-compact);color:var(--fg-muted)}
.compact-city-stats .population-bar{flex-basis:100%;margin:0 0 10px}
.city-summary-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:var(--text-body);color:var(--fg-muted)}
.city-summary-line .resource-amount{font-size:16px;font-weight:500;margin-right:4px}
.city-summary-line .resource-icon{width:18px;height:18px}
.city-summary-line .usage-rules{position:static;flex:none}
.city-summary-line .usage-rules summary{padding:0;color:var(--fg-muted)}
.compact-city-stats .usage-rules[open] .usage-explanation{bottom:calc(100% + 10px);left:0;max-height:55vh;width:min(540px,calc(100vw - 64px))}
.usage-explanation h3{font-size:16px;margin:0 0 12px}.usage-explanation h4{font-size:var(--text-body);margin:16px 0 0}
.city-detail-values{margin:0}.city-detail-values>div{display:flex;gap:16px;justify-content:space-between;margin:8px 0}.city-detail-values dd{margin:0;text-align:right;color:var(--fg)}
.city-capacity-note{margin:8px 0 0;color:var(--warn-fg)}
/* Teach symbols where a resource is first introduced, then use them as shorthand. */
#cinema.guided-opening .origin-resources{display:grid;grid-template-columns:1fr;gap:9px;margin-top:18px}
#cinema.guided-opening .origin-resources>.origin-resource{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;width:100%;margin:0}
#cinema.guided-opening .origin-resource>span{font-size:var(--text-body);color:var(--fg-muted);margin:0}
#cinema.guided-opening .origin-resource>b{font-size:var(--text-body);font-weight:500}
#cinema.guided-opening .origin-resource>.resource-icon{width:18px;height:18px}
.compact-city-stats .city-population strong{display:flex;align-items:center;gap:8px;font-size:var(--text-body);font-weight:400;color:var(--fg-muted)}
.compact-city-stats .city-population strong>.resource-icon{margin:0;width:18px;height:18px}
.compact-city-stats .city-population strong>b{font-size:16px;font-weight:500;color:var(--fg)}
.city-summary-line>span{display:flex;align-items:center;gap:8px}
.city-summary-line>span>b{font-weight:500;color:var(--fg);font-size:16px}
.city-detail-values dt{white-space:nowrap}.city-detail-values dt>.resource-icon{width:16px;height:16px;margin-right:4px}

/* Production lists follow a stable scan order; full effects belong to one inspected item. */
.available-work{gap:0}
.work-list-heading{margin:22px 0 8px;font-size:var(--text-meta);letter-spacing:.08em;color:var(--fg-muted)}
.production-choice{flex-shrink:0;border-top:1px solid var(--border-subtle)}
.production-choice>summary{cursor:pointer;list-style:none}
.production-choice>summary::-webkit-details-marker{display:none}
.production-summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:7px;padding:16px 4px 16px 68px;min-height:94px}
.production-summary:hover,.production-choice[open]>.production-summary{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.production-summary .work-art{width:54px;height:62px;top:14px;left:2px}
.production-name{font-size:var(--text-body);font-weight:600;line-height:1.4;color:var(--fg)}
.production-time{font-size:var(--text-compact);color:var(--fg-muted);white-space:nowrap;padding-top:2px}
.production-output{grid-column:1/-1;font-size:var(--text-body);line-height:1.5;color:var(--fg-muted)}
.production-output .resource-amount{font-size:var(--text-body);font-weight:500;margin:0;gap:4px}
.production-summary .resource-icon{width:17px;height:17px}
.production-cost{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:var(--text-compact);color:var(--fg-muted)}
.production-cost .resource-amount{font-size:var(--text-compact);font-weight:400;margin:0}
.production-expand{margin-left:auto;color:var(--fg-muted);font-size:var(--text-meta)}
.production-choice[open] .production-expand{visibility:hidden}
.production-detail{display:grid;gap:12px;margin:0 4px 16px 68px;padding:14px 0 0;border-top:1px solid var(--border-subtle)}
.production-detail p{margin:0;font-size:var(--text-body);line-height:1.55}
.production-detail .work-requirements{font-size:var(--text-compact);margin:0}
.production-detail .work-choice-warning{font-size:var(--text-compact);line-height:1.5;color:var(--warn-fg)}
.choice-formula{gap:8px;font-size:var(--text-body);line-height:1.5}
.formula-line{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:8px}
.formula-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px}
.formula-label{font-size:var(--text-compact);overflow-wrap:normal;word-break:normal}
.formula-separator{padding:0 3px}
.production-locked>summary{display:grid;gap:5px;padding:12px 4px;color:var(--fg-muted)}
.production-locked>summary strong{font-size:var(--text-body);font-weight:500}
.production-locked>summary small{font-size:var(--text-compact);line-height:1.5}
.production-locked .production-detail{margin-left:4px}
.locked-work-group{margin-top:18px}
.locked-work-group>h3{margin:0;font-weight:500;font-size:var(--text-compact);padding:8px 0;color:var(--fg-muted)}
.city-summary-line{align-items:center;gap:20px;flex-wrap:wrap}
.city-summary-line>span{gap:5px;flex-wrap:wrap;font-size:var(--text-compact)}
.city-summary-line>span>b{font-size:var(--text-body);margin-left:3px}
.city-summary-line .usage-rules{margin-left:auto}
.city-summary-line .resource-icon{width:16px;height:16px}
.usage-explanation .usage-comparison{margin:12px 0}
.usage-comparison>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.usage-comparison dt{color:var(--fg-muted)}
.usage-comparison dd{margin:0;color:var(--fg)}
.usage-explanation .usage-math{border-top:1px solid var(--border-subtle);padding-top:10px;margin-top:14px}
.usage-math summary{font-size:var(--text-compact)}
.usage-explanation p{font-size:var(--text-compact);line-height:1.6}
@media(max-width:760px){.production-summary{padding-left:0}.production-summary .work-art{display:none}.production-detail{margin-left:0}.formula-line{grid-template-columns:80px minmax(0,1fr)}.city-summary-line{gap:12px}}
.production-choice>summary::after{content:none!important}
.production-choice[open]>.production-summary{min-height:68px;align-content:center}
.production-choice[open]>.production-summary .production-output,.production-choice[open]>.production-summary .production-cost{display:none}
.production-choice[open]>.production-summary .work-art{top:4px}
.production-detail .formula-line{grid-template-columns:96px minmax(0,1fr)}
.service-management>.production-choice:first-of-type{margin-top:8px}
.research-detail-label{font-size:var(--text-compact);color:var(--fg-muted)}
.research-calculation p{font-size:var(--text-compact);line-height:1.7}
.current-work-inspection{margin-top:6px}.current-work-inspection .work-current-effect{margin:12px 0}.current-work-inspection .formula-note{display:block;margin-top:8px}

/* Civ V reference: compact icon bars, short production rows, adjacent inspection. */
.game-header{height:44px;padding:5px 18px;gap:28px}
.game-header .brand{font-size:var(--text-body);gap:7px}.game-header .brand img{width:20px;height:20px}
.headline-metrics{justify-content:flex-start;align-items:center;gap:24px}
.headline-metrics .metric{display:flex;align-items:center;gap:5px;grid-template-rows:none;min-height:28px}
.headline-metrics .metric>b,.headline-metrics .metric.user-metric>b{font-size:var(--text-body);line-height:18px;font-weight:500;letter-spacing:0}
.headline-metrics .metric>small{font-size:var(--text-meta);line-height:18px;align-self:center;color:var(--fg-muted)}
.headline-metrics .metric>.resource-icon{width:17px;height:17px}
.header-controls{gap:12px}.header-controls .turn-number{font-size:var(--text-meta)}.header-controls button{height:28px;min-width:28px;padding:4px 8px}
.workspace{height:calc(100dvh - 44px)}
.metric-tooltip,.resource-tooltip{font-size:var(--text-compact);line-height:1.5;border-radius:2px;padding:12px;width:300px;max-height:60vh}
.metric-tooltip h3,.resource-tooltip h3{font-size:var(--text-body);margin:0 0 8px}
.metric-tooltip p,.resource-tooltip p{font-size:var(--text-compact);line-height:1.5;margin:8px 0}
.metric-tooltip .metric-source,.resource-tooltip .metric-source{display:flex;gap:14px;justify-content:space-between;padding:4px 0;font-size:var(--text-meta);line-height:1.5}
.metric-tooltip .metric-source b,.resource-tooltip .metric-source b{font-size:var(--text-meta);font-weight:500;text-align:right}
.metric.help-pinned .metric-tooltip{display:block}
.resource-stat{display:inline-flex;align-items:center;gap:5px;position:relative;cursor:help;min-height:28px;font-size:var(--text-compact);outline-offset:3px}
.resource-stat>b{font-size:var(--text-body);font-weight:500}.resource-stat>small{font-size:var(--text-meta);color:var(--fg-muted)}
.resource-stat>.resource-icon{width:17px;height:17px}
.resource-tooltip{display:none;position:absolute;left:0;top:100%;z-index:var(--z-tooltip);background:var(--surface);border:1px solid var(--border-strong);box-shadow:0 6px 22px #0007;color:var(--fg);white-space:normal;text-align:left;font-weight:400;overflow:auto;cursor:auto}
[data-resource-help]:hover>.resource-tooltip,[data-resource-help]:focus-within>.resource-tooltip,[data-resource-help].help-pinned>.resource-tooltip{display:block}
.city-heading{top:20px}.city-heading h1{font-size:20px;margin:10px 0 0}.city-heading button{font-size:var(--text-meta)}
.compact-city-stats{top:102px;bottom:auto;left:28px;width:340px;max-width:calc(100vw - 370px);padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;z-index:var(--z-floating-panel)}
.city-resource-strip{display:flex;align-items:center;gap:20px}
.compact-city-stats .population-bar{height:3px;margin:5px 0 0;width:100%}
.compact-city-stats .city-capacity-note{font-size:var(--text-meta);line-height:1.45;margin-top:8px}
.city-plots-scroll{top:175px;bottom:30px;width:calc(100% - 370px)}
.city-plots-scroll .city-plot-map{max-width:1000px}
.city-plot>text{font-size:16px}.city-plot .plot-contribution text,.city-plot>text.plot-contribution{font-size:var(--text-compact)}
.work-slot{font-size:var(--text-compact)}.work-slot strong{font-size:var(--text-body)}.work-slot small{font-size:var(--text-meta)}
.work-expansion{width:300px;max-width:300px;right:20px;top:70px;bottom:24px;padding:12px 0}
.work-expansion h2{font-size:var(--text-body);margin-top:3px}.work-expansion header{margin-bottom:10px}.work-expansion header span{font-size:var(--text-meta)}
.work-expansion .available-work{overflow-y:auto;gap:0}
.work-list-heading{font-size:var(--text-meta);line-height:14px;letter-spacing:.06em;margin:12px 0 4px}
.production-choice{position:static;border-top:0;border-bottom:1px solid var(--border-subtle)}
.production-choice>.production-summary,.production-choice[open]>.production-summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;align-content:center;min-height:40px;padding:7px 6px 7px 38px}
.production-summary .work-art,.production-choice[open]>.production-summary .work-art{width:30px;height:34px;left:2px;top:2px}
.production-name{font-size:var(--text-compact);font-weight:500;line-height:1.35}.production-time{font-size:var(--text-meta);padding:0;color:var(--fg-muted)}
.production-choice[open]>.production-summary{background:var(--accent-soft);box-shadow:inset 2px 0 var(--accent)}
.production-choice>.production-detail{position:fixed;right:332px;top:70px;width:310px;max-height:calc(100dvh - 150px);overflow:auto;z-index:15;margin:0;padding:14px;display:grid;gap:10px;background:var(--surface);border:1px solid var(--border-strong);box-shadow:0 8px 24px #0007;border-radius:2px}
.production-choice:not([open])>.production-detail{display:none}
.production-detail-heading{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}
.production-detail-heading h3{font-size:var(--text-body);font-weight:600;margin:0}.production-detail-heading>span{grid-column:1;font-size:var(--text-meta);color:var(--fg-muted)}
.production-detail-heading button{grid-column:2;grid-row:1/3;padding:0 3px;background:none;border:0;color:var(--fg-muted);font-size:16px}
.production-detail p,.production-detail .work-choice-effect{font-size:var(--text-compact);line-height:1.5}
.production-detail .choice-formula{font-size:var(--text-compact);gap:6px}.production-detail .formula-line{grid-template-columns:84px minmax(0,1fr);gap:7px}
.production-detail .formula-label{font-size:var(--text-meta)}.production-detail .resource-amount{font-size:var(--text-compact);font-weight:500}.production-detail .resource-icon{width:16px;height:16px}.production-detail .resource-amount small{font-size:var(--text-meta)}
.production-detail .work-requirements,.production-detail .work-choice-warning{font-size:var(--text-meta)}
.production-locked>.production-summary{padding-left:6px}.production-locked .production-name{color:var(--fg-muted)}
.locked-work-group{margin-top:10px}.locked-work-group>h3{margin:0;font-weight:500;font-size:var(--text-meta);padding:7px 0}
.work-current,.work-current strong{font-size:var(--text-meta)}.work-current{margin-bottom:5px}.work-connector{display:none}
#cinema.guided-opening .origin-resources{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
#cinema.guided-opening .origin-resources>.origin-resource{position:relative;display:inline-flex;gap:5px;width:auto;align-items:center;margin:0}
#cinema.guided-opening .origin-resource>b{font-size:var(--text-body)}.origin-resource>.resource-tooltip{width:240px;font-size:var(--text-compact)}.origin-resource>.resource-tooltip>span{display:block;font-size:var(--text-compact);line-height:1.5;margin-top:6px}
.research-formula{padding:12px 0;gap:7px}.research-formula b{font-size:18px}.research-formula small{font-size:var(--text-meta)}
.research-workspace .tech-detail h2{font-size:18px}.strategy-game .primary,.strategy-game .next-turn{font-size:var(--text-body)}.research-workspace .tech-detail p{font-size:var(--text-compact)}
@media(max-width:900px){.headline-metrics{gap:14px}.game-header{gap:18px}.work-expansion{width:260px}.production-choice>.production-detail{width:280px;right:292px}.compact-city-stats{max-width:calc(100vw - 310px)}.city-resource-strip{gap:12px}.city-plots-scroll{width:calc(100% - 310px)}}
@media(max-width:650px){.game-header{height:auto;min-height:66px;flex-wrap:wrap;gap:4px 14px}.game-header .brand{display:none}.headline-metrics{gap:14px;flex-basis:100%;justify-content:center}.header-controls{margin-left:auto}.workspace{height:calc(100dvh - 66px)}.work-expansion{top:180px;right:12px;bottom:12px;width:245px}.production-choice>.production-detail{position:fixed;right:12px;top:100px;width:calc(100vw - 24px);max-height:calc(100dvh - 150px);z-index:20}.compact-city-stats{max-width:none;width:calc(100% - 56px)}.city-plots-scroll{width:calc(100% - 275px);top:175px}.resource-tooltip{width:260px}.city-resource-strip>.resource-stat:nth-last-child(-n+2)>.resource-tooltip{left:auto;right:0}}
#cinema.guided-opening .origin-resource>.resource-tooltip{display:none}
#cinema.guided-opening .origin-resource:hover>.resource-tooltip,#cinema.guided-opening .origin-resource:focus-within>.resource-tooltip,#cinema.guided-opening .origin-resource.help-pinned>.resource-tooltip{display:block}

/* Copper actions and quiet dark controls share the scenery's material palette. */
.strategy-game :is(.primary, .next-turn),
.strategy-game #cinema .cinema-start,
.strategy-game #cinema.guided-opening .dialogue-choices [data-reply='help'] {
  background: linear-gradient(180deg, #dfa06d, #ca8050);
  color: #23150d !important;
  border: 1px solid #f5c39a80;
  border-bottom-color: #98592e;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #fff1d740, 0 3px 10px #0003;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.strategy-game :is(.primary, .next-turn):hover:not(:disabled),
.strategy-game #cinema .cinema-start:hover:not(:disabled),
.strategy-game #cinema.guided-opening .dialogue-choices [data-reply='help']:hover:not(:disabled) {
  background: linear-gradient(180deg, #e8b184, #d8905d);
  border-color: #f5c39ac0;
  box-shadow: inset 0 1px 0 #fff5e260, 0 3px 12px #0004;
}
.strategy-game :is(.primary, .next-turn):active:not(:disabled),
.strategy-game #cinema .cinema-start:active:not(:disabled),
.strategy-game #cinema.guided-opening .dialogue-choices [data-reply='help']:active:not(:disabled) {
  background: #c67f50;
  box-shadow: inset 0 2px 4px #57321540;
}
.strategy-game :is(.primary, .next-turn):disabled {
  background: #362d27;
  color: #b5a598 !important;
  border-color: #a48a702e;
  box-shadow: none;
  opacity: 1;
}
.strategy-game :is(.primary, .next-turn):focus-visible,
.strategy-game #cinema .cinema-start:focus-visible,
.strategy-game #cinema.guided-opening .dialogue-choices [data-reply='help']:focus-visible {
  outline: 2px solid #f4c79f;
  outline-offset: 3px;
}
.strategy-game .world-notifications .next-turn,
#cinema.guided-opening .awakening-setup .cinema-start,
#cinema.guided-opening .dialogue-choices [data-reply='help'] {
  display: flex;
  align-items: center;
  min-height: 48px;
  height: auto;
  padding: 12px 18px;
  font-size: var(--text-body);
  line-height: 1.5;
}
.strategy-game .world-notifications .next-turn {
  justify-content: center;
}
#cinema.guided-opening .dialogue-choices [data-reply='help'] :is(strong, span) {
  font: inherit;
}
.header-controls > button[data-menu] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
}
.header-controls > button[data-menu] svg {
  display: block;
  width: 16px;
  height: 16px;
}
.header-controls > button,
.game-menu,
.strategy-game #cinema .cinema-new,
#cinema.guided-opening .origin-picker > button {
  background: linear-gradient(#18212de8, #0d141fe8);
  border: 1px solid #c8d7e136;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #ffffff08;
  color: #ecf0f5;
}
.header-controls > button:hover,
.strategy-game #cinema .cinema-new:hover,
#cinema.guided-opening .origin-picker > button:hover {
  background: #25303be8;
  border-color: #e3aa7780;
}
#cinema.guided-opening .origin-picker > button[aria-pressed='true'] {
  border-color: #dba071;
  background: linear-gradient(110deg, #3b2e25ed, #17202be8);
  box-shadow: inset 2px 0 0 #dda06c, inset 0 1px 0 #f8ce9b14;
}
#cinema .difficulty-picker > div {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #0b111bbf;
  border: 1px solid #bfccd52e;
  border-radius: 5px;
}
#cinema.guided-opening .difficulty-picker button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #cbd4df;
}
#cinema.guided-opening .difficulty-picker button:hover {
  background: #d09b6320;
  color: #f3e2d3;
}
#cinema.guided-opening .difficulty-picker button[aria-pressed='true'] {
  background: #d09b6329;
  border-color: #e0a47080;
  color: #f2c59e;
  box-shadow: inset 0 1px 0 #fbd0a21a;
}
.production-summary:hover,
.production-choice[open] > .production-summary {
  background: linear-gradient(90deg, #d69b632b, #d69b6308);
  box-shadow: inset 2px 0 0 #d69b63;
  border-radius: 3px;
}
.strategy-game .game-menu {
  /* Opaque, so the panel behind it doesn't show between the items. */
  background: linear-gradient(#18212d, #0d141f);
}
.game-menu button:hover {
  background: #d69b6320;
  color: #f4d1b2;
}

/* Events stay above updates; city links are visible without disclosures. */
.notification-stream { gap: 20px; }
.notification-kicker {
  display: block;
  margin-bottom: 5px;
  color: #e5b992;
  font-size: var(--text-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.notification-detail {
  display: block;
  margin-top: 5px;
  font-size: var(--text-meta);
  color: #c5d3e1;
}
.notification-city-list { display: grid; gap: 4px; margin-top: 9px; }
.world-notifications .notification-city-list button {
  border: 0;
  border-left: 1px solid #dba07155;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #dce4ef;
  padding: 5px 10px;
  font-size: var(--text-compact);
  line-height: 1.5;
  text-align: left;
}
.world-notifications .notification-city-list button:hover { background: #d69b631a; color: #fff; }
.notification-city-list button:focus-visible { outline: 1px solid #e5b992; outline-offset: 4px; }

/* Usage and resource values wrap inside the inspector, including narrow windows. */
.resource-tooltip { max-width: min(340px, calc(100vw - 40px)); }
.resource-tooltip .metric-source { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.resource-tooltip .metric-source > * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.resource-tooltip .metric-source b { text-align: right; }

.research-gate { padding: 10px 0; border-block: 1px solid var(--border-subtle); color: var(--fg); }
.has-game-art .city-work-dock .work-slot.inspect-only { background: #0b1321e8; color: var(--fg); border-color: var(--border-subtle); }

/* Keep the current research accessible while inspecting another technology. */
.research-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.research-current > span { color: var(--fg-muted); font-size: var(--text-meta); }
.strategy-game .research-current button { margin: 0; }