/* Spinner Animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Game Canvas */
#gameCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Video Preview */
#video {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 160px;
    height: 120px;
    border: 2px solid #fff;
    border-radius: 8px;
    z-index: 100;
    transform: scaleX(-1);
}

/* Loading Overlay */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease;
}

#loadingOverlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Score colors */
#playerScore .score-value { color: #00ff88; }
#aiScore .score-value { color: #ff4444; }

/* Control status colors */
#controlStatus.hand-active { color: #00ff88; }
#controlStatus.mouse-active { color: #ff9f43; }
#controlStatus.head-active { color: #a855f7; }

/* Option button active states */
.option-btn.active { background: #00d4ff; color: #000; }
.option-btn.active-hand { background: #00ff88; color: #000; }
.option-btn.active-mouse { background: #ff9f43; color: #000; }
.option-btn.active-head { background: #a855f7; color: #fff; }
.option-btn.active-difficulty { background: #f59e0b; color: #000; }