/*
 * 타자 게임 카드 위젯 — resources/views/components/typing/game-cards.blade.php(x-typing.game-cards).
 * /typing/games 와 공부 게임 목록(/game)이 함께 싣는다(PES-SSOT.md 23절 "공부 게임"). 어느 화면에 있어도 같은 모양이도록
 * 화면의 변수(.typing 의 --ty-*)에 기대지 않고 Web Awesome 토큰만 쓴다. 선택자는 .typing-game-cards 아래로 좁힌다.
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

.typing-game-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
}

.typing-game-cards .game-card {
	--accent: #6c8cff;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.4rem;
	overflow: hidden;
	block-size: auto;
	margin: 0;
	padding: 1.5rem 1.3rem;
	color: var(--wa-color-text-normal);
	font: inherit;
	text-align: start;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: transform var(--pes-motion), box-shadow var(--pes-motion), border-color var(--pes-motion);
}
.typing-game-cards .game-card[data-game='sprint'] { --accent: #f59e0b; }
.typing-game-cards .game-card[data-game='survival'] { --accent: #16a34a; }
.typing-game-cards .game-card::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: var(--accent); }
.typing-game-cards .game-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--wa-shadow-l); }
.typing-game-cards .game-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.typing-game-cards .gc-icon {
	display: grid;
	place-items: center;
	inline-size: 3.2rem;
	block-size: 3.2rem;
	border-radius: 1rem;
	background: color-mix(in srgb, var(--accent) 14%, var(--wa-color-surface-raised));
	color: var(--accent);
	font-size: 1.6rem;
}
.typing-game-cards .gc-name { font-size: 1.2rem; font-weight: 800; }
.typing-game-cards .gc-desc { min-block-size: 2.4em; color: var(--wa-color-text-quiet); font-size: 0.85rem; line-height: 1.45; }

/* 카드 아래 줄 — 이 화면에서 여는 카드는 내 최고 기록, 다른 화면의 카드는 "플레이" */
.typing-game-cards :is(.gc-best, .gc-go) {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-block-start: auto;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var(--wa-color-surface-border);
	color: var(--accent);
	font-size: 0.8rem;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.typing-game-cards .game-card { transition: none; }
	.typing-game-cards .game-card:hover { transform: none; }
}