/* Five-segment Honor Grid category ring.
 * White = city beacon. Color = category activated in the field.
 */

/* The legacy single-color ring/progress stays out of the way once segments load. */
.honor-city-ring,
.honor-city-progress,
.honor-city-progress-bg {
  opacity: 0 !important;
  pointer-events: none !important;
}

.honor-city-segments {
  pointer-events: none;
}

.honor-city-segment {
  stroke-width: .45;
  vector-effect: non-scaling-stroke;
  transition: fill .28s ease, stroke .28s ease, opacity .28s ease, filter .28s ease;
}

.honor-city-segment.is-inactive {
  fill: rgba(255,255,255,.055);
  stroke: rgba(255,255,255,.11);
  opacity: .72;
  filter: none;
}

.honor-city-segment.is-unavailable {
  fill: rgba(255,255,255,.018);
  stroke: rgba(255,255,255,.05);
  opacity: .30;
  filter: none;
}

.honor-city-segment.is-active {
  fill: var(--segment-color);
  stroke: color-mix(in srgb, var(--segment-color) 84%, white 16%);
  opacity: 1;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--segment-color) 72%, transparent))
    drop-shadow(0 0 9px color-mix(in srgb, var(--segment-color) 42%, transparent));
}

.honor-city:hover .honor-city-segment.is-active,
.honor-city:focus .honor-city-segment.is-active {
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--segment-color) 88%, transparent))
    drop-shadow(0 0 13px color-mix(in srgb, var(--segment-color) 55%, transparent));
}

/* Unopened/dark nodes remain deliberately quiet. */
.honor-city.is-dark .honor-city-segment {
  fill: rgba(255,255,255,.025) !important;
  stroke: rgba(255,255,255,.055) !important;
  opacity: .34 !important;
  filter: none !important;
}

/* A complete city keeps the white beacon but lets the five colors read as one finished ring. */
.honor-city.is-fully-lit .honor-city-segment.is-active {
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--segment-color) 90%, transparent))
    drop-shadow(0 0 15px color-mix(in srgb, var(--segment-color) 58%, transparent));
}

/* The homepage uses the exact same meaning, just slightly softer at compact scale. */
#honor-grid-mini-map .honor-city-segment.is-active {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--segment-color) 62%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .honor-city-segment {
    transition: none;
  }
}