/*************************************/
/*************************************/
/*            Flash Cards            */
/*************************************/
/*************************************/
/* Matched to the app's notecard (app/learn-vocab.tsx): a 300x300 WHITE square with a 1px #ccc
   border and a 10px radius, flipped 180 degrees around its centre over 600ms with both faces
   backface-hidden.
 *
 * Two differences from what this file used to do:
 *   - the flip was a 1s "page turn" (translateX(-100%) plus rotateY(-180deg) about the right
 *     edge); the app rotates about the centre, which is what is used here now
 *   - the faces were positioned with hardcoded margin-top values (75px, 65px) tuned to the old
 *     260px height; they are centred with flexbox instead, so the same rules hold at any size
 *
 * The card element also carries Bootstrap's .card class, which the design system paints
 * #F6F6F6. A flashcard is white in the app, so that is overridden explicitly below. */

#flip-card-container {
	min-height: 300px;
}

#flip-card {
	display: inline-block;
	perspective: 1000px;
	width: min(300px, 100%);
	height: 300px;
	max-width: 400px;
}

#flip-card-content {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .6s;
}

/* Beats the design system's grey .card surface -- see the note above. */
#flip-card-content.card {
	--bs-card-bg: #fff;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
}

#flip-card-content.is-flipped {
	transform: rotateY(180deg);
}

.card-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	text-align: center;
	backface-visibility: hidden;
}

#card-back {
	transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
	#flip-card-content {
		transition: none;
	}
}


/*************************************/
/*            Card content           */
/*************************************/
#kanji, .kanji, .hirakata {
	font-size: 40px;
	font-weight: bold;
	line-height: 1.2;
}

#furigana, #kana, .kana {
	font-size: 24px;
	line-height: 1.3;
}

#english {
	font-size: 24px;
	line-height: 1.3;
}

.writing-character p {
	font-size: 90px;
	line-height: 1.1;
	margin: 0;
}

.writing-character img {
	max-height: 230px;
	padding-top: 10px;
}

#romaji {
	font-size: 60px;
	line-height: 1.1;
}

#character-type {
	text-transform: capitalize;
}

#kanji-character {
	border: 1px solid #dee2e6;
}