.room-city{background:#16212a;overflow:hidden}
.city-panorama{position:absolute;inset:0;overflow:hidden}
.city-map{position:absolute;left:50%;top:50%;width:max(100vw,177.6833vh);height:max(100vh,56.2799vw);transform:translate(-50%,-50%);background:linear-gradient(#10171222,#15100e22),url('/assets/city.webp') center/100% 100% no-repeat}
.city-place{position:absolute;left:var(--place-x);top:var(--place-y);width:var(--place-w);height:var(--place-h);padding:0;clip-path:var(--place-shape);isolation:isolate;color:#f3dfb0;cursor:pointer}
.city-place:active{transform:none}
.city-building-outline{position:absolute;inset:0;width:100%;height:100%;stroke-width:.4;stroke:#d8b86b00;fill:#cf974c00;transition:fill .18s,stroke .18s;pointer-events:none}
.city-place:hover .city-building-outline,.city-place:focus-visible .city-building-outline{fill:#cf974c16;stroke:#e7cb8780}
.city-place:focus-visible{outline:none}
.city-place-marker{position:absolute;left:var(--marker-x);top:var(--marker-y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;pointer-events:none;text-shadow:0 2px 4px #000,0 0 12px #000}
.city-place-marker .menu-icon,.city-market-icon{width:58px;height:58px;transition:filter .18s,transform .18s}
.city-place-marker strong{font:600 clamp(19px,1.5vw,28px) var(--serif);color:#f5dfb0;margin-top:4px}
.city-place-marker small{font-size:10px;color:#e3cd9f;letter-spacing:.25px;margin-top:4px;opacity:0;transform:translateY(3px);transition:opacity .18s,transform .18s}
.city-place:hover .city-place-marker small,.city-place:focus-visible .city-place-marker small{opacity:1;transform:none}
.city-place:hover .menu-icon,.city-place:focus-visible .menu-icon,.city-place:hover .city-market-icon,.city-place:focus-visible .city-market-icon{filter:drop-shadow(0 0 10px #ffcf7866) brightness(1.16);transform:translateY(-2px)}
.city-market-icon{display:flex;align-items:center;justify-content:center;border:2px ridge #bea46b;border-radius:50%;background:radial-gradient(circle at 40% 25%,#6b6040,#182825 63%,#111c1b);box-shadow:inset 0 0 0 3px #19201f,0 3px 7px #0009;filter:drop-shadow(0 4px 6px #0008)}
.city-market-icon svg{width:33px;height:33px;stroke:#e3bf7a;stroke-width:1.25;filter:drop-shadow(1px 2px 2px #000)}
.city-map-hint{position:absolute;left:30px;bottom:31px;font:500 16px var(--serif);color:#d9c9a8;text-shadow:0 2px 5px #000;pointer-events:none}
.city-shortcuts{display:none}
.city-map-hint span+span{display:none}
.city-return{z-index:2;text-shadow:0 2px 5px #000;white-space:nowrap}
.city-view .room-world,.city-view .room-shade,.city-view .dust{display:none}
@media(max-width:900px){.city-map-hint{left:18px;bottom:15px;font-size:13px}.city-place-marker .menu-icon,.city-market-icon{width:49px;height:49px}.city-place-marker strong{font-size:21px}.city-place-marker small{font-size:9px}}
@media(max-aspect-ratio:4/5){.city-panorama{top:130px;bottom:106px;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#b29660 #17232a}.city-map{position:relative;left:0;top:0;transform:none;height:100%;width:calc((100dvh - 236px)*1.776833);min-width:780px;background-size:100% 100%}.city-view .room-title{top:88px}.city-map-hint{left:0;right:0;bottom:85px;text-align:center;font-size:13px}.city-shortcuts{position:absolute;bottom:48px;left:8px;right:8px;display:flex;justify-content:center;gap:4px;flex-wrap:wrap}.city-shortcuts button{font:600 16px var(--serif);padding:5px;color:#eddbb4;border-bottom:1px solid #b9965b55}.city-shortcuts button:hover{color:#ffdfa0}.city-return{bottom:11px;font-size:20px}.city-place-marker strong{font-size:21px}.city-place-marker small{display:none}.city-place-marker .menu-icon,.city-market-icon{width:45px;height:45px}}
@media(max-height:520px) and (min-aspect-ratio:4/5){.city-map-hint{display:none}.city-return{bottom:10px;font-size:19px}.city-place-marker .menu-icon,.city-market-icon{width:38px;height:38px}.city-place-marker strong{font-size:17px}.city-place-marker small{display:none}.city-market-icon svg{width:24px;height:24px}}
@media(max-aspect-ratio:4/5){.city-panorama{bottom:150px}.city-map{width:calc((100dvh - 280px)*1.776833)}.city-map-hint{bottom:119px}.city-map-hint span:first-child{display:none}.city-map-hint span+span{display:inline}}