/* Responsive Design */

/* Tablets */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .logo {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .welcome-screen, .quiz-screen, .results-screen {
        padding: 25px;
    }
    
    .welcome-content h2 {
        font-size: 2rem;
    }
    
    .question {
        font-size: 1.3rem;
    }
    
    .quiz-info {
        flex-direction: column;
        gap: 15px;
    }
    
    .difficulty-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .difficulty-btn {
        width: 200px;
    }
    
    .quiz-controls {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .results-actions {
        flex-direction: column;
    }
    
    .results-actions .btn {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .logo {
        font-size: 2rem;
    }
    
    .welcome-screen, .quiz-screen, .results-screen {
        padding: 20px;
        border-radius: 15px;
    }
    
    .welcome-content h2 {
        font-size: 1.8rem;
    }
    
    .question {
        font-size: 1.2rem;
        text-align: left;
    }
    
    .option {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .final-score {
        font-size: 3rem;
    }
    
    .quiz-info {
        flex-direction: column;
        text-align: center;
    }
    
    .info-item {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }
    
    .info-item .icon {
        font-size: 1.5rem;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .main-content {
        align-items: flex-start;
        padding-top: 20px;
    }
    
    .welcome-screen, .quiz-screen, .results-screen {
        margin: 20px 0;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    }
    
    .welcome-screen, .quiz-screen, .results-screen {
        background: #2c3e50;
        color: #ecf0f1;
    }
    
    .welcome-content h2, .question, .results-content h2 {
        color: #ecf0f1;
    }
    
    .welcome-content p, .subtitle {
        color: #bdc3c7;
    }
    
    .option {
        background: #34495e;
        border-color: #4a5f7a;
        color: #ecf0f1;
    }
    
    .option:hover {
        background: #4a5f7a;
    }
    
    .option.selected {
        background: #3498db;
        border-color: #3498db;
    }
    
    .results-details {
        background: #34495e;
    }
    
    .result-label {
        color: #bdc3c7;
    }
    
    .result-value {
        color: #ecf0f1;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .welcome-screen, .quiz-screen, .results-screen {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .btn {
        display: none;
    }
    
    .footer {
        color: black;
    }
}