/* WAT flavor radar. Re-theme every chart from this one block (brand colors are not final). */
:root {
  --radar-bg: #faf6ec;            /* cream card */
  --radar-ring: #c9d3c3;          /* the 5 hexagon rings */
  --radar-spoke: #8fae8b;         /* lines from the center to each axis */
  --radar-fill: rgba(231, 150, 178, 0.55);
  --radar-stroke: #b03e6c;        /* outline and vertex dots */
  --radar-ink: #2b1420;
  --radar-ink-soft: #6e4a5a;
  --radar-badge-bg: #2b1420;
  --radar-badge-ink: #fff;
  --radar-zh: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  --radar-en: "Zilla Slab", Georgia, serif;
}

.radar {
  margin: 0;
  padding: 3.1em 3.5em 2.9em;     /* room for the labels around the hexagon */
  background: var(--radar-bg);
  border-radius: 14px;
  color: var(--radar-ink);
  font-size: clamp(13px, 3.9vw, 16px);
  line-height: 1.2;
  position: relative;
}
.radar-plot {
  position: relative;
  width: min(100%, 15rem, 26vh);  /* also shrinks on short screens so the page never overflows */
  margin: 0 auto;
}
.radar-plot svg { display: block; width: 100%; height: auto; overflow: visible; }

.radar-ring  { fill: none; stroke: var(--radar-ring); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar-spoke { stroke: var(--radar-spoke); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.radar-area  { fill: var(--radar-fill); stroke: var(--radar-stroke); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.radar-dot   { fill: var(--radar-stroke); }

.radar-label {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; white-space: nowrap;
  --gap: 0.55em;
}
.radar-label .zh { font: 700 1em/1.15 var(--radar-zh); letter-spacing: 0.04em; }
.radar-label .en { font: 500 0.72em/1.2 var(--radar-en); color: var(--radar-ink-soft); margin-top: 0.15em; }
.radar-label .score { font-weight: 700; color: var(--radar-stroke); margin-left: 0.35em; }
.radar-label.is-top    { transform: translate(-50%, calc(-100% - var(--gap))); }
.radar-label.is-bottom { transform: translate(-50%, var(--gap)); }
.radar-label.is-right  { transform: translate(var(--gap), -50%); }
.radar-label.is-left   { transform: translate(calc(-100% - var(--gap)), -50%); }

/* Tap-to-see-score labels (tapScores option) and their tooltip */
button.radar-label {
  margin: 0; padding: 0.3em 0.4em; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
  --gap: 0.2em;
}
button.radar-label.is-active .zh,
button.radar-label.is-active .en { color: var(--radar-stroke); }
.radar-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 0.25em 0.6em; border-radius: 4px;
  background: var(--radar-ink); color: #fff;
  font: 600 0.8em/1.4 var(--radar-zh); letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
}
/* The tooltip sits just inside the chart from the axis it belongs to. */
.radar-tip.is-top    { transform: translate(-50%, 0.5em); }
.radar-tip.is-bottom { transform: translate(-50%, calc(-100% - 0.5em)); }
.radar-tip.is-right  { transform: translate(calc(-100% - 0.5em), -50%); }
.radar-tip.is-left   { transform: translate(0.5em, -50%); }

.radar-badge {
  position: absolute; top: -0.75em; left: 0.9em; margin: 0;  /* sits on the card edge, clear of the labels */
  padding: 0.2em 0.6em; border-radius: 999px;
  background: var(--radar-badge-bg); color: var(--radar-badge-ink);
  font: 600 0.68em/1.4 var(--radar-en); letter-spacing: 0.08em;
}
.radar-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0.3em 0.7em; border-radius: 6px; background: var(--radar-bg); text-align: center; font-size: 0.8em; line-height: 1.4; color: var(--radar-ink-soft); }

.radar-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html[data-lang="zh"] .radar-sr [lang="en"],
html[data-lang="en"] .radar-sr [lang="zh-Hant"] { display: none; }

/* Gentle grow-in from the center the first time the chart is seen. */
.radar-shape { transform: scale(0.15); opacity: 0; transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 400ms ease; }
.radar.is-in .radar-shape { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .radar-shape { transform: none; opacity: 1; transition: none; }
}

/* ABV and tag chips that sit with the chart */
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; }
.chip {
  padding: 0.3em 0.85em; border-radius: 999px;
  border: 1px solid var(--radar-stroke); color: var(--radar-stroke);
  font: 600 0.9rem/1.3 var(--radar-zh); letter-spacing: 0.04em;
}
.chip[lang="en"] { font-family: var(--radar-en); }
.chip.is-abv { background: var(--radar-stroke); color: #fff; }