/* 转盘样式 */
.wheel-container {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
}

.wheel-outer-ring {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    box-shadow: 
        0 0 0 4px #fff,
        0 0 0 8px #FFD700,
        0 8px 32px rgba(0,0,0,0.3);
    animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { 
        box-shadow: 
            0 0 0 4px #fff,
            0 0 0 8px #FFD700,
            0 8px 32px rgba(0,0,0,0.3);
    }
    50% { 
        box-shadow: 
            0 0 0 4px #fff,
            0 0 0 12px #FFD700,
            0 12px 40px rgba(255, 165, 0, 0.4);
    }
}

.wheel-inner-ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 25%, #45B7D1 50%, #96CEB4 75%, #FFEAA7 100%);
    opacity: 0.1;
}

.wheel-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 0.1s linear;
}

.wheel-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    z-index: 10;
    cursor: pointer;
}

.wheel-pointer.disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.pointer-triangle {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #FF4444;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    z-index: 11;
}

.pointer-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 -4px 8px rgba(0,0,0,0.2),
        inset 0 4px 8px rgba(255,255,255,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.wheel-pointer:not(.disabled):hover .pointer-center {
    transform: scale(1.05);
    box-shadow: 
        0 6px 16px rgba(0,0,0,0.4),
        inset 0 -4px 8px rgba(0,0,0,0.2),
        inset 0 4px 8px rgba(255,255,255,0.3);
}

.wheel-pointer:not(.disabled):active .pointer-center {
    transform: scale(0.95);
}

.pointer-text {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 转盘上的奖品文字样式 */
.prize-text {
    font-size: 14px;
    font-weight: 600;
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: middle;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 转盘扇区颜色 */
.wheel-sector {
    transition: opacity 0.3s;
}

.wheel-sector:hover {
    opacity: 0.9;
}

/* 转盘旋转动画类 */
.wheel-spinning {
    animation: none;
}

/* 光效装饰 */
.wheel-light-effect {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.3) 10deg,
        transparent 20deg,
        transparent 80deg,
        rgba(255, 215, 0, 0.3) 90deg,
        transparent 100deg,
        transparent 170deg,
        rgba(255, 215, 0, 0.3) 180deg,
        transparent 190deg,
        transparent 260deg,
        rgba(255, 215, 0, 0.3) 270deg,
        transparent 280deg,
        transparent 350deg,
        rgba(255, 215, 0, 0.3) 360deg
    );
    animation: lightRotate 4s linear infinite;
    pointer-events: none;
}

@keyframes lightRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 粒子效果 */
.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
}

/* 转盘结果高亮 */
.winner-highlight {
    animation: winnerPulse 0.5s ease-in-out 3;
}

@keyframes winnerPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}