.wheel {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            border: 8px solid #fbbf24;
            box-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
        }
        
        .wheel-section {
            position: absolute;
            width: 50%;
            height: 50%;
            transform-origin: 100% 100%;
        }
        
        .wheel-section:nth-child(1) { background: #ef4444; transform: rotate(0deg); }
        .wheel-section:nth-child(2) { background: #3b82f6; transform: rotate(45deg); }
        .wheel-section:nth-child(3) { background: #10b981; transform: rotate(90deg); }
        .wheel-section:nth-child(4) { background: #f59e0b; transform: rotate(135deg); }
        .wheel-section:nth-child(5) { background: #8b5cf6; transform: rotate(180deg); }
        .wheel-section:nth-child(6) { background: #ec4899; transform: rotate(225deg); }
        .wheel-section:nth-child(7) { background: #06b6d4; transform: rotate(270deg); }
        .wheel-section:nth-child(8) { background: #84cc16; transform: rotate(315deg); }
        
        .wheel-text {
            position: absolute;
            top: 20px;
            right: 10px;
            color: white;
            font-weight: bold;
            font-size: 12px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        }
        
        .wheel-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: #1f2937;
            border-radius: 50%;
            border: 4px solid #fbbf24;
            z-index: 10;
        }
        
        .wheel-pointer {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 30px solid #dc2626;
            z-index: 5;
        }
        
        .spinning {
            animation: spin 3s ease-out;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(1800deg); }
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }