.deal-wheel-text {text-align: center; font-size: 18px; margin-top: 20px}
.deal-wheel {--size: 500px; position: relative; display: grid; grid-gap: calc(var(--size) / 20); align-items: center; justify-content: center; grid-template-areas: "spinner" "trigger"; font-size: 15px}
.deal-wheel > * {grid-area: spinner; position: relative}
.deal-wheel .btn-spin {grid-area: trigger; justify-self: center}

.spinner:after {background: url(../img/fortune.png) no-repeat 50% 50% /cover; position: absolute; z-index: -1; width: 100%; height: 100%; content: ''; top: 0; left: 0}
.spinner {position: relative; padding: 0; margin: 0; display: grid; align-items: center; grid-template-areas: "spinner"; width: var(--size); height: var(--size); transform: rotate(calc(var(--rotate, 25) * 1deg)); border-radius: 50%; border: 10px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2)}
.border {width: 450px; height: 450px; position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 10; content: ''; box-shadow: 0 0 10px rgba(0,0,0,0.2)}
.spinner_center {width: 50px; height: 50px; position: absolute; background: #fff; border-radius: 50%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 200; content: ''; box-shadow: 0 0 10px rgba(0,0,0,0.2)}
.spinner * {grid-area: spinner; z-index: 100}

.prize {display: flex; align-items: center; padding: 0 20px; width: 50%; height: 50%; transform-origin: center right; transform: rotate(var(--rotate)); user-select: none; text-align: left}
.prize.selected .text {font-weight: bold; animation: selected 800ms ease}

.ticker {position: relative; left: calc(var(--size) / -15); width: calc(var(--size) / 10); height: calc(var(--size) / 20); background: #000; z-index: 1; clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%); transform-origin: center left}
.ticker:after {content: ''; position: absolute; left: 0; top: 0; position: absolute; width: 100%; height: 50%; background: #fff; z-index: 1; opacity: 0.3}

.btn-spin {color: white; background: black; border: none; font-size: inherit; padding: 0.9rem 2rem 1rem; border-radius: 0.5rem; cursor: pointer}
.btn-spin:disabled {cursor: progress; opacity: 0.25}

.is-spinning .spinner {transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1)}
.is-spinning .ticker {animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1)}

@keyframes tick {
  40% {transform: rotate(-12deg)}
}

@keyframes selected {
  25% {transform: scale(1.25); text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1)}
  40% {transform: scale(0.92); text-shadow: 0 0 0 hsla(0 0% 0% / 0.2)}
  60% {transform: scale(1.02); text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1)}
  75% {transform: scale(0.98)}
  85% {transform: scale(1)}
}