/* The menu wheel remains visible and rotates continuously on the compositor. */
.wheel-menu-motion { display:block; position:relative; isolation:isolate; width:100%; height:100%; aspect-ratio:1; }
.wheel-menu-motion::before { content:''; position:absolute; inset:0; pointer-events:none; border-radius:50%; background:radial-gradient(circle,#ffb63e22 25%,#ffbd573b 43%,#ffab312b 53%,#ff8c120e 66%,transparent 74%); opacity:.65; animation:wheel-menu-halo 5s ease-in-out infinite alternate paused; }
.wheel-menu-motion.is-playing::before { animation-play-state:running; }
.wheel-menu-body, .wheel-menu-rotor { display:block; position:absolute; transform-origin:50% 50%; backface-visibility:hidden; }
.wheel-menu-body { inset:8%; z-index:1; }
.wheel-menu-body::before { content:''; position:absolute; inset:1%; border-radius:50%; pointer-events:none; box-shadow:0 0 10px #ffd78066,0 0 22px #ffaf3545,0 0 34px #ff7b1b26,inset 0 0 12px #ffc66633; }
.wheel-menu-frame { filter:drop-shadow(0 0 2px #ffe6a480) drop-shadow(0 0 7px #f8b54a55); }
.wheel-menu-rotor { inset:0; }
.wheel-menu-frame, .wheel-menu-prizes { display:block; position:absolute; inset:0; width:100%; height:100%; }
.wheel-menu-prize { display:block; position:absolute; width:25%; height:25%; transform:translate(-50%,-50%); }
.wheel-menu-prize img { filter:drop-shadow(0 2px 2px #08030066); }
.wheel-menu-hub { position:absolute; left:46.5%; top:46.5%; width:7%; height:7%; border:1px solid #e9aa45; border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff2bd,#e3a139 48%,#9a4c18); box-shadow:0 1px 3px #0d0609aa; }
.wheel-menu-motion img { display:block; width:100%; height:100%; object-fit:contain; }
.wheel-menu-pointer { position:absolute; left:45.8%; top:-2%; width:8.4%; height:11%; overflow:visible; filter:drop-shadow(0 0 5px #ffcd6c99); }
.wheel-menu-motion.is-ready .wheel-menu-rotor { animation:wheel-menu-spin 12s linear infinite paused; }
.wheel-menu-motion.is-playing .wheel-menu-rotor { animation-play-state:running; }
.wheel-menu-motion.is-playing .wheel-menu-rotor { will-change:transform; }
@keyframes wheel-menu-spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
@keyframes wheel-menu-halo { from { opacity:.5; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
  .wheel-menu-motion .wheel-menu-rotor { transform:none; animation:none!important; }
  .wheel-menu-motion::before { animation:none!important; opacity:.8; }
}