/* Complete radar visualization for the player overview. */
.radar-panel {
  --radar-grid: rgba(17, 24, 32, .18);
  --radar-axis: rgba(17, 24, 32, .24);
  --radar-fill: rgba(0, 112, 209, .17);
  --radar-line: #0070d1;
  --radar-point: #0070d1;
}

.ability-radar {
  display: block;
  width: min(100%, 380px);
  height: auto;
  min-height: 280px;
  margin: 4px auto 0;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.radar-grid polygon {
  fill: none;
  stroke: var(--radar-grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.radar-grid polygon[data-scale="100"] {
  stroke: var(--radar-axis);
  stroke-width: 1.25;
}

.radar-grid .radar-axis-line {
  fill: none;
  stroke: var(--radar-axis);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.radar-grid .radar-value {
  fill: var(--radar-fill);
  stroke: var(--radar-line);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  transition: points 180ms ease;
}

.radar-points circle {
  fill: var(--radar-point);
  stroke: var(--ui-surface, #ffffff);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  transition: cx 180ms ease, cy 180ms ease;
}

.radar-labels {
  fill: var(--ui-text, #111820);
  font: 750 12px/1 var(--ui-font, Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif);
  letter-spacing: .01em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--ui-surface, #ffffff);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.radar-labels text:nth-child(2),
.radar-labels text:nth-child(3) {
  text-anchor: start;
}

.radar-labels text:nth-child(4),
.radar-labels text:nth-child(5) {
  text-anchor: end;
}

.radar-scale-labels {
  fill: var(--ui-text-tertiary, rgba(17, 24, 32, .5));
  font: 600 9px/1 var(--ui-mono, "Cascadia Mono", Consolas, monospace);
  text-anchor: start;
  pointer-events: none;
}

.radar-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 2px;
}

.radar-legend span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-top: 8px;
  border-top: 2px solid var(--radar-line);
}

.radar-legend b {
  color: var(--ui-text, #111820);
  font-size: 11px;
  line-height: 1.2;
}

.radar-legend small {
  color: var(--ui-text-secondary, rgba(17, 24, 32, .68));
  font-size: 10px;
  line-height: 1.25;
}

html[data-theme="dark"] .radar-panel {
  --radar-grid: rgba(255, 255, 255, .18);
  --radar-axis: rgba(255, 255, 255, .28);
  --radar-fill: rgba(83, 177, 255, .2);
  --radar-line: #53b1ff;
  --radar-point: #53b1ff;
}

html[data-theme="dark"] .radar-labels {
  stroke: var(--ui-surface, #12161d);
}

html[data-theme="dark"] .radar-legend b {
  color: var(--ui-text, #f7f8fa);
}

html[data-theme="dark"] .radar-legend small {
  color: var(--ui-text-secondary, rgba(247, 248, 250, .68));
}

@media (max-width: 640px) {
  .ability-radar {
    min-height: 250px;
  }

  .radar-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}