.city-directory { max-width: var(--content-max); }
.directory-heading { margin-bottom: var(--space-6); }
.directory-heading h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.directory-filters { padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.directory-empty { display: grid; justify-items: center; gap: var(--space-4); padding-block: var(--space-12); text-align: center; }
.directory-empty > .hz-icon { width: var(--space-10); height: var(--space-10); font-size: var(--space-10); color: var(--muted-foreground); }
.directory-empty h2 { font-size: var(--fs-h3); margin: 0; }
.directory-empty .actions { justify-content: center; }
.directory-empty:not([hidden]) ~ .city-directory-list { display: none; }
.directory-ownership { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.directory-ownership p { margin: 0; }
.city-directory-list { list-style: none; padding: 0; margin: 0; }
.city-directory-row { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.directory-city { flex: 1; display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); align-items: center; gap: var(--space-5); min-width: 0; text-decoration: none; }
.directory-city:hover strong { text-decoration: underline; }
.directory-city-preview { display: grid; place-items: center; min-width: 0; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.directory-city-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.directory-city strong { font-size: var(--fs-h3); font-weight: 600; overflow-wrap: anywhere; }
.directory-city p { font-size: var(--fs-sm); color: var(--muted-foreground); margin-block: var(--space-2) 0; overflow-wrap: anywhere; }
.directory-city small { display: block; font-size: var(--fs-xs); color: var(--muted-foreground); margin-top: var(--space-2); }
.directory-city-actions { display: flex; align-items: end; flex-wrap: wrap; justify-content: end; gap: var(--space-2); }
.directory-city-actions label { font-size: var(--fs-xs); }
.city-directory-row:has(.directory-name-form:not([hidden])) { flex-wrap: wrap; }
.directory-name-form { flex-basis: 100%; display: grid; gap: var(--space-2); }
.directory-name-form .actions { justify-content: end; }
.directory-pagination { display: flex; justify-content: center; padding-block: var(--space-6); }
@media (max-width: 640px) { .city-directory-row { align-items: stretch; flex-direction: column; } .directory-city { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .directory-city-actions { justify-content: start; } }
.atlas-discovery { margin-block: var(--space-5) var(--space-8); }
.atlas-discovery .section-head { align-items: center; margin-bottom: var(--space-5); }
.atlas-discovery h2 { margin: 0; }
.atlas-discovery .city-directory-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.atlas-discovery .city-directory-row { min-width: 0; align-items: stretch; flex-direction: column; gap: var(--space-2); padding: 0; border: 0; }
.atlas-discovery .directory-city { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.atlas-discovery .directory-city strong { font-size: var(--fs-h3); }
.atlas-discovery .directory-city-actions { justify-content: start; }
.atlas-discovery .directory-city-preview { border-radius: var(--radius-lg); }
.atlas-discovery .directory-city:hover .directory-city-preview { border-color: var(--muted-foreground); }
@media (max-width: 1024px) { .atlas-discovery .city-directory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .atlas-discovery .city-directory-list { grid-template-columns: minmax(0, 1fr); } .atlas-discovery .directory-city-preview { aspect-ratio: 2 / 1; } }

.directory-city-text { min-width: 0; display: grid; gap: var(--space-2); }
.directory-city-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.directory-city-title strong { min-width: 0; }
.directory-city-meta { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); color: var(--muted-foreground); }
.directory-city-meta .hz-icon { font-size: var(--fs-body); width: var(--fs-body); height: var(--fs-body); }
.directory-game { flex: none; color: var(--muted-foreground); font-size: var(--fs-xs); }
.directory-city-text p { margin: 0; }
.directory-city-text .directory-city-byline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: 0; }
.directory-city-byline > span { min-width: 0; overflow-wrap: anywhere; }
.directory-city-byline time { flex: none; font-variant-numeric: tabular-nums; }
.atlas-discovery .directory-city { gap: var(--space-3); }
.atlas-discovery .directory-city-preview img { transition: transform .24s ease-out; }
.atlas-discovery .directory-city-meta .hz-icon { transition: transform .18s ease-out; }
.atlas-discovery .directory-city:focus-visible .directory-city-preview { border-color: var(--ring); }
.atlas-discovery .directory-city:focus-visible .directory-city-preview img { transform: scale(1.025); }
.atlas-discovery .directory-city:focus-visible .directory-city-meta .hz-icon { transform: translateX(var(--space-0-5)); }
@media (hover: hover) {
  .atlas-discovery .directory-city:hover .directory-city-preview img { transform: scale(1.025); }
  .atlas-discovery .directory-city:hover .directory-city-meta .hz-icon { transform: translateX(var(--space-0-5)); }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-discovery .directory-city-preview img, .atlas-discovery .directory-city-meta .hz-icon { transition: none; transform: none !important; }
}
@media (max-width: 1024px) { .city-directory:not(.atlas-discovery) .city-directory-row { flex-wrap: wrap; } .city-directory:not(.atlas-discovery) .directory-city { flex-basis: 100%; } .city-directory:not(.atlas-discovery) .directory-city-actions { margin-left: auto; } }
@media (max-width: 640px) { .city-directory:not(.atlas-discovery) .directory-city-actions { margin-left: 0; } }