.random-wheel-page {
  position: relative;
  overflow: hidden;
}

.random-wheel-info {
  max-width: 760px;
  margin: 56px auto 0;
  color: var(--color-white-70);
  font: 16px/1.65 Inter, sans-serif;
}

.random-wheel-info h2,
.random-wheel-info h3 {
  color: var(--color-white);
  font-family: "Cormorant Garamond", serif;
  line-height: 1.1;
}

.random-wheel-info h2 {
  margin: 36px 0 12px;
  font-size: clamp(28px, 4vw, 40px);
}

.random-wheel-info h3 {
  margin: 28px 0 8px;
  font-size: 26px;
}

.random-wheel-info ol {
  padding-left: 24px;
}

.random-wheel-info p {
  margin: 0;
}

.random-wheel-layout {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(320px, 1fr);
  gap: 48px;
  align-items: center;
  min-height: 620px;
  padding: 44px;
  border: 1px solid var(--color-mint-soft);
  background: linear-gradient(145deg, rgba(2, 13, 10, .82), rgba(16, 93, 111, .8));
  box-shadow: 0 0 40px rgba(39, 229, 255, .1);
}

.random-wheel-copy {
  max-width: 470px;
}

.random-wheel-kicker {
  color: var(--color-cyan);
  font: 700 12px/1 Inter, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.random-wheel-copy h1 {
  margin: 18px 0;
  color: var(--color-white);
  font: 600 clamp(38px, 5vw, 68px)/.94 "Cormorant Garamond", serif;
}

.random-wheel-copy > p:not(.random-wheel-kicker):not(.random-wheel-hint) {
  color: var(--color-white-50);
  font: 500 18px/1.5 Inter, sans-serif;
}

.random-wheel-copy code {
  color: var(--color-cyan-pale);
}

.random-wheel-setting {
  display: grid;
  gap: 9px;
  margin-top: 32px;
  color: var(--color-cyan-pale);
  font: 700 13px/1 Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.random-wheel-setting input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-cyan-50);
  border-radius: 10px;
  color: var(--color-white);
  background: rgba(0, 0, 0, .24);
  font: 700 24px/1 Inter, sans-serif;
  appearance: textfield;
  -moz-appearance: textfield;
}

.random-wheel-setting input::-webkit-inner-spin-button,
.random-wheel-setting input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.random-wheel-hint {
  margin-top: 10px;
  color: var(--color-white-50);
  font: 13px/1.4 Inter, sans-serif;
}

.random-wheel-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
}

.random-wheel-wrap {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
}

.random-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border: 10px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: conic-gradient(
    var(--color-gold) 0deg 30deg,
    var(--color-forest) 30deg 60deg,
    var(--color-brown) 60deg 90deg,
    var(--color-teal) 90deg 120deg,
    var(--color-gold) 120deg 150deg,
    var(--color-forest) 150deg 180deg,
    var(--color-brown) 180deg 210deg,
    var(--color-teal) 210deg 240deg,
    var(--color-gold) 240deg 270deg,
    var(--color-forest) 270deg 300deg,
    var(--color-brown) 300deg 330deg,
    var(--color-teal) 330deg 360deg
  );
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34), inset 0 0 0 3px rgba(255, 255, 255, .25);
  transition: transform 4s cubic-bezier(.12, .7, .2, 1);
}

.random-wheel-numbers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.random-wheel-number-slot {
  position: absolute;
  inset: 0;
  transform: rotate(var(--number-angle));
}

.random-wheel-number {
  position: absolute;
  top: 8px;
  left: 50%;
  min-width: 18px;
  color: var(--color-bg-dark);
  font: 700 var(--wheel-label-size, 17px)/1 Inter, sans-serif;
  text-align: center;
  transform: translateX(-50%) rotate(90deg);
}

.random-wheel-pointer {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: -12px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 34px solid var(--color-pink);
  transform: translateY(-50%) rotate(-90deg);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}

.random-wheel-center {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 4;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-bg-dark);
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  font: 900 16px Inter, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.random-wheel-center:disabled {
  opacity: .7;
  cursor: wait;
}

.random-wheel-result-popup {
  text-align: center;
}

.random-wheel-result-popup strong {
  display: block;
  color: var(--color-cyan);
  font: 900 92px/.9 Inter, sans-serif;
  text-shadow: 0 0 22px var(--color-cyan-50);
}

.random-wheel-confetti {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 800px) {
  .random-wheel-layout {
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }

  .random-wheel-copy {
    max-width: none;
  }

  .random-wheel-wrap {
    width: min(82vw, 420px);
  }
}