.city-section{max-width:1280px;margin:auto;padding-top:80px;padding-bottom:70px}.city-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.city-heading h2{font-size:clamp(28px,4vw,46px);margin:12px 0 0;line-height:1.25}.city-heading p{max-width:310px;color:#b8c9c4}.city-stage{position:relative;min-height:540px;height: min(65vw,650px);border:1px solid #7bb7a440;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#284e49,#0c2020 75%)}.city-canvas{position:absolute;inset:0}.city-canvas canvas{display:block;width:100%;height:100%;touch-action:none}.city-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(ellipse,#21413d99,#071a1b99)}.city-start[hidden],.city-toolbar[hidden],.city-detail[hidden],.city-hint[hidden],.city-spots[hidden]{display:none}.city-icon{font-size:86px;color:#a8e0bb}.city-start h3{font-size:26px;margin:12px 0}.city-start p,.city-caption{color:#a2bdb3}.city-section button{font:inherit;cursor:pointer;border:1px solid #a2d4bd55;color:#ecfff4;background:#15332eee;border-radius:12px;padding:10px 16px}.city-section button:hover,.city-section button[aria-pressed=true]{background:#2e6550}.city-section button:focus-visible,.city-spots a:focus-visible,.city-canvas canvas:focus-visible{outline:3px solid #b8f0c3;outline-offset:3px}.city-start button{background:#c6edbc;color:#153528;font-weight:700;padding:14px 26px;margin:12px 0}.city-start button:disabled{opacity:.7;cursor:wait}#city-status{font-size:13px;color:#d0e1d8}.city-toolbar{position:absolute;top:18px;left:18px;display:flex;gap:8px;flex-wrap:wrap}.city-toolbar button{font-size:13px;backdrop-filter:blur(10px)}.city-detail{position:absolute;right:18px;bottom:54px;width:260px;padding:20px;background:#102c29ec;backdrop-filter:blur(12px);border:1px solid #9ad4b755;border-radius:16px}.city-detail strong{font-size:20px}.city-detail p{font-size:14px;color:#c1d7cc;line-height:1.7}.city-detail button{font-size:12px}.city-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:12px;color:#d4e7da;pointer-events:none}.city-spots{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}.city-spots a{color:#bce7c5;margin-left:auto;padding:10px 0}.city-caption{font-size:12px;margin-top:16px}@media(max-width:700px){.city-heading{display:block}.city-heading p{max-width:none}.city-stage{min-height:430px;height:60vh;max-height:600px;border-radius:18px}.city-toolbar{left:10px;top:10px;gap:5px}.city-toolbar button{font-size:11px;padding:8px 10px}.city-detail{right:12px;bottom:46px;width:220px;padding:14px}.city-spots button{font-size:12px;padding:9px 12px}.city-spots a{margin-left:0;width:100%;font-size:14px}.city-section{padding-top:50px}.city-hint{font-size:10px}}
.city-section .city-hotspot{position:absolute;transform:translate(-50%,-100%);font-size:12px;padding:6px 10px;background:#163b30e8;border-color:#c6edbcaa;box-shadow:0 3px 12px #0005;white-space:nowrap}.city-section .city-hotspot[hidden]{display:none}@media(max-width:700px){.city-section .city-hotspot{font-size:10px;padding:5px 8px}}