/* Mobile styles */
@media (max-width: 768px) {
    :root {
        /* Adjust sizes for mobile */
        --border-radius: 8px;
        --min-touch-target: 48px;
    }

    body {
        /* Body takes full viewport height */
        min-height: 100vh;
        /* Allow momentum scrolling on iOS */
        -webkit-overflow-scrolling: touch;
    }

    /* More compact header for mobile */
    header {
        padding: 1rem 0.5rem;
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    main {
        margin: 1rem auto;
        padding: 0 0.75rem;
    }

    /* Enhance touch targets */
    .mode-btn,
    button,
    .quiz-option,
    select {
        min-height: var(--min-touch-target);
        padding: 0.8rem 1rem;
        /* Remove gray highlight when tapping on iOS */
        -webkit-tap-highlight-color: transparent;
    }

    /* Adjust category selector */
    .category-selector {
        margin-bottom: 1.5rem;
    }

    select {
        max-width: 100%;
        width: 100%;
    }

    /* Improved flashcard design */
    .flashcard-container {
        padding-bottom: calc(var(--min-touch-target) * 1.4);
    }

    .flashcard {
        /* Adjust height dynamically in JS */
        width: 100%;
        margin: 0;
        border-radius: var(--border-radius);
        touch-action: pan-y;
        overflow: visible;
    }

    /* Show swipe hint on first interaction */
    .flashcard.is-touching::before,
    .flashcard.is-touching::after {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    /* Double-tap instruction */
    .flashcard-inner::before {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232a2522' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 15l-2 8h-2l1-8v-1H8v1l1 8H7l-2-8'%3E%3C/path%3E%3Cpath d='M12 4a3 3 0 0 0-3 3v5h6V7a3 3 0 0 0-3-3z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
        z-index: 2;
        pointer-events: none;
    }

    .flashcard-front,
    .flashcard-back,
    .flashcard-front *,
    .flashcard-back * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Adjust card content for mobile */
    .flashcard-front,
    .flashcard-back {
        padding: 1.5rem;
    }

    .flashcard p {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Improve controls for touch */
    .flashcard-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--parchment);
        padding: 0.5rem;
        border-top: var(--border-style);
        box-shadow: 0 -2px 10px rgba(42, 37, 34, 0.2);
        z-index: 100;
        margin: 0;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        height: auto;
    }

    .flashcard-controls button {
        min-width: 30%;
        font-size: 1rem;
        padding: 0.8rem 0.5rem;
        border-radius: var(--border-radius);
    }

    /* Center progress text */
    #card-progress {
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0;
    }

    /* Adjust quiz container for mobile */
    .quiz-container {
        padding: 1.25rem 1rem;
        border-radius: var(--border-radius);
    }

    .quiz-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 1.5rem;
    }

    .quiz-header h2 {
        font-size: 1.1rem;
        margin-right: 0;
    }

    .quiz-progress {
        align-self: flex-start;
    }

    .quiz-option {
        padding: 1rem;
        font-size: 1rem;
    }

    .quiz-controls {
        justify-content: center;
    }

    .quiz-controls button {
        flex: 1;
        min-width: 0;
        padding: 0.8rem 0.5rem;
        font-size: 1rem;
        text-align: center;
    }

    /* Visual feedback when tapping */
    .quiz-option:active {
        transform: scale(0.98);
        background-color: var(--parchment-dark);
    }

    button:active {
        transform: scale(0.98);
    }

    /* Ensure footer has space */
    footer {
        margin-top: 2rem;
        margin-bottom: var(--min-touch-target);
        padding: 1rem;
    }
}

/* Landscape mode adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    header {
        padding: 0.5rem;
    }

    h1 {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }

    nav {
        margin-top: 0.5rem;
    }

    .category-selector {
        margin-bottom: 1rem;
    }

    main {
        margin: 0.5rem auto;
    }

    .flashcard {
        height: 200px !important;
        /* Override the JS height for landscape */
    }

    .flashcard-front,
    .flashcard-back {
        padding: 1rem;
    }

    .flashcard h3 {
        margin-bottom: 0.75rem;
        font-size: 1.1rem;
    }

    .flashcard p {
        font-size: 0.95rem;
        line-height: 1.4;
    }
}