/* The retired theme's artwork, with responsive geometry and native controls. */
.dafa-draw[data-dafa-draw="wheel-v1"] {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: clamp(16px, 3vw, 36px);
}

.dafa-draw__stage {
  position: relative;
  width: min(100%, 469px);
  aspect-ratio: 1;
  margin: 0 auto 20px;
  background: url('../img/draw/ly-plate.png') center / contain no-repeat;
}

.dafa-draw__stage form { margin: 0; }

.dafa-draw__stage .dafa-draw__trigger {
  position: absolute;
  inset: 28.785% auto auto 28.145%;
  display: block;
  width: 43.497%;
  height: 43.497%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url('../img/draw/rotate-static.png') center / contain no-repeat;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
  transform: rotate(0deg);
  transition: none;
}

.dafa-draw[data-dafa-draw="wheel-v1"] .dafa-draw__stage .dafa-draw__trigger:is(:hover, :focus-visible) {
  background: url('../img/draw/rotate-static.png') center / contain no-repeat;
  box-shadow: none;
  opacity: 1;
  filter: brightness(1.06);
  transform: rotate(var(--dafa-draw-angle, 0deg));
}

.dafa-draw__stage .dafa-draw__trigger:focus-visible {
  outline: 3px solid var(--dafa-accent);
  outline-offset: 6px;
}

.dafa-draw__trigger > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dafa-draw__stage .dafa-draw__trigger:disabled { cursor: wait; filter: none; }
.dafa-draw__result { max-width: 680px; margin: 18px auto; }
.dafa-draw__result[hidden] { display: none; }
.dafa-draw__hint { color: var(--dafa-text-soft); }
html.dafa-color-dark .dafa-draw__price { color: var(--dafa-text); }
.dafa-draw__prizes { max-width: 850px; margin-inline: auto; }
.dafa-draw__history { max-width: 850px; margin-inline: auto; }
.dafa-draw__history ul { max-height: 260px; overflow-y: auto; }

@media (max-width: 640px) {
  .dafa-draw__history li { grid-template-columns: minmax(0, 1fr) auto; }
  .dafa-draw__history li > span:last-child { grid-column: 1 / -1; }
}
