/* Outdoor street-world v6: roads, movement stops and project plots are distinct. */
.street-person {display:block;width:100%;height:100%;position:relative;overflow:visible}
.street-person>.art-raster {display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.street-person.faces-left>.art-raster {transform:scaleX(-1)}
.street-person>.art-fallback {display:none;position:absolute;inset:0}
.street-person.art-failed>.art-raster {visibility:hidden}
.street-person.art-failed>.art-fallback {display:block}
.street-person .vector-portrait {width:100%;height:100%}
.street-headshot {display:block;width:100%;height:100%;overflow:hidden;background:linear-gradient(140deg,#ddd4f0,#9bbfe0);border-radius:6px}
.street-headshot .street-person {height:145%;width:115%;margin-left:-7.5%;margin-top:-1%}
.street-sprite {display:block;width:100%;height:100%;pointer-events:none}
.street-sprite>.art-raster {width:100%;height:100%;object-fit:contain}
.street-art-active .town-viewport {background:#789d56;border:2px solid #a27a39;border-radius:0}
.map.town-map.street-map {--town-scale:1;background-color:#83aa58;background-image:radial-gradient(ellipse at 30% 40%,#c2cf73a0 0,transparent 23%),radial-gradient(ellipse at 70% 30%,#487b4590 0,transparent 35%),repeating-linear-gradient(26deg,#ffffff05 0 2px,transparent 2px 7px);box-shadow:inset 0 0 180px #365c39;}
.map.town-map.street-map {background-image:linear-gradient(#8da65c44,#6d954755),url('./assets/street-v6/grass.webp');background-size:auto,384px 384px;}
.street-map::before {content:'';position:absolute;left:calc(10px * var(--town-scale));top:0;width:calc(70px * var(--town-scale));height:100%;background:repeating-linear-gradient(170deg,#429faf 0 25px,#78c7bd 27px,#4099ab 32px);border-right:calc(18px * var(--town-scale)) solid #c2c5a0;pointer-events:none;opacity:.85}
.street-map .street-roads {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.street-roads path {fill:none;stroke-linejoin:round;stroke-linecap:round}
.street-roads .road-verge {stroke:#607344;stroke-width:99}
.street-roads .road-gold {stroke:#efd15d;stroke-width:78}
.street-roads .road-asphalt {stroke:#41464b;stroke-width:69}
.street-roads .road-highlight {stroke:#ffec9a;stroke-width:5;stroke-dasharray:10 20}
.street-map .street-district {position:absolute;border:0;background:none;pointer-events:none;width:calc(500px * var(--town-scale));height:calc(220px * var(--town-scale));display:flex;align-items:center;gap:16px}
.street-district-label {width:calc(260px * var(--town-scale));text-align:center;color:#fff9d9;text-shadow:0 2px 2px #345335}
.street-district-label small {display:block;font-size:calc(12px * var(--town-scale));letter-spacing:2px;color:#ecedc3}
.street-district-label strong {display:block;margin-top:8px;font:800 calc(26px * var(--town-scale))/1.4 serif;letter-spacing:.1em}
.street-district .region-art {width:calc(210px * var(--town-scale));height:calc(210px * var(--town-scale));flex:none}
.street-map .street-park {position:absolute;width:calc(170px * var(--town-scale));height:calc(150px * var(--town-scale));pointer-events:none}
.street-park .street-sprite {width:100%;height:100%}
.street-park .street-sprite+ .street-sprite {display:none}
.street-map .street-tree-cluster {position:absolute;width:calc(150px * var(--town-scale));height:calc(150px * var(--town-scale));pointer-events:none;}
.street-map .street-lot {position:absolute;left:calc((var(--lot-x) - 90px) * var(--town-scale));top:calc((var(--lot-y) - 108px) * var(--town-scale));width:calc(180px * var(--town-scale));height:calc(160px * var(--town-scale));pointer-events:none;isolation:isolate}
.street-lot-ground {position:absolute;left:0;top:45%;width:100%;height:60%;border:0 solid var(--owner-color);z-index:-1}
.street-lot-ground svg {width:100%;height:100%;overflow:visible}
.street-lot-ground path {fill:#a0b96a;stroke:var(--owner-color);stroke-width:3;stroke-dasharray:5 3;filter:drop-shadow(0 3px 0 #5573476b)}
.street-lot.claimed .street-lot-ground path {fill:#b9ca95;stroke-dasharray:none;stroke-width:4}
.street-lot>.street-sprite {position:absolute;inset:0;height:100%;filter:drop-shadow(0 5px 3px #274a3040)}
.street-survey {position:absolute;left:24%;top:63%;padding:3px 6px;color:#4a653b;font:600 calc(11px * var(--town-scale))/1.3 system-ui;border:1px solid #728d4b;background:#d8dfad;transform:rotate(-5deg)}
.street-lot-sign {position:absolute;top:96%;left:0;width:100%;text-align:center;color:#fffce6;text-shadow:0 1px 3px #18361f,1px 0 2px #18361f;font-size:calc(12px * var(--town-scale));line-height:1.3;white-space:nowrap}
.street-lot-sign b {display:block;color:var(--owner-color);font-size:calc(11px * var(--town-scale));font-weight:800}
.street-flag {position:absolute;right:14%;top:23%;color:white;background:var(--owner-color);border:1px solid #fff2c9;font:bold calc(12px * var(--town-scale))/1 system-ui;padding:5px;box-shadow:-2px 20px 0 -1px #dac4a0}
#app .town-map.street-map .street-stop {width:calc(120px * var(--town-scale));height:calc(40px * var(--town-scale));border:0;background:none;min-width:0;min-height:0;color:#795a25;cursor:pointer;overflow:visible;}
#app .street-map .street-stop::before,#app .street-map .street-stop:nth-of-type(even)::before {clip-path:none;inset:2px calc(36px * var(--town-scale));border-radius:50%;background:linear-gradient(145deg,#fff4b0,#f3d264 60%,#c59435);border:2px solid #fff1a0;box-shadow:0 3px 0 #795a2e,0 4px 4px #17282570;}
#app .street-map .street-stop[class*="owner-"]::after {clip-path:none;inset:-2px calc(31px * var(--town-scale));border:3px solid var(--lot-owner);border-radius:50%;background:none;pointer-events:none}
#app .street-map .street-stop:hover::before,#app .street-map .street-stop:focus-visible::before {background:#fffbd4;outline:3px solid #fff2c0;outline-offset:3px}
#app .street-map .street-stop.selected::before {background:#fff3b4;outline:3px solid white;outline-offset:4px}
#app .street-map .street-stop.possible-destination::before {background:#a0f3bf;border-color:#258165;outline:3px solid #e0fff0;outline-offset:2px}
.street-stop-number {font:700 calc(10px * var(--town-scale))/1 system-ui;position:absolute;inset:calc(14px * var(--town-scale)) 0 auto;text-align:center;z-index:1;pointer-events:none}
.street-stop .project-tier {position:absolute;bottom:calc(-10px * var(--town-scale));left:50%;transform:translateX(-50%);height:calc(9px * var(--town-scale));pointer-events:none;}
.street-map .street-stop .street-symbol {position:absolute;left:0;right:0;top:calc(7px * var(--town-scale));font:bold calc(20px * var(--town-scale))/1 serif;text-align:center;text-shadow:0 1px #fff4ba;pointer-events:none}
.street-stop:has(.street-symbol) .street-stop-number {top:calc(31px * var(--town-scale));font-size:calc(8px * var(--town-scale))}
.street-transfer {position:absolute;top:calc(44px * var(--town-scale));left:calc(3px * var(--town-scale));width:calc(114px * var(--town-scale));padding:2px;border-radius:3px;background:#e8e0b9;color:#35566f;font:700 calc(10px * var(--town-scale))/1.3 system-ui;pointer-events:none;box-shadow:0 2px 2px #344b4430}
#app .street-map .tokens {position:absolute;left:50%;top:50%;width:0;height:0;overflow:visible;pointer-events:none}
#app .town-map.street-map .town-pawn {width:calc(80px * var(--town-scale));height:calc(104px * var(--town-scale));top:calc(-99px * var(--town-scale));left:calc(-40px * var(--town-scale));border:0;background:none}
#app .street-map .tokens:has(.town-pawn:nth-child(2)) .town-pawn:first-child {left:calc(-88px * var(--town-scale))}
#app .street-map .tokens .town-pawn:nth-child(2) {left:calc(-56px * var(--town-scale))}
#app .street-map .tokens .town-pawn:nth-child(3) {left:calc(-24px * var(--town-scale))}
#app .street-map .tokens .town-pawn:nth-child(4) {left:calc(8px * var(--town-scale))}
#app .street-map .town-pawn .pawn-number {bottom:calc(-2px * var(--town-scale));left:calc(31px * var(--town-scale));font-size:calc(11px * var(--town-scale));min-width:calc(17px * var(--town-scale));z-index:2}
.street-map .movement-ghost {width:calc(80px * var(--town-scale));height:calc(104px * var(--town-scale));z-index:10000!important}
.street-overview {height:100%;min-height:100px;display:flex;flex-direction:column;align-items:center;background:#477c48;border:2px solid #947134;overflow:hidden}
.street-overview svg {width:100%;flex:1;min-height:0;max-height:100%;background:#638f4f}
.street-overview small {font-size:10px;color:#fff5cc;text-align:center;padding:3px}
.street-overview [data-region],.street-overview [data-map-player] {cursor:pointer}