/* Enhanced responsive styles */
.test-container {
    transition: all 0.3s ease;
}

.typing-area, .question-area {
    transition: all 0.3s ease;
}

/* Improved scrollbar for different devices */
.question-image-container {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .display-4 {
        font-size: 2rem;
    }

    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
}

/* High-resolution device support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .question-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    .navbar, .btn, .timer {
        display: none !important;
    }

    .test-container {
        display: block !important;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}