/* Klyzzanor — page-specific sections */

.hero-klyzzanor {
  padding: 4rem 0 2rem;
  background: radial-gradient(ellipse at 85% 0%, rgba(209,34,47,0.07), transparent 55%), var(--color-bg);
}
.hero-klyzzanor__inner { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; }
.hero-klyzzanor__copy { flex: 1 1 420px; min-width: 0; }
.hero-klyzzanor__lede { font-size: 1.03rem; max-width: 520px; }
.hero-klyzzanor__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-klyzzanor__art { flex: 1 1 240px; min-width: 0; display: flex; justify-content: center; }

.circle-deco { width: 220px; height: 220px; max-width: 100%; flex-shrink: 0; }
.circle-deco svg { width: 100%; height: auto; display: block; }

/* ===== Scatter-cluster widget (5-point serve attempt cluster) ===== */
.takraw-widget {
  display: flex; flex-wrap: wrap; gap: 1.6rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 2rem;
}
.takraw-widget__controls { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.takraw-widget__display { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.takraw-slider__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; gap: 0.6rem; }
.takraw-slider__name { font-weight: 700; font-size: 0.92rem; }
.takraw-slider__value { color: var(--color-red); font-family: var(--ff-head); font-weight: 400; }
.takraw-slider__hint { font-size: 0.8rem; margin: 0.4rem 0 0; }
input[type="range"] { width: 100%; accent-color: var(--color-red); background: transparent; padding: 0; border: none; }

.takraw-chart-wrap { width: 190px; max-width: 100%; }
.takraw-chart-wrap svg { width: 100%; height: auto; }
.takraw-readout { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }
.takraw-readout__item { min-width: 70px; }
.takraw-readout__num { display: block; font-family: var(--ff-head); font-weight: 400; font-size: 1.25rem; color: var(--color-ink); }
.takraw-readout__label { display: block; font-size: 0.68rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.15rem; }
.takraw-category {
  display: inline-block; background: var(--color-red); color: #fff;
  font-family: var(--ff-head); font-weight: 400; letter-spacing: 0.01em;
  font-size: 0.82rem; padding: 0.4em 1.1em; border-radius: 999px;
}