/* Hallmark · component: regional city · genre: playful · theme: KashaMilasha
 * Existing navigation and tokens. Motion communicates working production.
 * states: default · hover · focus · active · disabled · loading · error · success */
.map-city { width: 260px; height: 230px; min-height: 230px; justify-content: end; isolation: isolate; border-radius: 26px; }
.map-city .city-visual { display: block; width: 260px; height: 196px; pointer-events: none; }
.city-visual > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.city-pin-name { font-size: calc(12px / var(--map-scale)); white-space: nowrap; position: relative; z-index: 1; gap: calc(5px / var(--map-scale)); }
.city-level { font-size: calc(9px / var(--map-scale)); color: var(--color-brand-deep); background: var(--color-orange-light); border-radius: calc(4px / var(--map-scale)); padding: calc(2px / var(--map-scale)) calc(4px / var(--map-scale)); }
.city-production { position: absolute; top: calc(-15px / var(--map-scale)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(5px / var(--map-scale)); background: var(--color-paper); border: calc(1px / var(--map-scale)) solid var(--color-rule); box-shadow: 0 calc(2px / var(--map-scale)) 0 var(--color-shadow); border-radius: calc(20px / var(--map-scale)); padding: calc(3px / var(--map-scale)) calc(8px / var(--map-scale)) calc(3px / var(--map-scale)) calc(3px / var(--map-scale)); font-size: calc(10px / var(--map-scale)); line-height: 1.2; white-space: nowrap; pointer-events: none; }
.city-cycle { width: calc(26px / var(--map-scale)); height: calc(26px / var(--map-scale)); fill: none; flex-shrink: 0; }
.city-cycle-track { stroke: var(--color-rule); stroke-width: 3; }
.city-cycle-fill { stroke: var(--color-orange); stroke-width: 3; stroke-dasharray: 100; transform: rotate(-90deg); transform-origin: center; }
.city-cycle path { fill: var(--color-accent); stroke: var(--color-brand-deep); stroke-width: 1.6; stroke-linecap: round; }
.is-full .city-production { background: var(--color-orange-light); border-color: var(--color-accent); }
.city-income { position: absolute; transform: translate(-50%,0); min-width: calc(110px / var(--map-scale)); min-height: calc(36px / var(--map-scale)); padding: calc(6px / var(--map-scale)) calc(10px / var(--map-scale)); border-radius: calc(11px / var(--map-scale)); font-size: calc(11px / var(--map-scale)); font-weight: 750; line-height: 1.1; white-space: nowrap; background: var(--color-accent); color: var(--color-ink); border: calc(1px / var(--map-scale)) solid var(--color-brand-deep); box-shadow: 0 calc(3px / var(--map-scale)) 0 var(--color-shadow); z-index: 2; }
.city-income:disabled { background: var(--color-paper); border-color: var(--color-rule); color: var(--color-muted); box-shadow: none; }
.city-income:active:not(:disabled), .city-income.is-active { transform: translate(-50%,calc(1px / var(--map-scale))); box-shadow: none; }
.city-income:focus-visible, .map-city:focus-visible, .city-income.is-focus { outline: calc(3px / var(--map-scale)) solid var(--color-focus); outline-offset: calc(3px / var(--map-scale)); }
.map-city:disabled { cursor: wait; }
.map-city.locked .city-visual { filter: saturate(.45); opacity: .75; }
.map-city:active:not(:disabled) .city-pin-name { background: var(--color-accent); }
.town-steam { opacity: .3; }
.is-working .town-steam { animation: town-steam 4s ease-out infinite; }
.is-working .town-conveyor { animation: town-belt 3s linear infinite; }
.town-van { animation: town-drive 13s linear infinite; animation-play-state: paused; }
.town-person { animation: town-walk 9s linear infinite; animation-play-state: paused; }
.is-producing .town-moving { animation-play-state: running; }
.map-motion-paused .town-diorama *, #region-section[data-active='false'] .town-diorama * { animation-play-state: paused !important; }
.city-income[data-state='loading'] { cursor: wait; background: var(--color-rule); }
.city-income[data-state='error'] { border-color: var(--color-error); color: var(--color-error); background: var(--color-paper); }
.city-income[data-state='success'] { background: var(--color-green); color: var(--color-cream); }
@keyframes town-steam { 0% { opacity: 0; transform: translate(0,6px) scale(.85); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(4px,-16px) scale(1.1); } }
@keyframes town-belt { 0% { transform: translate(-4px,-2px); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translate(17px,5px); opacity: 0; } }
@keyframes town-drive { 0%,8% { transform: translate(0,0); opacity: 0; } 15%,80% { opacity: 1; } 90%,100% { transform: translate(-125px,-53px); opacity: 0; } }
@keyframes town-walk { 0%,100% { transform: translate(0,0); } 48%,52% { transform: translate(16px,7px); } }
@media(hover:hover) { .city-income:hover:not(:disabled), .city-income.is-hover { background: var(--color-accent-hover); } }
@media(prefers-reduced-motion:reduce) { .town-diorama * { animation: none !important; }.town-steam { opacity: .45; } }
@media(max-width:600px) { .city-income { min-height: calc(44px / var(--map-scale)); } }
.map-city:not(.is-producing) .town-moving { animation: none; }
.town-steam { opacity: 0; }
@media(prefers-reduced-motion:reduce) { .is-working .town-steam { opacity: .45; } }
/* Production and collection share one line above the skyline, leaving streets clear. */
.map-city { height: 220px; min-height: 220px; }
.city-production { left: calc(50% - 54px / var(--map-scale)); width: calc(104px / var(--map-scale)); min-height: calc(38px / var(--map-scale)); justify-content: center; padding-inline: calc(4px / var(--map-scale)); font-size: calc(9px / var(--map-scale)); }
.city-cycle { width: calc(23px / var(--map-scale)); height: calc(23px / var(--map-scale)); }
.city-income { transform: translate(calc(-50% + 54px / var(--map-scale)),0); min-width: calc(104px / var(--map-scale)); min-height: calc(38px / var(--map-scale)); font-size: calc(10px / var(--map-scale)); }
.city-income:active:not(:disabled), .city-income.is-active { transform: translate(calc(-50% + 54px / var(--map-scale)),calc(1px / var(--map-scale))); }
#map-stage[data-detail='compact'] .city-production { left: calc(50% - 42px / var(--map-scale)); width: calc(29px / var(--map-scale)); padding: 0; }
#map-stage[data-detail='compact'] .city-production > span { display: none; }
#map-stage[data-detail='compact'] .city-income { transform: translate(calc(-50% + 18px / var(--map-scale)),0); min-width: calc(82px / var(--map-scale)); }
#map-stage[data-detail='overview'] .city-production, #map-stage[data-detail='overview'] .city-income { display: none; }
#map-stage[data-detail='overview'] .city-level { display: none; }
#map-stage[data-detail='overview'] .city-pin-name { font-size: calc(10px / var(--map-scale)); padding: calc(3px / var(--map-scale)) calc(5px / var(--map-scale)); }
@media(max-width:600px) { .city-income { min-height: calc(44px / var(--map-scale)); } }
.city-production { top: calc(-45px / var(--map-scale)); }
#map-stage[data-detail='compact'] .city-income { display: none; }
#map-stage[data-detail='compact'] .city-production { left: 50%; top: calc(-25px / var(--map-scale)); min-height: calc(26px / var(--map-scale)); }
/* The river city sits diagonally below the north city: offset its wide HUD. */
#map-stage[data-detail='full'] #city-river .city-production { left: calc(50% + 64px / var(--map-scale)); }
#map-stage[data-detail='full'] #city-income-river { transform: translate(calc(-50% + 172px / var(--map-scale)),0); }
/* Repeating districts need narrower collection controls than the three original pins. */
#map-stage[data-detail='full'] .map-city[data-city^='city-'] .city-production { left: calc(50% - 52px / var(--map-scale)); width: calc(29px / var(--map-scale)); padding: 0; }
#map-stage[data-detail='full'] .map-city[data-city^='city-'] .city-production > span { display: none; }
#map-stage[data-detail='full'] .city-income[data-city-collect^='city-'] { transform: translate(calc(-50% + 15px / var(--map-scale)),0); min-width: calc(96px / var(--map-scale)); }
.city-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#map-stage[data-detail='compact'] .map-city[data-city^='city-'] .city-pin-name { max-width: calc(88px / var(--map-scale)); font-size: calc(10px / var(--map-scale)); }
#map-stage[data-detail='compact'] .map-city[data-city^='city-'] .city-level { display: none; }
#map-stage[data-detail='overview'] .map-city[data-city^='city-'] .city-pin-name { font-size: calc(9px / var(--map-scale)); padding-inline: calc(3px / var(--map-scale)); }
.map-city[data-city^='city-']:not([data-selected='true']) .town-diorama * { animation: none !important; }
.map-city[data-city^='city-'][data-selected='true'] .city-pin-name { border-color: var(--color-brand-deep); background: var(--color-accent); }
#map-stage[data-detail='full'] .map-city[data-city^='city-'] .city-pin-name { max-width: calc(130px / var(--map-scale)); }
.map-city[data-city^='city-'] .city-production { top: 30px !important; }
#map-stage[data-detail='compact'] .map-city .city-pin-name { max-width: calc(72px / var(--map-scale)); font-size: calc(10px / var(--map-scale)); padding-inline: calc(5px / var(--map-scale)); }
#map-stage[data-detail='compact'] .map-city .city-level { display: none; }
/* Residents walk along the two projected axes of the town road. */
.town-resident { animation: resident-front 22s ease-in-out infinite alternate; }
.resident-side { animation-name: resident-side; animation-duration:27s; }
.resident-stride { animation: resident-stride .7s ease-in-out infinite alternate; }
@keyframes resident-front { 0%,8% { transform:translate(0,0); } 92%,100% { transform:translate(59.4px,29.7px); } }
@keyframes resident-side { 0%,8% { transform:translate(0,0); } 92%,100% { transform:translate(-54px,27px); } }
@keyframes resident-stride { to { transform:translateX(.6px); } }
@media(prefers-reduced-motion:reduce) { .town-resident,.resident-stride { animation:none; } }