#map { background: #000; }
#map .leaflet-tile { image-rendering: pixelated; }
.agent-screen-image { cursor: pointer; }
.atlas-area-label { white-space: nowrap; color: #f1f3f5; font: 600 13px system-ui, sans-serif; text-shadow: 0 1px 3px #20242a, 0 0 4px #20242a; }
.atlas-area-label span { display: block; width: max-content; transform: translate(-50%, -100%); }
/* The panel and the zoom buttons wear the sidebar's look: off-white, a dark 2 px border, the game's bevel. */
.atlas-panel { width: 164px; max-width: calc(100vw - 80px); padding: 10px; border: 2px solid #383838; border-radius: 4px; background: #f8f8f8; color: #202020; font: 12px/1.5 system-ui, sans-serif; box-shadow: inset -2px -2px 0 #c0c0c0, inset 2px 2px 0 #fff; }
.atlas-panel button { width: 100%; background: #f8f8f8; color: #202020; border: 2px solid #383838; border-radius: 3px; padding: 5px; font: 600 12px/1.4 system-ui, sans-serif; cursor: pointer; box-shadow: inset -2px -2px 0 #c0c0c0, inset 2px 2px 0 #fff; }
.atlas-panel button:hover { background: #ebebe4; }
.atlas-panel button:active { background: #dcdcd4; box-shadow: inset 2px 2px 0 #c0c0c0; }
#map .leaflet-control-zoom.leaflet-bar { border: 2px solid #383838; border-radius: 4px; overflow: hidden; background-clip: padding-box; }
#map .leaflet-control-zoom a { background: #f8f8f8; color: #202020; border-bottom: 2px solid #383838; box-shadow: inset -2px -2px 0 #c0c0c0, inset 2px 2px 0 #fff; }
#map .leaflet-control-zoom a:last-child { border-bottom: none; }
#map .leaflet-control-zoom a:hover { background: #ebebe4; }
#map .leaflet-control-zoom a.leaflet-disabled { background: #f8f8f8; color: #b0b0a8; }
.atlas-toggle { display: flex; align-items: center; gap: 7px; margin-top: 10px; cursor: pointer; }
.atlas-toggle[hidden] { display: none; }
.atlas-toggle input { margin: 0; accent-color: #383838; }
.atlas-status[hidden] { display: none; }
.atlas-status { color: #585858; font-size: 11px; margin-top: 8px; overflow-wrap: anywhere; }
.atlas-area-label { pointer-events: none; }