.prize-wheel-demo { width: 100%; max-width: 470px; margin-inline: auto; text-align: center; }
.prize-wheel { position: relative; width: 100%; aspect-ratio: 1; margin: 16px 0 24px; isolation: isolate; }
.prize-wheel-disc { display: block; width: 100%; height: 100%; transform: rotate(0deg); transition: transform 5s cubic-bezier(.12,.75,.12,1); filter: drop-shadow(0 14px 20px #071c2466); }
.prize-wheel-pointer { position: absolute; z-index: 3; top: -6px; left: 50%; transform: translateX(-50%); width: 34px; height: 52px; background: linear-gradient(110deg,#f5dfa5,#bc9046); clip-path: polygon(0 0,100% 0,50% 100%); }
.prize-wheel-hub { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 37%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #c9a663; background: #f6f0e1; color: #204d3b; box-shadow: 0 4px 12px #10281d44; }
.prize-wheel-hub small { font: 10px/1.4 Arial,sans-serif; letter-spacing: .1em; }
.prize-wheel-hub strong { font: clamp(28px,3vw,42px)/1.05 Georgia,serif; margin-top: 6px; }
.prize-wheel-hub em { font: italic clamp(22px,2.5vw,34px)/1.15 Georgia,serif; color: #85612b; }
.prize-wheel-hub span { font-size: 10px; margin-top: 8px; }
.prize-wheel-spin { min-width: 175px; }
.prize-wheel-spin:disabled { cursor: wait; opacity: .75; }
.prize-wheel-demo .prize-wheel-result { color: #f5e6c5; font-size: 16px; min-height: 52px; margin: 18px 0 0; }
.prize-wheel-demo .prize-wheel-note { font-size: 14px; line-height: 1.6; color: #c5d3c9; margin: 8px auto 0; max-width: 370px; }
@media(max-width:760px) { .prize-wheel-demo { max-width: 430px; } .prize-wheel-hub small, .prize-wheel-hub span { font-size: 9px; } .prize-wheel-pointer { width: 28px; height: 42px; } }
@media(prefers-reduced-motion:reduce) { .prize-wheel-disc { transition: none; } }