.v3 .city { --world-bar: 48px; --ctl: 40px; --fogc: #140E26; display: block; }
@media (pointer: coarse) { .v3 .city { --ctl: 44px; } }
.v3 .city-bar { position: sticky; top: var(--chrome-top); z-index: 7; background: var(--bg); height: var(--world-bar); display: flex; align-items: center; gap: var(--s-5); padding: 0 var(--q-inset);
  font-size: var(--t-small); line-height: var(--lh-meta); color: var(--mu); border-bottom: 1px solid var(--ln); }
.v3 .city-demo { margin-left: auto; }
@media (max-width: 47.99em) { .v3 .city { --world-bar: 0px; } .v3 .city-bar { display: none; } }
.v3 .city-skip { position: absolute; left: var(--q-inset); top: calc(var(--chrome-top) + var(--world-bar) + 8px); z-index: 9; background: var(--bg); padding: 0 var(--s-4); }
.v3 .city-skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.v3 .city-map { position: relative; height: calc(100dvh - var(--chrome-top) - var(--world-bar)); overflow: hidden; touch-action: none; outline: none; cursor: grab; user-select: none;
  background: radial-gradient(ellipse at 50% 45%, #2A1B3A, var(--fogc) 70%); }
@media (max-width: 47.99em) { .v3 .city-map { height: calc(100dvh - var(--chrome-top) - var(--world-bar) - 56px); min-height: 420px; } }
.v3 .city-map:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); }
.v3 .city-map[data-drag] { cursor: grabbing; }
.v3 .city-layer { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; transform-origin: 0 0; }
.v3 .city-layer > *, .v3 .city-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3 .city-art { display: block; object-fit: cover; }
.v3 .city-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity var(--d-slow) linear;
  background: radial-gradient(ellipse 34% 42% at 49.5% 45%, transparent 70%, var(--fogc) 100%); box-shadow: inset 0 0 6vw 2vw var(--fogc); }
.v3 .city-map[data-fogged] .city-layer::after { background: none; }
.v3 .city-fog { opacity: 0; transition: opacity var(--d-slow) linear; pointer-events: none; }
.v3 .city-map[data-fogged] .city-fog { opacity: .96; } .v3 .city-map[data-fogged] .city-cloud { opacity: .8; }
.v3 .city-map[data-anim] .city-layer { transition: transform var(--d-base) var(--e-out); }
.v3 .city-map[data-drag] .city-layer { will-change: transform; }
.v3 .dp, .v3 .lp, .v3 .pn { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: scale(var(--iz)) translate(-50%, -100%); transform-origin: 0 0; }
.v3 .lp { transform: scale(var(--iz)) translate(calc(-50% + var(--sx, 0px)), calc(-100% + var(--sy, 0px))); }
.v3 .dp, .v3 .lp, .v3 .cm-lb { display: grid; justify-items: center; gap: 3px; padding: 6px 10px 7px; border: 1px solid rgba(255,182,92,.32); border-radius: 10px; color: var(--fg);
  background: linear-gradient(180deg, rgba(43,33,50,.94), rgba(23,18,31,.94)); box-shadow: var(--el-2); font: var(--w-strong) var(--t-small)/1.2 var(--sans); white-space: nowrap; cursor: pointer; }
.v3 .dp::after, .v3 .cm-lb::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: inherit; border: inherit; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.v3 .dp-n { font: var(--w-head) 15px/1.1 var(--head); letter-spacing: .01em; }
.v3 .dp-f { display: flex; } .v3 .dp-f > * + * { margin-left: -8px; }
.v3 .dp-c { color: var(--warm-amber-text); font: 500 12px/1.2 var(--mono); }
.v3 .dp .chip, .v3 .cm-lb .chip { font-size: 10px; padding: 0 4px; }
.v3 .dp:hover, .v3 .dp[data-on] { border-color: var(--warm-amber); box-shadow: var(--el-2), 0 0 24px -4px rgba(255,182,92,.5); }
.v3 .dp:focus-visible, .v3 .lp:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.v3 .cf { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--f); height: var(--f); border-radius: 50%; overflow: hidden; background: var(--sf2) center / cover; box-shadow: 0 0 0 2px var(--sf), 0 0 0 3px rgba(255,182,92,.45); }
.v3 .cf img { width: 100%; height: 100%; object-fit: cover; } .v3 .cf svg { display: block; width: 70%; height: auto; }
.v3 .lp { grid-template-columns: auto auto; column-gap: 6px; align-items: center; padding: 5px 9px; background: rgba(20,14,38,.78); border-color: rgba(194,179,204,.3); color: #E6D9CB; font-weight: 500; }
.v3 .lp svg { width: 10px; height: 10px; fill: currentColor; }
.v3 .lp-o { grid-column: 1 / -1; display: none; color: var(--warm-amber-text); font: 500 12px/1.2 var(--mono); }
.v3 .lp:hover .lp-o, .v3 .lp:focus-visible .lp-o, .v3 .lp[data-tip] .lp-o, .v3 .lp[data-front] .lp-o { display: block; }
.v3 .lp[data-front] { padding: 8px 12px; border-color: rgba(255,182,92,.45); background: rgba(27,21,48,.9); }
.v3 .lp[data-open] { grid-template-columns: auto; border-color: rgba(127,160,106,.55); }
@media (max-width: 47.99em) { .v3 .lp:not([data-front]):not([data-open]) b, .v3 .dp-f { display: none; } .v3 .dp { padding: 4px 8px 5px; } .v3 .dp-n { font-size: 13px; } .v3 .lp[data-front] { white-space: normal; width: 210px; } }
@media (pointer: coarse) { .v3 .dp, .v3 .lp { min-width: 44px; min-height: 44px; align-content: center; justify-content: center; } }
.v3 .pn { transform: translate(calc(var(--dx) * var(--iz) * 1px), calc(var(--dy) * var(--iz) * 1px)) scale(var(--iz)) translate(-50%, -50%); cursor: pointer; }
.v3 .pn-t { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); display: none; padding: 2px 8px; border-radius: 6px; background: var(--sf); border: 1px solid var(--ln2); color: var(--fg); font-size: var(--t-small); white-space: nowrap; }
.v3 .pn:hover .pn-t { display: block; }
.v3 .city-map:not([data-near]) .city-pins { display: none; }
.v3 .city-hud { position: absolute; z-index: 3; left: var(--q-inset); bottom: calc(var(--q-inset) + env(safe-area-inset-bottom)); max-width: min(320px, calc(100% - 2 * var(--q-inset))); padding: 10px 12px; border-radius: 12px;
  background: rgba(23,18,31,.9); border: 1px solid rgba(255,182,92,.22); box-shadow: var(--el-2); font-size: var(--t-small); line-height: var(--lh-meta); color: var(--fgl); }
.v3 .hud-t { display: flex; gap: 8px; align-items: center; font: var(--w-head) 17px/1.2 var(--head); color: var(--fg); }
.v3 .hud-l, .v3 .hud-n { margin-top: 4px; } .v3 .hud-n { color: var(--warm-amber-text); } .v3 .hud-r { margin-top: 4px; color: var(--mu); }
@media (max-width: 47.99em) { .v3 .city-hud { padding: 8px 10px; left: 8px; right: 8px; top: 8px; bottom: auto; max-width: none; } .v3 .hud-r, .v3 .city-map[data-moved] [data-hint] { display: none; } }
.v3 .city-ctl { position: absolute; right: var(--q-inset); bottom: calc(var(--q-inset) + env(safe-area-inset-bottom)); display: grid; gap: 8px; z-index: 3; }
.v3 .city-ctl button { width: var(--ctl); height: var(--ctl); display: grid; place-items: center; background: var(--sf); border: 1px solid var(--ln2); border-radius: var(--step); color: var(--fg); }
.v3 .city-ctl button:hover { background: var(--sf2); } .v3 .city-ctl button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.v3 .city-ctl button[aria-disabled="true"] { color: var(--mu); cursor: not-allowed; }
.v3 .city-ctl svg { width: 12px; height: 12px; fill: currentColor; }
.v3 .city-hint, .v3 .city-tolist { position: absolute; z-index: 2; left: var(--q-inset); top: var(--q-inset); padding: 4px 8px; border-radius: 6px; background: rgba(15,12,24,.86); color: var(--mu); font-size: var(--t-small); line-height: var(--lh-meta); }
.v3 .city-tolist { top: calc(var(--q-inset) + 36px); color: var(--fg); }
.v3 .city-tolist:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
@media (max-width: 47.99em) { .v3 .city-hint, .v3 .city-tolist { top: auto; bottom: calc(var(--q-inset) + env(safe-area-inset-bottom)); } .v3 .city-tolist { bottom: calc(var(--q-inset) + 36px); } }
.v3 .city-keys { display: none; } .v3 .city-map:focus-visible .city-keys { display: block; } .v3 .city-map:focus-visible [data-hint] { display: none; }
.v3 .city-toast { position: absolute; z-index: 4; left: 50%; top: var(--q-inset); transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: rgba(23,18,31,.92); border: 1px solid var(--warm-amber); color: var(--fg); font-size: var(--t-small); }
.v3 .city-toast:empty { display: none; }
@media (max-width: 47.99em) { .v3 .city-toast { top: auto; bottom: 120px; } }
.v3 .city-err { position: absolute; inset: auto var(--q-inset) 50%; z-index: 4; padding: var(--s-4); background: var(--sf); color: var(--fg); }
.v3 .city-panel { position: absolute; z-index: 5; left: 8px; right: 8px; bottom: 8px; max-height: 58%; overflow: auto; overscroll-behavior: contain; padding: 14px 16px; border-radius: 14px;
  background: var(--sf); border: 1px solid rgba(255,182,92,.25); box-shadow: var(--el-3); touch-action: pan-y; cursor: auto; }
@media (min-width: 64em) { .v3 .city-panel { left: auto; top: 12px; bottom: 12px; width: 360px; max-height: none; } }
.v3 .cp-h { position: sticky; top: -14px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding-bottom: 8px; background: var(--sf); }
.v3 .cp-h h2 { font-size: var(--t-h3); outline: none; } .v3 .cp-h h2[data-quiet] { box-shadow: none; } .v3 .cp-c { grid-column: 1 / -1; color: var(--mu); font-size: var(--t-small); }
.v3 .cp-x { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--fg); }
.v3 .cp-x svg { width: 10px; height: 10px; fill: currentColor; }
.v3 .cp-l { list-style: none; margin: 0; padding: 0; }
.v3 .cp-r { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 6px 8px; border-radius: 10px; color: var(--fg); text-decoration: none; }
.v3 .cp-r[data-hi] { box-shadow: inset 0 0 0 2px var(--warm-amber); } .v3 .pn[data-hi] .cf { box-shadow: 0 0 0 3px var(--warm-amber); } .v3 .pn[data-hi] .pn-t { display: block; }
.v3 a.cp-r:hover { background: var(--sf2); } .v3 .cp-r:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.v3 .cp-n b { font-weight: var(--w-strong); } .v3 .cp-s { display: block; color: var(--mu); font-size: var(--t-small); }
.v3 .cp-e { color: var(--fgl); }
.v3 .city-devs { max-width: calc(1224px + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--q-sec); display: grid; gap: var(--s-4); outline: none; }
.v3 .cd-g { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding-block: var(--s-4); border-bottom: 1px solid var(--ln); }
.v3 .cd-g h3 { font-size: var(--t-body); } .v3 .cd-c { color: var(--mu); font: 500 var(--t-small) var(--mono); }
.v3 .cd-g .cp-l { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; }
.v3 .city-empty, .v3 .city-lands-i { color: var(--fgl); }
.v3 .city-lands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.v3 .cl-r { display: grid; padding: 10px 12px; border-radius: 10px; background: var(--sf); border: 1px solid var(--ln); } .v3 .cl-r span { color: var(--mu); font-size: var(--t-small); }
.v3 .cl-r[data-open] { border-color: rgba(127,160,106,.55); }
.v3 .city-amb { pointer-events: none; }
.v3 .city-amb i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.v3 .am-l { width: 2.4%; aspect-ratio: 1; margin: -1.2% 0 0 -1.2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,196,110,.5), rgba(255,182,92,0)); mix-blend-mode: screen; }
.v3 .am-s { width: 1.4%; aspect-ratio: 1; margin-left: -.7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(230,210,220,.55), rgba(230,210,220,0)); opacity: 0; }
.v3 .am-w { width: 3%; height: .35%; border-radius: 50%; background: rgba(255,214,150,.55); opacity: .2; }
.v3 .city-amb .am-k { left: 0; top: 0; width: 100%; height: 100%; transform: translate(var(--ax), var(--ay)); }
.v3 .am-k b { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%) scale(min(1, calc(var(--iz) * 1.8))); transform-origin: 50% 100%; } .v3 .am-k svg { display: block; width: 14px; height: auto; }
.v3 [data-run="yes"] .am-l { animation: am-flick 5.2s var(--dl) ease-in-out infinite alternate; }
.v3 [data-run="yes"] .am-s { animation: am-rise 6s var(--dl) linear infinite; } .v3 [data-run="yes"] .am-s2 { animation-delay: calc(var(--dl) - 3s); }
.v3 [data-run="yes"] .am-w { animation: am-glint 4s var(--dl) ease-in-out infinite alternate; }
.v3 [data-run="yes"] .am-k { animation: am-walk var(--kd) var(--dl) ease-in-out infinite alternate; } .v3 [data-run="yes"] .am-k svg { animation: am-bob .5s steps(1) infinite; }
@keyframes am-flick { 0% { opacity: .85; } 60% { opacity: 1; } 62% { opacity: .72; } 100% { opacity: .95; } }
@keyframes am-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .55; } 100% { opacity: 0; transform: translateY(-260%) translateX(80%) scale(2.2); } }
@keyframes am-glint { to { opacity: .7; transform: scaleX(1.4); } }
@keyframes am-walk { to { transform: translate(var(--bx), var(--by)); } }
@keyframes am-bob { 50% { transform: translateY(-1px); } }
.v3 .city-top { padding: var(--s-4) var(--q-inset, var(--gutter)) 0; }
.v3 .cpl[data-hi] .cpl-ev { outline: 2px solid var(--warm-amber); outline-offset: 2px; }