/* ==========================================================================
   slotoking_01_vst — template 56
   Clone of slotoking.ua (Wayback snapshot 2023-01-26), localised for uk.
   url() paths stay relative to this file: the dashboard preview rewrites
   src/href in the HTML only, never url() inside CSS.
   ========================================================================== */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('roboto-cyr.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('roboto-lat.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Display face. The source sets brand text in Halvar Breitschrift, which is a
   licensed webfont — Montserrat 800 is the closest metric-compatible stand-in
   that also carries Cyrillic. */
@font-face {
	font-family: 'KingDisplay';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('montserrat-cyr.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'KingDisplay';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('montserrat-lat.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--red: #c12838;
	--red-2: #d20032;
	--yellow: #ffe600;
	--ink: #4e4d5e;
	--ink-soft: #6f6e80;
	--line: #e4e4ea;
	--purple: #6764e5;
	--purple-2: #523bcb;
	--purple-text: #6661e4;
	--dark: #41414c;
	--dark-2: #4a4a56;
	--green: #45b649;
	--cyan: #39bdcf;
	--pink: #d967ec;
	--wrap: 1290px;
	--top-h: 50px;
	--bar-h: 64px;
	--radius: 12px;
	--radius-sm: 4px;
	color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	padding: var(--top-h) 0 var(--bar-h);
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
button, a, input { font: inherit; }
img { border-style: none; max-width: 100%; }
button { border: 0; background: none; cursor: pointer; color: inherit; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 16px;
}

.brand-text {
	font-family: KingDisplay, 'Arial Black', Arial, sans-serif;
	font-weight: 800;
	letter-spacing: .01em;
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- buttons ------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 5px 19px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	transition: filter .15s ease, background-color .15s ease;
}
.btn:hover { filter: brightness(.94); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--ghost { background: transparent; color: #fff; }
.btn--red { background: var(--red); color: #fff; }
.btn--sm { height: 32px; padding: 4px 14px; font-size: 14px; }
.btn--lg { height: 52px; padding: 8px 28px; font-size: 18px; }
.btn--stack { flex-direction: column; gap: 0; line-height: 1.15; }
.btn--stack small { font-weight: 400; font-size: 12px; }

/* --- top bar ------------------------------------------------------------ */

.topbar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	height: var(--top-h);
	background: var(--red);
}
.topbar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.topbar__logo { display: flex; }
.topbar__logo img { display: block; width: 162px; height: 28px; }
.topbar__search {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
}
.topbar__search svg { display: block; }

/* --- bottom navigation panel -------------------------------------------- */

.navbar {
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	height: var(--bar-h);
	background: var(--red);
	color: #fff;
}
.navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 100%;
}
.navbar__left { display: flex; align-items: center; gap: 6px; }
.navbar__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: #fff;
}
.navbar__promo { display: flex; align-items: center; gap: 2px; }
.navbar__promo-item { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.navbar__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--yellow);
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.navbar__right { display: flex; align-items: center; gap: 8px; }

/* --- drawer menu -------------------------------------------------------- */

.overlay {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(30, 30, 40, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.overlay.open { opacity: 1; visibility: visible; }

.drawer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	width: 300px;
	max-width: 88vw;
	height: 100%;
	background: #fff;
	box-shadow: 0 0 24px rgba(0, 0, 0, .25);
	transform: translateX(-100%);
	transition: transform .25s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.drawer.open { transform: none; }
.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--top-h);
	padding: 0 12px 0 16px;
	background: var(--red);
	flex: 0 0 auto;
}
.drawer__head img { width: 148px; height: 26px; }
.drawer__close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 28px;
	line-height: 1;
}
.drawer__auth { display: flex; gap: 8px; padding: 16px; }
.drawer__auth .btn { flex: 1 1 50%; }
.drawer__auth .btn--ghost { color: var(--ink); border: 1px solid var(--line); }

.menu-list { list-style: none; margin: 0; padding: 0 0 16px; }
.menu-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 500;
}
.menu-list a:hover { background: #f6f6f9; }
.menu-list .menu-list__icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; }
.menu-list__count {
	margin-left: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}
.drawer__support {
	margin-top: auto;
	padding: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.drawer__support a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--red);
}

/* --- hero rail ----------------------------------------------------------
   The promo art carries its own purple gradient (#6563e3 at the top), so every
   slide plate is mixed from the same family and the art is masked into it —
   otherwise the picture shows a hard vertical seam against the plate. */

.hero { margin: 16px 0 0; }
.hero__rail {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.hero__rail::-webkit-scrollbar { display: none; }
.hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 min(1024px, 88%);
	min-height: 320px;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(178deg, var(--slide-top, #6563e3), var(--slide-bottom, #4a35c2));
	isolation: isolate;
}
/* soft light behind the character, so the art sits in the plate, not on it */
.hero__slide::after {
	content: '';
	position: absolute;
	right: 6%;
	bottom: -18%;
	width: 52%;
	padding-top: 52%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
}
.hero__slide--b { --slide-top: #6563e3; --slide-bottom: #3f2fa8; }
.hero__slide--c { --slide-top: #7b5be6; --slide-bottom: #4326b8; }
.hero__copy {
	position: relative;
	z-index: 3;
	max-width: 56%;
	padding: 32px 28px;
	color: #fff;
}
.hero__kicker {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 11px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .18);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.hero__title {
	display: block;
	margin: 0 0 10px;
	font-size: clamp(24px, 4vw, 40px);
	line-height: 1.08;
	color: var(--yellow);
	text-shadow: 0 3px 14px rgba(38, 20, 100, .45);
}
.hero__text { margin: 0 0 20px; font-size: 16px; line-height: 1.35; max-width: 26em; }
.hero__art {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 46%;
	max-width: 400px;
	height: 100%;
	object-fit: cover;
	object-position: left bottom;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 34%), linear-gradient(0deg, rgba(0, 0, 0, 0) 0, #000 12%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 34%), linear-gradient(0deg, rgba(0, 0, 0, 0) 0, #000 12%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.hero__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.hero__dots button {
	width: 28px;
	height: 6px;
	border-radius: 3px;
	background: #d9d9e2;
	transition: background-color .2s ease, width .2s ease;
}
.hero__dots button.active { width: 42px; background: var(--red); }

.strips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 16px;
}
.strip {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 62px;
	padding: 10px 16px;
	border-radius: var(--radius);
	background: #eef0f6;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}
.strip img { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.strip span { display: block; }
.strip small { display: block; font-weight: 400; color: var(--ink-soft); }

/* --- jackpot sum banner ------------------------------------------------- */

.jackpot-banner {
	position: relative;
	margin: 24px 0 0;
	padding: 22px 16px 26px;
	border-radius: var(--radius);
	background: linear-gradient(var(--purple), var(--purple-2));
	color: #fff;
	text-align: center;
	overflow: hidden;
}
.jackpot-banner__coins {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 300px;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}
.jackpot-banner__coins--left { left: 0; }
.jackpot-banner__coins--right { right: 0; }
.jackpot-banner__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.jackpot-banner__value {
	display: block;
	margin: 8px 0 6px;
	font-size: clamp(34px, 7vw, 76px);
	line-height: 1.05;
	color: var(--yellow);
	word-break: break-word;
}
.jackpot-banner__note { margin: 0; font-size: 15px; }

/* --- section heads ------------------------------------------------------ */

.section { margin-top: 40px; }
.section__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}
.section__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	color: var(--ink);
}
.section__badge {
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	background: #f5a623;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}
.section__link {
	margin-left: auto;
	color: var(--red);
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}
.section__arrows { display: flex; gap: 8px; }
.section__arrows button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--red-2);
	color: #fff;
	font-size: 20px;
	line-height: 1;
}
.section__arrows button:hover { background: var(--red); }
.section__arrows button[disabled] { background: #ecb3bd; cursor: default; }

/* --- game rails --------------------------------------------------------- */

.rail {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 6px;
}
.rail::-webkit-scrollbar { display: none; }

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 232px;
	width: 232px;
}
.tile__wrap {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 250 / 280;
	background: #eef0f6;
}
.tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__badges {
	position: absolute;
	inset: 8px 8px auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
	pointer-events: none;
}
.pill {
	padding: 3px 9px;
	border-radius: 11px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	line-height: 16px;
	white-space: nowrap;
}
.pill--new { background: var(--green); }
.pill--rtp { background: var(--cyan); }
.pill--hot { background: var(--red-2); }
.pill--jackpot { background: var(--pink); }
.tile__over {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px;
	background: linear-gradient(rgba(30, 28, 60, 0), rgba(30, 28, 60, .88));
	opacity: 0;
	transition: opacity .18s ease;
}
.tile:hover .tile__over, .tile:focus-within .tile__over { opacity: 1; }
.tile__name {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-align: center;
}
.tile__provider { font-size: 12px; color: #d5d4e6; }
/* --- content plates ------------------------------------------------------ */

.plate { margin-top: 48px; padding: 40px 0 8px; }
.plate--dark { background: var(--dark); color: #fff; }
.plate--light { background: #fff; color: var(--ink); margin-top: 24px; }
.plate--light .prose { padding-bottom: 8px; }

.prose { font-size: 16px; line-height: 1.6; }
.prose h1 {
	margin: 0 0 24px;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
}
.prose h2 {
	margin: 32px 0 14px;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}
.prose h3 { margin: 26px 0 12px; font-size: clamp(19px, 2.4vw, 22px); font-weight: 700; }
.prose h4 { margin: 22px 0 10px; font-size: 18px; font-weight: 700; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--red); font-weight: 700; text-decoration: underline; }
.prose a.btn { color: var(--ink); text-decoration: none; }
.plate--dark .prose a { color: var(--yellow); }
.prose img {
	display: block;
	max-width: 100%;
	height: auto;
	/* Centred: a narrow screenshot must not hug the left edge. */
	margin: 20px auto;
	border-radius: var(--radius);
}
.prose figure { margin: 20px 0; }
.prose figcaption { font-size: 14px; opacity: .8; }
.prose blockquote {
	margin: 20px 0;
	padding: 14px 18px;
	border-left: 4px solid var(--yellow);
	background: rgba(255, 230, 0, .08);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.plate--light .prose blockquote { background: #fff9d6; }
.prose table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	background: #fff;
	color: var(--ink);
	border-radius: var(--radius);
	overflow: hidden;
}
.prose .table-scroll { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
/* Size a wide table to its content: a flat min-width squeezes every column to
   the same narrow measure and each cell wraps into a ragged stack. */
.prose .table-scroll table { width: max-content; min-width: 100%; margin: 0; }
.prose .table-scroll th { white-space: nowrap; }
.prose .table-scroll td { max-width: 38ch; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { background: #f2f2f6; font-weight: 700; }
.prose tr:last-child td { border-bottom: 0; }
.prose details {
	margin: 0 0 10px;
	padding: 12px 16px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .06);
}
.plate--light .prose details { background: #f6f6f9; }
.prose summary { font-weight: 700; cursor: pointer; }
.prose hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .18); margin: 28px 0; }
.plate--light .prose hr { border-top: 1px solid var(--line); }

/* --- toplist ------------------------------------------------------------- */

.toplist { display: grid; gap: 16px; margin: 24px 0 8px; }
.toplist__row {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border-radius: var(--radius);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
	background: #fff;
}
.toplist__rank {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.toplist__text { font-size: 16px; line-height: 1.4; }

/* --- review -------------------------------------------------------------- */

.review { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.review__card {
	position: sticky;
	top: calc(var(--top-h) + 16px);
	padding: 22px;
	border-radius: var(--radius);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
	background: #fff;
	text-align: center;
}
.review__logo {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: 0 auto 18px;
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	background: var(--red);
}
.review__facts { display: grid; gap: 10px; margin-bottom: 18px; text-align: left; }
.review__fact { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.review__fact span:first-child { color: var(--ink-soft); }
.review__fact span:last-child { font-weight: 700; text-align: right; }
.review__card .btn { width: 100%; }

/* --- landing ------------------------------------------------------------- */

.landing-hero {
	margin-top: 16px;
	padding: 44px 24px;
	border-radius: var(--radius);
	background: linear-gradient(178deg, #6563e3, #4a35c2);
	color: #fff;
	text-align: center;
}
.landing-hero__kicker {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 11px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .18);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.landing-hero__title { display: block; margin: 0 0 10px; font-size: clamp(26px, 4.5vw, 44px); line-height: 1.1; color: var(--yellow); }
.landing-hero p { margin: 0 0 22px; font-size: 17px; }
.landing-cta { display: flex; justify-content: center; margin: 32px 0 8px; }

/* --- footer -------------------------------------------------------------- */

.footer { background: var(--dark); color: #fff; padding: 8px 0 24px; }
.footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 32px 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.footer__title { display: block; margin-bottom: 14px; font-size: 16px; font-weight: 700; }
.footer__nav { display: grid; gap: 10px; }
.footer__nav a { font-size: 14px; color: #fff; opacity: .88; }
.footer__nav a:hover { opacity: 1; text-decoration: underline; }
.footer__aware { font-size: 14px; }
.footer__aware p { margin: 0 0 12px; opacity: .88; line-height: 1.45; }
.footer__icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.footer__pay {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	border-radius: var(--radius-sm);
	background: #fff;
}
.footer__pay img { display: block; height: 22px; width: auto; }
.footer__age {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}
.footer__ssl {
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: var(--radius-sm);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}
.footer__bottom { padding-top: 20px; text-align: center; font-size: 14px; }
.footer__bottom p { margin: 0 0 6px; opacity: .88; }

/* --- floating buttons ---------------------------------------------------- */

.floats {
	position: fixed;
	right: 16px;
	bottom: calc(var(--bar-h) + 16px);
	z-index: 55;
	display: grid;
	gap: 12px;
}
.floats a {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--ink);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.floats img { width: 28px; height: 28px; }

/* --- breakpoints ---------------------------------------------------------- */

@media (max-width: 1023px) {
	.review { grid-template-columns: 1fr; }
	.review__card { position: static; }
	.footer__cols { grid-template-columns: repeat(2, 1fr); }
	.strips { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 767px) {
	:root { --top-h: 48px; }
	.tile { flex: 0 0 148px; width: 148px; }
	.rail { gap: 10px; }
	.wrap { padding: 0 12px; }
	.hero__slide { flex: 0 0 88%; min-height: 210px; }
	.hero__copy { max-width: 62%; padding: 18px 16px; }
	.hero__art { width: 46%; }
	.hero__rail { gap: 12px; }
	.section { margin-top: 28px; }
	.section__arrows { display: none; }
	.section__link { font-size: 15px; }
	.plate { padding: 28px 0 8px; }
	/* the source drops the coin art on phones — it would sit under the sum */
	.jackpot-banner__coins { display: none; }
	.footer__cols { grid-template-columns: 1fr; gap: 20px; }
	.floats a { width: 52px; height: 52px; }
	.navbar__right .btn { height: 36px; padding: 4px 12px; font-size: 14px; }
}


/* --- language switcher --------------------------------------------------- */
/* One component, two surfaces: the crimson top bar at every width, and the
   white drawer, where a phone visitor looks for it once the menu is open. */
.language { position: relative; }
.language--hdr { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.lang-btn b { font-size: 11px; transition: transform .2s ease; }
.language.open .lang-btn b { transform: rotate(180deg); }
.lang-code { letter-spacing: .04em; }
.language--hdr .lang-full { display: none; }
.lang-pop {
	position: absolute;
	z-index: 90;
	top: calc(100% + 6px);
	left: 0;
	min-width: 168px;
	padding: 6px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	display: none;
}
.language.open .lang-pop { display: block; }
.lang-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 4px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
}
.lang-item:hover { background: #f6f6f9; }
.lang-item .lang-code {
	display: grid;
	place-items: center;
	width: 30px;
	height: 22px;
	border-radius: 3px;
	background: #f2f2f6;
	font-size: 11px;
	font-weight: 700;
}
.lang-item.active { color: var(--red); font-weight: 700; }
.lang-item.active .lang-code { background: var(--red); color: #fff; }
/* The drawer is white, so the header's translucent-on-crimson button would be
   invisible there — it gets a bordered light variant instead. */
.language--drawer { padding: 0 16px 16px; }
.language--drawer .lang-btn {
	width: 100%;
	justify-content: flex-start;
	height: 40px;
	background: #f2f2f6;
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 14px;
}
.language--drawer .lang-btn b { margin-left: auto; }
.language--drawer .lang-pop { left: 16px; right: 16px; min-width: 0; }

/* --- site pages in the drawer -------------------------------------------- */

.drawer__pages { padding: 4px 0 16px; border-top: 1px solid var(--line); }
.drawer__title {
	display: block;
	padding: 14px 16px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
}
.pages-list a { display: block; padding: 9px 16px; font-size: 15px; font-weight: 500; }
.pages-list a:hover { background: #f6f6f9; }
.pages-list a[aria-current="page"] { color: var(--red); }
.pages-list small { display: block; font-size: 12px; font-weight: 400; opacity: .65; }