/**
 * English Kimariji Flashcard Trainer — card layout & highlight styles
 * 百人一首.jp — /en/kimariji/
 * Extends .flash-card from practice.css with a taller, multi-field layout.
 */

/* .flash-card-front/back are absolutely positioned at height:100% of
   .flash-card-inner, which itself is height:100% of .flash-card — so the
   card needs an explicit height (not auto) for the flip layout to work. */
.flash-card--en {
    height: 440px;
}

.flash-card--en .flash-card-front,
.flash-card--en .flash-card-back {
    padding: var(--space-6);
    gap: var(--space-3);
    overflow-y: auto;
}

.en-poem-original {
    font-family: var(--font-mincho);
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    line-height: 1.9;
    text-align: center;
}

.en-poem-romaji {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    text-align: center;
    font-style: italic;
}

.en-poem-translation {
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    line-height: 1.8;
    text-align: center;
}

.en-poem-poet {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

.kimariji-highlight {
    color: var(--color-accent-primary);
    font-weight: 600;
    border-bottom: 2px solid currentColor;
}

@media (max-width: 480px) {
    .flash-card--en {
        height: 480px;
    }

    .en-poem-original {
        font-size: var(--text-lg);
    }

    .en-poem-romaji {
        font-size: var(--text-xs);
    }

    .en-poem-translation {
        font-size: var(--text-base);
    }
}