/* ============================================
   TEMPLATE 1 - Modern Gradient Theme
   Template-specific colors and styles only
   ============================================ */

/* Body Background */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 400% 400%;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body::before {
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 0, 150, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 255, 0, 0.1) 0%, transparent 50%);
}

/* Welcome Screen */
.welcome-screen {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(102, 126, 234, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.welcome-screen h1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShine 3s ease-in-out infinite;
}

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

.welcome-screen > p {
    color: #666;
}

/* Template Selector */
.template-selector {
    background: linear-gradient(135deg, rgba(240, 244, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
}

.template-selector h3 {
    color: #667eea;
}

.template-btn {
    border: 2px solid rgba(102, 126, 234, 0.3);
    background: white;
    color: #667eea;
}

.template-btn:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

.template-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.current-theme {
    color: #666;
}

.current-theme strong {
    color: #667eea;
}

/* Bank Cards */
.bank-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 244, 255, 0.9) 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.bank-card:hover {
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4), 0 0 20px rgba(118, 75, 162, 0.3);
    border-color: #667eea;
}

.bank-card h3 {
    color: #333;
}

.bank-card p {
    color: #666;
}

.start-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
    color: white;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    
}

@keyframes gradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.start-btn:hover {
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6);
}



.test-header h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-bar {
    background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 100%);
}

.progress-fill {
    background: linear-gradient(90deg, #4CAF50 0%, #CDDC39 50%, #009688 100%);
    background-size: 200% 100%;
    animation: progressGradient 2s ease infinite;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

@keyframes progressGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.question-counter {
    color: #666;
}

/* Countdown */
.countdown-circle {
    /* Background is set randomly via JavaScript inline styles */
    animation: countdownGradient 2s ease infinite, countdownPulse 1s ease infinite;
    box-shadow: 
        0 0 30px rgba(102, 126, 234, 0.6),
        0 0 60px rgba(118, 75, 162, 0.4),
        0 0 90px rgba(240, 147, 251, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.5);
}

@keyframes countdownGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes countdownPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.countdown-circle::before {
    background: conic-gradient(
        transparent 0deg,
        rgba(255, 255, 255, 0.3) 90deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.3) 270deg,
        transparent 360deg
    );
}

.countdown-circle span {
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(102, 126, 234, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Question Card */
.question-card {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.1);
}

.question-card::before {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-color: rgba(102, 126, 234, 0.1);
}

.question-card::after {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-color: rgba(102, 126, 234, 0.1);
}

.question-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.option-label {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    border: 2px solid #e0e0e0;
}

/* Option letter background is set randomly via JavaScript inline styles */

.option-label:hover {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(240, 244, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}

.option-label.correct {
    border-color: #4caf50;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 50%, #66bb6a 100%) !important;
    color: white !important;
    box-shadow: 0 5px 25px rgba(76, 175, 80, 0.5), 0 0 20px rgba(76, 175, 80, 0.3);
}

.option-label.correct .option-text {
    color: white !important;
}

/* Results */
.results-screen h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShine 2s ease-in-out infinite;
}


.score-display {
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(102, 126, 234, 0.2);
}

.score-display p {
    color: #333;
}

.score-display #scoreDisplay {
    color: #667eea;
}

.percentage {
    color: #666;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover {
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Start Quiz Button - Template 1 */
.start-quiz-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite, pulseGlow 2s ease-in-out infinite;
    color: white;
}

.start-quiz-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 -10px 40px rgba(102, 126, 234, 0.6);
}