.xp-radar {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.25rem 1.25rem;
  margin-bottom: 2rem;
  overflow: hidden;
}

.xp-radar__header {
  text-align: center;
  margin-bottom: 0.5rem;
}

.xp-radar__title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--color-fg);
}

.xp-radar__subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Chart wrapper is a square box that hosts the SVG and an HTML overlay
   for the labels. Padding leaves room for the labels around the SVG
   without pushing them outside the card. */
.xp-radar__chart {
  position: relative;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1 / 1;
  margin: 0.25rem auto 0;
}

.xp-radar__svg {
  position: absolute;
  /* SVG occupies the inner 64% of the chart box; the surrounding 18%
     gutter on each side belongs to the HTML labels overlay so long
     category names have room to sit beside the chart without clipping. */
  inset: 18%;
  width: 64%;
  height: 64%;
}

.xp-radar__ring {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 0.008;
}

.xp-radar__axis {
  stroke: var(--color-border);
  stroke-width: 0.008;
}

.xp-radar__polygon {
  fill: var(--color-primary);
  fill-opacity: 0.18;
  stroke: var(--color-primary);
  stroke-width: 0.015;
  stroke-linejoin: round;
}

.xp-radar__point {
  stroke: var(--color-card);
  stroke-width: 0.022;
}

/* HTML labels overlay — covers the full chart box so labels can be
   placed by percentage relative to its centre. */
.xp-radar__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Each label is anchored at its (left%, top%) point, then nudged by
   transform so the anchor sits where it should relative to the text
   (centre-top above, centre-bottom below, etc.). The transform
   modifiers below pick the right offset per quadrant. */
.xp-radar__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  width: max-content;
  max-width: 5.5rem;
  line-height: 1.15;
  text-align: center;
}

.xp-radar__label--start {
  align-items: flex-start;
  text-align: left;
  transform: translate(0, -50%);
}

.xp-radar__label--end {
  align-items: flex-end;
  text-align: right;
  transform: translate(-100%, -50%);
}

.xp-radar__label--center {
  transform: translate(-50%, -50%);
}

.xp-radar__label-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-fg);
  /* Wrap on whitespace but keep words intact; long single-word names
     break only as a last resort. */
  overflow-wrap: anywhere;
}

.xp-radar__label-xp {
  font-size: 0.625rem;
  color: var(--color-muted-fg);
  letter-spacing: 0.02em;
}