/*
 * 공부 게임(/game) — resources/views/game/index.blade.php 만 읽는다(PES-SSOT.md 23절 "공부 게임"). 선택자는 .study-games 아래로 좁힌다.
 * 게임 카드의 모양은 위젯 CSS(public/css/pages/typing-game-cards.css)가 맡는다. 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

/* ── 공부 게임 ───────────────────────────────────── */
.study-games {
	display: grid;
	gap: var(--wa-space-2xl);
	max-inline-size: 70rem;
}

.study-games .games-section {
	display: grid;
	gap: var(--wa-space-m);
}

.study-games .games-section-head {
	display: grid;
	gap: var(--wa-space-2xs);
}

.study-games .games-section-head h2 {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin: 0;
	font-size: var(--wa-font-size-xl);
}

.study-games .games-section-head h2 .fa-keyboard {
	color: var(--wa-color-brand-fill-loud);
}

.study-games .games-section-head p {
	margin: 0;
	color: var(--wa-color-text-quiet);
}

.study-games .games-more {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	justify-self: start;
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}

.study-games .games-more:hover {
	text-decoration: underline;
}