#ultimate-wheel {
  width: 400px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  padding: 24px 18px 18px;
  border: 2px solid #e9ca82;
  background: radial-gradient(ellipse at 50% 38%, #30677b, #122e46 70%);
  color: #fff0ca;
  box-shadow:
    0 0 0 5px #e6c77c22,
    0 24px 90px #061a37aa;
  text-align: center;
  overflow-x: hidden;
}
#ultimate-wheel::backdrop {
  background: #051c36c9;
  backdrop-filter: blur(8px);
}
.ultimate-heading > span {
  font-size: 11px;
  letter-spacing: 2px;
  color: #d6bd84;
}
.ultimate-heading h2 {
  margin: 8px 0;
  font-size: 27px;
  letter-spacing: 4px;
  color: #ffe5a3;
}
.ultimate-heading p {
  font-size: 12px;
  color: #b6cdd7;
  margin: 0 0 20px;
}
.ultimate-stage {
  position: relative;
  width: min(100%, 310px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.ultimate-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 8px solid #e2bc6a;
  background: conic-gradient(
    from -36deg,
    #495e91 0deg 72deg,
    #6994ad 72deg 144deg,
    #a96547 144deg 216deg,
    #2c7278 216deg 288deg,
    #627999 288deg 360deg
  );
  box-shadow:
    inset 0 0 0 3px #ffeab3,
    inset 0 0 35px #0c234eaa,
    0 0 0 4px #8a673f,
    0 0 0 7px #edcc7b66,
    0 16px 32px #061b38bb;
}
.ultimate-sector {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 77px;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}
.ultimate-sector::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef2 45%, #f2dfaa 72%, #c49545);
  box-shadow: 0 2px 5px #0b29475c;
}
.ultimate-sector .penguin-art {
  width: 69px;
  height: 68px;
}
.ultimate-sector span {
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff3cd;
  text-shadow: 0 1px 3px #102840;
}
.ultimate-pointer {
  position: absolute;
  z-index: 3;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 33px;
  background: linear-gradient(90deg, #d39e43, #fff2bc, #ca9142);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 2px #0008);
}
.ultimate-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 25%, #fff3c5, #e2b65f 65%, #95662c);
  border: 3px solid #ffe7a4;
  box-shadow: 0 4px 12px #0d263a88;
  color: #704a24;
}
.ultimate-hub small {
  font-size: 7px;
  letter-spacing: 1px;
}
.ultimate-hub strong {
  font-size: 29px;
  line-height: 1.1;
}
#ultimate-result {
  height: 116px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#ultimate-result p {
  color: #b6cdd7;
  font-size: 12px;
  margin: 6px 0;
}
.ultimate-suspense {
  font-size: 30px;
  color: #e7c987;
}
.ultimate-result-art {
  isolation: isolate;
  width: 95px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fffef2 42%, #efd897 70%, #c49545);
  box-shadow: 0 0 20px #f8d68266;
}
.ultimate-result-art .penguin-art {
  width: 95px;
  height: 84px;
}
#ultimate-result h3 {
  margin: 3px 0 0;
  font-size: 18px;
  color: #ffe6a4;
  letter-spacing: 1px;
}
#ultimate-wheel-action {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  margin-top: 10px;
  border: 1px solid #ffe6aa;
  background: linear-gradient(#ffe4a3, #d4aa5d);
  box-shadow: 0 4px 0 #8c693d;
  color: #644721;
}
#ultimate-wheel.is-revealed .ultimate-stage {
  filter: drop-shadow(0 0 13px #edcf8055);
}
@media (max-width: 360px) {
  .ultimate-sector {
    width: 64px;
  }
  .ultimate-sector .penguin-art {
    width: 56px;
    height: 56px;
  }
  .ultimate-sector::before {
    width: 56px;
    height: 56px;
  }
  .ultimate-sector span {
    font-size: 8px;
  }
  .ultimate-hub {
    width: 58px;
    height: 58px;
  }
}
@media (max-height: 650px) {
  #ultimate-wheel {
    padding-top: 14px;
  }
  .ultimate-heading h2 {
    font-size: 23px;
  }
  .ultimate-heading p {
    margin-bottom: 14px;
  }
  .ultimate-stage {
    max-width: 245px;
  }
  .ultimate-sector .penguin-art {
    width: 54px;
    height: 54px;
  }
  .ultimate-sector::before {
    width: 54px;
    height: 54px;
  }
  #ultimate-result {
    height: 92px;
  }
  .ultimate-result-art,
  .ultimate-result-art .penguin-art {
    height: 64px;
    width: 72px;
  }
}
/* The stage owns its glow and particles; the page beneath stays still. */
.ultimate-stage {
  isolation: isolate;
}
.ultimate-aura {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  z-index: -1;
  background: repeating-conic-gradient(
    from 0deg,
    #ffdf9300 0deg 12deg,
    #ffe4a34a 15deg,
    #ffdf9300 18deg 30deg
  );
  mask-image: radial-gradient(circle, transparent 35%, #000 50%, transparent 72%);
  opacity: 0.45;
}
.ultimate-shockwave {
  position: absolute;
  inset: 10%;
  border: 3px solid #ffe8b0;
  border-radius: 50%;
  box-shadow:
    0 0 22px #ffd681,
    inset 0 0 22px #ffd681;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.ultimate-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.ultimate-sparks i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff4cf;
  box-shadow: 0 0 7px #ffe4a3;
  opacity: 0;
}
#ultimate-wheel:not(.still) {
  animation: ultimate-enter 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#ultimate-wheel:not(.still):not(.is-spinning):not(.is-revealed) .ultimate-hub {
  animation: ultimate-charge 2s ease-in-out infinite;
}
#ultimate-wheel.is-spinning:not(.still) .ultimate-aura {
  animation: ultimate-orbit 2.6s linear infinite;
  opacity: 1;
}
#ultimate-wheel.is-spinning:not(.still) .ultimate-hub {
  animation: ultimate-charge 0.7s ease-in-out infinite;
}
#ultimate-wheel.is-spinning:not(.still) .ultimate-pointer {
  animation: ultimate-pointer-glow 0.3s ease-in-out infinite alternate;
}
#ultimate-wheel.is-revealed:not(.still) .ultimate-shockwave {
  animation: ultimate-wave 1s ease-out both;
}
#ultimate-wheel.is-revealed:not(.still) .ultimate-sparks i {
  animation: ultimate-spark 1.15s var(--delay) ease-out both;
}
#ultimate-wheel.is-revealed .ultimate-aura {
  opacity: 1;
}
#ultimate-wheel.is-revealed:not(.still) .ultimate-aura {
  animation: ultimate-orbit 24s linear infinite;
}
#ultimate-wheel.is-revealed .ultimate-sector:not(.is-winner) {
  opacity: 0.45;
}
#ultimate-wheel.is-revealed .ultimate-sector.is-winner::before {
  box-shadow:
    0 0 0 2px #fff2b8,
    0 0 20px #ffd26c;
}
#ultimate-wheel.is-revealed:not(.still) #ultimate-result {
  animation: ultimate-manifest 0.75s cubic-bezier(0.16, 0.8, 0.22, 1.2) both;
}
#ultimate-wheel.is-revealed .ultimate-result-art {
  box-shadow:
    0 0 0 2px #ffe4a3,
    0 0 26px #f8d682aa,
    0 0 48px #f8d68255;
}
#ultimate-wheel.is-revealed .ultimate-stage {
  width: 210px;
}
#ultimate-wheel.is-revealed .ultimate-sector .penguin-art,
#ultimate-wheel.is-revealed .ultimate-sector::before {
  width: 46px;
  height: 46px;
}
#ultimate-wheel.is-revealed .ultimate-hub {
  width: 54px;
  height: 54px;
}
#ultimate-wheel.is-revealed #ultimate-result {
  height: 200px;
  margin-top: 18px;
}
#ultimate-wheel.is-revealed .ultimate-result-art,
#ultimate-wheel.is-revealed .ultimate-result-art .penguin-art {
  width: 142px;
  height: 142px;
}
#ultimate-wheel.is-revealed #ultimate-result h3 {
  font-size: 22px;
  margin-top: 12px;
}
@media (max-height: 650px) {
  #ultimate-wheel.is-revealed .ultimate-stage {
    width: 190px;
  }
  #ultimate-wheel.is-revealed #ultimate-result {
    height: 150px;
    margin-top: 12px;
  }
  #ultimate-wheel.is-revealed .ultimate-result-art,
  #ultimate-wheel.is-revealed .ultimate-result-art .penguin-art {
    width: 102px;
    height: 102px;
  }
  #ultimate-wheel.is-revealed #ultimate-result h3 {
    font-size: 20px;
  }
}
@keyframes ultimate-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ultimate-charge {
  50% {
    box-shadow:
      0 0 0 7px #f7cd6733,
      0 0 32px #f9d478aa;
  }
}
@keyframes ultimate-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ultimate-pointer-glow {
  to {
    filter: drop-shadow(0 0 8px #fff1be);
  }
}
@keyframes ultimate-wave {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}
@keyframes ultimate-spark {
  0% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(20px) scale(1.4);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(0.3);
  }
}
@keyframes ultimate-manifest {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ultimate-wheel,
  #ultimate-wheel * {
    animation: none !important;
  }
}