/* Map focus test: a screen-space depth cue for playable maps. The overlay is a canvas sibling below #ui. */
#mapFocusOverlay { position: fixed; inset: 0; display: none; pointer-events: none; }
body.map-focus-active #mapFocusOverlay { display: block; }
#mapFocusOverlay > i { position: absolute; left: 0; width: 100%; display: block; background: rgba(8, 12, 8, .018); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#mapFocusOverlay .map-focus-top { top: 0; height: 39%; mask-image: linear-gradient(to bottom, #000 30%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); }
#mapFocusOverlay .map-focus-bottom { bottom: 0; height: 33%; mask-image: linear-gradient(to top, #000 28%, transparent); -webkit-mask-image: linear-gradient(to top, #000 28%, transparent); }
/* The minimap and its labels are rendered into #game. Remove their rectangle from the top blur without a renderer copy. */
#mapFocusOverlay .map-focus-top { mask-image: linear-gradient(to bottom, #000 30%, transparent), linear-gradient(#000 0 0); mask-size: 100% 100%, var(--map-focus-minimap-width, 0px) var(--map-focus-minimap-height, 0px); mask-position: 0 0, var(--map-focus-minimap-left, 0px) 0; mask-repeat: no-repeat; mask-composite: subtract; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent), linear-gradient(#000 0 0); -webkit-mask-size: 100% 100%, var(--map-focus-minimap-width, 0px) var(--map-focus-minimap-height, 0px); -webkit-mask-position: 0 0, var(--map-focus-minimap-left, 0px) 0; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-out; }