/* Flashcards (flashcards.php): one big card that flips (both faces share one grid cell, so the card is as tall as the
   fuller side - no measuring in script), then Did you know it?; the finish panel. The page header and bar are the shared
   play-page pieces (.ec-play-* in css/ui.css). */
.ec-fc { display: grid; gap: 14px; justify-items: center; }
.ec-fc[hidden], .ec-fc-check[hidden], .ec-fc-done[hidden], .ec-fc-again [hidden] { display: none; }
.ec-fc-tally { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; color: var(--ec-ink-2); }
.ec-fc-knew .fa { color: var(--ec-green); }
.ec-fc-learning .fa { color: #a84f0a; }
.ec-fc-card { box-sizing: border-box; outline: none; display: grid; width: 100%; max-width: 720px; cursor: pointer; perspective: 1400px; }
.ec-fc-card:focus-visible .ec-fc-face { outline: 3px solid var(--ec-focus); outline-offset: 3px; }
.ec-fc-face { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; gap: 8px; min-height: 300px; padding: 16px 22px 26px; border-radius: 16px;
	border: 1px solid #d6dbe6; background: #fff; box-shadow: 0 2px 6px rgba(34, 35, 45, .07), 0 12px 28px rgba(34, 35, 45, .08);
	backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .45s ease; }
.ec-fc-back { transform: rotateY(180deg); background: #fffaf3; }
.ec-fc-card.is-flipped .ec-fc-front { transform: rotateY(-180deg); }
.ec-fc-card.is-flipped .ec-fc-back { transform: rotateY(0deg); }
.ec-fc-label { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--t-ink); }
.ec-fc-body { align-self: center; justify-self: center; text-align: center; font: 500 30px/1.35 "Poppins", "Lato", sans-serif; color: #22232d; overflow-wrap: anywhere; max-width: 100%; }
.ec-fc-body img { max-width: 100%; max-height: 40vh; width: auto; height: auto; object-fit: contain; } /* a big upload still fits on the screen */
.ec-fc-body p { margin: 0 0 .4em; }
.ec-fc-hint { margin: 0; font-size: 14px; color: var(--ec-ink-2); }
.ec-fc-check { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.ec-fc-check p { margin: 0; flex-basis: 100%; text-align: center; font-weight: 700; }
.ec-fc-reverse { color: var(--ec-ink-2); }
.ec-fc-done { max-width: 720px; margin: 0 auto; padding: 24px; border-radius: 16px; background: var(--ec-green-soft); border: 1px solid #9fd3a3; text-align: center; display: grid; gap: 12px; }
.ec .ec-fc-done h2 { margin: 0; font: 600 24px "Rubik", sans-serif; color: var(--ec-green-ink); }
.ec-fc-done h2:focus { outline: none; }
.ec-fc-done p { margin: 0; }
.ec-fc-again { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 575px) {
	.ec-fc-face { min-height: 240px; padding: 12px 14px 20px; }
	.ec-fc-body { font-size: 24px; }
	.ec-fc-body img { max-height: 32vh; }
}
@media (prefers-reduced-motion: reduce) { .ec-fc-face { transition: none; } }
.ec-fc-card.is-instant .ec-fc-face { transition: none; } /* a new card: no flip back (flashcards.js show()) */