/* Players Cities: readable overview with optional full metrics. */
.city-shell { max-width:none; width:100%; min-width:0; margin-inline:auto; }
.city-shell .city-hero { border-top:2px solid #4dd8e6; padding:24px; }
.city-shell .city-hero h1 { font-size:1.8rem; letter-spacing:-.025em; }
.city-shell .city-stat { padding:18px; }
.city-shell .city-stat .value { font-variant-numeric:tabular-nums; font-size:1.65rem; }
.city-directory-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.city-view-toggle { border:1px solid #467481; border-radius:6px; padding:9px 14px; background:#132a34; color:#e5f9ff; cursor:pointer; font:inherit; font-size:.8rem; }
.city-view-toggle:hover { background:#1d3c48; }
.city-history-link { display:inline-flex; align-items:center; text-decoration:none; border-color:#54b6be; color:#b7f8ee; }
.city-history-action { margin-top:10px; }
.city-history-dialog { width:min(1200px,94vw); height:88vh; max-width:94vw; max-height:92vh; padding:0; border:1px solid #456576; border-radius:12px; background:#0c1922; color:#e2edf3; overflow:hidden; }
dialog.city-history-dialog { position:fixed; inset:0; margin:auto; box-sizing:border-box; }
.city-history-dialog[open] { display:flex; flex-direction:column; }
.city-history-dialog::backdrop { background:rgba(0,0,0,.75); }
.city-history-dialog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 18px; border-bottom:1px solid #315161; }
.city-history-dialog-toolbar h2 { margin:0; font-size:1.1rem; }
.city-history-dialog iframe { display:block; width:100%; flex:1; min-height:0; border:0; background:#0c1922; }
.city-shell #cities .city-history-action a { padding:6px 10px; font-size:.74rem; }
.city-view-toggle:focus-visible, #cities a:focus-visible { outline:2px solid #67e8f9; outline-offset:3px; }
.city-shell .city-table-wrap { overflow:visible !important; box-sizing:border-box; padding:14px !important; min-width:0; }
.city-shell #cities { table-layout:fixed; min-width:0; }
.city-shell #cities th, .city-shell #cities td { overflow-wrap:anywhere; }
.city-shell #cities .city-tag, .city-shell #cities .city-planet, .city-shell #cities .city-rank-badge { max-width:100%; flex-wrap:wrap; white-space:normal; box-sizing:border-box; }
.city-shell #cities th { font-size:.7rem !important; padding:12px 10px !important; line-height:1.5; }
.city-shell #cities td { font-size:.82rem !important; padding:15px 10px !important; line-height:1.5; font-variant-numeric:tabular-nums; text-align:left !important; }
.city-shell #cities tbody tr:nth-child(even) { background:rgba(148,180,197,.035); }
.city-shell #cities .city-name { display:inline-block; font-size:1rem; font-weight:700; color:#e9fbff; }
.city-shell #cities .city-planet { display:inline-flex; align-items:center; gap:6px; }
.city-shell #cities .city-planet img { width:22px; height:22px; object-fit:contain; }
.city-shell #cities .city-visitor { display:block; color:#96aebb; font-size:.72rem; margin-top:5px; max-width:28ch; }
.city-shell #cities .city-tag { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 9px; border:1px solid #38515e; border-radius:6px; background:#16242e; font-size:.75rem; }
.city-shell #cities .city-tag img { width:18px; height:18px; object-fit:contain; }
.city-shell #cities .city-tag-Rebel { color:#ffc3b8; border-color:#82504c; background:#332326; }
.city-shell #cities .city-tag-Imperial { color:#bcd9ff; border-color:#496687; background:#1b2c40; }
.city-shell #cities .city-spec { color:#b9f2e3; background:#15312e; border-color:#326057; }
.city-shell #cities .city-overview-hidden { display:none !important; }
.city-shell .dataTables_filter input { min-height:36px; padding:6px 10px; }
.city-shell .dataTables_info { font-size:.78rem; }
.city-shell #cities .city-population-warning { color:#ffdc55 !important; font-weight:700; }
@media(min-width:1201px) {
  .city-shell #cities td:nth-child(2) { text-align:left; }
}
/* Cards are only used for the narrow overview, never for full details. */
.city-shell #cities.city-cards:not(.city-full-view),
.city-shell #cities.city-cards:not(.city-full-view) tbody { display:block !important; width:100% !important; }
.city-shell #cities.city-cards:not(.city-full-view) thead { display:none !important; }
.city-shell #cities.city-cards:not(.city-full-view) tbody tr {
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  width:100%; box-sizing:border-box; margin:0 0 14px; padding:12px;
  border:1px solid #304753; border-radius:9px; gap:0;
}
.city-shell #cities.city-cards:not(.city-full-view) tbody td {
  display:grid !important; grid-template-columns:minmax(0,42%) minmax(0,1fr);
  min-width:0 !important; width:auto !important; gap:10px; padding:12px !important;
  text-align:left !important; border:0 !important; border-bottom:1px solid #24353f !important;
}
.city-shell #cities.city-cards:not(.city-full-view) tbody td::before {
  content:attr(data-label); color:#9eb4bf; font-size:.66rem; text-transform:uppercase; align-self:center;
}
.city-shell #cities.city-cards:not(.city-full-view) tbody td:nth-child(2) {
  grid-column:1/-1; grid-row:1; display:block !important;
}
.city-shell #cities.city-cards:not(.city-full-view) tbody td:nth-child(2)::before { display:none; }
.city-shell #cities.city-cards:not(.city-full-view) .city-overview-hidden { display:none !important; }
@media(max-width:1200px) {
  .city-shell #cities tbody tr { padding:12px; border-color:#304753; box-sizing:border-box; }
  .city-shell #cities td { padding:10px !important; }
  .city-shell #cities td:nth-child(2) { grid-column:1/-1; grid-row:1; display:block !important; padding-bottom:16px !important; }
  .city-shell #cities td:nth-child(2)::before { display:none; }
  .city-shell #cities td > .city-tag { justify-self:start; }
  .city-shell #cities td::before { align-self:center; color:#9eb4bf; }
  .city-shell #cities .city-visitor { max-width:none; }
  .city-shell .city-card-header { align-items:flex-start; flex-wrap:wrap; }
}
/* Full details: real table, one city per row. */
.city-shell #cities.city-full-view { display:table !important; width:100% !important; table-layout:fixed; }
.city-shell #cities.city-full-view thead { display:table-header-group !important; }
.city-shell #cities.city-full-view tbody { display:table-row-group !important; }
.city-shell #cities.city-full-view tr { display:table-row !important; }
.city-shell #cities.city-full-view th,
.city-shell #cities.city-full-view tbody td,
.city-shell #cities.city-full-view tbody td:nth-child(2) {
  display:table-cell !important; width:auto !important; min-width:0 !important;
  padding:8px 3px !important; font-size:.68rem !important; line-height:1.4;
  border-bottom:1px solid #263842 !important; overflow-wrap:anywhere;
}
.city-shell #cities.city-full-view td::before { display:none !important; }
.city-shell #cities.city-full-view th:nth-child(2) { width:11% !important; }
.city-shell #cities.city-full-view .city-name { font-size:.78rem; }
.city-shell #cities.city-full-view .city-tag { padding:3px; font-size:.64rem; }
.city-shell #cities.city-full-view th button { padding:0 !important; font-size:inherit !important; border:0; background:transparent; color:inherit; }
.city-shell #cities.city-full-view .city-rank-badge { padding:2px; font-size:.64rem; }
@media(max-width:1100px) {
  /* At phone widths nineteen columns need panning to remain readable. */
  .city-shell .city-table-wrap:has(#cities.city-full-view) { overflow-x:auto !important; }
  .city-shell #cities.city-full-view { min-width:1100px; }
}
@media(max-width:680px) {
  .city-shell .city-hero { padding:18px; }
  .city-shell .city-hero h1 { font-size:1.45rem; }
  .city-shell .city-stats { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .city-shell .city-stat { padding:12px; min-width:0; }
  .city-shell .city-stat .value { font-size:1.3rem; overflow-wrap:anywhere; }
  .city-shell #cities td { font-size:.8rem !important; }
  .city-shell .city-table-wrap { padding:6px !important; }
}