/* 50 Sounds Practice - Responsive & Performance Optimization */

/* ===========================================
   CLS Optimization - Prevent Layout Shift
   =========================================== */

/* Reserve space to prevent content from jumping */
.mode-select,
.practice-mode-select,
.nav-tabs,
#quick-mode-options,
#custom-mode-options {
    will-change: auto;
}

/* ===========================================
   Mobile Responsive Design
   =========================================== */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    .container {
        margin: 10px;
        padding: 20px;
    }

    .kana {
        font-size: 48px;
    }

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

    .quiz-container {
        flex-direction: column;
        gap: 15px;
    }

    .mode-options {
        flex-direction: column;
        align-items: center;
    }

    .mode-option {
        min-width: 280px;
        max-width: 100%;
    }

    .config-group {
        justify-content: center;
    }

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

    .quick-buttons {
        gap: 6px;
    }

    .quick-btn {
        font-size: 11px;
        padding: 5px 10px;
    }

    .practice-options {
        flex-direction: column;
        gap: 10px;
    }

    .row-item {
        padding: 10px 12px;
    }

    .row-preview {
        font-size: 12px;
        letter-spacing: 1px;
    }

    /* Guest CTA responsive */
    .guest-cta-box {
        flex-direction: column;
        text-align: center;
    }

    .guest-cta-content {
        text-align: center;
    }

    .guest-cta-button {
        width: 100%;
    }

    /* Theme toggle smaller */
    .theme-toggle {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    /* Tab content height adjustment */
    .tab-content {
        min-height: 600px;
    }

    #practice-tab {
        min-height: 600px;
    }
}

/* Small mobile (480px) */
@media (max-width: 480px) {
    .safari-date-picker {
        flex-direction: column;
        gap: 10px;
    }

    .safari-date-picker select {
        width: 100%;
        flex: none;
    }
}

/* Date input specific (600px) */
@media (max-width: 600px) {
    input[type="date"] {
        font-size: 16px !important;
        padding: 14px 16px;
        -webkit-text-size-adjust: 100%;
    }

    .safari-date-picker select {
        font-size: 14px;
        padding: 10px;
    }
}

/* Medium range optimization */
@media (min-width: 481px) and (max-width: 600px) {
    .safari-date-picker select {
        font-size: 14px;
        padding: 10px;
    }
}