/*
 * Slots Template CSS
 *
 * Decorative elements use numbered slots: decor-{N}
 * Names are stable IDs — position varies per landing and breakpoint.
 * Filenames mirror class names: class="decor-1" → img/decor-1.webp
 *
 * Current landing (TODO: name):
 *   Wrapper slots (position: absolute, outside game area):
 *     decor-1  — (describe element)
 *     decor-2  — (unused slot)
 *     decor-3  — (describe element)
 *     decor-4  — (unused slot)
 *     decor-5  — (describe element)
 *     decor-6  — (describe element)
 *     decor-7  — (unused slot)
 *   Layer slots (inside .decor-layer, behind the wheel):
 *     decor-8  — (unused slot)
 *     decor-9  — (describe element)
 *     decor-10 — (describe element)
 *     decor-11 — (unused slot)
 *     decor-12 — (describe element)
 *
 * Theme colors are in :root — change only :root when creating a new landing.
 */

/* ==========================================================
   1. FONTS
   ========================================================== */

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/NunitoSans.ttf') format('truetype');
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/NunitoSans.ttf') format('truetype');
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/NunitoSans.ttf') format('truetype');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src:
		local('Montserrat SemiBold'),
		local('Montserrat-SemiBold'),
		url('../fonts/montserrat-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src:
		local('Montserrat ExtraBold'),
		local('Montserrat-ExtraBold'),
		url('../fonts/montserrat-800.woff2') format('woff2');
}

/* ==========================================================
   2. RESET & THEME
   ========================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	display: block;
}

/* --- THEME: Change these variables per landing --- */
:root{
    /* Language switcher */
    --button-language: #414141;
    --button-language-lighter: #545454;

    /* Card game */
    --card-color: linear-gradient(135deg, #B000C7 0%, #2F5ED5 50%, #B000C7 100%);
    --card-color-back: #019F43;
    --card-face-gradient: linear-gradient(180deg, #9B019F 0%, #002ECD 100%);

    /* Bonus CTA */
    --bonus-color: linear-gradient(180deg, #FFBA26 0%, #DF3100 100%);
    --bonus-color-border: #FF1FCB;
    --bonus-color-hover: #DF3100;
    --bonus-color-border-hover: #FF501F;
    --bonus-color-active: #DF3100;
    --bonus-color-border-active: #EE00B7;

    /* Page background */
    --bg-color: #280E00;
    --bg-gradient-top: linear-gradient(
			180deg,
			rgba(24, 9, 0, 0.92) 0%,
			rgba(34, 12, 0, 0.78) 20%,
			rgba(40, 14, 0, 0.42) 52%,
			rgba(40, 14, 0, 0) 84%
		);
    --bg-gradient-bottom: linear-gradient(
			0deg,
			rgba(24, 9, 0, 0.78) 0%,
			rgba(34, 12, 0, 0.56) 16%,
			rgba(40, 14, 0, 0.26) 44%,
			rgba(40, 14, 0, 0) 76%
		);

    /* Modals */
    --modal-gradient: linear-gradient(180deg, #E431C0 0%, #0A00C4 100%);
    --prize-gradient: linear-gradient(180deg, #F6DB12 0%, #FF2400 100%);

    /* Wheel */
    --text-glow-gradient: linear-gradient(180deg, #fff 0%, #ffef27 36.77%, #f65b00 83.12%);
    --button-glow: #fcb7ec;

    /* Continue buttons */
    --button-continue: linear-gradient(to bottom, #a9e700, #005815);
    --button-continue-hover: linear-gradient(to bottom, #b9f010, #006820);
}

html {
	font-size: 16px;
	margin: 0;
	padding: 0;
	min-height: 100%;
	height: 100%;
	background-color: var(--bg-color);
	overflow-x: hidden;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1;
	font-style: normal;
	font-display: swap;
	color: #fff;
	background-color: transparent;
	overflow-x: hidden;
}

/* Desktop background: fixed pseudo-element with radial vignette.
   inset:-5px prevents subpixel seams at fractional scaling (Windows 125/150%). */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			50% 50% at 50% 50%,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) 42%,
			rgba(40, 14, 0, 0.78) 100%
		),
		url(../img/background.webp) center / cover no-repeat;
	background-color: var(--bg-color);
}

.bg-video {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	mix-blend-mode: normal;
	pointer-events: none;
	will-change: transform;
}

/* On the cards step, disable blend video to avoid background artifacts */
body.step-cards .bg-video {
	display: none !important;
}

@media (max-width: 767px) {
	.bg-video {
		display: none;
	}
}

/* ==========================================================
   3. LAYOUT (wrapper, background, gradients)
   ========================================================== */

.wrapper {
	position: relative;
	width: 100%;
	/* Use min-height to avoid "vh + Windows taskbar" clipping on laptops */
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	--wrapper-pad-y: 20px;
	padding: var(--wrapper-pad-y) 15px;
}

/* On flip-me/cards step: keep landing within viewport without showing scrollbars */
body.step-cards {
	overflow-y: hidden;
	overflow-x: hidden;
}
body.step-cards .wrapper {
	height: 100dvh;
	overflow-x: hidden;
	overflow-y: hidden;
	align-items: flex-start;
	scrollbar-width: none; /* Firefox */
}

body.step-cards .wrapper::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* Mobile: allow scrolling only for flip-me inside wrapper */
@media (max-width: 768px) {
	body.step-cards .wrapper {
		overflow-y: auto;
		scrollbar-width: none;
	}
	body.step-cards .wrapper::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
}

/* ==========================================================
   4. DECORATIONS & FLOATING ELEMENTS
   ========================================================== */

.top-gradient {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	pointer-events: none;
	z-index: 2;
}

.top-gradient::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-gradient-top);
	z-index: 1;
}

/* --- Decor slots: wrapper (1-7) ---
   Uncomment and position per landing. Hidden by default. */

.decor-1,
.decor-2,
.decor-3,
.decor-4,
.decor-5,
.decor-6,
.decor-7 {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* Example — enable and position a decor slot: */
.decor-1 {
	display: block;
	z-index: 6;
	bottom: calc(-1 * var(--wrapper-pad-y, 0px));
	left: 0;
	width: min(30vw, 520px);
	/* aspect-ratio: 17 / 16;
	--decor-rotate: -12deg;
	--decor-scale-min: 0.77;
	animation: decor-pulse 3s ease-in-out infinite; */
}
.decor-2 {
	display: block;
	z-index: 5;
	bottom: calc(-1 * var(--wrapper-pad-y, 0px));
	left: -10%;
	width: min(40vw, 660px);
	/* aspect-ratio: 17 / 16;
	--decor-rotate: -12deg;
	--decor-scale-min: 0.77;
	animation: decor-pulse 3s ease-in-out infinite; */
}
.decor-3 {
	display: block;
	z-index: 5;
	top:30%;
	left: 5%;
	width: 152px;
	aspect-ratio: 17 / 16;
	--decor-rotate: 0;
	--decor-scale-min: 0.77;
	animation: decor-pulse 3s ease-in-out infinite;
}
.decor-4 {
	display: block;
	z-index: 5;
	top:10%;
	left: 5%;
	width: 152px;
	aspect-ratio: 17 / 16;
	--decor-rotate: -12deg;
	--decor-scale-min: 0.77;
	animation: decor-pulse 3s ease-in-out infinite;
}
.decor-5 {
	display: block;
	z-index: 5;
	top:20%;
	left: 15%;
	width: 152px;
	aspect-ratio: 17 / 16;
	--decor-rotate: 12deg;
	--decor-scale-min: 0.77;
	animation: decor-pulse 3s ease-in-out infinite;
}
.decor-6 {
	display: block;
	z-index: 5;
	top:45%;
	left: 25%;
	width: 152px;
	aspect-ratio: 17 / 16;
	--decor-rotate: 12deg;
	--decor-scale-min: 0.77;
	animation: decor-pulse 3s ease-in-out infinite;
}
.decor-7 {
	display: block;
	z-index: 5;
	bottom:3%;
	left: 28%;
	width: 152px;
	aspect-ratio: 17 / 16;
	--decor-rotate: -12deg;
	--decor-scale-min: 0.77;
	animation: decor-pulse 3s ease-in-out infinite;
}

.lang-switcher_outer {
	position: fixed;
	top: 40px;
	right: 40px;
	width: 75px;
	height: 36px;
	text-transform: uppercase;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	font-family: 'Montserrat', system-ui, sans-serif;
	z-index: 21;
}

.lang-switcher {
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	z-index: 3;
	height: 100%;
	padding: 8px 12px;
	gap: 10px;
	background: transparent;
	border: 1px solid #7B7B7B;
	border-radius: 10px;
	backdrop-filter: blur(20px);
}

.open .lang-switcher {
	border-radius: 10px 10px 0 0;
	border-bottom: none;
}

.lang-switcher svg {
	margin-left: 6px;
}

.lang-list {
	position: absolute;
	list-style: none;
	padding: 6px 0 0;
	border-radius: 0 0 10px 10px;
	border: 1px solid #7B7B7B;
	top: 100%;
	display: none;
	right: 0;
	width: 100%;
	overflow: hidden;
	cursor: auto;
	background: transparent;
	border-top: none;
}

.open .lang-list {
	display: block;
}

.lang-item {
	padding: 4px 6px;
	text-align: center;
	cursor: pointer;
}

.lang-item span,
.curr-lang span {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
}

.lang-item:hover,
.lang-item.active {
	background: var(--button-language-lighter);
}

#particles {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

/* ==========================================================
   5. HERO CHARACTER
   ========================================================== */

.hero,
.decor-layer{
	z-index: 1;
}

.hero-wrap {
	position: absolute;
	inset: 0;
	/* Must stay above page gradients/content overlays */
	z-index: 450;
	overflow: visible;
	pointer-events: none;
}

.decor-wrap {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.hero {
	position: absolute;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 200;
}

.hero video,
.hero img {
	/* Positioning is handled by .hero to avoid 0x0 containing block issues */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 21 / 43;       /* TODO: Adjust per landing hero proportions */
	object-fit: contain;
	transition: 1s;
	transform: scaleX(-1);
	transform-origin: center center;
	animation: hero-pulse 3s ease-in-out infinite;
	/* animation: decor-pulse 3s ease-in-out infinite; */
}

/* Desktop hero positioning */
.hero {
	right: 3.3vw;
	bottom: 0;
	/* Keep hero reasonable on large screens */
	width: clamp(360px, 32vw, 620px);
	max-height: 92vh;
	aspect-ratio: 21 / 43;
}

/* Desktop: image is always visible; video overlays when it can render */
.hero img {
	display: block;
	z-index: 1;
}
.hero video {
	display: block;
	z-index: 2;
	background: transparent;
}

/* step-cards on desktop: hide video, show alt img */
body.step-cards .hero video {
	display: none;
}

/* Hide hero while any modal is open */
body.modal-open .hero-wrap {
	display: none !important;
}

/* --- Decor slots: layer (8-12) ---
   Uncomment and position per landing. Hidden by default. */

.decor-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.decor-layer .decor-item {
	position: absolute;
	height: auto;
	opacity: 0.9;
	display: none;
	will-change: transform, top, left;
}

/* Example — enable and position a layer decor slot: */
.decor-layer .decor-8 {
	display: block;
	top: 30%;
	right: 30%;
	width: 152px;
	aspect-ratio: 17 / 16;
	--decor-rotate: 12deg;
	--decor-scale-min: 0.62;
	animation: decor-pulse 3s ease-in-out infinite;
}
.decor-layer .decor-9 {
	display: block;
	bottom: 5%;
	right: 5%;
	width: 152px;
	aspect-ratio: 17 / 16;
	--decor-rotate: 12deg;
	--decor-scale-min: 0.62;
	animation: decor-pulse 3s ease-in-out infinite;
}

@media (min-width: 1201px) {
	/* Desktop: lock viewport height (no vertical scroll on landing) */
	html,
	body {
		/* Allow normal scrolling if viewport calculations differ (e.g. laptop taskbar/DPI) */
		overflow-y: hidden;
	}

	/* Desktop: pin bottom decor to viewport bottom */
	.decor-1,
	.decor-2 {
		position: fixed;
		bottom: 0;
	}

	.hero video,
	.hero img {
		bottom: calc(-4.4vw - 150px); 
	}

	/* Desktop: hero "closer" and legs clipped below viewport */
	.hero {
		right: -4vw;
		bottom: -300px;
		transform: scale(1.28);
		transform-origin: bottom right;
		filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
	}
}
/* ==========================================================
   6. ANIMATIONS (@keyframes)
   ========================================================== */

/* Generic pulsing animation for decor elements.
   Uses CSS custom properties for per-element variation:
   --decor-rotate: base rotation (default 0deg)
   --decor-scale-min: minimum scale at 50% (default 0.77) */
@keyframes decor-pulse {
	0% {
		transform: rotate(var(--decor-rotate, 0deg)) scale(1);
	}
	50% {
		transform: rotate(var(--decor-rotate, 0deg)) scale(var(--decor-scale-min, 0.77));
	}
	100% {
		transform: rotate(var(--decor-rotate, 0deg)) scale(1);
	}
}

@keyframes hero-pulse {  
	0%, 100% { transform: scaleX(-1) scale(1); }  
	50%      { transform: scaleX(-1) scale(0.97); }
}

/* TODO: Add landing-specific animations here. Examples:
@keyframes sway {
	0%   { transform: scale(1) translateX(0); }
	50%  { transform: scale(1.04) translateX(-15px); }
	100% { transform: scale(1) translateX(0); }
}
*/

/* ==========================================================
   7. CONTENT, TOP BAR, LANGUAGE SWITCHER
   ========================================================== */

.dark-gradient-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 249;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: var(--bg-gradient-bottom);
	pointer-events: none;
}

.content-wrapper {
	width: 90%;
	display: flex;
	justify-content: center;
	position: relative;
	/* Keep main UI above hero/decor layers */
	z-index: 400;
}

.content {
	width: 50%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 100;
}

.top-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 10px;
	position: relative;
	width: 100%;
}

.title, .podtitle {
	line-height: 1;
	position: relative;
	z-index: 3;
	text-shadow: 0 4px 20px #040030;
}

/* TODO: Replace font-family with landing-specific display font */
.title {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(28px, 5.5vw, 80px);
	font-weight: 800;
	text-transform: uppercase;
}

.podtitle {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(16px, 3.5vw, 50px);
	font-weight: 600;
	text-transform: uppercase;
	margin: 0.1em 0 0;
}

.axe {
	position: relative;
	width: 300px;
	height: 54px;
	margin-bottom: 10px;
}

.axe img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.game-container,
.game-container2 {
	margin-top: 30px;
	width: 100%;
}

.game-container2 {
	display: none;
}

/* Fixed card sizing and grid for the cards step */
.game-container2 .card {
	width: 280px;
	max-width: 100%;
	height: 294px;
	min-height: 294px;
	max-height: 294px;
	flex-shrink: 0;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 24px;
	
}
.game-container2 .game-second {
	display: grid;
	grid-template-columns: repeat(2, 280px);
	grid-template-rows: repeat(2, 294px);
	gap: 24px;
	justify-content: center;
	align-content: start;
	
}
@media (max-width: 600px) {
	.game-container2 .game-second {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.game-container2 .card {
		width: min(100%, 280px);
		margin-left: auto;
		margin-right: auto;
	}
}

body.step-cards .game-container {
	display: none;
}

body.step-cards .game-container2 {
	display: block;
	/* Compact flip-me layout so cards fit the visible viewport. */
	margin-top: 18px;
}

body.step-cards .game-container2 .card {
	width: 280px;
	max-width: 100%;
	height: 294px;
	min-height: 294px;
	max-height: 294px;
	flex-shrink: 0;
	flex-grow: 0;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 769px) {
	body.step-cards .game-container2 .card {
		margin-left: 0;
		margin-right: 0;
	}
}
body.step-cards .game-container2 .front {
	/* Front symbol is absolute (::after), so control text spacing explicitly */
	justify-content: flex-end;
	padding-bottom: 64px;
}
body.step-cards .game-container2 .front::after {
	top: 31%;
	width: 88px;
}
body.step-cards .game-container2 .front p {
	font-size: 22px;
	line-height: 1;
}
body.step-cards .game-container2 .back-inner::before {
	width: 88px;
}
body.step-cards .game-container2 .back-inner .back-prize,
body.step-cards .game-container2 .back {
	font-size: 42px;
}
body.step-cards .game-second {
	/* Flip me (grid 2x2): increase spacing between cards */
	gap: 24px;
	margin-top: 12px;
	justify-content: center;
}
@media (max-width: 768px) {
	body.step-cards .game-container2 .game-second {
		display: block !important;
		text-align: center;
	}
	body.step-cards .game-container2 .game-second .card {
		display: inline-block !important;
		width: min(100%, 280px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 24px;
		vertical-align: top;
	}
}
@media (min-width: 769px) {
	body.step-cards .game-second {
		display: grid;
		grid-template-columns: repeat(2, 280px);
		grid-template-rows: repeat(2, 294px);
		gap: 24px;
		justify-content: center;
		align-content: start;
	}
}
@media (min-width: 769px) and (max-width: 1200px) {
	body.step-cards .content {
		width: 80%;
	}
}

/* ==========================================================
   8. CARDS
   ========================================================== */

.game {
	position: relative;
	height: auto;
	z-index: 500;
}

.game-second {
	position: relative;
	width: 100%;
	margin-top: 30px;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	z-index: 4;
}

.card {
	width: 48%;
	margin-bottom: 20px;
	position: relative;
	perspective: 1000px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	cursor: pointer;
	overflow: hidden;
	min-height: 200px;
}

.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 200px;
	transition: transform 0.8s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	will-change: transform;
}

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

.front, .back {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	padding: 0 0 20px;
	box-sizing: border-box;
	border-radius: 24px;
	overflow: hidden;
	isolation: isolate;
}

.front {
	justify-content: space-evenly;
	align-items: center;
	gap: 20px;
}

.front-bg {
	position: absolute;
	inset: 6%;
	z-index: 0;
	background: var(--card-face-gradient);
	border-radius: 24px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 5px 5px 30px 0 #1A0AC8 inset;
	pointer-events: none;
}
.front::after {
	content: "";
	position: absolute;
	z-index: 2; /* выше текстуры ::before (z=1), ниже текста/контента */
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;          /* подгони под макет */
	aspect-ratio: 1 / 1;
	background: url("../img/decor-3.webp") center/contain no-repeat;
	pointer-events: none;
}
.front::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url("../img/card-texture.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	border-radius: 24px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	pointer-events: none;
}

.front p {
	position: relative;
	z-index: 2;
}

/* TODO: Replace font-family with landing-specific display font */
.front p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

.back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg) translateZ(0);
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0;
}

.back::after {
	content: "";
	position: absolute;
	top: 6%;
	right: 6%;
	bottom: 6%;
	left: 6%;
	z-index: 0;
	background: var(--card-face-gradient);
	border-radius: 24px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	pointer-events: none;
}

.back::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url("../img/card-texture.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	border-radius: 24px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	pointer-events: none;
}

.back-inner {
	position: absolute;
	top: 10%;
	right: 10%;
	bottom: 10%;
	left: 10%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	box-sizing: border-box;
}

.back-inner::before {
	content: "";
	width: 100px;
	aspect-ratio: 1 / 1;
	display: block;
	background: url("../img/decor-3.webp") center/contain no-repeat;
	flex-shrink: 0;
}

.back-inner .back-prize {
	display: block;
	width: 100%;
	text-align: center;
}

.back .back-prize-text {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	font: inherit;
	pointer-events: none;
}

/* ==========================================================
   9. WHEEL
   ========================================================== */

/* .wheel-bg::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 7%;
	width: 85%;
	height: 80%;
	border-radius: 50%;

} */

.wheel-frame {
	width: min(43rem, 80vw);
	height: min(43rem, 80vw);
	margin: 3.2rem auto 0;
	background: url(../img/frame-ring.webp) center center/contain no-repeat;
	position: relative;
	z-index: 0;
}

.wheel-bg1 {
	position: absolute;
	left: -16%;
	top: -16%;
	width: 132%;
	height: 132%;
	background: url(../img/bulbs.webp) center center/contain no-repeat;
	background-size: 100% 100%;
	z-index: 10;
	animation: blinker .3s ease-in-out infinite;
	/* Decorative bulb ring: its square box extends up-right into the language
	   dropdown area and would otherwise intercept clicks on the bottom items
	   (the ring corners are visually transparent but still hit-test). */
	pointer-events: none;
}

.mark {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -17%);
	width: 11.8%;
	min-width: 3rem;
	max-width: 5.5rem;
	height: auto;
	z-index: 12;
}

.wheel-spinner-wrapper {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 86.4%;
	height: 86.4%;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
}

.wheel-spinner {
	background: url(../img/wheel.webp) center/contain no-repeat;
	width: 100%;
	height: 100%;
	animation: 2s spinner ease-in-out infinite;
}

.wheel-spinner .wheel__text {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem 2rem;
	box-sizing: border-box;
}

.wheel-spinner .wheel__bonus {
	max-width: 13rem;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

.wheel-spinner .wheel-bonus-txt {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-style: normal;
	font-size: 2rem;
	line-height: 1.24;
	text-transform: uppercase;
	text-align: center;
	font-weight: 900;
	width: 100%;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wheel__text .wheel__bonus-2 {
	transform: rotate(180deg);
}

.wheel__text-1 {
	transform: rotate(22.5deg);
}
.wheel__text-2 {
	transform: rotate(67.5deg);
}
.wheel__text-3 {
	transform: rotate(112.5deg);
}
.wheel__text-4 {
	transform: rotate(157.5deg);
}

.wheel__text-1 .wheel__bonus-1 .wheel-bonus-txt,
.wheel__text-1 .wheel__bonus-2 .wheel-bonus-txt,
.wheel__text-3 .wheel__bonus-1 .wheel-bonus-txt,
.wheel__text-3 .wheel__bonus-2 .wheel-bonus-txt {
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(36.77%, #ffef27), color-stop(83.12%, #f65b00));
	background: var(--text-glow-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
	text-shadow: none;
}

.wheel-spinner-wrapper img {
	display: block;
	max-width: 97.5%;
	width: 100%;
}

.wheel_btn {
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	z-index: 13;
	background: url(../img/button.webp) center/contain no-repeat;
	width: 32%;
	max-width: 16rem;
	height: auto;
	aspect-ratio: 1;
	transition: all .2s ease;
	font-weight: 700;
	font-size: clamp(0.85rem, 2vw, 2.2rem);
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	border: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wheel_btn:hover {
	filter: drop-shadow(0 0 2rem var(--button-glow));
	-webkit-filter: drop-shadow(0 0 2rem var(--button-glow));
}

.wheel-spinner.wheel_spinner_animated {
		animation: 6s spinTo1 cubic-bezier(0.23, 1, 0.45, 1) forwards;
}

@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-7deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/* "Lucky" spin: one continuous decelerating arc. The wheel starts fast and
   gradually slows down (ease-out on the .wheel_spinner_animated rule), coming
   to rest the moment the top pointer crosses into the 300 FS zone.
   Geometry: pointer is at the top (0deg); the 300 FS wedge spans wheel-angles
   270deg-315deg, so the pointer enters it at the 315deg edge (rotate 1845deg).
   Final rotate(1852deg) stops ~7deg inside that edge — the pointer rests near
   the leading edge of 300 FS (right after EMPTY), creating the "just made it /
   lucky" feeling instead of a centered, deliberate landing. */
@keyframes spinTo1 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(1852deg);
	}
}
@keyframes bulbs-blink {
	0%, 40%   { opacity: 1; }
	50%, 60%  { opacity: 0.2; }
	70%, 100% { opacity: 1; }
}

.wheel-bg1 {
	/* те же позиция и размеры, что выше */
	animation: bulbs-blink 1.2s ease-in-out infinite;
}

/* Win celebration: when the wheel lands on 300 FS, the bulbs flash in rapidly
   changing colors (hue-rotate sweeps the whole spectrum) with on/off blinks
   and a per-bulb glow — a festive "you won!" multicolor blinking. */
.wheel-frame.wheel-win .wheel-bg1 {
	animation: bulbs-rainbow 0.5s linear infinite;
}

@keyframes bulbs-rainbow {
	0%   { filter: hue-rotate(0deg)   saturate(2.2) brightness(1.6) drop-shadow(0 0 7px #ffcf3a); opacity: 1; }
	16%  { filter: hue-rotate(60deg)  saturate(2.2) brightness(1.7) drop-shadow(0 0 9px #b6ff3a); opacity: 0.35; }
	33%  { filter: hue-rotate(120deg) saturate(2.2) brightness(1.7) drop-shadow(0 0 9px #3aff8e); opacity: 1; }
	50%  { filter: hue-rotate(180deg) saturate(2.2) brightness(1.7) drop-shadow(0 0 9px #3ad9ff); opacity: 0.35; }
	66%  { filter: hue-rotate(240deg) saturate(2.2) brightness(1.7) drop-shadow(0 0 9px #6a5bff); opacity: 1; }
	83%  { filter: hue-rotate(300deg) saturate(2.2) brightness(1.7) drop-shadow(0 0 9px #ff3df0); opacity: 0.35; }
	100% { filter: hue-rotate(360deg) saturate(2.2) brightness(1.6) drop-shadow(0 0 7px #ffcf3a); opacity: 1; }
}
/* ==========================================================
   10. MODALS
   ========================================================== */

.mask {
	width: 100%;
	height: 100%;
	background: rgba(8, 18, 25, 0.50);
	position: fixed;
	backdrop-filter: blur(25px);
	top: 0;
	left: 0;
	z-index: 250;
	display: none;
}

/* While modal is open: show only modal + mask (all widths) */
body.modal-open .wrapper,
body.modal-open #particles,
body.modal-open .top-gradient,
body.modal-open .dark-gradient-bottom {
	display: none !important;
}

/* Clean modal state: hide wheel/game + decor behind the modal (all widths) */
body.modal-open .wheel-frame,
body.modal-open .wheel-spinner-wrapper,
body.modal-open .game-container,
body.modal-open .game-container2,
body.modal-open .decor-wrap,
body.modal-open .decor-layer,
body.modal-open .decor-1,
body.modal-open .decor-2,
body.modal-open .decor-3,
body.modal-open .decor-4,
body.modal-open .decor-5,
body.modal-open .decor-6,
body.modal-open .decor-7,
body.modal-open .decor-layer .decor-8,
body.modal-open .decor-layer .decor-9 {
	display: none !important;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

.modal-win {
	width: 559px;
	aspect-ratio: 459 / 368;
	position: relative;
	flex-shrink: 0;
	overflow: visible;
	border-radius: 6px;
}

.modal-win__frame {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: url(../img/frame.webp) 0px 0px / 100% 100% no-repeat;
	pointer-events: none;
}

.modal-win__content {
	position: absolute;
	inset: 50px 70px 30px 70px;
	z-index: 3;
	overflow: visible;
	background: linear-gradient(180deg, #9B019F 0%, #002ECD 100%);
	border-radius: 6px;
	/* border: 6px solid rgba(255, 255, 255, 0.15); */
	box-shadow: inset 5px 5px 30px 0 #560057;
	backdrop-filter: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 0 40px;
	gap: 12px;
}

.modal-win__icon {
	width: 96px;
	height: 96px;
	max-width: 96px;
	max-height: 96px;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
}

/* TODO: Replace font-family with landing-specific display font */
.modal-win__content h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: 2px 4px 10px rgba(5, 2, 31, 0.8);
}

.modal-win__content h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: 2px 4px 10px rgba(5, 2, 31, 0.8);
}

.modal-first .modal-win__content h3 {
	margin-top: 0;
}

.modal-win__btn {
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	z-index: 4;
}

.modal-second h3 {
	margin-bottom: 2px;
}

.modal-second .modal-win__content {
	padding: 155px 15px 40px;
	text-align: center;
}
.modal-second__icon {
	position: absolute;
	top: 30px;
	width: 100px;
	height: auto;
	object-fit: contain;
}
.modal-second__line1,
.modal-second__line2 {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin: 0 0 4px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}
.modal-second__prize,
.modal-second__spins {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 4px;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin: 0 0 4px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}
.modal-second__prize {
	font-size: 26px;
	font-weight: 800;
}

/* Desktop bonus modal: long-locale copy (e.g. German "IHREN WILLKOMMENSBONUS"
   wraps to a 5th line) was overflowing the content box and getting clipped by
   the gold frame / claim button. Slightly smaller amounts + tighter spacing
   keep "+ 300 FREISPIELE" inside the frame. Scoped to ≥769px so the existing
   mobile sizing (@media max-width:768px) is untouched. */
@media (min-width: 769px) {
	.modal-second .modal-win__content {
		padding: 136px 15px 32px;
		gap: 8px;
	}
	.modal-second .modal-win__content h2 {
		font-size: 34px;
	}
}

/* Tablet/large-phone bonus modal (401–768px): same long-locale fix as desktop.
   Smaller title/amount so the German 5-line copy clears the claim button
   (padding kept generous so the headline stays clear of the coins icon).
   ≤400px keeps its own dedicated tuning (see @media max-width:400px). */
@media (min-width: 401px) and (max-width: 768px) {
	.modal-second .modal-win__content h3 {
		font-size: 16px;
	}
	.modal-second .modal-win__content h2 {
		font-size: 22px;
	}
}

.modal-second .modal-win__btn.bonus-link {
	font-family: 'Montserrat', system-ui, sans-serif;
	text-decoration: none;
	color: #fff;
	display: flex;
}
.modal-second .modal-win__btn.bonus-link:active {
	transform: translateX(-50%) translateY(2px);
}


.continue, .bonus-link {
	padding: 19px 70px;
	background: var(--bonus-color);
	border: none;
	border-radius: 20px;
	color: #fff;
	letter-spacing: -0.03em;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	margin-top: 30px;
}

.continue:hover, .bonus-link:hover {
	background: var(--bonus-color-hover);
}

.continue:active, .bonus-link:active {
	background: var(--bonus-color-active);
}

.continue--green {
	min-width: 190px;
	width: auto;
	height: 65px;
	padding: 0 26px;
	box-sizing: border-box;
	white-space: nowrap;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px rgba(9, 0, 65, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(../img/modal-background.webp) 0 0 / 100% 100% no-repeat;
	border: none;
	border-radius: 0;
	clip-path: none;
	box-shadow: none;
	transition: filter 300ms ease-out, transform 150ms ease-out;
}

.continue--green::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../img/modal-button.webp) 0 0 / 100% 100% no-repeat;
	z-index: -1;
}

.modal-win__btn.continue--green {
	margin: 0;
	transition: background 300ms ease-out, box-shadow 300ms ease-out, transform 150ms ease-out;
}

.continue--green:hover {
	background: url(../img/modal-background.webp) 0 0 / 100% 100% no-repeat;
	filter: brightness(1.1);
}

.modal-win__btn.continue--green:active {
	transform: translateX(-50%) translateY(2px);
}

.continue--green:active {
	filter: brightness(0.95);
}

/* ==========================================================
   11. RESPONSIVE BREAKPOINTS
   ========================================================== */

/* -- 1700px ------------------------------------------------ */
@media (max-width: 1700px) {
	.content-wrapper {
		width: 100%;
	}
	.wheel-frame {
		width: min(38rem, 78vw);
		height: min(38rem, 78vw);
	}
	/* TODO: Scale decor elements for this breakpoint */
}

/* -- 1400px ------------------------------------------------ */
@media (max-width: 1400px) {
	.front img {
		max-width: 80%;
	}
	.wheel-frame {
		width: min(32rem, 76vw);
		height: min(32rem, 76vw);
	}
	.wheel-spinner .wheel-bonus-txt {
		font-size: 1.8rem;
	}
	/* TODO: Scale decor elements for this breakpoint */
}

/* -- 1200px ------------------------------------------------ */
@media (max-width: 1200px) {
	.wrapper {
		align-items: flex-start;
	}
	.content {
		width: 80%;
	}
	.wheel-frame {
		width: min(34rem, 78vw);
		height: min(34rem, 78vw);
		margin-top: 1rem;
	}

	/* On step-cards: hide hero and decor */
	body.step-cards .hero-wrap,
	body.step-cards .decor-wrap,
	body.step-cards .hero,
	body.step-cards .decor-layer {
		display: none !important;
	}

	/* Video hidden, static img shown */
	.hero video {
		display: none !important;
	}
	.hero img {
		display: block !important;
	}

	/* Hero below wheel, sliding right toward 1200px */
	.hero {
		position: absolute;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		margin-left: max(0px, calc((100vw - 600px) * 0.65));
		z-index: 200;
	}
	.hero img {
		position: static;
		width: min(50vw, 360px);
	}
	/* TODO: Adjust decor elements for this breakpoint */
}

/* 769-1200: tablet composition (tall tablets only) */
@media (min-width: 769px) and (max-width: 1200px) and (min-height: 900px) {
	/* Tablet composition (e.g. iPad Pro 1024x1366):
	   avoid "decor stuck in corner" and make hero a bit larger. */
	body.step-cards .wrapper {
		/* On tall tablets keep wrapper full height and center content
		   (avoid "all pinned to the top" look). */
		height: 100dvh;
		box-sizing: border-box;
		overflow-y: hidden;
		align-items: center;
		scrollbar-width: none;
	}

	.hero {
		/* Tablet: slightly right + a bit lower (balance composition) */
		margin-left: max(0px, calc((100vw - 600px) * 0.68 + 42px));
		bottom: -34px;
		/* Override desktop clamp: on 1024px keep hero noticeably larger */
		width: min(52vw, 440px);
		max-height: 92vh;
	}
	.hero img {
		/* Let the image fill the container width set above */
		width: 100%;
	}

	.decor-1 {
		/* Anubis — чуть компактнее, чем раньше */
		left: 0;
		bottom: calc(-0.35 * var(--wrapper-pad-y, 0px));
		width: min(32vw, 500px);
	}
	.decor-2 {
		/* Altar */
		left: -10vw;
		bottom: calc(-0.55 * var(--wrapper-pad-y, 0px));
		width: min(42vw, 640px);
	}

	/* Flip-me/cards (второй экран): декор должен не перекрывать сетку карточек */
	body.step-cards .decor-1 {
		/* Anubis: меньше и в нижнем левом углу */
		left: -2.9vw;
		bottom: -2vh;
		width: min(22vw, 260px);
	}
	body.step-cards .decor-2 {
		/* Altar: меньше и тоже в левом нижнем углу */
		left: -9.6vw;
		bottom: -2.3vh;
		width: min(28vw, 340px);
	}

	/* Декоры 3–9: один размер, меньше базовых 152px */
	.decor-3,
	.decor-4,
	.decor-5,
	.decor-6,
	.decor-7,
	.decor-layer .decor-8,
	.decor-layer .decor-9 {
		/* iPad Pro / tall tablets: medium size (not too small) */
		width: min(14vw, 150px);
		max-width: min(14vw, 150px);
		aspect-ratio: 17 / 16;
	}

	.decor-6 {
		top: 45%;
		left: 10%;
	}
	.decor-7 {
		bottom: 15%;
		left: 40%;
	}
	.decor-layer .decor-8 {
		top: 14%;
		right: 8%;
	}
}

/* Tablet-ish widths: nudge hero slightly to the right */
@media (min-width: 769px) and (max-width: 900px) {
	.hero {
		margin-left: max(0px, calc((100vw - 600px) * 0.65 + 78px));
	}
}

/* -- Short desktop viewports (MacBook Air, laptops) ---- */
@media (max-height: 900px) and (min-height: 801px) and (min-width: 1201px) {
	.wrapper {
		--wrapper-pad-y: 12px;
		padding: var(--wrapper-pad-y) 15px;
	}
	.top-gradient {
		height: min(638px, 70vh);
	}
	.dark-gradient-bottom {
		height: min(595px, 65vh);
	}
	.axe {
		width: 220px;
		height: 40px;
		margin-bottom: 4px;
	}
	.top-bar {
		margin-bottom: 4px;
	}
	.title {
		/* Prevent "short-height" desktops from dropping the heading too low */
		font-size: clamp(70px, 5vh, 82px);
	}
	.podtitle {
		font-size: clamp(22px, 3.2vh, 40px);
		margin-top: 0.05em;
	}
	.game-container {
		margin-top: 12px;
	}
	.wheel-frame {
		width: min(30rem, 56vh);
		height: min(30rem, 56vh);
		margin-top: 1.2rem;
	}
	.wheel-spinner .wheel-bonus-txt {
		font-size: clamp(1rem, 3.2vh, 1.8rem);
	}
	.wheel-spinner .wheel__text {
		padding: 1.5rem;
	}
	.wheel_btn {
		/* Normalize: keep desktop button text consistent across heights */
		font-size: clamp(0.85rem, 2vw, 2.2rem);
	}
	.hero video,
	.hero img {
		width: min(30.3vw, 52vh);
		bottom: calc(-3vh - 20px);
	}
	/* TODO: Scale decor elements for short viewport */
	/* Flip me fix: grid row height must match card height (294px). */
	body.step-cards .game-second {
		grid-template-rows: repeat(2, 294px);
		gap: 18px;
	}
	body.step-cards .hero img {
		width: min(46vw, 56vh);
	}
}

/* Extra-short desktop (MacBook Air M2 at default scaling) */
@media (max-height: 800px) and (min-height: 651px) and (min-width: 1201px) {
	.wrapper {
		--wrapper-pad-y: 6px;
		padding: var(--wrapper-pad-y) 15px;
		/* On short-height laptops avoid vertical centering:
		   it makes the wheel look small and increases risk of bottom clipping (wrapper has overflow:hidden). */
		align-items: flex-start;
	}
	.axe {
		width: 180px;
		height: 34px;
		margin-bottom: 2px;
	}
	.top-bar {
		margin-bottom: 2px;
	}
	.title {
		/* For short-height laptops: avoid too-small wheel heading */
		font-size: clamp(70px, 4.5vh, 67px);
	}
	.podtitle {
		font-size: clamp(18px, 2.8vh, 32px);
		/* Add some breathing room before the wheel (avoid "squeezed" look) */
		margin: 0 0 0.8rem;
	}
	.game-container {
		/* Restore vertical rhythm on short-height laptops */
		margin-top: 12px;
	}
	.wheel-frame {
		/* Wheel should fit into short-height laptops (wrapper uses overflow:hidden) */
		width: min(36rem, 70vh);
		height: min(36rem, 70vh);
		/* Push wheel down to create air under subtitle */
		margin-top: 2.8rem;
	}
	.wheel-spinner .wheel-bonus-txt {
		/* Keep wheel labels readable on short viewports */
		font-size: clamp(0.9rem, 3vh, 1.6rem);
	}
	.wheel-spinner .wheel__text {
		/* Reduce padding slightly since we increased label font-size */
		padding: 1.1rem;
	}
	.wheel_btn {
		/* Normalize: keep desktop button text consistent across heights */
		font-size: clamp(0.85rem, 2vw, 2.2rem);
	}
	.hero video,
	.hero img {
		width: min(30.3vw, 48vh);
		bottom: calc(-2vh - 10px);
	}

	/* Flip me fix: keep 2x2 cards within short viewport */
	body.step-cards .game-container2 {
		margin-top: 10px;
	}
	body.step-cards .game-second {
		/* Grid row height must match card height (294px). */
		grid-template-rows: repeat(2, 294px);
		gap: 18px;
	}
}

/* Short desktop around 660px height: shrink Flip-me cards to fit */
@media (max-height: 740px) and (min-height: 651px) and (min-width: 1201px) {
	/* Keep gradients clipped to the wrapper box.
	   They are `position: fixed` by default, but on short viewports that can visually
	   escape the wrapper's padding/height constraints. */
	body.step-cards .top-gradient {
		/* Keep original fixed positioning (don't affect whole-page look),
		   but crop horizontally to match wrapper padding (15px on each side). */
		/* Avoid visible light side seams caused by clipping/subpixel rounding. */
		clip-path: none;
		left: 0;
		right: auto;
		width: 100%;
	}
	body.step-cards .dark-gradient-bottom {
		clip-path: none;
		left: 0;
		right: auto;
		width: 100%;
	}

	body.step-cards .game-container2 {
		margin-top: 10px;
	}

	body.step-cards .game-container2 .card {
		height: min(240px, 36vh);
		min-height: min(240px, 36vh);
		max-height: min(240px, 36vh);
	}

	body.step-cards .game-second {
		/* Keep grid row height in sync with card height */
		grid-template-rows: repeat(2, min(240px, 36vh));
		gap: 16px;
	}

	/* Keep card interior decor away from the "FLIP ME" text */
	body.step-cards .game-container2 .front::after {
		/* was: top: 25%; width: 100px; z-index: 2; */
		top: 23%;
		width: 76px;
		z-index: 1; /* keep it behind card-symbol/text */
	}
}

/* -- 850px ------------------------------------------------- */
@media (max-width: 850px) {
	.content {
		width: 100%;
	}
}

/* -- 768px ------------------------------------------------- */
/* Mobile: move background to html element — per CSS spec the root element's
   background always paints the entire canvas, avoiding iOS dynamic viewport gaps. */
@media (max-width: 768px) {
	html,
	body {
		background-color: var(--bg-color);
		background-image:
			radial-gradient(
				50% 50% at 50% 50%,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 0) 22%,
				rgba(40, 14, 0, 0.42) 55%,
				rgba(24, 9, 0, 0.88) 100%
			),
			url(../img/background.webp);
		background-repeat: no-repeat;
		/* Fill viewport; adjust framing via position */
		background-size: cover;
		background-position: center center;
		width: 100%;
		min-height: 100svh;
		overflow-x: hidden;
	}
	body:not(.step-cards) {
		overflow-y: hidden;
	}
	.wrapper {
		width: 100%;
		max-width: none;
		/* Keep stable viewport height on iOS Safari */
		height: var(--app-stable-height, 100svh);
		min-height: var(--app-stable-height, 100svh);
		align-items: flex-start;
	}
	body::before {
		display: none;
	}

	/* Vignette is part of the root background-image */
	body::after {
		display: none;
	}

	/* Modal backdrop: use the same bg image, no "dirty blur" */
	.mask {
		/* Blur background behind modals on mobile too */
		background: rgba(8, 18, 25, 0.50);
		backdrop-filter: blur(25px);
		-webkit-backdrop-filter: blur(25px);
	}

	.top-gradient {
		height: 120px;
	}
	.dark-gradient-bottom {
		position: fixed;
		bottom: 0;
		height: 120px;
	}

	.modal-second .modal-win__content {
		/* More top room so icon never overlaps headline */
		padding: 140px 12px 40px;
	}
	.modal-win {
		/* Mobile modal: size from width, keep proportions */
		width: min(92vw, 360px);
		max-height: 70vh;
		height: auto;
		aspect-ratio: 459 / 368;
	}
	.modal-win__content {
		padding: 12px 12px 0px;
		/* Match frame window proportions (desktop inset: 50/70/30/70) */
		inset: 11% 12.5% 7% 12.5%;
		height: auto;
		border: none;
		margin-top: 0;
		/* Reserve space for the absolute button */
		padding-bottom: 80px;
	}

	/* Modal 1 (win): balance icon + text vertically */
	.modal-first .modal-win__content {
		padding-top: 26px;
		gap: 10px;
	}
	.modal-first .modal-win__icon {
		width: 64px;
		height: 64px;
		max-width: 64px;
		max-height: 64px;
	}
	.modal-first .modal-win__content h3 {
		margin-top: 2px;
	}
	.modal-win__btn {
		bottom: -20px;
	}

	/* Bonus modal has more text: keep safe space above button */
	.modal-second .modal-win__content {
		padding-bottom: 110px;
	}

	/* Bonus modal: keep inner gradient strictly inside the frame */
	.modal-second .modal-win__content {
		inset: 11% 12.5% 10% 12.5%;
		padding-top: 140px;
	}
	.modal-second__icon {
		width: 56px;
		top: 12px;
	}
	.modal-win__icon {
		width: 72px;
		height: 72px;
		max-width: 72px;
		max-height: 72px;
	}
	.modal-win__content h3 {
		font-size: 18px;
	}
	.mark {
		min-width: 39px;
	}
	.modal-win__content h2 {
		font-size: 26px;
	}
	.wheel-frame {
		width: min(30.5rem, 76vw);
		height: min(30.5rem, 76vw);
	}
	.wheel-spinner .wheel-bonus-txt {
		font-size: 1.5rem;
	}
	.wheel-spinner .wheel__text {
		/* Push wheel labels closer to rim (less padding = more outward) */
		padding: 0.8rem 0.8rem;
	}

	/* Mobile layout (<=768px) */
	.hero-wrap {
		/* Allow hero to be clipped by wrapper when it goes outside */
		overflow: hidden;
	}
	.hero {
		left: auto;
		right: -18vw;
		bottom: -60px;
		width: min(62vw, 320px);
		aspect-ratio: 21 / 43;
		transform: none;
		z-index: 260;
	}

	/* Decor-1 (Anubis) + Decor-2 (altar): bigger, bottom-left */
	.decor-1 {
		left: -10vw;
		bottom: -6svh;
		width: min(55vw, 340px);
		z-index: 110;
	}
	.decor-2 {
		left: -22vw;
		bottom: -16svh;
		width: min(80vw, 520px);
		z-index: 100;
	}

	/* Decor-3: move lower so it doesn't hide behind wheel */
	.decor-3 {
		top: auto;
		bottom: clamp(490px, 18svh, 480px);
		left: 0;
		width: min(30vw, 170px);
		z-index: 100;
	}

	/* Ниже 769px оставляем только героя и decor-1..3 */
	.decor-4,
	.decor-5,
	.decor-6,
	.decor-7 {
		display: none !important;
	}

	/* On step-cards (Flip me): no wrapper decors on mobile */
	body.step-cards .decor-1,
	body.step-cards .decor-2,
	body.step-cards .decor-3 {
		display: none !important;
	}
	/* Слойовые декоры (8-12) скрываем на всём мобайле */
	.decor-wrap,
	.decor-layer,
	.decor-layer .decor-item {
		display: none !important;
	}

	.front-bg {
		/* Align inner gradient with card frame on mobile */
		/* More inset on sides (avoid leaking under frame), less on bottom (reach frame) */
		/* Use px inset to match the decorative frame geometry on mobile. */
		top: 14px;
		right: 19px;
		bottom: 21px;
		left: 19px;
		border-radius: 24px;
	}
	.front::before {
		/* Keep frame/texture full-size; only inner gradient is inset */
		inset: 0;
		border-radius: 24px;
	}

	/* Back side uses ::after as inner gradient — keep it aligned too */
	.back::after {
		top: 14px;
		right: 19px;
		bottom: 21px;
		left: 19px;
		border-radius: 24px;
	}

	/* TODO: Mobile decor positioning */
}

/* iOS Safari: suppress card seam artifacts on 3D layers */
@supports (-webkit-touch-callout: none) {
	@media (max-width: 768px) {
		.card,
		.card-inner,
		.front,
		.back {
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			-webkit-transform: translateZ(0);
			transform: translateZ(0);
		}

		/* Keep 3D context for reliable rotateY flip on iOS Safari. */
		.card-inner {
			-webkit-transform-style: preserve-3d !important;
			transform-style: preserve-3d !important;
			will-change: transform !important;
		}

		.front,
		.back {
			/* Rasterization hint for iOS clipping + border-radius */
			-webkit-mask-image: -webkit-radial-gradient(white, black);
			mask-image: radial-gradient(white, black);
		}

		.front,
		.back {
			/* Prevent hairline seams on rounded transformed layers */
			outline: 1px solid transparent;
		}

		/* iOS: inset box-shadow on gradient layer can create 1px seams */
		.front-bg {
			box-shadow: none !important;
		}

		/* Keep rotateY for back side, add tiny translateZ for compositing stability */
		.front {
			-webkit-transform: translateZ(0.1px);
			transform: translateZ(0.1px);
		}

		.back {
			-webkit-transform: rotateY(180deg) translateZ(0.1px);
			transform: rotateY(180deg) translateZ(0.1px);
		}

		.front::before,
		.back::before {
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			-webkit-transform: translateZ(0);
			transform: translateZ(0);
			/* Slight overscan to hide iOS hairline seams without changing geometry */
			background-size: 101% 101%;
		}
	}
}

/* -- 600px ------------------------------------------------- */
@media (max-width: 600px) {
	:root {
		--wheel-size: clamp(20rem, 52vw + 3rem, 30.5rem);
	}

	.top-bar {
		justify-content: center;
	}

	.wrapper {
		position: relative;
		align-items: flex-start;
	}

	.axe {
		max-width: none;
		width: 160px;
		aspect-ratio: 300 / 54;
		height: auto;
		margin-bottom: 0;
	}

	.axe img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.lang-switcher_outer {
		position: fixed;
		top: 20px;
		right: 15px;
		z-index: 21;
	}

	.wheel-frame {
		width: min(var(--wheel-size), 95vw);
		height: min(var(--wheel-size), 95vw);
	}
	.wheel-spinner .wheel-bonus-txt {
		font-size: clamp(1rem, 3vw, 1.35rem);
	}
	.wheel-spinner .wheel__text {
		/* Move wheel labels closer to the rim (esp. on small phones) */
		padding: 0.6rem 0.6rem;
	}
	.wheel_btn {
		font-size: clamp(0.65rem, 2.6vw, 1.5rem);
	}

	/* Ниже 769px декор-слой скрыт (см. @media max-width:768px) */

	/* Keep the same mobile hero/decor rules as <=768px */
	.hero {
		right: -22vw;
		bottom: -80px;
		width: min(72vw, 330px);
	}
	.decor-1 {
		left: 0;
		bottom: 0;
		width: min(58vw, 360px);
	}
	.decor-2 {
		left: -28vw;
		bottom: -5svh;
		width: min(82vw, 560px);
	}
	.decor-3 {
		bottom: clamp(320px, 36svh, 400px);
	}

	/* On step-cards: hide hero and decor */
	body.step-cards .hero-wrap,
	body.step-cards .decor-wrap,
	body.step-cards .hero,
	body.step-cards .decor-layer {
		display: none !important;
	}

	.decor-layer {
		z-index: -1;
	}

	/* TODO: Mobile decor positioning for 600px */
}


/* -- 460px ------------------------------------------------- */
@media (max-width: 460px) {
	body.step-cards .game-second {
		padding-bottom: 1.5rem;
	}
	.card {
		width: 100%;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
	body.step-cards .game-container2 .card {
		width: min(100%, 280px);
		max-width: 280px;
		height: 294px;
		margin-left: auto;
		margin-right: auto;
	}
	.decor-1 {
		left: 0;
		bottom: 0;
		width: min(58vw, 360px);
	}
	.decor-2 {
		left: -28vw;
		bottom: -5svh;
		width: min(82vw, 560px);
	}
	.decor-3 {
		bottom: clamp(260px, 28svh, 320px);
	}
	
}

/* -- Very narrow screens (avoid hero overlapping wheel) --- */
@media (max-width: 390px) {
	.hero {
		/* Lower and slightly further right to reduce overlap */
		right: -26vw;
		bottom: -165px;
		width: min(68vw, 290px);
	}
}

/* iPhone SE / very small phones: prevent modal-second content compression */
@media (max-width: 400px) {
	.modal-second .modal-win__content {
		/* On very narrow/short screens modal-second uses lots of vertical
		   space; reduce it and tighten the flex spacing. */
		inset: 11% 12.5% 8% 12.5%;
		padding-top: 92px;
		padding-bottom: 82px;
		gap: 6px;
	}

	.modal-second__icon {
		width: 52px;
		top: 12px;
	}

	.modal-second__line1,
	.modal-second__line2 {
		font-size: 24px;
		margin: 0;
		line-height: 1.1;
	}

	.modal-second__prize,
	.modal-second__spins {
		font-size: 22px;
		margin: 0;
		line-height: 1.05;
	}
}

/* -- Height-based breakpoints ------------------------------ */
@media (max-height: 1200px) and (min-height: 901px) and (min-width: 768px) {
	.wheel-frame {
		width: min(38rem, 78vw);
		height: min(38rem, 78vw);
	}
	.wheel-spinner .wheel-bonus-txt {
		font-size: 2rem;
	}
}

@media (max-height: 1000px) and (min-height: 801px) and (min-width: 768px) {
	.wheel-frame {
		width: min(34rem, 76vw);
		height: min(34rem, 76vw);
	}
}

/* Very short screens (e.g. Nest Hub 1024x600): avoid wheel clipping */
@media (max-height: 650px) and (min-width: 768px) {
	.game-container {
	  margin-top: 10px;
	}
  
	.title {
	  font-size: clamp(22px, 4.2vw, 44px);
	}
  
	.podtitle {
	  font-size: clamp(12px, 2.6vw, 28px);
	  margin-top: 0;
	}
  
	.wheel-frame {
	  margin-top: 0 !important;
	  width: min(26rem, 62vw, 75vh);
	  height: min(26rem, 62vw, 75vh);
	}
	.wheel-spinner .wheel__text {
		padding: 0.8rem 0.8rem; 
		font-size: 1rem;
		line-height: 1.1;
	}
	.wheel-spinner .wheel-bonus-txt {
		font-size: 1.35rem; 
		line-height: 1.1;
	  }

	/* Flip me: cards must fit viewport height without any scrolling */
	body.step-cards .game-container2 {
		margin-top: 10px;
	}
	body.step-cards .game-container2 .card {
		height: min(220px, 42vh);
		min-height: min(220px, 42vh);
		max-height: min(220px, 42vh);
	}
	body.step-cards .game-second {
		/* Keep grid row height in sync with card height */
		grid-template-rows: repeat(2, min(220px, 42vh));
		gap: 16px;
	}

	/* Flip me (inner decor spacing): avoid decor-3 overlapping FLIP ME text */
	body.step-cards .game-container2 .front {
		gap: 14px;
	}
	body.step-cards .game-container2 .front::after {
		top: 22%;
		width: 76px;
		z-index: 1; /* below symbol/text (they use z-index: 2) */
	}

	/* Nest Hub / короткие широкие экраны: анубис и алтарь меньше, чуть правее угла */
	.decor-1 {
		left: 1.5vw;
		bottom: calc(-0.9 * var(--wrapper-pad-y, 0px));
		width: min(22vw, 240px);
	}
	.decor-2 {
		left: -4%;
		bottom: calc(-0.95 * var(--wrapper-pad-y, 0px));
		width: min(30vw, 360px);
	}

	/* Декоры 3–9: один размер, компактно под низкую высоту */
	.decor-3,
	.decor-4,
	.decor-5,
	.decor-6,
	.decor-7,
	.decor-layer .decor-8,
	.decor-layer .decor-9 {
		width: min(8vw, 100px);
		max-width: min(8vw, 100px);
		aspect-ratio: 17 / 16;
	}
	.decor-layer .decor-8 {
		top: 22%;
		right: 6%;
	}
  }
/* Very short narrow screens (iPhone SE etc.) */
@media (max-height: 580px) and (max-width: 400px) {
	.hero {
		bottom: 0;
	}
	.hero img {
		width: min(75vw, 300px);
	}
}