/* TypingMaster Pro - Responsive Styles */

/* Tablets (768px and below) */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        gap: 20px;
    }

    .main-nav {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .nav-link {
        font-size: 14px;
    }

    .section h2 {
        font-size: 28px;
    }

    .hero-section h2 {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .quick-stats {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .test-controls {
        flex-direction: column;
    }

    .control-group {
        width: 100%;
    }

    .control-group select {
        width: 100%;
        flex: 1;
    }

    .timer {
        font-size: 36px;
    }

    .text-display {
        min-height: 80px;
    }

    .text-prompt {
        font-size: 16px;
    }

    .live-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-card {
        padding: 15px;
    }

    .result-value {
        font-size: 24px;
    }

    .lessons-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .game-icon {
        font-size: 48px;
    }

    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-table {
        font-size: 14px;
    }

    .stats-table th,
    .stats-table td {
        padding: 10px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Games Responsive */
    .game-word-sprint .game-header {
        flex-direction: column;
        gap: 15px;
    }

    .game-word-sprint .game-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-code-master .code-snippet {
        font-size: 12px;
        padding: 15px;
    }

    .game-rapid-fire .current-challenge {
        font-size: 28px;
    }

    .game-story-mode .story-text {
        font-size: 14px;
        padding: 20px;
    }

    .leaderboard-table {
        font-size: 14px;
    }

    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .achievement-icon {
        font-size: 36px;
    }

    .game-results-content {
        padding: 25px;
    }

    .game-results-content h2 {
        font-size: 24px;
    }

    .game-result-item .value {
        font-size: 22px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .logo-section h1 {
        font-size: 22px;
    }

    .logo-section .tagline {
        font-size: 11px;
    }

    .main-nav {
        gap: 10px;
    }

    .nav-link {
        font-size: 12px;
        padding: 4px 0;
    }

    .section {
        padding: 30px 0;
    }

    .section h2 {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .hero-section h2 {
        font-size: 26px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .quick-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stat-card {
        padding: 20px 15px;
    }

    .stat-card h3 {
        font-size: 28px;
    }

    .stat-card p {
        font-size: 12px;
    }

    .feature-card {
        padding: 20px;
    }

    .feature-icon {
        font-size: 40px;
    }

    .feature-card h3 {
        font-size: 16px;
    }

    .feature-card p {
        font-size: 12px;
    }

    .test-area {
        padding: 20px;
    }

    .timer-section {
        margin-bottom: 20px;
    }

    .timer {
        font-size: 32px;
    }

    .text-display {
        padding: 15px;
        min-height: 70px;
    }

    .text-prompt {
        font-size: 14px;
    }

    .user-input {
        min-height: 60px;
        padding: 10px;
        font-size: 14px;
    }

    .live-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat {
        padding: 10px;
    }

    .stat-value {
        font-size: 20px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .result-card {
        padding: 12px;
        border-left: 3px solid #0066ff;
    }

    .result-value {
        font-size: 20px;
    }

    .result-chart {
        margin: 20px 0;
        padding: 15px;
    }

    .lessons-grid {
        grid-template-columns: 1fr;
    }

    .lesson-card {
        padding: 15px;
    }

    .lesson-number {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .lesson-card h3 {
        font-size: 16px;
    }

    .lesson-card p {
        font-size: 12px;
    }

    .games-grid {
        grid-template-columns: 1fr;
    }

    .game-card {
        padding: 20px;
    }

    .game-icon {
        font-size: 42px;
    }

    .game-card h3 {
        font-size: 18px;
    }

    .game-card p {
        font-size: 12px;
    }

    .stats-overview {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .overview-card {
        padding: 20px;
    }

    .overview-card .value {
        font-size: 28px;
    }

    .stats-section {
        padding: 20px;
    }

    .stats-table {
        font-size: 12px;
    }

    .stats-table th,
    .stats-table td {
        padding: 8px;
    }

    .stats-table th {
        font-size: 10px;
    }

    .footer-content {
        gap: 20px;
    }

    .footer-section h4 {
        font-size: 14px;
    }

    .footer-section p,
    .footer-section a {
        font-size: 12px;
    }

    .footer-bottom {
        font-size: 11px;
    }

    /* Mobile Games Styles */
    .game-word-sprint {
        padding: 20px;
    }

    .game-word-sprint .game-title {
        font-size: 22px;
    }

    .game-word-sprint .game-timer {
        font-size: 24px;
    }

    .game-word-sprint .word-display {
        padding: 20px;
        min-height: 80px;
    }

    .game-word-sprint .current-word {
        font-size: 32px;
    }

    .game-code-master {
        padding: 20px;
    }

    .game-code-master .code-snippet {
        font-size: 11px;
        padding: 12px;
        margin-bottom: 15px;
    }

    .game-code-master .code-input {
        font-size: 12px;
        padding: 10px;
    }

    .game-rapid-fire {
        padding: 20px;
    }

    .game-rapid-fire .current-challenge {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .game-story-mode {
        padding: 20px;
    }

    .game-story-mode .story-text {
        font-size: 13px;
        padding: 15px;
        line-height: 1.6;
    }

    .game-story-mode .story-input {
        font-size: 14px;
        padding: 10px;
    }

    .game-typo-hunt {
        padding: 20px;
    }

    .game-typo-hunt .sentence-display {
        font-size: 14px;
        padding: 15px;
    }

    .game-typo-hunt .correction-options {
        gap: 8px;
    }

    .game-typo-hunt .correction-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .leaderboard {
        padding: 20px;
    }

    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .achievement-badge {
        padding: 10px;
    }

    .achievement-icon {
        font-size: 32px;
    }

    .achievement-name {
        font-size: 11px;
    }

    .achievement-description {
        font-size: 9px;
    }

    .game-results-content {
        padding: 20px;
        max-width: 90%;
    }

    .game-results-content h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .game-results-stats {
        gap: 15px;
    }

    .game-result-item .label {
        font-size: 11px;
    }

    .game-result-item .value {
        font-size: 20px;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }

    .loading-indicator p {
        font-size: 14px;
    }
}

/* Landscape Mobile (480px wide, landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    .main-header {
        padding: 10px 0;
    }

    .main-content {
        padding: 30px 0;
    }

    .section h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .hero-section {
        margin-bottom: 30px;
    }

    .quick-stats {
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 20px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .test-area {
        padding: 20px;
    }

    .timer {
        font-size: 28px;
    }

    .user-input {
        min-height: 50px;
    }

    .live-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .lessons-grid,
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Very Small Devices (320px) */
@media (max-width: 320px) {
    .logo-section h1 {
        font-size: 18px;
    }

    .logo-section .tagline {
        font-size: 10px;
    }

    .section h2 {
        font-size: 20px;
    }

    .hero-section h2 {
        font-size: 22px;
    }

    .quick-stats {
        gap: 10px;
    }

    .stat-card h3 {
        font-size: 24px;
    }

    .test-controls {
        flex-direction: column;
    }

    .timer {
        font-size: 28px;
    }

    .live-stats {
        grid-template-columns: 1fr;
    }

    .result-value {
        font-size: 18px;
    }

    .lessons-grid,
    .games-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .game-icon {
        font-size: 36px;
    }
}

/* Large Screens (1400px and above) */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }

    .section h2 {
        font-size: 42px;
    }

    .hero-section h2 {
        font-size: 48px;
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lessons-grid,
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-overview {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

    html {
        scroll-behavior: auto;
    }
}

/* Accessibility: Dark Mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #0a0e27;
        color: #e0e0e0;
    }

    .section h2 {
        color: #00b4d8;
    }

    .feature-card,
    .stat-card,
    .lesson-card,
    .game-card,
    .stats-section,
    .test-area,
    .results-area,
    .leaderboard,
    .game-word-sprint,
    .game-code-master,
    .game-rapid-fire,
    .game-story-mode,
    .game-typo-hunt,
    .game-accuracy-race {
        background: #1a1a2e;
        color: #e0e0e0;
    }

    .feature-card h3,
    .stat-card h3,
    .lesson-card h3,
    .game-card h3 {
        color: #00b4d8;
    }

    .feature-card p,
    .stat-card p,
    .lesson-card p,
    .game-card p,
    .text-secondary {
        color: #a0a0a0;
    }

    .text-display,
    .user-input,
    .word-display,
    .code-input,
    .story-input,
    .code-snippet,
    .story-text,
    .sentence-display,
    .game-stat,
    .stat,
    .progress-bar {
        background: #0f1419 !important;
        color: #e0e0e0 !important;
        border-color: #333 !important;
    }

    .stats-table th {
        background: #1a1a2e;
    }

    .stats-table,
    .leaderboard-table {
        border-color: #333;
    }

    .stats-table tbody tr:hover,
    .leaderboard-table tr:hover {
        background: #1a1a2e;
    }

    .nav-link {
        border-bottom-color: #00b4d8;
    }
}