/* Colours here are fixed rather than themed: the wheel has to look the same on stream
   regardless of the viewer's or OBS's light/dark setting. */
.wheel-view {
  --wv-ink: #1c2540;
  --wv-paper: #fdfeff;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  opacity: 0;
  transform: scale(0.85) rotate(-6deg);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.wheel-view.is-visible {
  opacity: 1;
  transform: none;
}
.wv-stage {
  position: absolute;
  inset: 5%;
  /* hard offset shadow, like a cut-out stuck on paper */
  filter: drop-shadow(0.9cqw 1.1cqw 0 rgba(28, 37, 64, 0.85));
}
.wv-canvas {
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}
.wv-hub {
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: var(--wv-paper) center / cover no-repeat;
  border: 0.9cqw solid var(--wv-ink);
  box-shadow: inset 0 0 0 0.5cqw var(--wv-paper);
}
.wv-hub.has-image {
  /* a picture needs more room than the plain cap */
  inset: 35%;
}
.wv-pointer {
  position: absolute;
  top: -4%;
  left: 50%;
  width: 10%;
  aspect-ratio: 1 / 1.3;
  transform: translateX(-50%) rotate(2deg);
  background: var(--wv-ink);
  clip-path: polygon(4% 2%, 97% 0, 52% 100%);
}
.wv-pointer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffd43b;
  clip-path: polygon(16% 9%, 85% 8%, 52% 84%);
}

.wv-for,
.wv-result {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 1;
  max-width: 92%;
  border: 0.7cqw solid var(--wv-ink);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: 0.9cqw 1.1cqw 0 var(--wv-ink);
  font-family: 'Caveat Brush', 'Shantell Sans Variable', cursive;
  text-align: center;
}
.wv-for {
  /* same slot as the result banner, which replaces it when the wheel stops */
  transform: translateX(-50%) rotate(-1.5deg);
  padding: 0.15em 0.9em;
  background: var(--wv-paper);
  color: var(--wv-ink);
  font-size: clamp(14px, 5.5cqw, 60px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wv-result {
  transform: translateX(-50%) rotate(-2deg);
  padding: 0.15em 0.8em 0.2em;
  background: var(--win, #ffd43b);
  color: var(--win-text, #1c2540);
  font-size: clamp(18px, 9cqw, 104px);
  line-height: 1.1;
  animation: wv-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.wv-result-for {
  display: block;
  font-size: 0.5em;
  opacity: 0.9;
}
.wv-for[hidden],
.wv-result[hidden],
.wv-result-for[hidden] {
  display: none;
}
@keyframes wv-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) rotate(8deg) scale(0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-view,
  .wv-result {
    transition: none;
    animation: none;
  }
}