.city-page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
.city-page-heading .eyebrow{font-size:9px;color:#879078;letter-spacing:1.7px}
.city-page-heading h1{margin:7px 0 5px;font-size:28px;letter-spacing:-1px}
.city-page-heading h1>span{font:400 15px 'Noto Sans JP',sans-serif;color:#9d9e8f;letter-spacing:2px;margin-left:17px}
.city-page-heading p{font-size:11px;color:var(--muted)}
.city-page-heading>.btn{flex-shrink:0}
.city-progress-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-bottom:21px;padding:12px 18px;border:1px solid #e4e8dd;border-radius:11px;background:#fff;font-size:10px;color:#84917c}
.city-progress-strip>span{display:inline-flex;align-items:center;gap:7px}
.city-progress-strip strong{font-size:12px;color:#3e6251;letter-spacing:.2px}
.city-progress-strip small{font-size:9px;color:#9dA492}
.city-minimap{border:1px solid #d7dfcc;background:#fffdf6;border-radius:19px;overflow:hidden;box-shadow:0 9px 25px #3e533409}
.city-minimap-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 22px;border-bottom:1px solid #e1e5d7}
.city-map-title .eyebrow{font-size:8px;letter-spacing:1.7px;color:#8c9a7e}
.city-map-title h2{font-size:16px;font-weight:600;line-height:1.45;margin-top:3px;letter-spacing:-.3px}
.city-map-controls{display:flex;align-items:center;gap:3px;border:1px solid #e0e4d5;border-radius:9px;background:#fff;padding:3px}
.city-map-controls button{width:32px;height:32px;border-radius:6px;font-size:19px;line-height:1;font-weight:400;color:#587560}
.city-map-controls button:hover:not(:disabled){background:#ecf1e5}
.city-map-controls button:focus-visible{outline-offset:1px}
.city-map-controls output{min-width:39px;text-align:center;font-size:9px;color:#8a957f;font-variant-numeric:tabular-nums}
.city-map-controls .map-fit-control{font:500 9px var(--font);width:auto;padding:0 9px;margin-left:3px;border-left:1px solid #e6e9dd;border-radius:0 6px 6px 0}
.city-map-viewport{position:relative;width:100%;height:460px;overflow:auto;overscroll-behavior:contain;background:#dbe7cd;cursor:grab;scrollbar-width:thin;scrollbar-color:#96ac8c #dbe7cd;touch-action:pan-x pan-y;outline-offset:-4px!important}
.city-map-viewport.is-panning{cursor:grabbing;user-select:none}
.city-map-world{min-width:100%;min-height:100%;position:relative}
.city-map-art{display:block;width:100%;height:100%;overflow:visible;user-select:none}
.city-landmark{cursor:pointer;outline:none}
.landmark-hitbox{pointer-events:all;cursor:pointer}
.landmark-building{transition:transform .18s ease;pointer-events:none}
.landmark-focus-ring{opacity:0;transition:opacity .18s ease;pointer-events:none}
.city-landmark:hover .landmark-building,.city-landmark:focus-visible .landmark-building{transform:translateY(-5px)}
.city-landmark:hover .landmark-focus-ring,.city-landmark:focus-visible .landmark-focus-ring{opacity:.85}
.landmark-label{pointer-events:all;transition:opacity .15s}
.landmark-label-jp,.landmark-label-kana{font-family:'Noto Sans JP',sans-serif}
.city-landmark:hover .landmark-label-background,.city-landmark:focus-visible .landmark-label-background{fill:#fffef6;stroke:#93ad83;stroke-width:1.5}
.hide-map-labels .landmark-label{opacity:0;pointer-events:none}
.hide-map-labels .landmark-label-background{pointer-events:none}
.city-landmark-tooltip{opacity:0;pointer-events:none;overflow:visible;transition:opacity .15s}
.city-landmark-tooltip>div{height:auto;text-align:center;padding:8px 10px;border-radius:11px;background:#fffdf5;border:1px solid #dde5d2;box-shadow:0 6px 17px #38574326;color:#355445;line-height:1.45}
.city-landmark-tooltip ruby{font:600 20px/1.7 'Noto Sans JP',sans-serif}
.city-landmark-tooltip rt{font-size:9px;color:#6e8365}
.city-landmark-tooltip small{display:block;font:11px var(--font);color:#8e967e;margin-top:3px}
.city-landmark:hover .city-landmark-tooltip,.city-landmark:focus-visible .city-landmark-tooltip{opacity:1}
.city-map-footer{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;background:#fffdf6;border-top:1px solid #d9e2ca;padding:12px 20px}
.city-map-footer>p{font-size:9px;color:#8a967b;margin-right:auto}
.city-map-footer>p>span{margin-right:5px;font-size:13px;color:#6e8866}
.city-map-legend{display:flex;gap:12px;font-size:8px;color:#8c977f}
.city-map-legend>span{display:flex;align-items:center;gap:5px}
.city-map-legend i{width:12px;height:7px;display:inline-block;border-radius:2px}
.legend-road{background:#abbcb5}.legend-river{background:#9bcbd0}.city-map-legend .legend-visited{background:#537e63;width:7px;height:7px;border-radius:50%}
.city-label-toggle{font-size:9px;color:#71866a;padding:4px 8px;border:1px solid #e1e6d5;border-radius:6px;background:#f6f8ee;min-height:30px}
.city-quick-travel{border-top:1px solid #e3e8d8;background:#f8faf2}
.city-quick-travel>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;padding:11px 21px;font-size:10px;color:#7e8e73}
.city-quick-travel>summary::-webkit-details-marker{display:none}
.city-quick-travel>summary>span{font-size:14px}
.city-quick-travel[open]>summary>span{transform:rotate(180deg)}
.city-quick-travel>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 15px;padding:0 21px 16px}
.city-quick-travel button{display:flex;align-items:center;gap:9px;padding:8px;text-align:left;border-radius:7px;min-height:50px}
.city-quick-travel button:hover{background:#ecf2e3}
.city-quick-travel button>span:first-child{font-size:24px}
.city-quick-travel button>span:nth-child(2){display:flex;flex-direction:column}
.city-quick-travel ruby{font:600 12px/1.6 'Noto Sans JP',sans-serif}
.city-quick-travel rt{font-size:6px;color:#96a087}
.city-quick-travel small{font-size:8px;color:#99a18c}
.city-quick-travel i{margin-left:auto;font-size:10px;font-style:normal;color:#537e63}
@media(min-width:1500px){.city-map-viewport{height:500px}}
@media(max-width:950px){.city-progress-strip{gap:8px 17px}.city-map-viewport{height:410px}.city-map-footer{padding:10px 16px}.city-map-legend{display:none}.city-quick-travel>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.city-page-heading{gap:12px;margin-bottom:14px}.city-page-heading h1{font-size:24px}.city-page-heading h1>span{display:none}.city-page-heading p{font-size:10px;max-width:300px}.city-page-heading>.btn{font-size:10px;padding:10px}.city-progress-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:11px 14px;font-size:9px;margin-bottom:16px}.city-progress-strip strong{font-size:11px}.city-minimap-toolbar{padding:13px 15px;gap:10px}.city-map-title h2{font-size:13px;max-width:195px}.city-map-title .eyebrow{font-size:7px}.city-map-controls{flex-shrink:0}.city-map-controls button{width:31px;height:34px}.city-map-controls output{min-width:34px}.city-map-controls .map-fit-control{padding:0 7px;font-size:8px}.city-map-viewport{height:355px}.city-map-footer{gap:6px;padding:10px 14px}.city-map-footer>p{font-size:8px;flex:1;min-width:170px}.city-label-toggle{font-size:8px}.city-quick-travel>summary{padding:10px 15px}.city-quick-travel>div{padding:0 10px 12px;gap:3px}}
@media(max-width:430px){.city-page-heading>.btn .icon{display:none}.city-page-heading h1{font-size:22px}.city-page-heading .eyebrow{font-size:7px;letter-spacing:1px}.city-map-title h2{font-size:11px;max-width:130px}.city-map-controls .map-fit-control{max-width:54px;line-height:1.3}.city-map-viewport{height:320px}.city-progress-strip small{display:none}.city-quick-travel ruby{font-size:11px}}
@media(prefers-reduced-motion:reduce){.landmark-building,.landmark-focus-ring,.landmark-label,.city-landmark-tooltip{transition:none}}