.royal-days { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.royal-days input[type="range"] { flex: 1; max-width: 360px; accent-color: var(--accent); }
.royal-days .slider-value { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 68px; }
.royal-toggles { flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.royal-toggles label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.royal-toggles input { accent-color: var(--accent); }

.royal-map { margin: 0 0 18px; }
.royal-map figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.royal-map svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* the game's own art, so the map reads the way it does in game */
.royal-map image { image-rendering: pixelated; }
.royal-map .terrain { opacity: 0.85; }
/* the terrain is busy and both themes run over it, so every line gets its own dark halo */
.royal-map .link, .royal-map .post circle { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)); }
.royal-map .link { stroke: var(--accent); stroke-width: 2; opacity: 0.9; }
.royal-map .link.support { stroke: var(--xp); stroke-dasharray: 4 3; }
.royal-map .link.savage { stroke: var(--flag); stroke-dasharray: 2 3; }
/* a node nothing reaches stays legible but recedes */
.royal-map .node.dry { opacity: 0.35; }
.royal-map .post circle { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.royal-map .post.support circle { fill: var(--xp); }
.royal-map .post.savage circle { fill: var(--flag); }

.swatch.outpost { background: var(--accent); border-radius: 50%; }
.swatch.support { background: var(--xp); border-radius: 50%; }
.swatch.savage { background: var(--flag); border-radius: 50%; }
.swatch-img { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: middle; }
.legend .key.faded .swatch-img { opacity: 0.35; }

.change { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.change .arrow { color: var(--faint); }
.change .now { color: var(--text); }
.pill {
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .royal-days { flex-wrap: wrap; }
  .royal-map .post circle { r: 6; }
}