.dmz-map :is(.dmz-marker, .dmz-filter)[data-category="key"] { --pin: #75b8ff; }
.dmz-map :is(.dmz-marker, .dmz-filter)[data-category="exfil"] { --pin: #90e3f6; }
.dmz-map :is(.dmz-marker, .dmz-filter)[data-category="loot"] { --pin: #efc373; }
.dmz-map :is(.dmz-marker, .dmz-filter)[data-category="tower"] { --pin: #83e1ed; }
.dmz-map :is(.dmz-marker, .dmz-filter)[data-category="spawn"] { --pin: #8fe4a0; }
.dmz-map :is(.dmz-marker, .dmz-filter)[data-category="boss"] { --pin: #f1a1dc; }
.dmz-map .dmz-marker[data-category="mission"] { --pin: #f2e2a2; }

.dmz-map .dmz-marker:is([data-key-kind="container"], [data-lock-kind="container"]) { --pin: #d1a9f7; }
.dmz-map .dmz-marker:is([data-key-kind="story"], [data-lock-kind="story"]) { --pin: #b5b4ff; }
.dmz-map .dmz-marker:is([data-key-kind="password"], [data-lock-kind="password"]) { --pin: #ffa666; }
.dmz-map .dmz-marker:is([data-key-kind="mechanism"], [data-lock-kind="mechanism"]) { --pin: #f3cb7a; }
.dmz-map .dmz-marker:is([data-key-kind="hidden"], [data-lock-kind="hidden"]) { --pin: #9edac7; }
.dmz-map .dmz-marker[data-key-kind="reported"] { --pin: #aeb9be; }
.dmz-marker[data-category="loot"][data-loot-kind="chem"] { --pin: #cce58c; }
.dmz-marker[data-category="loot"][data-loot-kind="hazmat"] { --pin: #f5d682; }
.dmz-marker[data-category="tower"][data-icon="sam"] { --pin: #9ed9f5; }
.dmz-marker[data-category="tower"][data-icon="hunt"] { --pin: #b0d3ff; }
.dmz-marker[data-category="service"][data-icon="bounty"] { --pin: #f19b7c; }

.dmz-map { --dmz-symbol-size: 28px; --dmz-symbol-image: 21px; --dmz-symbol-svg: 18px; }

.dmz-marker[data-category]:not([data-category="landmark"], [data-category="minor"], .dmz-grid-marker, .dmz-cluster) {
  width: var(--dmz-symbol-size);
  height: var(--dmz-symbol-size);
  border: 1px solid color-mix(in srgb, var(--pin) 76%, #0c151a);
  background: color-mix(in srgb, var(--pin) 22%, #10191d);
  box-shadow: 0 0 0 1px #0b1317b3, 0 2px 3px #07101480;
}

.dmz-marker[data-category]:not([data-category="landmark"], [data-category="minor"], .dmz-grid-marker, .dmz-cluster)[data-precision="candidate"] {
  border-style: dashed;
}

.dmz-marker .dmz-marker-icon img { width: var(--dmz-symbol-image); height: var(--dmz-symbol-image); }
.dmz-marker .dmz-marker-icon svg { width: var(--dmz-symbol-svg); height: var(--dmz-symbol-svg); }

.dmz-marker[data-category]:not([data-category="landmark"], [data-category="minor"], .dmz-grid-marker, .dmz-cluster):is(:hover, [aria-pressed="true"]) {
  border-color: var(--pin);
  background: color-mix(in srgb, var(--pin) 29%, #10191d);
  box-shadow: 0 0 0 1px #111a20, 0 0 0 3px color-mix(in srgb, var(--pin) 45%, transparent);
}

/* Grid records describe an area, so their outline and shape stay distinct from pins. */
.dmz-marker.dmz-grid-marker {
  border: 1px dashed #aebdc4;
  border-radius: 4px;
  background: #18242bef;
  color: #f0f5f5;
  box-shadow: 0 0 0 1px #0b1317b3;
}

.dmz-marker.dmz-grid-marker:is(:hover, [aria-pressed="true"]) {
  border-color: #e1ebed;
  background: #273942;
  box-shadow: 0 0 0 1px #0d171c;
}

.dmz-marker:focus-visible {
  z-index: 5;
  outline: 2px solid #fff4ce;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .dmz-map { --dmz-symbol-size: 24px; --dmz-symbol-image: 19px; --dmz-symbol-svg: 16px; }
}