.games-shell {
	margin-top: calc(var(--s143-header-h, 72px) + 8px);
	min-height: calc(100vh - var(--s143-header-h, 72px) - 8px);
	background: #f7f4ee;
	padding: 28px 16px 64px;
	width: 100%;
}

.games-dash {
	max-width: 1100px;
	margin: 0 auto;
}

.games-dash-hero {
	text-align: center;
	margin: 8px auto 36px;
}

.games-dash-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: #1a1a1a;
	margin: 0 0 14px;
}

.games-dash-hero h1 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 42px;
	line-height: 1.15;
	color: #111;
	margin: 0 0 10px;
	font-weight: 400;
}

.games-dash-sub {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 16px;
	color: #5b5b5b;
	margin: 0;
}

.games-ad-slot {
	width: 100%;
	margin: 18px 0 22px;
	text-align: center;
	min-height: 90px;
	overflow: hidden;
}

.games-ad-slot--bottom {
	margin-top: 28px;
}

.games-dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}

.games-card {
	position: relative;
	border-radius: 18px;
	min-height: 340px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.games-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.games-card-wallpaper,
.games-card-shade,
.games-card-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.games-card-wallpaper {
	z-index: 0;
	overflow: hidden;
}

.games-card-glow {
	z-index: 1;
	inset: auto;
	width: 180px;
	height: 180px;
	left: 50%;
	top: 42%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 35%, transparent 70%);
	transform: translate(-50%, -50%);
	opacity: 0;
	filter: blur(2px);
	transition: opacity 0.2s ease;
	will-change: left, top;
}

.games-card.is-lit .games-card-glow {
	opacity: 1;
}

/* Mobile / touch: soft auto-floating glow (no mouse needed) */
.games-card.is-touch-glow .games-card-glow {
	opacity: 0.85;
	animation: gamesGlowFloat 4.5s ease-in-out infinite;
	transition: none;
}

.games-card.is-touch-glow .games-card-shade {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0.8) 100%);
}

.games-card.is-touch-glow.is-lit .games-card-glow {
	animation: none;
	opacity: 1;
}

@keyframes gamesGlowFloat {
	0%, 100% { left: 28%; top: 32%; }
	25% { left: 72%; top: 40%; }
	50% { left: 60%; top: 68%; }
	75% { left: 30%; top: 58%; }
}

.games-card-shade {
	z-index: 2;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.82) 100%);
	transition: background 0.25s ease;
}

.games-card.is-lit .games-card-shade {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.78) 100%);
}

.games-card-content {
	position: relative;
	z-index: 3;
	padding: 28px 22px 22px;
	text-align: center;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.games-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #111;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 4px 8px;
	border-radius: 6px;
	font-family: 'Nunito', sans-serif;
}

.games-card-icon {
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: #111;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	margin: 12px 0 18px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}

.games-card h2 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 28px;
	margin: 0 0 8px;
	color: #111;
	font-weight: 400;
}

.games-card p {
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #2b2b2b;
	margin: 0 0 22px;
	flex: 1;
}

.games-play-btn {
	display: inline-block;
	background: #111;
	color: #fff !important;
	text-decoration: none !important;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 16px;
	padding: 10px 36px;
	border-radius: 999px;
	min-width: 140px;
	transition: background 0.2s ease, transform 0.15s ease;
}

.games-play-btn:hover,
.games-play-btn:focus {
	background: #333;
	color: #fff !important;
	text-decoration: none !important;
	transform: scale(1.03);
}

/* ===== Live wallpapers ===== */

/* Chess — moving board */
.games-card--chess-attack .games-card-wallpaper {
	background:
		linear-gradient(45deg, #cbb79a 25%, transparent 25%) -20px 0 / 40px 40px,
		linear-gradient(-45deg, #cbb79a 25%, transparent 25%) -20px 0 / 40px 40px,
		linear-gradient(45deg, transparent 75%, #cbb79a 75%) -20px 0 / 40px 40px,
		linear-gradient(-45deg, transparent 75%, #cbb79a 75%) -20px 0 / 40px 40px,
		#7b5b3a;
	animation: chessSlide 12s linear infinite;
}
@keyframes chessSlide {
	from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
	to { background-position: 40px 40px, 40px 40px, 40px 40px, 40px 40px, 0 0; }
}

/* Color Match — shifting blobs */
.games-card--color-match .games-card-wallpaper {
	background: linear-gradient(120deg, #ff6b6b, #4dabf7, #51cf66, #fcc419, #cc5de8, #ff6b6b);
	background-size: 300% 300%;
	animation: colorFlow 8s ease infinite;
}
@keyframes colorFlow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Snake — dark grid + crawling accent */
.games-card--classic-snake .games-card-wallpaper {
	background-color: #081c15;
	background-image:
		radial-gradient(circle at 20% 30%, #52b788 0 7px, transparent 8px),
		radial-gradient(circle at 28% 30%, #52b788 0 7px, transparent 8px),
		radial-gradient(circle at 36% 30%, #95d5b2 0 7px, transparent 8px),
		radial-gradient(circle at 70% 62%, #ff6b6b 0 6px, transparent 7px),
		linear-gradient(#0d2818 1px, transparent 1px),
		linear-gradient(90deg, #0d2818 1px, transparent 1px);
	background-size: auto, auto, auto, auto, 18px 18px, 18px 18px;
	animation: snakeCrawl 4s ease-in-out infinite;
}
@keyframes snakeCrawl {
	0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
	50% { background-position: 24px 10px, 24px 10px, 24px 10px, -16px 8px, 0 0, 0 0; }
}

/* Slide Puzzle — soft tile grid */
.games-card--slide-puzzle .games-card-wallpaper {
	background-color: #4a6fa5;
	background-image:
		linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px),
		linear-gradient(#e8f1ff 0 0),
		linear-gradient(#e8f1ff 0 0),
		linear-gradient(#e8f1ff 0 0);
	background-size: 25% 25%, 25% 25%, 22% 22%, 22% 22%, 22% 22%;
	background-position: 0 0, 0 0, 4% 8%, 54% 36%, 28% 62%;
	background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
	animation: puzzleShift 5s ease-in-out infinite;
}
@keyframes puzzleShift {
	0%, 100% { background-position: 0 0, 0 0, 4% 8%, 54% 36%, 28% 62%; }
	50% { background-position: 0 0, 0 0, 54% 8%, 28% 36%, 4% 62%; }
}

/* Reaction Tap — pulse red/green */
.games-card--reaction-tap .games-card-wallpaper {
	background: #c62828;
	animation: reactionPulse 2.4s ease-in-out infinite;
}
@keyframes reactionPulse {
	0%, 45% { background: #c62828; }
	55%, 100% { background: #2e7d32; }
}

/* Word Scramble — floating letters via layered text shadows on pseudo */
.games-card--word-scramble .games-card-wallpaper {
	background: linear-gradient(160deg, #ffb3c6 0%, #ff8fab 45%, #f48fb1 100%);
}
.games-card--word-scramble .games-card-wallpaper::before,
.games-card--word-scramble .games-card-wallpaper::after {
	content: 'A  S  T  U  S\A V  D  E  I  O\A L  M  R  C  H';
	white-space: pre;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.35);
	line-height: 1.7;
	animation: lettersFloat 6s ease-in-out infinite;
}
.games-card--word-scramble .games-card-wallpaper::after {
	content: 'T  R  E  N  D\A M  U  S  I  C\A D  A  N  C  E';
	font-size: 18px;
	color: rgba(0, 0, 0, 0.12);
	animation-delay: -3s;
}
@keyframes lettersFloat {
	0%, 100% { transform: translateY(0) rotate(-2deg); opacity: 0.9; }
	50% { transform: translateY(-10px) rotate(2deg); opacity: 1; }
}

/* Brick Breaker — bricks + bouncing ball */
.games-card--brick-breaker .games-card-wallpaper {
	background-color: #0d133d;
	background-image:
		radial-gradient(circle at 50% 70%, #fff59d 0 8px, transparent 9px),
		linear-gradient(#ef5350, #ef5350),
		linear-gradient(#ffa726, #ffa726),
		linear-gradient(#66bb6a, #66bb6a),
		linear-gradient(#42a5f5, #42a5f5),
		linear-gradient(#ef5350, #ef5350),
		linear-gradient(#ffa726, #ffa726),
		linear-gradient(#66bb6a, #66bb6a),
		linear-gradient(#42a5f5, #42a5f5);
	background-size: auto, 22% 8%, 22% 8%, 22% 8%, 22% 8%, 22% 8%, 22% 8%, 22% 8%, 22% 8%;
	background-repeat: no-repeat;
	background-position: 50% 72%, 6% 10%, 30% 10%, 54% 10%, 78% 10%, 6% 22%, 30% 22%, 54% 22%, 78% 22%;
	animation: brickBounce 2.8s ease-in-out infinite;
}
@keyframes brickBounce {
	0%, 100% { background-position: 50% 72%, 6% 10%, 30% 10%, 54% 10%, 78% 10%, 6% 22%, 30% 22%, 54% 22%, 78% 22%; }
	50% { background-position: 62% 42%, 6% 10%, 30% 10%, 54% 10%, 78% 10%, 6% 22%, 30% 22%, 54% 22%, 78% 22%; }
}

/* Whack-a-Mole — dirt + popping moles */
.games-card--whack-a-mole .games-card-wallpaper {
	background:
		radial-gradient(circle at 25% 40%, #5d4037 0 18px, transparent 19px),
		radial-gradient(circle at 75% 40%, #5d4037 0 18px, transparent 19px),
		radial-gradient(circle at 50% 72%, #5d4037 0 18px, transparent 19px),
		radial-gradient(circle at 25% 40%, #8d6e63 0 10px, transparent 11px),
		radial-gradient(circle at 75% 40%, #8d6e63 0 10px, transparent 11px),
		linear-gradient(#81c784, #a5d6a7 55%, #8d6e63 55%, #6d4c41);
}
.games-card--whack-a-mole .games-card-wallpaper::before,
.games-card--whack-a-mole .games-card-wallpaper::after {
	content: '🐹';
	position: absolute;
	font-size: 22px;
	animation: molePop 2.2s ease-in-out infinite;
}
.games-card--whack-a-mole .games-card-wallpaper::before {
	left: calc(25% - 12px);
	top: 28%;
}
.games-card--whack-a-mole .games-card-wallpaper::after {
	left: calc(75% - 12px);
	top: 28%;
	animation-delay: 1.1s;
}
@keyframes molePop {
	0%, 55%, 100% { transform: translateY(18px); opacity: 0.15; }
	65%, 85% { transform: translateY(0); opacity: 1; }
}

/* Hangman — notepad / blanks */
.games-card--hangman-lite .games-card-wallpaper {
	background:
		repeating-linear-gradient(transparent, transparent 27px, rgba(74, 111, 165, 0.2) 28px),
		linear-gradient(#fff8e7, #f3e5c4);
}
.games-card--hangman-lite .games-card-wallpaper::before {
	content: '_ _ _ _ _';
	position: absolute;
	left: 0;
	right: 0;
	top: 42%;
	text-align: center;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 28px;
	letter-spacing: 0.2em;
	color: rgba(27, 58, 95, 0.35);
	animation: hangBlink 2s ease-in-out infinite;
}
@keyframes hangBlink {
	0%, 100% { opacity: 0.45; letter-spacing: 0.18em; }
	50% { opacity: 0.9; letter-spacing: 0.28em; }
}

/* Flappy — sky + pipes + bird */
.games-card--flappy-tap .games-card-wallpaper {
	background:
		radial-gradient(circle at 30% 48%, #ffca28 0 10px, transparent 11px),
		linear-gradient(#43a047, #43a047),
		linear-gradient(#43a047, #43a047),
		linear-gradient(#81d4fa 0 68%, #a5d6a7 68%);
	background-size: auto, 18px 42%, 18px 28%, auto;
	background-repeat: no-repeat;
	background-position: 28% 48%, 68% 0, 68% 100%, 0 0;
	animation: flappyFly 3s ease-in-out infinite;
}
@keyframes flappyFly {
	0%, 100% { background-position: 28% 42%, 72% 0, 72% 100%, 0 0; }
	50% { background-position: 34% 58%, 58% 0, 58% 100%, 0 0; }
}

/* Per-game glow tint */
.games-card--chess-attack .games-card-glow {
	background: radial-gradient(circle, rgba(255, 230, 180, 0.75) 0%, rgba(160, 120, 70, 0.25) 40%, transparent 70%);
}
.games-card--color-match .games-card-glow {
	background: radial-gradient(circle, rgba(255, 180, 220, 0.8) 0%, rgba(120, 180, 255, 0.3) 40%, transparent 70%);
}
.games-card--classic-snake .games-card-glow {
	background: radial-gradient(circle, rgba(149, 213, 178, 0.8) 0%, rgba(27, 67, 50, 0.35) 40%, transparent 70%);
}
.games-card--slide-puzzle .games-card-glow {
	background: radial-gradient(circle, rgba(200, 230, 255, 0.85) 0%, rgba(74, 111, 165, 0.3) 40%, transparent 70%);
}
.games-card--reaction-tap .games-card-glow {
	background: radial-gradient(circle, rgba(255, 240, 150, 0.85) 0%, rgba(255, 100, 80, 0.3) 40%, transparent 70%);
}
.games-card--word-scramble .games-card-glow {
	background: radial-gradient(circle, rgba(255, 220, 235, 0.85) 0%, rgba(244, 143, 177, 0.35) 40%, transparent 70%);
}
.games-card--brick-breaker .games-card-glow {
	background: radial-gradient(circle, rgba(255, 245, 157, 0.85) 0%, rgba(66, 165, 245, 0.3) 40%, transparent 70%);
}
.games-card--whack-a-mole .games-card-glow {
	background: radial-gradient(circle, rgba(200, 255, 180, 0.75) 0%, rgba(109, 76, 65, 0.3) 40%, transparent 70%);
}
.games-card--hangman-lite .games-card-glow {
	background: radial-gradient(circle, rgba(255, 248, 220, 0.85) 0%, rgba(180, 150, 90, 0.28) 40%, transparent 70%);
}
.games-card--flappy-tap .games-card-glow {
	background: radial-gradient(circle, rgba(180, 235, 255, 0.85) 0%, rgba(67, 160, 71, 0.28) 40%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
	.games-card-wallpaper,
	.games-card-wallpaper::before,
	.games-card-wallpaper::after {
		animation: none !important;
	}
	.games-card-glow,
	.games-card.is-touch-glow .games-card-glow {
		display: none;
		animation: none !important;
	}
}

@media (max-width: 992px) {
	.games-dash-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.games-dash-hero h1 {
		font-size: 30px;
	}
	.games-dash-grid {
		grid-template-columns: 1fr;
		max-width: 360px;
		margin: 0 auto;
	}
}