.street-scene{--paper:#f5efdf;--ink:#263f37;background:var(--paper);color:var(--ink);border-radius:12px;overflow:hidden;font-family:Georgia,serif}
.street-head{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:22px 24px 14px}.street-eyebrow{font:500 11px/1.5 system-ui,sans-serif;letter-spacing:1.6px;color:#5a635b}.street-head h2{font:400 30px/1.2 Georgia,serif;margin:5px 0 0}
.street-orientation{display:flex;gap:14px;flex-wrap:wrap;padding:0 24px 12px;font:400 13px/1.6 system-ui,sans-serif}.street-orientation a{color:#5a635b;text-decoration:none}.street-orientation a[aria-current]{color:var(--ink);border-bottom:2px solid #bc9149}
.street-frame{height:465px;position:relative;isolation:isolate;overflow:hidden;background:#f4eddb}.street-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 24% 20%,#fffbed 0,transparent 65%),linear-gradient(#dfe7dc,#f6edda 55%,#e2cfad 82%);pointer-events:none}.street-rear{position:absolute;inset:0;pointer-events:none;opacity:.2;filter:sepia(.35) saturate(.45);overflow:hidden;mask-image:linear-gradient(#000 80px,transparent 225px)}.street-rear img{position:absolute;height:220px;bottom:220px;object-fit:contain;transform:translateX(-50%)}
.street-viewport{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#b29e78 #eee2c8;cursor:grab;touch-action:pan-x pan-y}.street-viewport.is-dragging{cursor:grabbing;user-select:none}.street-world{position:relative;height:465px;min-width:100%}.street-paving{position:absolute;inset:357px 0 0;background:repeating-linear-gradient(0deg,transparent 0 20px,#b6a18233 21px 22px),repeating-linear-gradient(90deg,#ead9bb 0 35px,#d5c09d 36px 38px,#e2cfae 39px 75px);box-shadow:inset 0 10px 18px #baa38140;pointer-events:none}
.street-building{position:absolute;bottom:100px;transform:translateX(-50%);padding:0;border:0;background:transparent;color:var(--ink);z-index:3}.street-building img{display:block;width:100%;height:auto;pointer-events:none}.street-building:hover{filter:brightness(1.05)}.street-building:focus-visible{outline:3px solid #bc9149;outline-offset:3px}.street-name{position:absolute;left:50%;transform:translate(-50%,-50%);font:600 13px/1.1 Georgia,serif;text-align:center;white-space:nowrap;overflow:hidden;color:#3c392a;text-shadow:0 1px #fff9}
.street-gate{position:absolute;top:260px;bottom:0;width:165px;transform:translateX(-50%);z-index:2}.street-gate-road{position:absolute;inset:0 0 45px;background:repeating-linear-gradient(0deg,#d0bfa2 0 13px,#b5a084 14px 15px);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);box-shadow:inset 24px 0 24px #846f5130,inset -24px 0 24px #846f5130}.street-gate:before{content:"";position:absolute;left:18px;top:8px;width:5px;height:120px;background:#756e52;border-radius:3px}.street-gate-sign{position:absolute;top:8px;left:-20px;width:205px;background:#20372e;color:#fff6df;border:1px solid #d7b86a;border-radius:3px;padding:11px 12px;text-decoration:none;text-align:center;font:500 12px/1.4 system-ui,sans-serif;box-shadow:0 3px 7px #413a2326}.street-gate-sign small{display:block;color:#e8d1a5;font-size:11px;font-weight:400}.street-gate-sign strong{font-weight:500}.street-gate-sign:hover{color:#fff6df;background:#365445}
.street-controls{display:flex;gap:10px;align-items:center;padding:14px 16px 7px;flex-wrap:wrap}.street-controls button,.street-exit{border:1px solid #c6bda5;background:#faf7ef;color:var(--ink);border-radius:6px;padding:10px 13px;font:500 12px/1.4 system-ui,sans-serif;min-height:44px;cursor:pointer}.street-exits{display:flex;justify-content:center;gap:7px;flex:1;flex-wrap:wrap}.street-exit{display:flex;align-items:center;text-decoration:none;background:#20372e;color:#fff6df;border-color:#20372e}.street-exit:hover{color:#fff6df;background:#365445}.street-controls button:disabled{opacity:.4;cursor:default}.street-status{margin:0;padding:7px 20px 18px;color:#5a635b;font:400 13px/1.6 system-ui,sans-serif;min-height:52px}
.story-portrait{width:150px;aspect-ratio:3/4;overflow:hidden;position:relative;flex:none;background:#f5efdf;border-radius:10px}.story-portrait img{position:absolute;width:200%;max-width:none;height:100%;object-fit:cover;left:0;top:0}.story-portrait.profile img{left:-100%}.story-profile-head{display:flex;align-items:start;gap:24px}.story-views{display:flex;gap:12px;flex-wrap:wrap}.story-views figure{margin:0}.story-views figcaption{font-size:12px;color:#5a635b;margin-top:5px}.story-profile-head .story-summary{flex:1;min-width:0}.story-diary{white-space:pre-line}.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.story-card{display:flex;gap:16px;align-items:center}.story-card .story-portrait{width:90px}.story-card h3{margin:0 0 5px}
@media(max-width:720px){.street-head{padding:17px 16px 10px;align-items:flex-start}.street-head h2{font-size:25px}.street-orientation{padding-left:16px;gap:9px}.street-controls{gap:7px}.street-exits{order:3;flex-basis:100%}.street-controls [data-pan="1"]{margin-left:auto}.street-exit{flex:1;justify-content:center}.street-gate-sign{width:180px;left:-7px}.story-profile-head{flex-direction:column}.story-portrait{width:130px}}

.street-minimap{position:absolute;top:12px;right:12px;z-index:8;width:178px;max-width:calc(100% - 24px);font:500 12px/1.4 system-ui,sans-serif}.street-minimap summary{display:block;list-style:none;cursor:pointer;background:#20372e;color:#fff6df;border:1px solid #c4a66a;border-radius:6px;padding:10px 12px;min-height:38px}.street-minimap summary::-webkit-details-marker{display:none}.street-minimap summary:after{content:"＋";float:right}.street-minimap[open] summary:after{content:"−"}.street-minimap nav{background:#faf5e8;border:1px solid #c4b28b;border-radius:0 0 6px 6px;padding:7px;box-shadow:0 6px 18px #253f3724}.street-minimap nav a{display:block;min-height:48px;padding:6px;color:#5a635b;text-decoration:none;border-radius:4px}.street-minimap nav a[aria-current]{background:#dfe6da;color:#20372e}.street-minimap svg{display:block;width:100%;height:22px;overflow:visible}.map-road{stroke:#bba784;stroke-width:3;fill:none}.map-link{stroke:#bba784;stroke-width:2;fill:none}.map-house{fill:#a07b51}.map-window{fill:#486d542a;stroke:#486d54;stroke-width:1.5}

.town-interior{position:relative;isolation:isolate;min-height:490px;margin:18px 0 25px;overflow:hidden;border:1px solid #c6ad81;border-radius:12px;color:#293f35;background:repeating-linear-gradient(90deg,#eee3c9 0 38px,#e9dcc0 39px 40px);box-shadow:inset 0 -140px 0 #c9a77b;font-family:Georgia,serif}
.town-interior:before{content:"";position:absolute;inset:auto 0 0;height:140px;background:repeating-linear-gradient(90deg,transparent 0 75px,#9c794c55 76px 78px);z-index:-1}.town-interior header{position:relative;z-index:2;padding:22px 26px;background:linear-gradient(#faf5e9e6,transparent);max-width:70%}.town-interior header h2{font-size:28px;margin:5px 0}.town-interior header p{margin:0;color:#64705b}.room-window{position:absolute;top:110px;left:10%;width:95px;height:140px;background:linear-gradient(#b4d8d6,#f8edc8);border:9px solid #eee8d9;border-radius:45px 45px 0 0;box-shadow:0 4px 0 5px #ad8c61,0 0 65px 30px #fff9}.room-window:before{content:"";position:absolute;top:0;left:50%;height:100%;border-left:4px solid #eee8d9}.room-window:after{content:"";position:absolute;left:0;top:48%;width:100%;border-top:4px solid #eee8d9}.room-shelf{position:absolute;top:140px;right:7%;width:160px;height:150px;border:9px solid #816342;border-bottom-width:16px;background:#5d503c;display:flex;align-items:end;gap:4px;padding:9px 9px 14px;box-shadow:0 6px 9px #56433233}.room-shelf i{height:76%;width:15px;background:#998f55;border:2px solid #d5c497;box-shadow:inset 0 7px #d5c49733}.room-shelf i:nth-child(3n){height:92%;background:#74685e}.room-shelf i:nth-child(3n+1){background:#8f5345;height:65%}.room-desk{position:absolute;top:280px;left:35%;height:85px;width:190px;border-top:14px solid #94704c;border-left:8px solid #725a3c;border-right:8px solid #725a3c}.room-desk i{position:absolute;top:-24px;left:18px;width:42px;height:12px;background:#e8d6a7;border:2px solid #3f6857;transform:rotate(-8deg)}.room-desk i:nth-child(2){left:70px;transform:rotate(4deg);background:#7e4a36}.room-desk i:nth-child(3){left:112px;transform:rotate(-5deg);background:#b79358}.room-rug{position:absolute;bottom:40px;left:17%;width:66%;height:70px;border-radius:50%;background:#8d534244;border:7px double #9b6b46}.room-people{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:center;padding:180px 24px 18px;min-height:220px}.room-person{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:100px;max-width:155px;color:#203b31;text-align:center;text-decoration:none;background:#fcf8eae6;border:1px solid #bda781;border-radius:55px 55px 8px 8px;padding:8px 8px 10px;box-shadow:0 5px 12px #70553826}.room-person:hover{background:#fff9eb}.room-person .story-portrait{width:80px;border-radius:45px;aspect-ratio:1}.room-person small{font:12px/1.5 system-ui,sans-serif}.resident-token{display:grid;place-items:center;width:65px;height:65px;border-radius:50%;color:#f9ebca;background:#5a7460;border:4px double #d2b477;font-size:30px}.town-interior footer{position:relative;z-index:2;padding:12px 22px;background:#faf3e3e6;color:#65543d;font:12px/1.5 system-ui,sans-serif}.room-printing .room-desk{border-top-width:28px;border-color:#505c52}.room-junior{background:repeating-linear-gradient(90deg,#eadbc0 0 38px,#e3d5ba 39px 40px)}.room-home .room-shelf{background:#b9aa84;border-color:#8b7453}
.prototype-house{position:relative;height:290px;margin-top:35px;padding:40px 22px 75px;display:grid;grid-template-columns:repeat(3,1fr);gap:23px;background:#d5b68a;border:5px solid #c6a573;border-top:22px solid #69766b;box-shadow:0 0 0 3px #efdfb6,inset 0 -12px #9e795a}.prototype-house:before{content:"";position:absolute;top:-64px;left:-13px;right:-13px;height:45px;background:#58685d;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}.prototype-house i{height:39px;border:5px solid #eee2c0;background:linear-gradient(90deg,#5c8174 45%,#ebd7ab 46% 55%,#759788 56%);box-shadow:0 3px #96774e}.prototype-house .house-door{position:absolute;bottom:8px;left:42%;width:45px;height:65px;background:#46624e;border:5px solid #aa8d5c}.prototype-house.house-2{background:#bdae8b;border-top-color:#806750}.prototype-house.house-2:before{background:#806750}.prototype-house.house-3{background:#d6bd94;border-top-color:#637b70}.street-building:has(.prototype-house) .street-name{top:auto!important;bottom:65px;transform:translateX(-50%);background:#f5e9cb;border:2px solid #b9985e;border-radius:5px;padding:5px}
@media(max-width:600px){.town-interior header{max-width:100%;padding:20px}.town-interior header h2{font-size:25px}.room-shelf{right:5%;width:115px;height:125px;top:170px;gap:2px;padding:6px}.room-window{left:8%;width:65px;height:120px;top:150px}.room-desk{left:28%;width:145px;top:300px}.room-people{gap:12px;padding:205px 12px 18px}.room-person{min-width:95px;max-width:135px}.room-person .story-portrait{width:65px}}

.street-building-name-below .street-name{top:auto!important;bottom:-25px;transform:translateX(-50%);padding:4px 10px;max-width:95%;border:1px solid #bea77e;border-radius:5px;background:#fff7e5ef;color:#263f37;font-size:13px;line-height:1.25;box-sizing:border-box}.street-building-name-below .street-occupants{bottom:-48px;font-size:10px}

/* Shared decorative room art; people, names and links stay independent HTML. */
.has-room-illustration{display:flex;flex-direction:column;background:#efe1c8;box-shadow:none}.has-room-illustration>.room-illustration{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}.has-room-illustration>header,.has-room-illustration>footer{position:relative;z-index:1}.has-room-illustration>header{max-width:100%;overflow-wrap:anywhere;background:linear-gradient(90deg,#fff6e8f2,#fff6e8c9,transparent)}.has-room-illustration>footer{margin-top:auto}.has-room-illustration>.city-room-people{position:relative;z-index:2}.has-room-illustration .room-person:focus-visible{outline:3px solid #9d572a;outline-offset:4px}

.city-room.has-room-illustration{background-image:none}