/* Shared wheel surface: the expanded preview and OBS use identical styling. */
.wd-stage { position: relative; width: min(100%, 660px); aspect-ratio: 1; margin: 12px auto 20px; }
.wd-canvas {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 7px var(--wd-surface), 0 0 0 8px var(--wd-border), 0 15px 45px #0003;
}
.wd-stage[data-open="true"] .wd-canvas { box-shadow: 0 0 0 2px #198754, 0 15px 45px #0003; }
.wd-stage[data-open="false"] .wd-canvas { box-shadow: 0 0 0 2px #dc3545, 0 15px 45px #0003; }
.wd-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 34px; background: #dc3545; clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 2px 3px #0008); z-index: 2;
}
.wd-pointer-ring { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 34px; height: 43px; background: #342744; clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 1; }
.wd-hub { position: absolute; inset: 45% 45%; border-radius: 50%; background: #252033; border: 2px solid #ffffffa0; box-shadow: 0 2px 8px #0003; box-sizing: border-box; }