:root{
  --primary-blue: #3d6bff;
  --blue-dark: #141c3f;
  --blue-footer: #141c3f;
  --blue-deep: #0a0e24;
  --blue-navy: #0d1230;
  --text-dark: #ffffff;
  --blue-bright: #3d6bff;
  --blue-royal: #232c5e;
  --blue-mid: #1a2456;
  --blue-accent: #6c5ce7;
  --blue-light-bg: #1a2456;
  --blue-pale: #232c5e;
  --green-cta: #f4d916;
  --green-light: #f4d916;
  --green-neon: #f4d916;
  --green-glow: #3d6bff;
  --orange-accent: #6c5ce7;
  --red-alert: #ff5050;
  --purple: #6c5ce7;
  --grey-text: #9aa3c7;
  --white: #ffffff;
  --body-bg: #0d1230;
  --cta-text: #14213a;
  --font-main: "Jost", sans-serif;
}

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

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

html {
	overflow-x: hidden;
	max-width: 100%;
}

body {
	font-family: var(--font-main);
	font-optical-sizing: auto;
	font-weight: 400;
	background-color: var(--body-bg);
	overflow-x: hidden;
	max-width: 100%;
	padding-top: var(--header-h, 72px);
}


/* ===========================
   HEADER
   =========================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	background: #03181c;
	transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.site-header.is-scrolled {
	background: rgba(25, 41, 71, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 16px;
	display: grid;
	align-items: center;
	gap: 12px;
	grid-template-columns: auto 1fr auto;
}

/* Logo */
.site-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.site-header__logo img {
	width: 120px;
	height: auto;
	display: block;
    margin-bottom: 5px;
}

/* Burger (hidden on desktop) */
.site-header__burger {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid rgba(248, 247, 247, 0.14);
	background: rgba(25, 41, 71, 0.35);
	color: #F8F7F7;
	cursor: pointer;
}

.site-header__burger:active {
	transform: translateY(1px);
}

/* Navigation: UL/LI без классов */
.site-header__nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.site-header__nav a {
	display: inline-flex;
	align-items: center;
	padding: 10px 12px;
	border-radius: 12px;
	text-decoration: none;
	color: rgba(248, 247, 247, 0.92);
	font-weight: 600;
	letter-spacing: 0.2px;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.site-header__nav a:hover {
	background: rgba(25, 41, 71, 0.55);
	color: #F8F7F7;
}

.site-header__nav a:active {
	transform: translateY(1px);
}

/* Dropdown (topic grouping) — use for a header nav item when a site has grown enough
   pages that a few belong under one umbrella (e.g. "Bonus" grouping welcome-bonus,
   no-deposit-bonus, promo-code, VIP, tournaments). Markup pattern:
   <li class="site-header__has-dropdown">
       <button class="site-header__dropbtn" type="button" aria-haspopup="true" aria-expanded="false">
           Bonus
           <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </button>
       <ul class="site-header__submenu">
           <li><a href="/...">...</a></li>
       </ul>
   </li>
   The toggle JS lives in footer.php's header IIFE. NOTE: the submenu/dropbtn rules below are
   deliberately scoped under ".site-header__nav" (not just the bare class) — the submenu is
   itself a <ul> nested inside .site-header__nav, so without that extra scoping the generic
   ".site-header__nav ul" rule above (higher specificity: class+element vs. a single class)
   would win and force the submenu open all the time, ignoring the .is-open toggle. */
.site-header__has-dropdown {
	position: relative;
}

.site-header__dropbtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 0;
	background: none;
	cursor: pointer;
	color: rgba(248, 247, 247, 0.92);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: 0.2px;
	transition: background .2s ease, color .2s ease;
}

.site-header__dropbtn:hover {
	background: rgba(25, 41, 71, 0.55);
	color: #F8F7F7;
}

.site-header__dropbtn svg {
	transition: transform .2s ease;
}

.site-header__has-dropdown.is-open .site-header__dropbtn svg {
	transform: rotate(180deg);
}

.site-header__nav .site-header__submenu {
	list-style: none;
	display: none;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 4px;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	margin-top: 6px;
	padding: 8px;
	background: var(--blue-navy);
	border: 1px solid rgba(248, 247, 247, 0.12);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	z-index: 1200;
}

.site-header__nav .site-header__has-dropdown.is-open .site-header__submenu {
	display: flex;
}

.site-header__nav .site-header__submenu a {
	padding: 10px 12px;
	border-radius: 10px;
	white-space: nowrap;
}

/* Auth */
.site-header__auth {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 14px;
	border-radius: 14px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
	user-select: none;
	white-space: nowrap;
}

.btn--ghost {
	background: rgba(25, 41, 71, 0.25);
	border-color: rgba(248, 247, 247, 0.14);
	color: #F8F7F7;
}

.btn--ghost:hover {
	background: rgba(25, 41, 71, 0.45);
}

.btn--primary {
	background: var(--green-cta);
	color: var(--cta-text);
}

.btn--primary:hover {
	background: rgba(41, 149, 90, 0.92);
}

.btn:active {
	transform: translateY(1px);
}

/* Mobile overlay (hidden by default) */
.site-header__overlay {
	display: none;
}

/* ===========================
   OFFCANVAS MENU HEADER (mobile only)
   =========================== */

.site-header__navhead {
	display: none;
}

.site-header__navtitle span {
	display: block;
	color: #F8F7F7;
	font-weight: 800;
	letter-spacing: .2px;
	font-size: 18px;
	line-height: 1.1;
}

.site-header__navtitle small {
	display: block;
	margin-top: 4px;
	color: rgba(248, 247, 247, 0.65);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
}

.site-header__navactions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.site-header__navgift,
.site-header__close {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	border: 1px solid rgba(248, 247, 247, 0.14);
	background: rgba(25, 41, 71, 0.35);
	color: #F8F7F7;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
}

.site-header__navgift:active,
.site-header__close:active {
	transform: translateY(1px);
}

.site-header__navgift {
	position: relative;
}

.site-header__badge {
	position: absolute;
	top: -6px;
	right: -6px;

	min-width: 18px;
	height: 18px;
	padding: 0 5px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;
	background: #af7237;
	color: #fff;

	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	border: 2px solid rgba(25, 41, 71, 0.92);
	box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* ===========================
   MOBILE HEADER + BURGER MENU
   =========================== */

@media (max-width: 980px) {

	.site-header__burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.site-header__nav {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: min(86vw, 360px);
		background: rgba(25, 41, 71, 0.92);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-right: 1px solid rgba(248, 247, 247, 0.10);
		padding: 14px 14px 18px;

		transform: translateX(-102%);
		transition: transform .25s ease;
		z-index: 1100;
	}

	.site-header__navhead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 10px 14px;
		border-bottom: 1px solid rgba(248, 247, 247, 0.10);
		margin-bottom: 14px;
	}

	.site-header__nav ul {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 10px;
	}

	.site-header__nav a {
		justify-content: space-between;
		background: rgba(25, 41, 71, 0.25);
		border: 1px solid rgba(248, 247, 247, 0.10);
		padding: 12px 14px;
	}

	.site-header__overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
		z-index: 1050;
		border: 0;
	}

	.site-header.is-menu-open .site-header__nav {
		transform: translateX(0);
	}

	.site-header.is-menu-open .site-header__overlay {
		opacity: 1;
		pointer-events: auto;
	}

	.site-header__logo img {
		width: 104px;
	}

	.site-header__dropbtn {
		width: 100%;
		justify-content: space-between;
		background: rgba(25, 41, 71, 0.25);
		border: 1px solid rgba(248, 247, 247, 0.10);
		padding: 12px 14px;
	}

	.site-header__nav .site-header__submenu {
		position: static;
		margin-top: 6px;
		padding: 0 0 0 10px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.site-header__nav .site-header__submenu a {
		background: rgba(25, 41, 71, 0.18);
		border: 1px solid rgba(248, 247, 247, 0.08);
	}
}

@media (max-width: 520px) {
	.btn {
		height: 40px;
		padding: 0 12px;
		border-radius: 12px;
		font-size: 12px;
	}

	.site-header__logo img {
		width: 100px;
	}
}

/* ===========================
   LANGUAGE SELECTOR
   =========================== */

.site-header__lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: rgba(25, 41, 71, 0.30);
	border: 1px solid rgba(248, 247, 247, 0.10);
	border-radius: 12px;
	padding: 4px;
}

.site-header__lang-a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 9px;
	text-decoration: none;
	color: rgba(248, 247, 247, 0.55);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.3px;
	transition: background .2s ease, color .2s ease;
}

.site-header__lang-a:hover {
	color: rgba(248, 247, 247, 0.85);
	background: rgba(25, 41, 71, 0.35);
}

.site-header__lang-a.is-active {
	background: rgba(25, 41, 71, 0.55);
	color: #F8F7F7;
	border: 1px solid rgba(248, 247, 247, 0.12);
}

.site-header__lang-sep {
	color: rgba(248, 247, 247, 0.18);
	font-size: 13px;
	font-weight: 400;
	user-select: none;
}

/* Desktop: показываем desk, прячем mob */
.site-header__lang--desk {
	display: inline-flex;
}

.site-header__lang--mob {
	display: none;
}

/* ===========================
   MOBILE LANGUAGE SELECTOR
   =========================== */

@media (max-width: 980px) {

	/* Desktop скрыть */
	.site-header__lang--desk {
		display: none;
	}

	/* Mob показать внутри offcanvas */
	.site-header__lang--mob {
		display: inline-flex;
		margin-top: 14px;
		align-self: flex-start;
	}
}
	/* ===========================
	   HERO SLIDER
	   =========================== */

	.hero-slider {
		padding: 18px 16px 0;
	}

	.hero-slider__inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	.hero-slider__viewport {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;

		border-radius: 18px;
		overflow-y: hidden;

		box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
		background: #03181c;
	}

	.hero-slider__viewport::-webkit-scrollbar {
		display: none;
	}

	.hero-slider__slide {
		position: relative;
		flex: 0 0 100%;
		min-height: 350px;
		scroll-snap-align: start;
		overflow: hidden;
		background: #03181c;
	}

	.hero-slider__bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		transform: scale(1.02);
	}

	.hero-slider__bg--one {
		background-image: url("../img/magneticslots-bonus-slot-machine-1500.webp");
	}

	.hero-slider__bg--two {
		background-image: url("../img/magneticslots-cashback-25-bet.webp");
	}

	.hero-slider__bg--three {
		background-image: url("../img/magneticslots-jackpot-betting-slots.webp");
	}

	.hero-slider__overlay {
		position: absolute;
		inset: 0;
		background: none;
	}

	.hero-slider__content {
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	/* The background image for each slide already has its own title/subtitle text
	   and a drawn button outline baked in graphically — this CTA is positioned on
	   that outline's center point (see the --one/--two/--three percentages below,
	   measured per slide image) and kept a fixed size on every slide via clamp(),
	   rather than stretched to fill each slide's differently-sized outline box. */
	.hero-slider__cta {
		position: absolute;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		white-space: normal;
		transform: translate(-50%, -50%);

		height: clamp(38px, 9vw, 52px);
		padding: 0 clamp(16px, 4vw, 28px);
		border-radius: 14px;

		background: var(--green-cta);
		color: var(--cta-text);
		font-weight: 800;
		font-size: clamp(13px, 1.7vw, 17px);
		text-decoration: none;
		line-height: 1.15;

		box-shadow: 0 12px 26px rgba(244, 217, 22, 0.28);
		transition: transform .2s ease, filter .2s ease;
	}

	/* AI-EDIT: re-measure these per site if the banner images are replaced — crop
	   each slide's background to find its drawn button outline (if any), take the
	   outline's center point as a % of the full image, and set left/top here.
	   width is per-slide too: match it to that same outline's own width (don't
	   force one shared width — different slides' drawn outlines are different widths). */
	.hero-slider__cta--one {
		left: 12%;
		top: 83%;
		width: 20%;
	}

	.hero-slider__cta--two {
		left: 10%;
		top: 86%;
		width: 18%;
	}

	.hero-slider__cta--three {
		left: 13%;
		top: 82%;
		width: 20%;
	}

	.hero-slider__cta:hover {
		filter: brightness(0.98);
	}

	.hero-slider__cta:active {
		transform: translate(-50%, calc(-50% + 1px));
	}

	.hero-slider__dots {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 12px;
        z-index: 1000;
	}

	.hero-slider__dot {
		width: 10px;
		height: 10px;
		border-radius: 999px;
		border: 0;
		background: rgba(248, 247, 247, 0.25);
		cursor: pointer;
		transition: transform .2s ease, background .2s ease, width .2s ease;
	}

	.hero-slider__dot.is-active {
		width: 26px;
		background: rgba(59, 129, 227, 0.95);
	}

	.hero-slider__dot:active {
		transform: translateY(1px);
	}

    

	@media (max-width: 980px) {
		/* fixed aspect-ratio (matches the mobile crops below, 820:492) instead of a
		   fixed min-height — a fixed px height let background-size:cover crop a
		   different slice of the image at every viewport width, which silently
		   drifted the button away from the drawn outline box baked into the
		   artwork. With the container locked to the image's own ratio there is no
		   crop, so the % positions below map 1:1 to the image at any mobile width. */
		.hero-slider__slide {
			aspect-ratio: 820 / 492;
			min-height: 0;
		}

		/* AI-EDIT: dedicated mobile crops (~1.67:1, matches the aspect-ratio above)
		   instead of stretching the ultra-wide 3.4:1 desktop banners — swap these
		   three filenames (and re-measure the outline centers below) if the banner
		   artwork is ever replaced */
		.hero-slider__bg--one {
			background-image: url("../img/magneticslots-bonus-slot-machine-1500-mobile.webp");
		}

		.hero-slider__bg--two {
			background-image: url("../img/magneticslots-cashback-25-bet-mobile.webp");
		}

		.hero-slider__bg--three {
			background-image: url("../img/magneticslots-jackpot-betting-slots-mobile.webp");
		}

		/* base button look on mobile — width/height are per-slide below, matched to
		   each slide's own drawn outline box */
		.hero-slider__cta {
			height: 44px;
			padding: 4px 10px;
			white-space: normal;
			line-height: 1.15;
		}

		/* re-centered on each mobile image's own drawn outline box — measured
		   directly on the 820×492 mobile crops, left/top are the box's center
		   point, width is ~90% of the box's own width so the button sits inside
		   it with a little breathing room */
		.hero-slider__cta--one {
			left: 19.5%;
			top: 69%;
			width: 30%;
		}

		.hero-slider__cta--two {
			left: 28%;
			top: 75%;
			width: 44%;
		}

		.hero-slider__cta--three {
			left: 26%;
			top: 68%;
			width: 42%;
		}
	}

.promo-windows {
	padding: 14px 16px 0;
}

.promo-windows__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.promo-windows__card {
	position: relative;
	min-height: 110px;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	padding: 18px 18px;

	display: grid;
	align-content: start;
	gap: 6px;

	background: rgba(25, 41, 71, 0.65);
	border: 1px solid rgba(248, 247, 247, 0.10);
	box-shadow: 0 18px 38px rgba(0,0,0,0.18);

	transition: transform .2s ease, filter .2s ease;
}

.promo-windows__card:hover {
	filter: brightness(1.03);
}

.promo-windows__card:active {
	transform: translateY(1px);
}

.promo-windows__title {
	display: block;
	color: #F8F7F7;
	font-weight: 900;
	letter-spacing: 0.6px;
	font-size: 22px;
	line-height: 1.05;
	font-style: italic;
	text-transform: uppercase;

	position: relative;
	z-index: 3;
}

.promo-windows__hint {
	display: block;
	color: rgba(248, 247, 247, 0.72);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.2px;

	position: relative;
	z-index: 3;
}

/* КАРТИНКА КАК ФОН НА ВЕСЬ КАРД */
.promo-windows__card::after {
	content: "";
	position: absolute;
	inset: 0;

	z-index: 1;
	background-repeat: no-repeat;

	/* важно: теперь это реально фон */
	background-size: cover;

	/* фокус вправо — чтобы объект был справа */
	background-position: right center;

	opacity: 0.95;
	pointer-events: none;
}

/* ОВЕРЛЕЙ ПОВЕРХ КАРТИНКИ (чтобы текст читался) */
.promo-windows__card::before {
	content: "";
	position: absolute;
	inset: 0;

	z-index: 2;

	background:
		radial-gradient(420px 180px at 70% 55%, rgba(10, 90, 201, 0.55), transparent 60%),
		linear-gradient(90deg, rgba(25, 41, 71, 0.92) 0%, rgba(25, 41, 71, 0.55) 55%, rgba(25, 41, 71, 0.20) 100%);

	pointer-events: none;
}

/* Картинки */
.promo-windows__card--checkin::after {
	background-image: url("../img/myempire-promo-checkin.avif");
}

.promo-windows__card--vip::after {
	background-image: url("../img/myempire-promo-vip.avif");
}

/* Responsive */
@media (max-width: 900px) {
	.promo-windows__inner {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 520px) {
	.promo-windows__card {
		min-height: 104px;
		padding: 16px 16px;
	}

	.promo-windows__title {
		font-size: 20px;
	}

	.promo-windows__card::after {
		background-size: auto 100%;
		background-position: calc(100% + 55px) 55%;
	}

	.promo-windows__card--checkin::after {
		background-position: calc(100% + 65px) 58%;
	}

	.promo-windows__card--vip::after {
		background-position: calc(100% + 50px) 52%;
	}

	.promo-windows__card::before {
		background:
			linear-gradient(90deg,
				rgba(25, 41, 71, 0.92) 0%,
				rgba(25, 41, 71, 0.62) 55%,
				rgba(25, 41, 71, 0.30) 100%),
			radial-gradient(520px 220px at 78% 55%,
				rgba(10, 90, 201, 0.50),
				transparent 65%);
	}
}

/* ===========================
   TOP SLOTS
   =========================== */

.top-slots {
	padding: 16px 16px 0;
}

.top-slots__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.top-slots__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.top-slots__title {
	display: block;
	color: rgba(20, 33, 58, 0.85);
	font-weight: 800;
	letter-spacing: 0.2px;
	font-size: 18px;
}

.top-slots__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: rgba(20, 33, 58, 0.62);
	font-weight: 700;
	transition: color .2s ease, transform .2s ease;
}

.top-slots__all:hover {
	color: #14a2be;
}

.top-slots__all:active {
	transform: translateY(1px);
}

.top-slots__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
}

.top-slots__track::-webkit-scrollbar {
	height: 8px;
}

.top-slots__track::-webkit-scrollbar-thumb {
	background: rgba(20, 33, 58, 0.22);
	border-radius: 999px;
}

.top-slots__card {
	flex: 0 0 170px;
	scroll-snap-align: start;
	display: grid;
	gap: 0;
}

.top-slots__thumb-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* AI-EDIT: reusable pill button for "play this slot" CTAs under a card's name —
   colors here are generic template defaults, swap the var(--...) values in :root
   for a brand skin rather than editing this rule directly. */
.slot-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	margin-top: 8px;
	padding: 0 12px;
	font-size: 13px;
	text-decoration: none;
	background: var(--blue-accent);
	color: var(--white);
	border: 1px solid var(--blue-royal);
	border-radius: 18px;
	font-weight: 700;
	transition: background 0.2s ease,
	            box-shadow 0.2s ease,
	            transform 0.2s ease;
}

.slot-button:hover {
	background: var(--blue-bright);
	box-shadow: 0 4px 14px rgba(40, 89, 185, 0.25);
	transform: translateY(-2px);
}

.slot-button:focus-visible {
	outline: 3px solid var(--blue-light-bg);
	outline-offset: 3px;
}

.top-slots__thumb {
	position: relative;
	height: 140px;
	border-radius: 18px;
	overflow: hidden;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	box-shadow: 0 16px 34px rgba(0,0,0,0.22);
	transition: transform .2s ease;
}

/* overlay tint */
.top-slots__thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 30, 0.25);
	opacity: 0;
	transition: opacity .2s ease;
}

/* blur layer */
.top-slots__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	opacity: 0;
	transition: opacity .2s ease, backdrop-filter .2s ease;
}

/* Play circle */
.top-slots__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.92);
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: #af7237;
	box-shadow: 0 18px 30px rgba(0,0,0,0.25);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
}

/* triangle inside */
.top-slots__play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	width: 0;
	height: 0;
	border-left: 14px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

/* name */
.top-slots__name {
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 14px;
	background: var(--white);
	border: 1px solid rgba(20, 33, 58, 0.10);
	color: var(--text-dark);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* hover */
.top-slots__card:hover .top-slots__thumb::before {
	opacity: 1;
}

.top-slots__card:hover .top-slots__thumb::after {
	opacity: 1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.top-slots__card:hover .top-slots__play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.top-slots__card:hover .top-slots__thumb {
	transform: translateY(-2px);
}

.top-slots__card:active .top-slots__thumb {
	transform: translateY(1px);
}

/* touch */
@media (hover: none) {
	.top-slots__card:active .top-slots__thumb::before {
		opacity: 1;
	}

	.top-slots__card:active .top-slots__thumb::after {
		opacity: 1;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.top-slots__card:active .top-slots__play {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.top-slots__thumb {
	isolation: isolate;
}

.top-slots__thumb::before,
.top-slots__thumb::after {
	z-index: 1;
}

.top-slots__play {
	z-index: 2;
}

/* ===========================
   CONTENT SECTION (ONLY main has class)
   =========================== */

main.content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 16px 24px;

	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(20, 33, 58, 0.10);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(20,33,58,0.12);
	color: rgba(20, 33, 58, 0.88);
}

main.content > * + * {
	margin-top: 14px;
}

main.content h1 {
	font-size: 34px;
	line-height: 1.08;
	letter-spacing: 0.2px;
	font-weight: 900;
	color: #0a1f24;
}

main.content h2 {
	margin-top: 18px;
	margin-bottom: 18px;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: 0.2px;
	font-weight: 900;
	color: #0a1f24;
}

main.content h3 {
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.2;
	font-weight: 900;
	color: rgba(20, 33, 58, 0.90);
}

main.content p {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(20, 33, 58, 0.78);
}

main.content img {
	max-width: 100%;
    margin: 0 auto;
	height: auto;
	display: block;
	border-radius: 16px;
	border: 1px solid rgba(20, 33, 58, 0.12);
	box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

main.content blockquote {
	padding: 14px 14px;
	border-radius: 16px;

	background:
		linear-gradient(90deg, rgba(66, 114, 183, 0.12) 0%, rgba(51, 179, 79, 0.14) 100%);
	border: 1px solid rgba(20, 33, 58, 0.12);
	border-left: 4px solid #af7237;

	color: rgba(20, 33, 58, 0.85);
	font-weight: 600;
	line-height: 1.6;
}

/* TABLE: horizontal scroll when content is wide */
main.content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;

	/* скролл */
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;

	border-radius: 16px;
	border: 1px solid rgba(20, 33, 58, 0.10);
	background: rgba(235, 241, 255, 0.6);
}

/* thead/tbody НЕ ДЕЛИМ на разные "таблицы" */
main.content thead {
	display: table-header-group;
}

main.content tbody {
	display: table-row-group;
}

main.content tr {
	display: table-row;
}

main.content th,
main.content td {
	padding: 12px 12px;
	text-align: left;
	white-space: nowrap;

	border-bottom: 1px solid rgba(20, 33, 58, 0.10);
	color: rgba(20, 33, 58, 0.82);
	font-size: 14px;
}

main.content th {
	font-weight: 900;
	color: #0a1f24;
	background: rgba(235, 241, 255, 0.8);
}

main.content tbody tr:hover td {
	background: rgba(66, 114, 183, 0.08);
}

/* MOBILE: чтобы на узких экранах был аккуратный горизонтальный скролл */
@media (max-width: 900px) {
	main.content table th,
	main.content table td {
		min-width: 150px;
	}
}

/* DESKTOP: таблица растягивается на 100%, но скролл остаётся auto */
@media (min-width: 901px) {
	main.content table th,
	main.content table td {
		min-width: 0;
	}

	/* если контент широкий — table расширится внутри display:block и появится скролл */
	main.content table {
		min-width: 100%;
	}
}

main.content table::-webkit-scrollbar {
	height: 8px;
}

main.content table::-webkit-scrollbar-thumb {
	background: rgba(20, 33, 58, 0.25);
	border-radius: 999px;
}
/* Lists */
main.content ul,
main.content ol {
	padding-left: 18px;
	color: rgba(20, 33, 58, 0.82);
}

main.content li {
	margin-top: 8px;
	line-height: 1.6;
}

main.content li::marker {
	color: #af7237;
	font-weight: 900;
}

/* Mobile tweaks */
@media (max-width: 520px) {
	main.content {
		padding: 18px 18px 22px;
	}

	main.content h1 {
		font-size: 28px;
	}

	main.content h2 {
		font-size: 21px;
	}
}

/* ===========================
   FOOTER
   =========================== */

.site-footer {
	margin-top: 22px;
	background: rgba(25, 41, 71, 0.92);
	border-top: 1px solid rgba(248, 247, 247, 0.10);
	box-shadow: 0 -18px 50px rgba(0,0,0,0.22);
}

.site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 16px 16px;
	color: rgba(248, 247, 247, 0.86);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(248, 247, 247, 0.10);
}

.site-footer__brand p {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.65;
	color: rgba(248, 247, 247, 0.78);
}

.site-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.site-footer__logo img {
	width: 64px;
	height: auto;
	display: block;
	filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}

.site-footer__col span {
	display: block;
	color: rgba(248, 247, 247, 0.92);
	font-weight: 900;
	letter-spacing: 0.18em;
	font-size: 12px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.site-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.site-footer__col a {
	color: var(--blue-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 700;
	transition: color .2s ease, transform .2s ease;
}

.site-footer__col a:hover {
	color: var(--blue-pale);
}

/* generic fallback so any other link inside <footer> (e.g. the brand-blurb paragraph,
   if one is ever added) matches the same look without needing its own rule */
footer a,
footer a:visited {
	color: var(--blue-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

footer a:hover {
	color: var(--blue-pale);
}

footer a:focus-visible {
	outline: 2px solid var(--blue-pale);
	outline-offset: 3px;
}

.site-footer__col em {
	color: rgba(248, 247, 247, 0.65);
	font-style: normal;
	font-weight: 600;
}

.site-footer__col b {
	color: rgba(248, 247, 247, 0.92);
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
}

.site-footer__note {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.site-footer__age {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #bd130f;
	color: #fff;
	font-weight: 900;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25);
	border: 2px solid rgba(248, 247, 247, 0.10);
}

.site-footer__note p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(248, 247, 247, 0.74);
	max-width: 720px;
}

.site-footer__copy {
	color: rgba(248, 247, 247, 0.70);
	font-weight: 700;
	white-space: nowrap;
}

/* ===========================
   MOBILE
   =========================== */

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.site-footer__logo {
		justify-content: center;
	}

	.site-footer__col ul {
		justify-items: center;
	}

	.site-footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	.site-footer__note {
		flex-direction: column;
	}

	.site-footer__note p {
		max-width: 520px;
	}
}

@media (max-width: 900px) {
    .site-header__nav {
        background: rgba(25, 41, 71, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        isolation: isolate; /* важно для слоёв */
    }

    .site-header__nav::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(25, 41, 71, 0.92); /* плотная подложка */
    }
}

@media (min-width:901px) {
    main.content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;

	/* таблица остаётся таблицей */
	display: table;

	/* горизонтальный скролл */
	overflow-x: auto;
	overflow-y: hidden;

	border-radius: 16px;
	border: 1px solid rgba(20, 33, 58, 0.10);
	background: rgba(235, 241, 255, 0.6);

	/* ключевая строка */
	table-layout: auto;
}

/* строки */
main.content th,
main.content td {
	padding: 12px;
	text-align: left;
	white-space: wrap;

	border-bottom: 1px solid rgba(20, 33, 58, 0.10);
	color: rgba(20, 33, 58, 0.82);
	font-size: 14px;
}

main.content th {
	font-weight: 900;
	color: #0a1f24;
	background: rgba(235, 241, 255, 0.8);
}

main.content tbody tr:hover td {
	background: rgba(66, 114, 183, 0.08);
}
}

/* build:1ec1fce5e12d7d90 */