/* Shared city facts. The share labels align with resources; only their bar
   sits below that line. City work belongs to the scene and bottom drawer. */
.city-overview {
  --city-title-size:20px;--city-fact-size:16px;
  position:absolute;top:0;left:0;z-index:8;width:100%;padding:10px 28px 24px;
  display:grid;grid-template-columns:max-content max-content max-content minmax(0,1fr);
  align-items:center;column-gap:32px;row-gap:8px;
  color:var(--fg);text-shadow:0 1px 5px #000;
}
.city-overview::before {
  content:"";position:absolute;inset:0 0 -28px;z-index:-1;
  background:linear-gradient(#04080df5 25%,#04080de0 55%,transparent);pointer-events:none;
}
.city-overview-topline {display:contents;}
.city-overview-heading {grid-column:1;grid-row:1;display:flex;align-items:center;gap:22px;min-height:42px;}
.city-overview-heading h1 {font-size:var(--city-title-size);font-weight:600;line-height:1.2;margin:0;letter-spacing:-.02em;}
body.strategy-game .city-overview-heading .ui-button {
  padding:6px 0;min-height:40px;flex:none;color:var(--fg)!important;
  font-size:var(--city-title-size);font-weight:600;line-height:1.2;letter-spacing:-.02em;
}
#simulation .city-overview .compact-city-stats {
  position:static!important;inset:auto!important;transform:none;display:contents!important;
  margin:0!important;padding:0!important;border:0;background:none;backdrop-filter:none;
}
#simulation .city-overview .city-resource-strip {
  grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-start;
  gap:24px;margin:0;flex-wrap:nowrap;
}
#simulation .city-overview .resource-stat {font-size:var(--city-fact-size);line-height:1.4;white-space:nowrap;}
.city-overview .resource-stat>b,.city-overview .resource-rate {font-size:inherit;}
.city-overview .resource-rate {font-weight:400;color:var(--fg-muted);white-space:nowrap;}
.city-overview .resource-icon {width:16px;height:16px;}
#simulation .city-overview .city-share-row {
  grid-column:3;grid-row:1;align-self:center;position:static;display:grid!important;grid-template-columns:max-content max-content;gap:3px 14px;
  min-width:0;max-width:none;margin:0;font-size:var(--city-fact-size);line-height:1.4;white-space:nowrap;
}
.city-overview .city-share-row .you b {color:var(--player);}
.city-overview .population-bar {
  grid-column:1/-1;grid-row:2;align-self:center;transform:none;width:100%;
  height:3px!important;margin:0!important;pointer-events:none;
}
#simulation .city-overview .city-capacity-note {grid-column:4;grid-row:1;min-width:0;margin:0;font-size:var(--city-fact-size);line-height:1.4;color:var(--fg-muted);overflow-wrap:break-word;}
.city-overview .city-done {grid-column:1/-1;margin:0;}
.city-overview .city-done {max-width:100%;font-size:var(--text-meta);}
.city-overview .city-done ul {display:flex;flex-wrap:wrap;gap:4px 12px;margin:2px 0 0;padding:0;list-style:none;}
@media(max-width:1050px) {
  .city-overview {grid-template-columns:max-content max-content minmax(0,1fr);column-gap:24px;}
  .city-overview-heading {grid-column:1/-1;grid-row:1;}
  #simulation .city-overview .city-capacity-note {grid-column:3;grid-row:2;}
  #simulation .city-overview .city-resource-strip {grid-column:1;grid-row:2;}
  #simulation .city-overview .city-share-row {grid-column:2;grid-row:2;}
}
@media(max-width:700px),(pointer:coarse) and (max-height:500px) {
  .art-phone .city-overview {--city-title-size:18px;top:4px;left:12px;width:calc(100% - 24px);padding:0 0 14px;display:flex;flex-wrap:wrap;justify-content:flex-start;column-gap:24px;row-gap:8px;}
  .art-phone .city-overview::before {inset:-16px -24px -24px;}
  .city-overview-topline {grid-column:1/-1;grid-row:1;flex-basis:100%;width:100%;display:flex;align-items:center;gap:12px;min-width:0;}
  .city-overview-heading {gap:16px;min-height:36px;flex:none;}
  #simulation .city-overview .city-capacity-note {flex:1;min-width:0;}
  body.strategy-game .city-overview-heading .ui-button {min-height:36px;}
  #simulation .city-overview .city-resource-strip {gap:16px;justify-content:flex-start;}
  .city-overview .resource-icon {width:14px;height:14px;}
  #simulation .city-overview .city-share-row {gap:3px 12px;justify-content:flex-start;}
  .city-overview .city-done {flex-basis:100%;}
  .phone-layout .phone-scene .building-label {max-width:140px;min-height:38px;font-size:var(--text-meta);}
  .phone-layout .phone-scene .building-output {font-size:var(--text-meta);}
}
@media(max-width:360px) {
  .art-phone .city-overview {column-gap:16px;}
  #simulation .city-overview .city-resource-strip {gap:10px;}
  .city-overview-heading {gap:10px;}
  .city-overview-topline {gap:10px;}
  #simulation .city-overview .city-share-row {gap:3px 8px;}
}
@media(min-width:701px) and (max-height:500px) and (pointer:coarse) {
  .art-phone .city-overview {width:calc(100% - var(--decision-width) - 32px);}
}

.city-work-hit {position:absolute;pointer-events:auto;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;}
.city-work-hit:hover:not(:disabled),.city-work-hit:active {background:transparent;border-color:transparent;box-shadow:none;}
.city-work-hit[hidden] {display:none;}
.building-label[data-swap] {cursor:pointer;}
.building-label:not([data-swap]) {pointer-events:none;cursor:default;}
.building-label[data-swap] {display:flex;flex-wrap:nowrap;gap:12px;min-height:44px;}
.building-label .work-site-label {min-width:0;text-align:left;}
.building-label .work-site-arrow {flex:none;color:var(--accent);font-size:24px;line-height:1;}
.building-label[data-swap]:hover {background:var(--surface-raised);outline:1px solid var(--accent);}

/* Additional districts stay reachable below the city facts on both layouts. */
body.strategy-game #simulation .city-landscape>.scenery-navigation:not([hidden]) {
 display:flex!important;position:absolute;left:12px;bottom:auto;z-index:9;
 max-width:calc(100% - 24px);gap:6px;font-size:var(--text-meta);
 background:var(--surface);border:1px solid var(--border-strong);color:var(--fg);
}
body.strategy-game #simulation .scenery-navigation button {min-height:44px;padding:6px 10px;font-size:inherit;}