@font-face {
  font-family: "Luckiest Guy";
  src: url("../fonts/luckiest-guy.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --page-background: #15105f;
  --artboard-background: #201e8b;
  --focus-color: #ffe66c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--page-background);
  color: #fff;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  letter-spacing: 0;
}

.page-shell {
  position: relative;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  display: grid;
  place-items: start center;
  padding: 0;
  overflow: hidden;
  background: var(--artboard-background);
}

.page-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -24px;
  background: url("../images/background.png") top center / cover no-repeat;
  filter: blur(20px) brightness(0.58) saturate(0.85);
  pointer-events: none;
}

.artboard {
  position: relative;
  z-index: 1;
  width: min(100vw, 480px);
  max-width: none;
  aspect-ratio: 375 / 812;
  flex: none;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: linear-gradient(180deg, #2e1d72 0%, #201e8b 100%);
}

.background-art,
.wheel-base,
.prize,
.prize-content,
.prize-image-crop,
.prize-image,
.prize-mark,
.pointer-art,
.spin-art,
.draw-cta img {
  user-select: none;
  pointer-events: none;
}

.background-art {
  position: absolute;
  z-index: 0;
  top: -4.68%;
  left: 0;
  width: 100%;
  height: 146.67%;
  max-width: none;
}

.wheel-art {
  position: absolute;
  z-index: 2;
  top: 59.2cqw;
  left: 7.733333cqw;
  width: 84.8cqw;
  height: 84.8cqw;
  pointer-events: none;
}

.wheel-base {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.prize {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
}

.prize-content {
  position: relative;
  width: 9.866667cqw;
  height: 13.6cqw;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  color: #351269;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 3.733333cqw;
  font-weight: 700;
  line-height: 3.733333cqw;
  text-align: center;
  text-shadow: 0 0.533333cqw 1.066667cqw rgb(53 18 105 / 8%);
}

.prize-image-crop {
  position: relative;
  z-index: 1;
  width: 9.866667cqw;
  height: 9.866667cqw;
  display: block;
  flex: none;
  overflow: hidden;
}

.prize-image {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
}

.prize-coin .prize-image {
  inset: 0;
  width: 100%;
  height: 100%;
}

.prize-cash .prize-image {
  top: -9.38%;
  left: -7.81%;
  width: 115.62%;
  height: 115.62%;
}

.prize-lucky .prize-image {
  top: -27.55%;
  left: -25.51%;
  width: 151.02%;
  height: 150.77%;
}

.prize-label {
  position: relative;
  z-index: 4;
  width: 9.866667cqw;
  height: 3.733333cqw;
  white-space: nowrap;
}

.prize-mark {
  position: absolute;
  z-index: 2;
  display: block;
}

.prize-coin .prize-mark {
  top: 2.146cqw;
  left: 2.211333cqw;
  width: 5.686133cqw;
  height: 5.547467cqw;
  transform: rotate(-30deg);
}

.prize-coin .prize-content::after {
  content: "\20B9";
  position: absolute;
  z-index: 3;
  top: 2.005333cqw;
  left: 3.616cqw;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 5.0048cqw;
  font-weight: 700;
  line-height: 1;
  color: #ffe66c;
  text-shadow: 0 0.166933cqw 0 #cf5100;
}

.prize-cash .prize-mark {
  top: 3.213333cqw;
  left: 3.701333cqw;
  width: 3.559467cqw;
  height: 2.737867cqw;
}

.prize-cash .prize-content::before,
.prize-cash .prize-content::after {
  content: "\20B9";
  position: absolute;
  left: 3.701333cqw;
  width: 4.153067cqw;
  height: 3.5736cqw;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: 3.042133cqw;
  font-weight: 700;
  line-height: 1.175;
  transform: rotate(-57.68deg);
  transform-origin: center;
}

.prize-cash .prize-content::before {
  z-index: 2;
  top: 2.882667cqw;
  color: #a4890f;
}

.prize-cash .prize-content::after {
  z-index: 3;
  top: 2.76cqw;
  color: #f9dc67;
}

/* Exact rotated bounding boxes from the Figma prize group. */
.prize-1 {
  top: 5.6cqw;
  left: 37.333333cqw;
  width: 9.866667cqw;
  height: 13.6cqw;
}

.prize-2 {
  top: 12.266667cqw;
  left: 54.133333cqw;
  width: 16.593333cqw;
  height: 16.593333cqw;
}

.prize-2 .prize-content {
  transform: rotate(45deg);
}

.prize-3 {
  top: 62.4cqw;
  left: 45.866667cqw;
  width: 13.972267cqw;
  height: 16.1784cqw;
}

.prize-3 .prize-content {
  transform: rotate(159.7deg);
}

.prize-4 {
  top: 49.333333cqw;
  left: 59.2cqw;
  width: 16.742133cqw;
  height: 15.475733cqw;
}

.prize-4 .prize-content {
  transform: rotate(121.12deg);
}

.prize-5 {
  top: 12.533333cqw;
  left: 14.133333cqw;
  width: 16.593333cqw;
  height: 16.593333cqw;
}

.prize-5 .prize-content {
  transform: rotate(-45deg);
}

.prize-6 {
  top: 62.4cqw;
  left: 24.8cqw;
  width: 13.9728cqw;
  height: 16.178933cqw;
}

.prize-6 .prize-content {
  transform: rotate(-159.7deg);
}

.prize-7 {
  top: 50.4cqw;
  left: 8.533333cqw;
  width: 16.742933cqw;
  height: 15.476533cqw;
}

.prize-7 .prize-content {
  transform: rotate(-121.12deg);
}

.prize-8 {
  top: 31.733333cqw;
  left: 5.333333cqw;
  width: 14.847733cqw;
  height: 11.673333cqw;
}

.prize-8 .prize-content {
  transform: rotate(-81.95deg);
}

.prize-9 {
  top: 31.466667cqw;
  left: 64cqw;
  width: 14.847733cqw;
  height: 11.673867cqw;
}

.prize-9 .prize-content {
  transform: rotate(81.95deg);
}

.pointer-art,
.spin-art {
  position: absolute;
  width: 77.066133cqw;
  height: 77.066133cqw;
  display: block;
  object-fit: contain;
}

.pointer-art {
  z-index: 3;
  top: 63.2cqw;
  left: 11.733333cqw;
}

.spin-art {
  z-index: 4;
  top: 62.933333cqw;
  left: 11.466667cqw;
}

.wheel-launch,
.spin-control,
.draw-cta {
  position: absolute;
  margin: 0;
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.wheel-launch {
  z-index: 10;
  top: 59.2cqw;
  left: 7.733333cqw;
  width: 84.8cqw;
  height: 84.8cqw;
  border-radius: 50%;
}

.spin-control {
  z-index: 11;
  top: 90.666667cqw;
  left: 34.4cqw;
  width: 31.2cqw;
  height: 31.2cqw;
  border-radius: 50%;
  text-align: center;
  text-shadow: 0 1.066667cqw 1.066667cqw rgb(0 0 0 / 25%);
}

.spin-label,
.spin-count {
  position: absolute;
  left: 5.066667cqw;
  width: 21.066667cqw;
  display: block;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.spin-label {
  top: 1.866667cqw;
  height: 10.133333cqw;
  font-size: 10.133333cqw;
  line-height: 10.133333cqw;
}

.spin-count {
  top: 14.4cqw;
  height: 5.866667cqw;
  font-size: 4.266667cqw;
  line-height: 5.866667cqw;
}

.draw-cta {
  z-index: 12;
  top: 146.4cqw;
  left: 20.645333cqw;
  width: 58.709333cqw;
  height: 27.2cqw;
}

.draw-cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.draw-cta span {
  position: absolute;
  z-index: 1;
  top: 5.066667cqw;
  left: 0;
  width: 100%;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: 4.8cqw;
  font-weight: 400;
  line-height: 5.866667cqw;
  text-align: center;
  white-space: nowrap;
}

.wheel-launch:focus-visible,
.spin-control:focus-visible,
.draw-cta:focus-visible {
  outline: max(2px, 0.8cqw) solid var(--focus-color);
  outline-offset: max(2px, 0.8cqw);
}

.wheel-launch:active,
.spin-control:active,
.draw-cta:active {
  transform: scale(0.97);
}

.status-toast {
  position: absolute;
  z-index: 20;
  top: max(12.8cqw, calc(env(safe-area-inset-top) + 2cqw));
  left: 50%;
  display: none;
  max-width: 82%;
  padding: 2.666667cqw 3.733333cqw;
  border-radius: 2.133333cqw;
  background: rgb(31 21 101 / 92%);
  font-size: 3.466667cqw;
  line-height: 4.8cqw;
  text-align: center;
  transform: translateX(-50%);
}

.status-toast.is-visible {
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 481px) {
  .artboard {
    box-shadow: 0 0 60px rgb(10 4 64 / 55%);
  }
}

@media (orientation: landscape) {
  .artboard {
    width: min(480px, 56svh);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .wheel-launch:active,
  .spin-control:active,
  .draw-cta:active {
    transform: none;
  }
}