@import url("https://fonts.googleapis.com/css2?family=Girassol&display=swap");

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
* {
  box-sizing: border-box;
}

html,
body {
  width: 2820px;
  height: 1080px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  display: block;
  position: relative;
  /* background-color: #1a1a1a; */ /* Removed background color */
}

.deal-wheel {
  --size: 910px; /* Reduced by 35% from 1400px */
  --lg-hs: 0 3%;
  --lg-stop: 50%;
  --lg: linear-gradient(
      hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
      hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
    );
  
  position: absolute;
  right: 100px; /* Moved 5% (96px) left from previous position */
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-gap: calc(var(--size) / 20);
  align-items: center;
  grid-template-areas:
    "spinner"
    "trigger";
  font-family: "Girassol", sans-serif;
  font-size: calc(var(--size) / 25);
  line-height: 1;
  text-transform: lowercase;
}

/* Added styles for border and center image */
.border {
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  z-index: 10;
  pointer-events: none;
}

.cap {
  position: absolute;
  width: 25%;
  height: 25%;
  top: 37.5%;
  left: 37.5%;
  z-index: 20;
  pointer-events: none;
}

.cap img {
  width: 100%;
  height: 100%;
}

.circle-cutout {
  -webkit-mask-composite: destination-out;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle cx="100" cy="100" r="35" fill="black"/></svg>') 0/100% 100%,
     linear-gradient(#fff,#fff);

     mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle cx="100" cy="95" r="30" fill="black"/></svg>') 0/100% 100%,     linear-gradient(#fff,#fff);
    mask-composite: exclude;
}

.deal-wheel > * {
  grid-area: spinner;
}

.deal-wheel .btn-spin {
  grid-area: trigger;
  justify-self: center;
}

.spinner {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-areas: "spinner";
  width: var(--size);
  height: var(--size);
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--size) / 40) hsl(0deg 0% 0% / 0.06), 0 0 20px rgba(255, 215, 0, 0.5);
}

.spinner * {
  grid-area: spinner;
}

.prize {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
  width: 50%;
  height: 50%;
  transform-origin: center right;
  transform: rotate(var(--rotate));
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.text {
  position: relative;
  padding-left: calc(var(--size) / 25);
}

/* Use absolute positioning for the pseudo-element */
.text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(1.01); /* Add slight initial scale to prevent "jumping" */
  transform-origin: center; /* Ensure scaling happens from center */
  width: calc(var(--size) / 40);
  height: calc(var(--size) / 40);
  background-image: url('./buttons.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Keep animation properties */
  animation-duration: 2s;
  animation-iteration-count: infinite;
  z-index: 30;
  will-change: filter, transform; /* Optimize for animation */
  /* Remove inline-block/vertical-align properties */
}

/* Add keyframes for button glow animations - red glow for white segments */
@keyframes buttonGlowRed {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.6));
    transform: translateY(-50%) scale(1.01); /* Keep translateY and set consistent scale */
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1)) 
           drop-shadow(0 0 25px rgba(255, 50, 0, 1))
           drop-shadow(0 0 35px rgba(255, 100, 50, 0.8));
    transform: translateY(-50%) scale(1.3); /* Keep translateY during scaling */
  }
}

/* White glow for red segments */
@keyframes buttonGlowWhite {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
    transform: translateY(-50%) scale(1.01); /* Keep translateY and set consistent scale */
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) 
           drop-shadow(0 0 25px rgba(200, 200, 255, 1))
           drop-shadow(0 0 35px rgba(180, 180, 255, 0.8));
    transform: translateY(-50%) scale(1.3); /* Keep translateY during scaling */
  }
}

/* Apply different animations for odd and even segments */
.prize:nth-child(odd) .text::before {
  animation-name: buttonGlowRed; /* Red glow for white segments */
  animation-delay: 0s;
}

.prize:nth-child(even) .text::before {
  animation-name: buttonGlowWhite; /* White glow for red segments */
  animation-delay: 1s;
}

/* Keep the original bullet-point element hidden */
.bullet-point {
  display: none;
}

/* Remove background colors from prize elements */
.prize:nth-child(odd) {
  /* background-color: white; */ /* Removed */
}

.prize:nth-child(even) {
  /* background-color: red; */ /* Removed */
}

.prize:nth-child(odd) .text {
  color: black; /* Ensure text contrasts with white segment */
}

.prize:nth-child(even) .text {
  color: white; /* Ensure text contrasts with red segment */
}

.less-than-5 .prize {
  font-size: 1.5em;
}

.less-than-10 .prize {
  font-size: 1.2em;
}

.less-than-15 .prize {
  font-size: 1em;
}

.less-than-20 .prize {
  font-size: 0.9em;
}

.less-than-25 .prize {
  font-size: 0.85em;
}

.less-than-30 .prize {
  font-size: 0.8em;
}

.less-than-35 .prize {
  font-size: 0.75em;
}

.less-than-40 .prize {
  font-size: 0.7em;
}

.less-than-45 .prize {
  font-size: 0.65em;
}

.less-than-50 .prize {
  font-size: 0.6em;
}

.less-than-55 .prize {
  font-size: 0.5em;
}

.less-than-60 .prize {
  font-size: 0.4em;
}

.more-than-60 .prize {
  font-size: 0.3em;
}

/* Hide select dropdown from SVG import file */
.cap select {
  display: none;
}

.cap svg {
  width: 100%;
}

.ticker {
  position: absolute;
  left: calc(var(--size) / -15); /* Original left position */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Center vertically */
  width: calc(var(--size) / 8); /* Adjust size for the image */
  height: auto;
  z-index: 25; /* Make sure it's above the wheel and border */
  pointer-events: none;
  transform-origin: 40% center; /* 60% from right edge = 40% from left edge */
}

.ticker img {
  width: 100%;
  height: auto;
}

.btn-spin {
  color: hsl(0deg 0% 100%);
  background: var(--lg);
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-transform: inherit;
  padding: 0.9rem 2rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}

.btn-spin:focus {
  outline-offset: 2px;
}

.btn-spin:active {
  transform: translateY(1px);
}

.btn-spin:disabled {
  cursor: progress;
  opacity: 0.25;
}

/* slow spin animation */
.has-not-spinned {
  animation: rotation 30s infinite linear;
}

/* Spinning animation */
.is-spinning .spinner {
  transition: transform 15s cubic-bezier(0.1, -0.01, 0, 1);
}

/* Retain the ticker animation */
.is-spinning .ticker {
  -webkit-animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
          animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@-webkit-keyframes tick {
  40% {
    transform: translateY(-50%) rotate(-12deg);
  }
}

@keyframes tick {
  40% {
    transform: translateY(-50%) rotate(-12deg);
  }
}

/* Selected prize animation */
.prize.selected .text {
  /* Remove fixed white color */
  /* color: white; */
  
  /* Rainbow effect */
  background-image: linear-gradient(
    to right,
    #ff0000, #ff8000, #ffff00, #00ff00, #0000ff, #8000ff, #ff00ff
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  font-weight: bold;
  animation: selected 800ms ease, rainbow 2s linear infinite;
}

/* Rainbow animation */
@keyframes rainbow {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

@-webkit-keyframes selected {
  25% {
    transform: scale(1.25);
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}

@keyframes selected {
  25% {
    transform: scale(1.25);
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}

/* Starburst effect */
@keyframes starburst-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
    opacity: 0.7;
  }
}

.starburst {
  grid-area: spinner; /* Align with the spinner grid area */
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--size) * 1.6); /* Make it slightly larger than the wheel */
  height: calc(var(--size) * 1.6);
  transform: translate(-50%, -50%);
  z-index: 5;
  animation: starburst-rotate 60s linear infinite;
  pointer-events: none;
  object-fit: contain;
}