.complete #centre-next { cursor: pointer; stroke: #ffe8ad; stroke-width: 2; }
#centre-next { outline: none !important; -webkit-tap-highlight-color: transparent; }
#centre-next:focus, #centre-next:focus-visible { outline: none !important; }
#centre-next:focus-visible { stroke-width: 4; filter: drop-shadow(0 0 5px #ffda83); }
#centre-next-label {
  fill: #ffe8ad;
  font: 700 11px system-ui, sans-serif;
  letter-spacing: 1.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, filter .35s ease;
}
.complete #centre-next-label {
  opacity: 1;
  filter: drop-shadow(0 0 4px #d9a343);
}
#spokes path, #centre-symbol {
  transition: stroke .45s ease, stroke-opacity .45s ease, stroke-width .45s ease, filter .45s ease, fill .45s ease;
}
.complete #spokes path {
  stroke: #ffda83;
  stroke-opacity: 1;
  stroke-width: 5;
  filter: drop-shadow(0 0 4px #eabc56) drop-shadow(0 0 9px #c89436);
}
.complete #centre-symbol {
  stroke: #ffe8ad;
  stroke-width: 3;
  fill: #ebbb4933;
  filter: drop-shadow(0 0 4px #ffda83) drop-shadow(0 0 10px #d9a343);
}
@media (prefers-reduced-motion: reduce) {
  #spokes path, #centre-symbol, #centre-next-label { transition: none; }
}