/* The rhythm wheel (js/sangeet-wheel.js). Colours are the theme's; a row's colour is
   set on its group as --c, so nothing here names a palette of its own. */
.wheelbox { margin: 8px 0 14px; }
.wheelbtn {
  font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
  background: var(--panel); color: var(--terra);
  border: 1.5px solid var(--terra); border-radius: 99px; padding: 3px 14px;
}
.wheelbtn:hover { background: #fbe9dd; }
.wheelbtn.on { background: var(--terra); color: #fff; }
.wheelstage { margin-top: 10px; }
.wheelstage[hidden] { display: none; }

.wheel { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.wheel-svg { width: min(100%, 270px); height: auto; display: block; flex: 0 0 auto; }

.sw-spoke { stroke: var(--line); stroke-width: 1; }
.sw-lbl { font-size: 9px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.sw-lane { color: var(--c, var(--terra)); }
.sw-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.sw-poly { fill: currentColor; fill-opacity: 0.1; stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1.2; stroke-linejoin: round; }
line.sw-poly { fill: none; }
.sw-hit { fill: currentColor; }
.sw-ghost { fill: var(--panel); stroke: currentColor; stroke-width: 1.3; }
.sw-rest { fill: var(--line); }
.sw-hub { fill: var(--ink); }

.sw-headg { transform-origin: 120px 120px; transform-box: view-box; }
.sw-head { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transition: opacity 0.15s; }
.sw-on .sw-head { opacity: 0.7; }

.sw-hit.lit, .sw-ghost.lit { animation: sw-pulse 0.28s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes sw-pulse { 0% { transform: scale(2.1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sw-hit.lit, .sw-ghost.lit { animation: none; }
  .sw-headg { transition: none !important; }
}

.wheel-key { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; counter-reset: ring; }
.wheel-key li { display: flex; align-items: center; gap: 8px; padding: 2px 0; counter-increment: ring; }
.wheel-key li::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: 0 0 auto;
}
.wheel-key li:first-child::after { content: " (outer ring)"; color: var(--muted); font-size: 0.76rem; }