/* Responsive Design Media Queries */

@media (max-width: 768px) {
    .header h1 {
        font-size: 1.8em;
    }

    .header p {
        font-size: 0.9em;
    }

    /* Flashcard height handled by standard-mode.css with clamp() */
    /* .flashcard { height: 420px; } - REMOVED: conflicts with responsive clamp() */

    .japanese-text {
        font-size: 3em;
    }

    .english-text {
        font-size: 2em;
    }

    .romanization {
        font-size: 1.2em;
        bottom: 10px;
        left: 20px;
    }

    .vocabulary-image {
        max-width: 250px;
        max-height: 250px;
    }

    .stats-bar {
        padding: 10px 15px;
        gap: 15px;
    }

    .stat-item {
        flex-direction: column;
        gap: 4px;
    }

    .stat-value {
        font-size: 1.1em;
    }

    .stat-label {
        font-size: 0.75em;
    }

    .audio-button {
        width: 45px;
        height: 45px;
        font-size: 20px;
        bottom: 20px;
        right: 20px;
    }

    select, button {
        padding: 8px 15px;
        font-size: 0.9em;
    }

    .mode-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }

    .progress-bar {
        height: 10px;
    }

    .controls {
        padding: 12px;
        gap: 10px;
    }

    .focus-button-card {
        width: 35px;
        height: 35px;
        top: 20px;
        left: 20px;
        font-size: 18px;
    }

    body.focus-mode .flashcard {
        width: 95vw;
        height: 80vh;
    }

    body.focus-mode .japanese-text {
        font-size: 4em;
    }

    body.focus-mode .english-text {
        font-size: 2.5em;
    }

    body.focus-mode .vocabulary-image {
        max-width: 350px;
        max-height: 350px;
    }
}