#app[data-game="street"]{min-height:100dvh;background:radial-gradient(ellipse at top,#eaf2dc,#e9d7b8 80%);padding:12px 0 0;color:#62482e;font-family:Nunito,'Trebuchet MS',sans-serif}
#app[data-game="street"]>header{display:none}
#app[data-game="street"]>main{max-width:650px;margin:auto;padding:0 16px 92px;background:linear-gradient(#fcf9ec,#f9efd9);border:1px solid #e4d6ba;border-radius:30px 30px 0 0;box-shadow:0 10px 50px #6a4e2826}
.street-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 5px 14px}
.street-top h1{font-family:Nunito,sans-serif;font-weight:1000;line-height:.95;text-align:center;color:#316322;letter-spacing:-1.5px;font-size:35px;margin:0;paint-order:stroke fill;-webkit-text-stroke:4px #fffaeb;text-shadow:0 3px 0 #b7cf91}
.street-top h1 small{display:block;font-size:25px;margin-top:5px;letter-spacing:-.8px}
.street-home{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;border:2px solid #fffdf1;background:linear-gradient(#fffbed,#e6d6b6);box-shadow:0 3px 0 #cdbb95;color:#7e603e;font-size:27px}
.street-home svg{width:25px;height:25px}
.street-layout{max-width:none;margin:0!important}
.street-hud{display:flex;justify-content:space-between;gap:12px;margin:0 5px 10px}
.street-hud>span{min-width:80px;flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 12px;border-radius:24px;background:#fffcf0;border:2px solid #e7d8b7;box-shadow:0 2px 0 #cbb58c;font-size:14px;font-weight:900}
.street-hud .street-star{color:#d6a12a}.street-hud>span:last-child{color:#bb8524}
#app[data-game="street"] .status-row{font-size:11px;color:#8e7b56;margin:10px 3px 6px}
#app[data-game="street"] .progress{height:6px;background:#dfdbc4;margin:0 3px 9px}
#app[data-game="street"] .progress div{background:linear-gradient(90deg,#8eb958,#c5df88)}
.town-scene{position:relative;border-radius:16px;overflow:hidden;border:5px solid #d0bb90;background:#b0cf76;box-shadow:0 5px 0 #a99470,0 10px 20px #72552f25}
.street-board.board{gap:0;padding:0;border:none;border-radius:0;box-shadow:none;background:#a8c875;overflow:hidden}
.street-cell.cell{position:relative;border:0;border-radius:0;padding:0;background:#b5ce81;overflow:hidden;isolation:isolate;box-shadow:none;min-height:0;aspect-ratio:1;transition:filter .16s}
.town-sprite{display:block;aspect-ratio:1;background-image:url('assets/street-tiles.png');background-size:400% 400%;background-repeat:no-repeat;width:100%;height:100%;pointer-events:none}
.street-cell>.town-sprite{position:absolute;inset:0}
.street-cell.grass-lot:after{content:'';position:absolute;inset:7%;border:1px dashed #ffffffb3;box-shadow:inset 0 0 12px #e6f2ab30;border-radius:5px;pointer-events:none}
.street-cell.grass-lot:hover{filter:brightness(1.1)}
.street-cell.built:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 1px #496a3144;pointer-events:none}
.street-cell.selected{z-index:2;outline:4px solid #ffda58;outline-offset:-4px;filter:brightness(1.12)}
.town-river{height:40px;position:relative;background:repeating-linear-gradient(-12deg,transparent 0 12px,#ffffff15 13px 15px,transparent 16px 30px),linear-gradient(#44aaba,#207f9a);border-top:8px solid #d8c8a4;box-shadow:inset 0 4px 0 #826c4a55}
.town-river:before{content:'';position:absolute;width:28%;height:10px;top:-9px;left:36%;border-radius:4px;background:repeating-linear-gradient(90deg,#e7d3a8 0 12px,#c2a77b 13px 14px);box-shadow:0 4px 0 #736749}
.town-river span{position:absolute;inset:12px 8px 6px;border-bottom:2px dashed #a4d8dc55}
.street-toolbox{margin-top:16px;border-radius:18px;background:linear-gradient(#fff9e8,#e8d4ad);border:2px solid #fffdf3;box-shadow:0 4px 0 #ccaf7e,0 7px 13px #76542e18;padding:0 9px 5px}
.street-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border-bottom:1px solid #d9c49d}
.street-tabs button{background:none;padding:12px 4px 10px;font-size:13px;font-weight:900;color:#977c57;border-bottom:3px solid transparent;min-height:44px}
.street-tabs button.active{color:#764c26;border-color:#cb8d3f;background:linear-gradient(#ffffff50,#ead6af99);border-radius:12px 12px 0 0}
.street-tabs small{display:inline-block;margin-left:4px;font-size:9px;background:#d8c59f;border-radius:9px;min-width:15px;padding:1px 4px;color:#fff7e7}
#app[data-game="street"] .tray{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:8px;margin:8px 0 0;padding:2px 2px 7px;min-height:94px;overscroll-behavior-x:contain}
.town-piece.piece{flex:0 0 108px;min-width:108px;padding:5px;border:2px solid #dac5a0;background:#f8edcf;border-radius:12px;box-shadow:0 2px 0 #bea37a;overflow:hidden;touch-action:pan-x}
.town-piece-preview{display:flex;gap:0;border-radius:6px;overflow:hidden;height:62px;background:#c5d29c;align-items:center}
.town-piece-preview>.town-sprite{flex:1;min-width:0;height:auto;aspect-ratio:1;transform:scale(1.03)}
.town-piece.piece.selected{background:#e4e8b5;border-color:#73983f;box-shadow:0 0 0 2px #b1cc7e,0 2px 0 #789448}
.town-piece small{font-family:Nunito,sans-serif;font-size:10px;font-weight:800;color:#8b6e45;margin-top:4px}
.street-empty-category{font-size:12px;text-align:center;width:100%;color:#8f7957;padding:20px 10px}
#app[data-game="street"] .hint-note{font-size:12px;color:#8b6b3f;min-height:20px;margin:14px 0 8px}
#app[data-game="street"] .tools{margin:0;gap:7px}
#app[data-game="street"] .tools .quiet{background:#fff8e9;border:1px solid #d9c6a5;box-shadow:0 2px 0 #d2bb91;color:#89673e;font-family:Nunito,sans-serif;font-weight:800;min-height:40px;padding:8px 13px}
#app[data-game="street"] .selection-tip{color:#a28b65;font-size:10px;margin:10px 0 0}
#app[data-game="street"]>.village-nav{max-width:650px;left:50%;transform:translateX(-50%);width:100%;right:auto;background:linear-gradient(#fffcf3,#f1e2c8);border:1px solid #e3cfaa;border-radius:22px 22px 0 0;gap:0;justify-content:space-around;box-shadow:0 -3px 14px #72502a14}
#app[data-game="street"]>.village-nav button{flex-direction:column;font-family:Nunito,sans-serif;font-size:12px;font-weight:800;color:#9b7d55;gap:4px;min-width:70px}
#app[data-game="street"]>.village-nav button.active{color:#b37629}
#app[data-game="street"]>.village-nav svg{width:23px;height:23px}
@media(max-width:650px){#app[data-game="street"]{padding-top:0}#app[data-game="street"]>main{padding:0 10px 85px;border:0;border-radius:0}.street-top{padding:12px 3px 11px}.street-top h1{font-size:30px}.street-top h1 small{font-size:22px}.street-home{width:38px;height:38px}.street-hud{margin-bottom:8px}.street-hud>span{padding:6px 8px;font-size:12px;min-width:0}.town-scene{border-width:4px}.street-toolbox{margin-top:13px}.street-tabs button{font-size:12px;padding:9px 3px 7px}.town-river{height:30px}.town-piece.piece{flex-basis:100px;min-width:100px}.town-piece-preview{height:56px}#app[data-game="street"] .tray{min-height:83px}#app[data-game="street"] .hint-note{font-size:11px;margin:12px 0 7px}#app[data-game="street"] .tools .quiet{font-size:11px;padding:7px 11px}}
.town-sprite{background-image:url('assets/street-isometric.png')}
.iso-town{container-type:inline-size;--iso-tile:calc(100cqw / 6.3);aspect-ratio:1.12;background:linear-gradient(145deg,#90b960,#b4c888 70%,#70b1ab);overflow:hidden;border-color:#b4bf8f}
.street-board.board{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;background:none;isolation:isolate}
.iso-lot{position:absolute;width:var(--iso-tile);height:var(--iso-tile);pointer-events:none;overflow:visible}
.iso-lot>.town-sprite{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 1px #31431c18)}
.iso-hit.cell{position:absolute;left:0;top:50%;width:100%;height:50%;min-height:0;aspect-ratio:auto;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;pointer-events:auto;outline:none}
.iso-hit svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.iso-hit polygon{fill:#ffffff09;stroke:#fffbe5;stroke-width:1.5;stroke-dasharray:4 3}
.iso-hit:hover polygon{fill:#fff8c733;stroke:#ffe58a;stroke-width:2}
.iso-hit.selected polygon,.iso-hit:focus-visible polygon{fill:#f7d44e66;stroke:#fff6ba;stroke-width:4;stroke-dasharray:none}
.iso-lot:has(.iso-hit.selected)>.town-sprite{filter:drop-shadow(0 0 4px #ffe866) brightness(1.12)}
.town-piece-preview{justify-content:center;height:64px;overflow:visible;background:none}
.town-piece-preview>.town-sprite{flex:0 0 70px;width:70px;height:70px;aspect-ratio:1;transform:none;filter:drop-shadow(0 3px 2px #4b562a22)}
.town-piece.piece{flex-basis:92px;min-width:92px}
@media(max-width:650px){.town-piece-preview{height:59px}.town-piece-preview>.town-sprite{width:65px;height:65px;flex-basis:65px}.town-piece.piece{min-width:85px;flex-basis:85px}}
.town-sprite{background:none}
.town-piece-preview>.town-sprite{position:relative;top:0!important;height:65px!important;overflow:hidden}
.iso-water{display:block;width:100%;height:100%;pointer-events:none}
.iso-town{touch-action:none;user-select:none}
.iso-town.is-zoomed{cursor:grab}.iso-town.is-zoomed:active{cursor:grabbing}
.street-board.board{transform-origin:50% 50%;will-change:transform}
.town-zoom{position:absolute;right:9px;bottom:9px;z-index:200;display:flex;align-items:center;gap:0;padding:3px;border:2px solid #fffcf1;border-radius:14px;background:#fff5dfed;box-shadow:0 3px 9px #4c4b2c45;cursor:default}
.town-zoom button{min-width:42px;min-height:42px;background:transparent;font-size:24px;font-family:Nunito,sans-serif;font-weight:900;color:#72512d;border-radius:9px;padding:4px 9px}
.town-zoom button:hover{background:#ead9b8}.town-zoom button:disabled{opacity:.3}.town-zoom [data-zoom="fit"]{font-size:13px;border-left:1px solid #dac59d;margin-left:2px}
.town-zoom output{font-size:11px;font-weight:900;width:42px;text-align:center;color:#8c704d}
.street-workspace{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:12px;height:min(62dvh,560px);min-height:350px;align-items:stretch}
#app[data-game="street"]>main{max-width:1000px}
.street-workspace #play-area{min-width:0;height:100%;position:relative}
.street-workspace .iso-town{height:100%;width:100%;aspect-ratio:auto}
.street-workspace .street-board.board{top:calc(50% - 45cqw)}
.street-workspace .street-toolbox{margin:0;padding:7px;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:17px}
.tray-title{font:900 15px Nunito,sans-serif;text-align:center;margin:2px 0 7px;color:#7c552e}
.street-workspace .street-tabs{grid-template-columns:1fr 1fr;gap:1px;flex-shrink:0}
.street-workspace .street-tabs button{padding:6px 0;font-size:10px;min-height:33px;letter-spacing:-.2px}
.street-workspace .street-tabs small{display:none}
#app[data-game="street"] .street-workspace .tray{flex:1;display:flex;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;min-height:0;margin:5px 0 0;padding:2px 2px 6px;gap:7px;touch-action:pan-y;overscroll-behavior:contain}
.street-workspace .town-piece.piece{width:100%;min-width:0;flex:0 0 87px;min-height:87px;padding:4px;touch-action:pan-y}
.street-workspace .town-piece-preview{height:57px}.street-workspace .town-piece-preview>.town-sprite{height:60px!important;width:60px;flex-basis:60px}
.street-workspace .town-piece small{font-size:9px}
.placed-actions{position:absolute;left:7px;top:7px;right:7px;z-index:220;padding:8px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;background:#fff7e6f5;border:2px solid #fefaf0;border-radius:12px;box-shadow:0 4px 12px #55472a44}
.placed-actions strong{width:100%;font-size:12px;color:#775333}
.placed-actions button{padding:7px 10px;min-height:36px;border-radius:8px;background:#e5ebcc;color:#577038;font-size:11px;font-weight:900}.placed-actions button[data-action="street-return"]{background:#f5d69e;color:#805220}
.iso-hit.built polygon{opacity:0}.picked .iso-hit.built polygon{opacity:1;fill:#ffe58a44;stroke:#fff3a6;stroke-width:4;stroke-dasharray:none}.iso-lot.picked>.town-sprite{filter:drop-shadow(0 0 5px #ffe465) brightness(1.12)}
.iso-lot.built>.town-sprite{pointer-events:auto;cursor:pointer}
.iso-town{cursor:grab}.iso-town:active{cursor:grabbing}
@media(max-width:650px){.street-workspace{grid-template-columns:minmax(0,1fr) 85px;gap:7px;height:min(58dvh,470px);min-height:315px}.street-workspace .street-toolbox{padding:4px;border-radius:13px}.street-workspace .town-piece.piece{flex-basis:78px;min-height:78px}.street-workspace .town-piece-preview{height:51px}.street-workspace .town-piece-preview>.town-sprite{width:54px;height:54px!important;flex-basis:54px}.street-workspace .street-tabs button{font-size:9px;min-height:31px}.tray-title{font-size:12px;margin-bottom:4px}.street-workspace .town-zoom{left:5px;right:auto;bottom:6px;padding:2px}.street-workspace .town-zoom button{min-width:33px;min-height:36px;font-size:21px;padding:3px 6px}.street-workspace .town-zoom output{width:35px;font-size:10px}.street-workspace .town-zoom [data-zoom="fit"]{font-size:11px}.placed-actions{padding:6px}.placed-actions button{padding:6px;font-size:10px}}

/* A closer view of a connected neighborhood with individually editable paving. */
#app[data-game=street]{height:100dvh;min-height:0;padding:0;overflow:hidden;background:linear-gradient(#eef7fc,#e9e2c6)}
#app[data-game=street]>main{max-width:700px;height:100%;padding:0 9px 8px;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:0 0 30px #6d855629}
#app[data-game=street]>.village-nav{display:none}
.street-top{flex:0 0 67px;padding:8px 3px;gap:8px}.street-top h1{font-size:29px}.street-top h1 small{font-size:22px;margin-top:2px}
.street-layout.game-layout{flex:1;min-height:0;display:grid;grid-template-rows:35px 27px minmax(0,1fr) 25px 38px;gap:5px;margin:0;padding:0}
.street-hud{margin:0;gap:6px}.street-hud>span{padding:3px 7px;font-size:12px;min-width:0}
#app[data-game=street] .status-row{font-size:9px;margin:1px 3px 3px}#app[data-game=street] .progress{height:5px;margin:0 3px}
.street-workspace{height:auto;min-height:0;grid-template-columns:minmax(0,1fr) 102px;gap:7px}
.street-workspace .iso-town{--iso-tile:calc(100cqw / 3.7);border:2px solid #d9dbba;border-radius:14px;background:#a9c685}
.street-workspace .street-board.board{top:calc(50% - 60cqw)}
.street-workspace .street-toolbox{padding:4px}.street-workspace .street-tabs button{font-size:10px}.street-workspace .town-piece.piece{flex:0 0 85px;min-height:85px}.street-workspace .town-piece small{font-size:9px;line-height:1.15}
.iso-path-surface{position:absolute;left:0;top:50%;width:100%;height:50%;pointer-events:none;overflow:hidden}
.town-piece-preview{position:relative}.town-piece-preview>.iso-path-surface{left:50%;width:60px;height:30px;transform:translateX(-50%);top:29px}
#app[data-game=street] .hint-note{min-height:0;font-size:10px;line-height:12px;align-self:center;margin:0;text-align:center}
#app[data-game=street] .tools{margin:0;gap:5px}#app[data-game=street] .tools .quiet{flex:1;font-size:11px;padding:5px;min-height:34px}
#app[data-game=street] .selection-tip{display:none}
@media(max-width:650px){.street-workspace{grid-template-columns:minmax(0,1fr) 87px;min-height:0;height:auto}.street-workspace .town-piece-preview>.iso-path-surface{width:54px;height:27px;top:26px}.street-workspace .town-piece.piece{flex-basis:79px;min-height:79px}.street-workspace .street-tabs button{font-size:9px}.street-top h1{font-size:28px}.street-top h1 small{font-size:21px}}
@media(max-height:650px){.street-top{flex-basis:57px}.street-top h1{font-size:24px}.street-top h1 small{font-size:19px}.street-layout.game-layout{grid-template-rows:30px 25px minmax(0,1fr) 24px 34px;gap:3px}.street-workspace .iso-town{--iso-tile:calc(100cqw / 4.5)}}

.iso-bank{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.town-piece-preview:has(.iso-path-surface)>.town-sprite{position:absolute;left:50%;transform:translateX(-50%);width:60px;top:26.25px!important;height:34.72px!important}.town-piece-preview>.iso-path-surface{top:30px;height:30px}@media(max-width:650px){.town-piece-preview:has(.iso-path-surface)>.town-sprite{width:54px;top:23.625px!important;height:31.25px!important}.street-workspace .town-piece-preview>.iso-path-surface{top:27px;height:27px}}

.street-workspace .iso-town{--iso-tile:calc(100cqw / 2.65)}.street-workspace .street-board.board{top:calc(50% - 92cqw)}@media(max-height:650px){.street-workspace .iso-town{--iso-tile:calc(100cqw / 3.5)}.street-workspace .street-board.board{top:calc(50% - 70cqw)}}
.iso-lot.built>.town-sprite{pointer-events:none}

/* 100% fits the entire playable diamond and its canal border. */
.street-workspace .iso-town{container-type:size;--iso-tile:min(calc((100cqw - 24px) / 7.2),calc((100cqh - 58px) / 4.5))}
.street-workspace .street-board.board{top:calc(50% - var(--iso-tile) * 2.2);transform-origin:50% calc(var(--iso-tile) * 2.2)}

.plot-mirror{position:absolute;inset:0;display:block;transform:scaleX(-1);pointer-events:none}.plot-mirror>.town-sprite{position:absolute;width:100%}.connected-preview{display:block;position:relative;width:100%;height:64px}.connected-preview-lot{position:absolute;pointer-events:none}.connected-preview-lot>.town-sprite{position:absolute;width:100%}.town-piece-preview:has(.connected-preview){display:block}.town-piece-preview>.plot-mirror{inset:0 10px}.street-workspace .iso-lot .plot-mirror{width:100%;height:100%}