/* 额外样式增强 */

/* 转盘片段颜色自定义 */
.wheel-segment:nth-child(1) { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); }
.wheel-segment:nth-child(2) { background: linear-gradient(135deg, #4ECDC4, #6FD6D1); }
.wheel-segment:nth-child(3) { background: linear-gradient(135deg, #45B7D1, #6BC5E0); }
.wheel-segment:nth-child(4) { background: linear-gradient(135deg, #96CEB4, #A8D5C2); }
.wheel-segment:nth-child(5) { background: linear-gradient(135deg, #FFEAA7, #FFECB3); }
.wheel-segment:nth-child(6) { background: linear-gradient(135deg, #DDA0DD, #E6B3E6); }
.wheel-segment:nth-child(7) { background: linear-gradient(135deg, #98D8C8, #A8DDD1); }
.wheel-segment:nth-child(8) { background: linear-gradient(135deg, #F7DC6F, #F9E495); }

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes bounce {
    0%, 20%, 60%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    80% { transform: translateY(-5px); }
}

.container {
    animation: fadeIn 0.8s ease-out;
}

.spin-btn:active {
    animation: pulse 0.3s ease-in-out;
}

.result {
    animation: bounce 0.6s ease-in-out;
}

/* 深色主题支持 */
@media (prefers-color-scheme: dark) {
    .wheel-segment {
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* 打印样式 */
@media print {
    .language-selector,
    .spin-btn,
    .wheel-container {
        display: none;
    }
    
    .container {
        background: white;
        color: black;
        box-shadow: none;
    }
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
    .wheel-segment {
        border: 2px solid black;
    }
    
    .mode-btn {
        border: 2px solid white;
    }
}

/* 减少动画的用户设置支持 */
@media (prefers-reduced-motion: reduce) {
    .wheel {
        transition: none;
    }
    
    .container {
        animation: none;
    }
    
    .result {
        animation: none;
    }
}
