@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*, ::after, ::before {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

body {
	font-family: Inter, sans-serif;
	font-size: 16px;
	background-color: #f3f3fe;
	color: #2c3345;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.6;
	margin: 0;
	padding: 0 16px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

header {
	margin: 32px 0 16px;
	text-align: center;
}

h1 {
	font-size: 2rem;
	margin: 0;
}

.subtitle {
	margin: .25em 0 0;
	color: #57647e;
}

main {
	width: 100%;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 48px;
}

#deck-info {
	color: #57647e;
	font-size: .9em;
	margin: 0 0 1em;
}

#card-stage {
	width: 100%;
	perspective: 1600px;
}

.card {
	width: 100%;
	height: 380px;
	cursor: pointer;
	outline-offset: 4px;
}

.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .5s;
	transform-style: preserve-3d;
	border-radius: 12px;
	box-shadow: 0 4px 4px rgba(87, 100, 126, .21);
}

.card.flipped .card-inner {
	transform: rotateY(180deg);
}

.card-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	background-color: #fff;
	border-radius: 12px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.card-front {
	align-items: stretch;
}

.card-back {
	transform: rotateY(180deg);
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #2e69ff;
	color: #fff;
}

.meta {
	margin: 0 0 1.5em;
	font-size: .8em;
	color: #57647e;
}

.meta .section-name {
	display: block;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.meta .section-intro {
	display: block;
	margin-top: .25em;
}

.meta .section-intro:empty {
	display: none;
}

.question-text {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.375em;
	font-weight: bold;
	margin: 0;
}

.hint {
	margin: 0;
	text-align: center;
	font-size: .75em;
	color: #b8bdc9;
}

.question-text-small {
	font-size: .85em;
	margin: 0 0 1em;
	opacity: .85;
}

.answer-label {
	margin: 0;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .75;
}

.answer-text {
	margin: .25em 0 0;
	font-size: 1.5em;
	font-weight: bold;
}

.buttons {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	margin-top: 1.5em;
}

.buttons button {
	background-color: #e1e5f0;
	color: #2c3345;
	border: none;
	border-radius: 4px;
	padding: .5em 1em;
	font-size: 1em;
	cursor: pointer;
	height: 3em;
	flex: 1;

	&:hover {
		background-color: #ced0da;
	}

	&.next {
		color: #fff;
		background-color: #2e69ff;
	}

	&.next:hover {
		background-color: #1d54e0;
	}

	&:disabled {
		opacity: .5;
		cursor: not-allowed;
	}

	&:disabled:hover {
		background-color: #e1e5f0;
	}

	&.next:disabled:hover {
		background-color: #2e69ff;
	}
}

#empty-state {
	width: 100%;
	height: 380px;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 0 4px 4px rgba(87, 100, 126, .21);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	text-align: center;
	padding: 28px;
}

#empty-state button {
	background-color: #2e69ff;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: .5em 1.5em;
	font-size: 1em;
	cursor: pointer;
	height: 3em;

	&:hover {
		background-color: #1d54e0;
	}
}