/* Pointer motion must update immediately; browser smooth scrolling fights it. */
body #map-viewport{scroll-behavior:auto;overflow-anchor:none;-webkit-user-select:none;contain:layout paint}
body #map-viewport.dragging,body #map-viewport.dragging .map-place{cursor:grabbing}
body #world-map{overflow-anchor:none}
body #map-viewport:focus-visible{outline:3px solid var(--ui-panel-a22-map-map-viewport-focus);outline-offset:2px}
/* A305: real touch rectangles, including transparent canvas marker buttons. */
html body.pack-ui #map-panel button{min-width:44px;min-height:44px}
html body.pack-ui #map-panel :is(p,small,.atlas-island-name,.atlas-island-mark,.atlas-region-name,.atlas-count,.atlas-exit){font-size:12px}
html body.pack-ui #map-panel #map-quests :is(p,small){font-size:12px!important}
html body.pack-ui #map-panel #world-map .region-map-marker{width:44px;height:44px;min-width:44px;min-height:44px;justify-content:center;transform:translate(-50%,-50%);border-radius:0}
html body.pack-ui #map-panel .region-map-marker span{font-size:12px;pointer-events:none}
html body.pack-ui #map-panel #map-detail{border:1px solid var(--ui-map-detail-line);border-radius:12px;background:var(--ui-map-detail-bg)}

/* A372: decorative chart surround, no tile, marker or input changes. */
html body.pack-ui #map-panel #map-title{position:relative;padding-right:32px;box-sizing:border-box}
html body.pack-ui #map-panel #map-title::after{content:"";position:absolute;right:0;top:2px;width:24px;height:24px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2213%22%20fill%3D%22%23fff8df%22%20stroke%3D%22%23ad976b%22%2F%3E%3Cpath%20d%3D%22M16%203%2020%2016%2016%2029%2012%2016Z%22%20fill%3D%22%23476d3b%22%2F%3E%3Cpath%20d%3D%22M3%2016%2016%2012%2029%2016%2016%2020Z%22%20fill%3D%22%23b7a174%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%23fff8df%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
html body.pack-ui #map-panel.region-map-mode #map-viewport{outline:2px solid var(--ui-panel-line);outline-offset:-3px;background-color:color-mix(in srgb,var(--ui-panel-bg) 72%,var(--ui-panel-acc));background-image:radial-gradient(ellipse at 25% 10%,color-mix(in srgb,var(--ui-panel-bg) 66%,transparent),transparent 75%),repeating-linear-gradient(0deg,color-mix(in srgb,var(--ui-panel-acc) 6%,transparent) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--ui-panel-acc) 5%,transparent) 0 1px,transparent 1px 11px);box-shadow:inset 0 0 16px color-mix(in srgb,var(--ui-panel-fg) 27%,transparent)}
html body.pack-ui #map-panel #world-map.actual-region-map{background:transparent}
html body.pack-ui #map-panel #world-map.actual-region-map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;outline:2px solid var(--ui-panel-bg);outline-offset:-4px;box-shadow:inset 0 0 0 1px var(--ui-panel-line),inset 0 0 0 3px var(--ui-panel-bg),inset 0 0 13px color-mix(in srgb,var(--ui-panel-fg) 25%,transparent);background:linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) left 5px top 5px/12px 2px no-repeat,linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) left 5px top 5px/2px 12px no-repeat,linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) right 5px top 5px/12px 2px no-repeat,linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) right 5px top 5px/2px 12px no-repeat,linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) left 5px bottom 5px/12px 2px no-repeat,linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) left 5px bottom 5px/2px 12px no-repeat,linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) right 5px bottom 5px/12px 2px no-repeat,linear-gradient(var(--ui-panel-line),var(--ui-panel-line)) right 5px bottom 5px/2px 12px no-repeat}