/* Big map (M, ui/atlas.js): level range on top, the map with the zone badges, legend and help below. */
.at-head { display: flex; justify-content: space-between; gap: 6px; height: 11px; line-height: 11px; margin: -1px 0 3px; padding: 0 3px;
  font-size: 7px; white-space: nowrap; background: #120e0b; box-shadow: inset 0 0 0 1px #2e251c; }
.at-map { position: relative; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--edge), 0 0 0 2px var(--bronze-d); margin: 1px auto; }
.at-map canvas { display: block; }
.at-badges { position: absolute; inset: 0; pointer-events: none; }
/* zone: lowest monster level in the colour of the planner's verdict (--c), ★ = best zone */
.at-z { position: absolute; transform: translate(-50%, -50%); min-width: 9px; height: 8px; padding: 0 2px; font-size: 7px; line-height: 8px;
  text-align: center; white-space: nowrap; color: var(--c); background: rgba(10, 7, 6, .82);
  box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--c); text-shadow: var(--ol); }
.at-z.v-best { color: #2a1a08; background: var(--c); text-shadow: none; box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px #fff2bf; }
.at-z.v-few, .at-z.v-easy { opacity: .8; }
/* the chosen hunting zone: white rim; hovered: brighter */
.at-z.cur { box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px var(--c); }
.at-z.hov { z-index: 1; color: #fff; background: rgba(10, 7, 6, .95); opacity: 1; }
.at-z.v-best.hov { color: #2a1a08; background: #ffe08a; }
.at-legend { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.at-lrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 6px; font-size: 6px; line-height: 7px; }
.at-chip { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; color: var(--text); }
.at-chip i { width: 4px; height: 4px; flex: none; box-shadow: 0 0 0 1px var(--edge); }
.at-chip.me i { width: 0; height: 0; box-shadow: none; border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 5px solid #fff; background: none !important; }
.at-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 3px; padding: 0 1px; white-space: nowrap; }
.at-pos { font-size: 6px; color: var(--dim); }