.town-navigation { position: absolute; top: max(24px, env(safe-area-inset-top)); right: max(25px, env(safe-area-inset-right)); width: 170px; z-index: 8; color: #f0eee4; pointer-events: none; }
.nav-radar { position: relative; width: 170px; height: 170px; }
.nav-compass { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px #25312e80); }
.nav-radar__open { position: absolute; inset: 15px; padding: 0; pointer-events: auto; border-radius: 50%; background: #e7e5d8e8; border: 1px solid #f4f0e788; box-shadow: 0 1px 8px #15211b29; }
.nav-radar__open:hover { background: #eeece0; }
.nav-radar__open:focus-visible { outline-offset: 5px; }
.nav-minimap { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.nav-radar__open > kbd { position: absolute; right: -8px; bottom: -7px; font-size: 10px; color: #fffdf1; text-shadow: 0 1px 4px #13201b; }
.nav-destination { font-size: 10px; line-height: 1.6; text-align: center; margin: 6px -8px 0; text-shadow: 0 1px 4px #13201b; }
.world-map { position: absolute; inset: 0; z-index: 35; color: #424c43; background: #e9e5da; overflow: hidden; color-scheme: light; }
.world-map__header { position: absolute; left: 32px; right: 32px; top: max(24px, env(safe-area-inset-top)); display: flex; align-items: baseline; gap: 24px; z-index: 3; pointer-events: none; }
.world-map__header h2 { margin: 0; font: 400 24px var(--serif); letter-spacing: .1em; }
.world-map__visited { font-size: 10px; letter-spacing: .06em; color: #7b8074; font-variant-numeric: tabular-nums; }
.world-map__close { display: flex; align-items: center; gap: 12px; padding: 8px 0 8px 12px; margin: -8px 0 -8px auto; font-size: 11px; pointer-events: auto; }
.world-map__close kbd { font-size: 10px; opacity: .6; }
.world-map__close:hover { color: #172b29; }
.world-map__sheet { position: absolute; inset: 58px 20px 84px; overflow: hidden; }
.world-map__svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: grab; }
.world-map__svg.is-dragging { cursor: grabbing; }
.map-poi { cursor: pointer; outline: none; }
.map-poi:focus-visible > circle, .map-poi:hover > circle { stroke: #273e3b; stroke-width: 2.5px; }
.map-poi:focus-visible > rect { fill: #f6f3eeb3; }
.world-map__compass { position: absolute; top: 80px; left: 30px; width: 54px; height: 54px; pointer-events: none; }
.world-map__compass svg { width: 100%; height: 100%; }
.world-map__controls { position: absolute; right: 32px; bottom: max(28px, env(safe-area-inset-bottom)); display: flex; align-items: center; z-index: 3; background: #e9e5da; }
.world-map__controls button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #606b5326; margin-left: -1px; }
.world-map__controls button:hover:not(:disabled) { background: #dadbcf; }
.world-map__controls button:disabled { opacity: .28; }
.world-map__scale { position: absolute; left: 32px; bottom: max(33px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 5px; color: #71796c; }
.world-map__scale > span { display: block; width: 50px; min-width: 10px; height: 5px; border: 1px solid currentColor; border-top: 0; }
.world-map__scale small { font-size: 9px; }
.world-map__hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 300px); margin: 0; font-size: 10px; line-height: 1.7; color: #7b8074; text-align: center; }
.place-detail { position: absolute; bottom: max(25px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 28px; width: max-content; max-width: calc(100% - 360px); padding: 14px 0; border-top: 1px solid #7a806f50; background: #e9e5da; z-index: 2; }
.place-detail__copy { min-width: 0; }
.place-detail__title { margin: 0; font: 400 20px/1.4 var(--serif); letter-spacing: .04em; }
.place-detail__copy p { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 10px; line-height: 1.6; color: #7b8074; margin: 5px 0 0; }
.place-detail__visited:empty { display: none; }
.place-detail__track { display: flex; align-items: center; gap: 7px; padding: 10px 0; font-size: 11px; white-space: nowrap; border-bottom: 1px solid #68726466; }
.place-detail__track[aria-pressed="true"] { color: #8b614e; }
.place-detail__track:hover { border-color: currentColor; }
.place-detail__dismiss { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -8px; opacity: .6; flex: none; }
.place-detail__dismiss:hover { opacity: 1; }
@media (min-width: 1700px) {
  .world-map__sheet { inset: 62px max(24px, calc((100% - 1500px) / 2)) 92px; }
}
@media (max-width: 700px) {
  .town-navigation { top: 15px; right: 16px; width: 138px; }
  .nav-radar { width: 138px; height: 138px; }
  .nav-radar__open { inset: 13px; }
  .nav-destination { font-size: 9px; }
  .world-map__header { left: 20px; right: 20px; top: 22px; gap: 12px; flex-wrap: wrap; }
  .world-map__header h2 { font-size: 22px; }
  .world-map__visited { font-size: 9px; }
  .world-map__close { gap: 8px; }
  .world-map__close > span { display: none; }
  .world-map__sheet { inset: 68px -30px 150px; }
  .world-map__compass { left: 19px; top: 72px; width: 42px; height: 42px; }
  .world-map__controls { right: 20px; bottom: 20px; }
  .world-map__scale { left: 20px; bottom: 26px; }
  .world-map__hint { bottom: 90px; max-width: calc(100% - 40px); font-size: 10px; }
  .place-detail { bottom: 76px; max-width: calc(100% - 40px); width: calc(100% - 40px); gap: 14px; padding: 12px 0; }
  .place-detail__copy { flex: 1; }
  .place-detail__title { font-size: 18px; }
  .place-detail__copy p { font-size: 9px; gap: 4px; }
  .place-detail__dismiss { margin-left: 0; width: 24px; }
}
@media (max-height: 560px) and (min-width: 701px) {
  .town-navigation { width: 138px; top: 12px; right: 15px; }
  .nav-radar { width: 138px; height: 138px; }
  .world-map__header { top: 18px; }
  .world-map__sheet { inset: 48px 70px 80px; }
  .world-map__compass { top: 65px; }
  .place-detail { bottom: 14px; padding: 8px 0; }
}