/*!
            * KEDD KFT - KEDD Rajzfilmünnep Site v1.0.0 (http://www.rajzfilmunnep.hu/)
            * Copyright 2024-2026 Peter Nagy
            * Licensed under MIT (https://github.com/StartBootstrap/rajzfilmunnep-site-generator/blob/master/LICENSE)
            */
/*
 * Nyereményjáték-oldalak: „hamarosan” (game_soon.pug) és a játék (game.pug, lent)
 *
 * Tiszta CSS 3D animáció, külső könyvtár nélkül: három 2×4-es építőkocka egymás után
 * ráesik a másikra, a torony lassan forog, majd egyben kizuhan lefelé a képből, és újrakezdődik.
 * Színek: az oldal arculati színei (style.css :root változók).
 *
 * Méretek (1 egység = 32px): kocka 128 × 38 × 64 px (szélesség × magasság × mélység),
 * bütyök átmérő 20px, magasság 8px. A kockák a bütyökrácshoz igazítva állnak egymáson.
 * Az áttűnést szándékosan nem opacity-vel oldjuk meg, mert az a 3D-s elemeket kilapítaná.
 */

.game-soon {
	padding-bottom: 80px;
}

.game-soon__badge {
	display: inline-block;
	padding: 6px 18px;
	border-radius: 999px;
	background-color: var(--rajzfilmunnep-pink);
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.5);
	animation: game-badge-pulse 2.4s ease-out infinite;
}

/* ---- Jelenet ---- */

.game-scene {
	position: relative;
	height: 360px;
	perspective: 900px;
	perspective-origin: 50% 25%;
	overflow: hidden; /* a fentről érkező kockák a jeleneten kívül nem látszanak */
}

.game-scene__shadow {
	position: absolute;
	left: 50%;
	top: 76%;
	width: 220px;
	height: 46px;
	margin-left: -110px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(89, 50, 142, 0.35) 0%, rgba(89, 50, 142, 0) 70%);
	animation: game-shadow 7.5s ease-in-out infinite;
}

.game-scene__tilt {
	position: absolute;
	left: 50%;
	top: 68%;
	transform-style: preserve-3d;
	transform: rotateX(-24deg) scale(var(--game-scale, 1));
}

.game-scene__spin {
	transform-style: preserve-3d;
	animation: game-spin 18s linear infinite;
}

.game-scene__slot {
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
}

/* A bütyökrácshoz igazított helyek: az 1. és 2. kocka 1 egységgel eltolva, a 3. elforgatva */
.game-scene__slot--1 { transform: translate3d(-16px, 0, 0); }
.game-scene__slot--2 { transform: translate3d(16px, -38px, 0); }
.game-scene__slot--3 { transform: translate3d(-16px, -76px, 0) rotateY(90deg); }

/* ---- Építőkocka ---- */

.game-brick {
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
	transform: translateY(-420px);
}

.game-scene__slot--1 .game-brick { animation: game-drop-1 7.5s infinite; }
.game-scene__slot--2 .game-brick { animation: game-drop-2 7.5s infinite; }
.game-scene__slot--3 .game-brick { animation: game-drop-3 7.5s infinite; }

.game-brick--pink {
	--c: var(--rajzfilmunnep-pink, #FF2D55);
	--c-light: #ff6b86;
	--c-dark: #d61e43;
	--c-darker: #a8142f;
}

.game-brick--lila {
	--c: var(--rajzfilmunnep-lila, #59328E);
	--c-light: #7b55b3;
	--c-dark: #462672;
	--c-darker: #331a55;
}

.game-brick--narancs {
	--c: var(--rajzfilmunnep-narancs, #DE9934);
	--c-light: #f2b65c;
	--c-dark: #bd7f22;
	--c-darker: #946217;
}

.game-brick__face {
	position: absolute;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 0 18px rgba(0, 0, 0, 0.08);
}

.game-brick__face--front,
.game-brick__face--back {
	width: 128px;
	height: 38px;
	left: -64px;
	top: -19px;
}

.game-brick__face--left,
.game-brick__face--right {
	width: 64px;
	height: 38px;
	left: -32px;
	top: -19px;
}

.game-brick__face--top,
.game-brick__face--bottom {
	width: 128px;
	height: 64px;
	left: -64px;
	top: -32px;
}

.game-brick__face--front  { background: var(--c);        transform: translateZ(32px); }
.game-brick__face--back   { background: var(--c-dark);   transform: rotateY(180deg) translateZ(32px); }
.game-brick__face--left   { background: var(--c-darker); transform: rotateY(-90deg) translateZ(64px); }
.game-brick__face--right  { background: var(--c-dark);   transform: rotateY(90deg) translateZ(64px); }
.game-brick__face--top    { background: var(--c-light);  transform: rotateX(90deg) translateZ(19px); }
.game-brick__face--bottom { background: var(--c-darker); transform: rotateX(-90deg) translateZ(19px); }

/* Bütyök: a kocka tetején (y = -19px), fedőlap 8px magasan, palást 12 szeletből */
.game-stud {
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
	transform: translate3d(var(--sx), -19px, var(--sz));
}

.game-stud__cap {
	position: absolute;
	width: 20px;
	height: 20px;
	left: -10px;
	top: -10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%), var(--c-light);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	transform: rotateX(90deg) translateZ(8px);
}

.game-stud__side {
	position: absolute;
	width: 5.6px; /* π × 20px / 12, kis átfedéssel */
	height: 8px;
	left: -2.8px;
	top: -4px;
	background: var(--c);
	/* Egyszerű árnyalás a szelet iránya szerint; sin() nélküli böngészőben egyszínű marad */
	filter: brightness(calc(0.9 + 0.18 * sin(var(--i) * 30deg)));
	transform: rotateY(calc(var(--i) * 30deg)) translateZ(10px) translateY(-4px);
}

/* ---- Animációk ---- */

@keyframes game-spin {
	from { transform: rotateY(-30deg); }
	to   { transform: rotateY(330deg); }
}

/* Esés felülről, kis visszapattanással; a végén a torony egyben kizuhan lefelé a képből
   (a jelenet overflow: hidden-je levágja), aztán újrakezdődik. A három kocka zuhanása
   azonos időzítésű, hogy egyben mozogjanak. */
@keyframes game-drop-1 {
	0%       { transform: translateY(-420px); animation-timing-function: ease-in; }
	12%      { transform: translateY(0); animation-timing-function: ease-out; }
	15%      { transform: translateY(-16px); animation-timing-function: ease-in; }
	18%      { transform: translateY(0); }
	84%      { transform: translateY(0); animation-timing-function: ease-in; }
	94%, 100% { transform: translateY(460px); }
}

@keyframes game-drop-2 {
	0%, 20%  { transform: translateY(-420px); animation-timing-function: ease-in; }
	32%      { transform: translateY(0); animation-timing-function: ease-out; }
	35%      { transform: translateY(-16px); animation-timing-function: ease-in; }
	38%      { transform: translateY(0); }
	84%      { transform: translateY(0); animation-timing-function: ease-in; }
	94%, 100% { transform: translateY(460px); }
}

@keyframes game-drop-3 {
	0%, 40%  { transform: translateY(-420px); animation-timing-function: ease-in; }
	52%      { transform: translateY(0); animation-timing-function: ease-out; }
	55%      { transform: translateY(-16px); animation-timing-function: ease-in; }
	58%      { transform: translateY(0); }
	84%      { transform: translateY(0); animation-timing-function: ease-in; }
	94%, 100% { transform: translateY(460px); }
}

/* Az árnyék a kockák számával nő, a kizuhanáskor eltűnik */
@keyframes game-shadow {
	0%, 8%   { transform: scale(0.35); opacity: 0; }
	12%, 30% { transform: scale(0.75); opacity: 1; }
	32%, 50% { transform: scale(0.9); opacity: 1; }
	52%, 84% { transform: scale(1); opacity: 1; }
	90%, 100% { transform: scale(0.6); opacity: 0; }
}

@keyframes game-badge-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.5); }
	70%  { box-shadow: 0 0 0 14px rgba(255, 45, 85, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); }
}

/* ---- Reszponzív ---- */

@media (max-width: 575.98px) {
	.game-scene {
		height: 290px;
	}

	.game-scene__tilt {
		--game-scale: 0.78;
	}

	.game-scene__shadow {
		transform: scale(0.8);
	}
}

/* =====================================================================
 * Nyereményjáték oldal (src/pug/pages/game.pug, src/js/game.js)
 * A „hamarosan” oldal elemeire épül (jelvény, kockatorony), finom lebegő/felugró mozgással.
 * ===================================================================== */

.game-page {
	--game-zold: #3ec1a0;
	padding-bottom: 96px;
	font-family: 'Poppins', sans-serif;
}

.game-hero {
	padding-bottom: 24px;
}

.game-scene--hero {
	height: 380px;
}

.game-hero__title {
	overflow-wrap: break-word;
}

/* Az intraneten megadott leírás sortörései megmaradnak */
.game-hero__lead {
	white-space: pre-line;
}

/* Rövid összefoglaló „cukorkák” */
.game-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.game-chip {
	padding: 8px 16px;
	border-radius: 999px;
	background: #ffffff;
	border: 2px solid var(--chip, var(--rajzfilmunnep-lila));
	color: var(--chip, var(--rajzfilmunnep-lila));
	font-weight: 600;
	box-shadow: 0 4px 0 var(--chip, var(--rajzfilmunnep-lila));
}

.game-chip strong { font-weight: 900; }
.game-chip--lila { --chip: var(--rajzfilmunnep-lila); }
.game-chip--pink { --chip: var(--rajzfilmunnep-pink); }
.game-chip--narancs { --chip: #b9771c; }

/* Fő gomb: „lenyomható” építőkocka-gomb */
.game-cta {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: var(--rajzfilmunnep-pink);
	--bs-btn-border-color: var(--rajzfilmunnep-pink);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #ff466a;
	--bs-btn-hover-border-color: #ff466a;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: #d61e43;
	--bs-btn-active-border-color: #d61e43;
	--bs-btn-disabled-color: #ffffff;
	--bs-btn-disabled-bg: #f3a1b1;
	--bs-btn-disabled-border-color: #f3a1b1;
	padding: 12px 34px;
	border-radius: 16px;
	font-weight: 800;
	box-shadow: 0 6px 0 #a8142f;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.game-cta:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 0 #a8142f;
}

.game-cta:active:not(:disabled) {
	transform: translateY(4px);
	box-shadow: 0 2px 0 #a8142f;
}

.game-cta:disabled {
	box-shadow: 0 6px 0 #e08497;
}

/* ---- Így játszhatsz ---- */

.game-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 24px 0 0;
}

.game-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 10px 30px rgba(89, 50, 142, 0.1);
}

.game-step__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--rajzfilmunnep-lila);
	color: #ffffff;
	font-weight: 900;
	font-size: 1.4rem;
	box-shadow: 0 4px 0 #331a55;
	animation: game-pop 6s ease-in-out infinite;
}

.game-step:nth-child(2) .game-step__num { background: var(--rajzfilmunnep-pink); box-shadow: 0 4px 0 #a8142f; animation-delay: 0.4s; }
.game-step:nth-child(3) .game-step__num { background: var(--rajzfilmunnep-narancs); box-shadow: 0 4px 0 #946217; animation-delay: 0.8s; }

.game-step__title {
	font-size: 1.05rem;
	font-weight: 800;
	color: #000000;
	margin-bottom: 4px;
}

/* Lépésállapotok: kész (zöld pipa) és soron következő (rózsaszín keret) */
.game-step__check {
	display: none;
	width: 12px;
	height: 22px;
	border: solid #ffffff;
	border-width: 0 4px 4px 0;
	transform: translate(0, -2px) rotate(45deg);
}

.game-step__badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--rajzfilmunnep-lila);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.game-step__badge[hidden] {
	display: none;
}

.game-step__link {
	color: #d61e43;
	font-weight: 800;
	white-space: nowrap;
}

.game-step--done {
	background: rgba(236, 250, 245, 0.95);
	box-shadow: inset 0 0 0 2px var(--game-zold), 0 10px 30px rgba(62, 193, 160, 0.15);
}

.game-step.game-step--done .game-step__num {
	background: var(--game-zold);
	box-shadow: 0 4px 0 #2a8f75;
	animation: game-check-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

.game-step--done .game-step__digit { display: none; }
.game-step--done .game-step__check { display: block; }
.game-step--done .game-step__badge { background: #23866c; }

.game-step--current {
	box-shadow: inset 0 0 0 2px var(--rajzfilmunnep-pink), 0 10px 30px rgba(255, 45, 85, 0.15);
}

.game-step--current .game-step__badge {
	background: var(--rajzfilmunnep-pink);
	animation: game-badge-pulse 2.4s ease-out infinite;
}

/* Lezárult lépés (a jelentkezési időszak véget ért) */
.game-step--closed {
	background: rgba(244, 242, 247, 0.95);
	box-shadow: inset 0 0 0 2px #b9b2c6;
}

.game-step.game-step--closed .game-step__num {
	background: #8a8296;
	box-shadow: 0 4px 0 #5f5869;
	animation: none;
}

.game-step--closed .game-step__badge { background: #6f6880; }

.game-step__text[hidden],
.game-step__text-alt[hidden] {
	display: none;
}

/* ---- Eredménypanelek az űrlap helyén: sikeres jelentkezés / lezárult ---- */

.game-result {
	position: relative;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 24px;
	border-radius: 20px;
}

.game-result[hidden] {
	display: none;
}

.game-result--success {
	background: rgba(236, 250, 245, 0.95);
	box-shadow: inset 0 0 0 2px var(--game-zold);
}

.game-result--closed {
	background: #f4f2f7;
	box-shadow: inset 0 0 0 2px #b9b2c6;
}

.game-result__icon {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
}

.game-result__icon--check {
	background: var(--game-zold);
	box-shadow: 0 5px 0 #2a8f75;
	animation: game-check-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.game-result__icon--check::after {
	content: '';
	width: 16px;
	height: 30px;
	border: solid #ffffff;
	border-width: 0 6px 6px 0;
	transform: translate(0, -3px) rotate(45deg);
}

/* „Behajtani tilos” jel: lezárult jelentkezés */
.game-result__icon--closed {
	border-radius: 50%;
	background: #8a8296;
	box-shadow: 0 5px 0 #5f5869;
}

.game-result__icon--closed::after {
	content: '';
	width: 34px;
	height: 8px;
	border-radius: 4px;
	background: #ffffff;
}

.game-result__title {
	margin-bottom: 6px;
	color: #000000;
	font-size: 1.4rem;
	font-weight: 900;
}

.game-result__again {
	margin-top: 10px;
	padding: 0;
	color: #d61e43;
	font-weight: 700;
}

.game-result__again[hidden] {
	display: none;
}

/* ---- Szakaszok ---- */

.game-section {
	margin-top: 80px;
}

.game-section__title {
	font-size: calc(1.4rem + 1.2vw);
	margin-bottom: 12px;
}

@media (min-width: 1200px) {
	.game-section__title { font-size: 2.5rem; }
}

/* ---- Nyereménykártyák ---- */

.game-prize {
	--accent: var(--rajzfilmunnep-lila);
	--tint: rgba(89, 50, 142, 0.08);
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: #ffffff;
	text-align: left;
	color: inherit;
	box-shadow: 0 6px 0 var(--accent), 0 18px 40px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	cursor: zoom-in;
	animation: game-float 6s ease-in-out infinite;
	animation-delay: var(--float-delay, 0s);
}

.game-prize--lila    { --accent: var(--rajzfilmunnep-lila);    --tint: rgba(89, 50, 142, 0.09); }
.game-prize--pink    { --accent: var(--rajzfilmunnep-pink);    --tint: rgba(255, 45, 85, 0.08); }
.game-prize--narancs { --accent: var(--rajzfilmunnep-narancs); --tint: rgba(222, 153, 52, 0.12); }
.game-prize--zold    { --accent: var(--game-zold);             --tint: #ffffff; } /* a JimJam-képek mögött nincs színes árnyalat */

.game-prize:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
}

.game-prize__media {
	display: block;
	position: relative;
	padding: 20px;
	background: radial-gradient(circle at 50% 60%, #ffffff 0%, var(--tint) 75%);
}

.game-prize__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: contain;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-prize--zold .game-prize__img {
	aspect-ratio: 1 / 1;
}

.game-prize:hover .game-prize__img,
.game-prize:focus-visible .game-prize__img {
	transform: scale(1.05) rotate(-1.5deg);
}

.game-prize__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 20px 22px;
}

.game-prize__line {
	color: var(--accent);
	font-weight: 800;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.game-prize--narancs .game-prize__line { color: #a96b12; }

.game-prize__name {
	font-weight: 900;
	font-size: 1.25rem;
	line-height: 1.2;
	color: #000000;
}

.game-prize__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	font-size: 0.9rem;
	color: #555555;
}

.game-prize__tag {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--accent);
	color: #ffffff;
	font-weight: 800;
}

.game-prize--narancs .game-prize__tag { background: #b9771c; }

.game-prize__more {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--game-zold);
	color: #ffffff;
	font-weight: 800;
	font-size: 0.85rem;
}


.game-jimjam {
	padding: 28px;
	border-radius: 28px;
	background: rgba(62, 193, 160, 0.1);
}

/* Nagyító ablak */
.game-prize-modal__img {
	max-height: 70vh;
	object-fit: contain;
}

.game-prize-modal__nav {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 0;
	border-radius: 50%;
	background: var(--rajzfilmunnep-lila);
	color: #ffffff;
	font-size: 1.8rem;
	line-height: 1;
	box-shadow: 0 3px 0 #331a55;
}

.game-prize-modal__nav--prev { left: 12px; }
.game-prize-modal__nav--next { right: 12px; }

/* ---- Videó ---- */

.game-video {
	max-width: 960px;
	margin: 20px auto 0;
	padding: 10px;
	border-radius: 28px;
	background: linear-gradient(135deg, var(--rajzfilmunnep-pink), var(--rajzfilmunnep-lila) 55%, var(--rajzfilmunnep-narancs));
	box-shadow: 0 20px 50px rgba(89, 50, 142, 0.25);
}

.game-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	background: #000000;
}

.game-video__frame {
	position: relative;
}

/* Nagy lejátszás gomb: a videó egész felülete kattintható, csak az alsó vezérlősáv marad szabadon */
.game-video__play {
	position: absolute;
	inset: 0 0 56px 0;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 20px 20px 0 0;
	background: transparent;
	cursor: pointer;
}

.game-video__play[hidden] {
	display: none; /* a display: grid különben felülírná a hidden attribútumot */
}

.game-video__play-icon {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--rajzfilmunnep-pink);
	box-shadow: 0 6px 0 #a8142f, 0 12px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: game-play-pulse 2.4s ease-out infinite;
}

/* Lejátszás háromszög */
.game-video__play-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -18px 0 0 -11px;
	border-style: solid;
	border-width: 18px 0 18px 30px;
	border-color: transparent transparent transparent #ffffff;
}

.game-video__play:hover .game-video__play-icon,
.game-video__play:focus-visible .game-video__play-icon {
	transform: scale(1.08);
}

.game-video__play:focus-visible {
	outline: 3px solid var(--rajzfilmunnep-pink);
	outline-offset: -3px;
}

.game-chip__label {
	margin-right: 0.3em;
}

/* ---- Jelentkezés ---- */

.game-signup {
	position: relative;
	margin-top: 80px;
	padding: 32px;
	border-radius: 28px;
	background: #ffffff;
	box-shadow: 0 8px 0 var(--rajzfilmunnep-lila), 0 24px 60px rgba(89, 50, 142, 0.15);
	scroll-margin-top: 110px;
}

.game-signup .form-control {
	padding: 12px 14px;
	border-radius: 12px;
}

.game-signup .form-control:focus,
.game-signup .form-check-input:focus {
	border-color: var(--rajzfilmunnep-lila);
	box-shadow: 0 0 0 0.2rem rgba(89, 50, 142, 0.2);
}

.game-signup .form-check-input:checked {
	background-color: var(--rajzfilmunnep-lila);
	border-color: var(--rajzfilmunnep-lila);
}

.game-success {
	position: relative;
	overflow: visible;
}

.game-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.game-confetti__piece {
	position: absolute;
	top: 0;
	width: 9px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
	animation: game-confetti 1.8s ease-out forwards;
}

/* ---- Animációk ---- */

@keyframes game-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@keyframes game-pop {
	0%, 80%, 100% { transform: scale(1) rotate(0); }
	86%           { transform: scale(1.15) rotate(-6deg); }
	92%           { transform: scale(0.95) rotate(3deg); }
}

/* A kész lépés pipája betöltéskor egyszer „felpattan” */
@keyframes game-check-pop {
	0%   { transform: scale(0.4) rotate(-20deg); }
	70%  { transform: scale(1.15) rotate(6deg); }
	100% { transform: scale(1) rotate(0); }
}

@keyframes game-play-pulse {
	0%   { box-shadow: 0 6px 0 #a8142f, 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 45, 85, 0.55); }
	70%  { box-shadow: 0 6px 0 #a8142f, 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 22px rgba(255, 45, 85, 0); }
	100% { box-shadow: 0 6px 0 #a8142f, 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 45, 85, 0); }
}

@keyframes game-confetti {
	0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
	100% { opacity: 0; transform: translate(var(--drift, 0), -140px) rotate(var(--spin, 360deg)); }
}

@media (max-width: 991.98px) {
	.game-steps {
		grid-template-columns: 1fr;
	}

	.game-scene--hero {
		height: 320px;
	}
}

@media (max-width: 575.98px) {
	/* A display-3 cím a „NYEREMÉNYJÁTÉK!” szónál 375 px-en kilógna */
	.game-hero__title {
		font-size: clamp(1.6rem, 8.4vw, 2.3rem);
	}

	.game-scene--hero {
		height: 260px;
	}

	.game-result {
		flex-direction: column;
		gap: 14px;
		padding: 20px;
	}

	.game-result__icon {
		width: 52px;
		height: 52px;
	}

	.game-signup,
	.game-jimjam {
		padding: 20px;
	}

	.game-section,
	.game-signup {
		margin-top: 56px;
	}

	.game-video {
		padding: 6px;
		border-radius: 20px;
	}

	.game-video video {
		border-radius: 15px;
	}

	.game-video__play {
		bottom: 44px;
	}

	.game-video__play-icon {
		width: 72px;
		height: 72px;
	}

	.game-video__play-icon::after {
		margin: -14px 0 0 -8px;
		border-width: 14px 0 14px 23px;
	}
}

/* ---- Csökkentett mozgás: álló torony, animáció nélkül ---- */

@media (prefers-reduced-motion: reduce) {
	.game-soon__badge,
	.game-scene__shadow,
	.game-scene__spin,
	.game-scene__slot .game-brick,
	.game-step__num,
	.game-step.game-step--done .game-step__num,
	.game-step--current .game-step__badge,
	.game-result__icon--check,
	.game-prize,
	.game-video__play-icon {
		animation: none;
	}

	.game-prize__img,
	.game-cta {
		transition: none;
	}

	.game-prize:hover .game-prize__img,
	.game-prize:focus-visible .game-prize__img {
		transform: none;
	}

	.game-scene__spin {
		transform: rotateY(-30deg);
	}

	.game-brick {
		transform: none;
	}
}