body {
     font-family: 'Inter', sans-serif;
 }

 .gradient-text {
     background: linear-gradient(135deg, #DC2626, #1E40AF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .glass-effect {
     backdrop-filter: blur(20px);
     background: rgba(255, 255, 255, 0.1);
 }

 .floating {
     animation: floating 3s ease-in-out infinite;
 }

 @keyframes floating {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 .pulse-glow {
     animation: pulse-glow 2s infinite;
 }

 @keyframes pulse-glow {

     0%,
     100% {
         box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
     }

     50% {
         box-shadow: 0 0 30px rgba(124, 58, 237, 0.8);
     }
 }

 /* Perfect Spinner Styles */
 .spinner-container {
     position: relative;
     width: 400px;
     height: 400px;
     margin: 0 auto;
 }

 .spinner-wheel {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     position: relative;
     overflow: hidden;
     border: 8px solid #fff;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
     transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .spinner-pointer {
     position: absolute;
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     border-top: 40px solid #DC2626;
     z-index: 20;
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
 }

 .spinner-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, #DC2626, #1E40AF);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 25;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
     border: 6px solid white;
 }

 .spin-button {
     background: linear-gradient(135deg, #DC2626, #1E40AF);
     color: white;
     border: none;
     border-radius: 50%;
     width: 68px;
     height: 68px;
     font-size: 20px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .spin-button:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
 }

 .spin-button:disabled {
     opacity: 0.7;
     cursor: not-allowed;
     transform: none;
 }

 /* Confetti Animation */
 .confetti {
     position: fixed;
     width: 10px;
     height: 10px;
     background: #f0f;
     animation: confetti-fall 3s linear infinite;
 }

 @keyframes confetti-fall {
     to {
         transform: translateY(100vh) rotate(360deg);
     }
 }

 /* Mobile Responsive */
 @media (max-width: 640px) {
     .spinner-container {
         width: 320px;
         height: 320px;
     }

     .spinner-center {
         width: 60px;
         height: 60px;
     }

     .spin-button {
         width: 48px;
         height: 48px;
         font-size: 16px;
     }
 }

 /* Step transitions */
 .step {
     display: none;
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.5s ease;
 }

 .step.active {
     display: block;
     opacity: 1;
     transform: translateY(0);
 }

 /* Prize animation */
 .prize-bounce {
     animation: prize-bounce 0.6s ease-in-out;
 }

 @keyframes prize-bounce {

     0%,
     20%,
     60%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-20px);
     }

     80% {
         transform: translateY(-10px);
     }
 }