/*
 * mellstroy_1 (template 49) — stylesheet.
 *
 * Design language taken from our own Mellstroy property: a near-black violet
 * field, rounded #241237 surfaces, one mint CTA (#31e99a), violet accents and
 * Inter at heavy weights. Reworked around a persistent navigation sidebar and
 * card blocks that turn into swipe rails instead of shrinking on a phone.
 *
 * Layout map:
 *   .ml-shell  → .ml-rail (fixed sidebar / off-canvas drawer) + .ml-col
 *   .ml-col    → .ml-top (sticky bar) + .ml-main + .ml-foot
 *   .ml-wrap   → 1320px content measure
 *
 * Breakpoints: 1180 (rail becomes a drawer), 1020 (aside cards go 2-up), 900
 * (sticky action bar appears), 720 (strips become rails), 430.
 */

:root {
	--ml-bg: #12071d;
	--ml-bg-2: #180a26;
	--ml-surface: #241237;
	--ml-surface-2: #2d1941;
	--ml-surface-3: #3a2154;
	--ml-line: rgba(255, 255, 255, .09);
	--ml-line-2: rgba(255, 255, 255, .14);
	--ml-text: #ffffff;
	--ml-muted: #b9abc7;
	--ml-muted-2: #8d84a0;
	--ml-accent: #31e99a;
	--ml-accent-ink: #06180f;
	--ml-violet: #8b35ec;
	--ml-violet-2: #ac24fa;
	--ml-gold: #ffc24b;
	--ml-rose: #ff5d8f;
	--ml-blue: #3d7bff;
	--ml-r-sm: 12px;
	--ml-r-md: 18px;
	--ml-r-lg: 24px;
	--ml-r-xl: 30px;
	--ml-rail-w: 256px;
	--ml-shadow: 0 22px 60px rgba(0, 0, 0, .45);
	--ml-ease: .22s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: hidden;
	color: var(--ml-text);
	background:
		radial-gradient(1100px 620px at 8% -6%, rgba(139, 53, 236, .22), transparent 70%),
		radial-gradient(900px 520px at 96% 4%, rgba(49, 233, 154, .09), transparent 68%),
		var(--ml-bg);
	background-attachment: fixed;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }

:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--ml-accent);
	outline-offset: 3px;
}

.ml-ico { display: block; flex: none; }

.ml-skip {
	position: fixed;
	z-index: 1200;
	top: 12px;
	left: 12px;
	padding: 12px 18px;
	border-radius: var(--ml-r-sm);
	color: var(--ml-accent-ink);
	background: var(--ml-accent);
	transform: translateY(-160%);
	transition: transform var(--ml-ease);
}
.ml-skip:focus { transform: none; }

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

.ml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border: 0;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
	transition: transform var(--ml-ease), filter var(--ml-ease), background var(--ml-ease);
}
.ml-btn:hover { transform: translateY(-2px); }

.ml-btn--primary {
	color: var(--ml-accent-ink);
	background: linear-gradient(135deg, #4ff0ab, var(--ml-accent));
	box-shadow: 0 12px 30px rgba(49, 233, 154, .22);
}
.ml-btn--primary:hover { filter: brightness(1.06); }

.ml-btn--ghost {
	color: #fff;
	background: rgba(255, 255, 255, .09);
	box-shadow: inset 0 0 0 1px var(--ml-line-2);
}
.ml-btn--ghost:hover { background: rgba(255, 255, 255, .16); }

.ml-btn--lg { padding: 16px 28px; font-size: 16px; border-radius: 16px; }
.ml-btn--block { display: flex; width: 100%; }

.ml-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: 100px;
	color: var(--ml-muted);
	background: rgba(255, 255, 255, .05);
	box-shadow: inset 0 0 0 1px var(--ml-line);
	font-size: 14px;
	font-weight: 700;
	transition: color var(--ml-ease), background var(--ml-ease);
}
.ml-chip:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.ml-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 100px;
	color: var(--ml-muted);
	background: var(--ml-surface-2);
	font-size: 14px;
	font-weight: 700;
	transition: color var(--ml-ease), background var(--ml-ease);
}
.ml-pill:hover { color: #fff; background: var(--ml-surface-3); }

.ml-arrow {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	color: var(--ml-muted);
	background: var(--ml-surface-2);
	transition: color var(--ml-ease), background var(--ml-ease), opacity var(--ml-ease);
}
.ml-arrow:hover { color: #fff; background: var(--ml-surface-3); }
.ml-arrow[disabled] { opacity: .32; cursor: default; }
.ml-arrow[disabled]:hover { color: var(--ml-muted); background: var(--ml-surface-2); }

.ml-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ml-accent);
	box-shadow: 0 0 12px var(--ml-accent);
}

/* ------------------------------------------------------------------ shell */

.ml-shell { min-height: 100vh; }

.ml-mark { display: inline-flex; align-items: center; }
.ml-mark__img { display: block; width: auto; }
.ml-mark__text { display: inline-flex; align-items: center; gap: 10px; }
.ml-mark__glyph { display: block; }
.ml-mark__word {
	font-size: calc(var(--ml-mark-h, 32px) * .62);
	font-weight: 900;
	letter-spacing: .4px;
	text-transform: uppercase;
	white-space: nowrap;
}
.ml-mark__word b { color: var(--ml-accent); font-weight: 900; }

/* --------------------------------------------------------------- sidebar */

.ml-rail {
	position: fixed;
	z-index: 950;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: var(--ml-rail-w);
	padding: 20px 16px 24px;
	border-right: 1px solid var(--ml-line);
	background: linear-gradient(180deg, #1d0e2d, var(--ml-bg) 62%);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ml-rail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 6px;
}

.ml-rail__close {
	display: none;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 11px;
	color: var(--ml-muted);
	background: rgba(255, 255, 255, .07);
}

.ml-rail__nav { display: grid; gap: 4px; }

.ml-nav__i {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 14px;
	border-radius: 14px;
	color: var(--ml-muted);
	font-size: 15px;
	font-weight: 700;
	transition: color var(--ml-ease), background var(--ml-ease);
}
.ml-nav__i:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.ml-nav__ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 11px;
	background: rgba(255, 255, 255, .06);
	transition: background var(--ml-ease), color var(--ml-ease);
}
.ml-nav__i:hover .ml-nav__ico { background: rgba(172, 36, 250, .3); }

.ml-nav__i.is-active {
	color: #fff;
	background: linear-gradient(90deg, rgba(139, 53, 236, .42), rgba(139, 53, 236, .06));
	box-shadow: inset 0 0 0 1px rgba(172, 36, 250, .34);
}
.ml-nav__i.is-active .ml-nav__ico { color: #fff; background: linear-gradient(135deg, var(--ml-violet-2), #5a048d); }

.ml-rail__promo {
	display: grid;
	gap: 7px;
	margin-top: auto;
	padding: 18px 16px 16px;
	border-radius: var(--ml-r-lg);
	background:
		radial-gradient(120% 90% at 100% 0, rgba(49, 233, 154, .16), transparent 60%),
		linear-gradient(160deg, #43156b, #24103a);
	box-shadow: inset 0 0 0 1px var(--ml-line-2);
}
.ml-rail__promo-k {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ml-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.ml-rail__promo-s { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.ml-rail__promo-n { margin-bottom: 6px; color: var(--ml-muted); font-size: 13px; font-weight: 600; line-height: 1.4; }

.ml-rail__help {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	font-size: 14px;
	font-weight: 700;
}
.ml-rail__help:hover { background: rgba(255, 255, 255, .09); }

.ml-scrim {
	position: fixed;
	z-index: 940;
	inset: 0;
	background: rgba(6, 2, 11, .68);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--ml-ease);
}
.ml-scrim.is-on { opacity: 1; }

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

.ml-col {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-left: var(--ml-rail-w);
}

.ml-top {
	position: sticky;
	z-index: 900;
	top: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 30px;
	border-bottom: 1px solid var(--ml-line);
	background: rgba(18, 7, 29, .84);
	backdrop-filter: blur(16px);
}

.ml-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 0;
	border-radius: 12px;
	background: var(--ml-surface-2);
}
.ml-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform var(--ml-ease), opacity var(--ml-ease);
}
.ml-burger.is-on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ml-burger.is-on span:nth-child(2) { opacity: 0; }
.ml-burger.is-on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ml-top__mark { display: none; }
.ml-top__chips { display: flex; gap: 8px; }
.ml-top__auth { display: flex; gap: 10px; margin-left: auto; }

/* ----------------------------------------------------------------- main */

.ml-main { flex: 1; padding: 26px 30px 64px; }
.ml-wrap { width: min(1320px, 100%); margin: 0 auto; }
.ml-sec { margin-top: 38px; }

.ml-shead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.ml-shead__t {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.3px;
}
.ml-shead__ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	color: var(--ml-accent);
	background: rgba(49, 233, 154, .12);
}
.ml-shead__ctl { display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------- carousel */

.ml-hero { position: relative; }

.ml-hero__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--ml-r-xl);
}
.ml-hero__track::-webkit-scrollbar { display: none; }

.ml-slide {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 318px;
	/* The side padding clears the overlaid arrows (46px + 16px offset), so a
	   long headline never runs under them. */
	padding: 40px 78px;
	border-radius: var(--ml-r-xl);
	scroll-snap-align: start;
	overflow: hidden;
	isolation: isolate;
}
/* Promo artwork is the source property's own banner set. The subject sits in
   the right half of every banner, so the image is pinned right and each slide
   keeps the source's left-to-right scrim to hold the copy legible. */
.ml-slide--a,
.ml-slide--b {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
}
.ml-slide--a { background-image: linear-gradient(90deg, rgba(42, 8, 73, .92) 0%, rgba(42, 8, 73, .4) 52%, rgba(42, 8, 73, .06) 100%), url("../img/promo/promo-1.webp"); }
.ml-slide--b { background-image: linear-gradient(90deg, rgba(4, 19, 70, .92) 0%, rgba(4, 19, 70, .4) 52%, rgba(4, 19, 70, .06) 100%), url("../img/promo/promo-2.webp"); }

.ml-slide__in { display: grid; gap: 14px; max-width: 560px; }
.ml-slide__kick {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	padding: 8px 14px;
	border-radius: 100px;
	color: #fff;
	background: rgba(255, 255, 255, .13);
	box-shadow: inset 0 0 0 1px var(--ml-line-2);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: uppercase;
}
.ml-slide__t {
	font-size: clamp(28px, 3.3vw, 44px);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -1.2px;
}
.ml-slide__note {
	max-width: 430px;
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
}
.ml-slide__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.ml-hero__nav {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(14, 5, 24, .6);
	box-shadow: inset 0 0 0 1px var(--ml-line-2);
	backdrop-filter: blur(8px);
	transform: translateY(-50%);
	transition: background var(--ml-ease), opacity var(--ml-ease);
}
.ml-hero__nav:hover { background: rgba(14, 5, 24, .9); }
.ml-hero__nav--prev { left: 16px; }
.ml-hero__nav--next { right: 16px; }

.ml-hero__dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}
.ml-hero__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: rgba(255, 255, 255, .34);
	transition: width var(--ml-ease), background var(--ml-ease);
}
.ml-hero__dots button.is-active { width: 26px; background: var(--ml-accent); }

/* ------------------------------------------------------------ categories */

.ml-cats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin-top: 22px;
}

.ml-cat {
	position: relative;
	display: grid;
	align-content: space-between;
	min-height: 138px;
	padding: 18px 18px 16px;
	border-radius: var(--ml-r-lg);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--ml-line);
	transition: transform var(--ml-ease), box-shadow var(--ml-ease);
}
.ml-cat:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ml-line-2), var(--ml-shadow); }
.ml-cat--a { background: linear-gradient(150deg, #4a1078, #26113a); }
.ml-cat--b { background: linear-gradient(150deg, #123a6d, #101a34); }
.ml-cat--c { background: linear-gradient(150deg, #6d1046, #2a1030); }
.ml-cat--d { background: linear-gradient(150deg, #6b3a08, #2c1522); }
.ml-cat--e { background: linear-gradient(150deg, #0f5145, #101f2c); }

.ml-cat__l { position: relative; z-index: 2; font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.ml-cat__go {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: rgba(255, 255, 255, .66);
	font-size: 13px;
	font-weight: 700;
}
/* Category art is the source property's own icon set: a 3D object that hangs
   off the bottom-right corner of the tile. */
.ml-cat__art {
	position: absolute;
	right: -8px;
	bottom: -16px;
	z-index: 1;
	width: 124px;
	height: 124px;
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 12px 14px rgba(9, 3, 16, .6));
	transition: transform var(--ml-ease);
}
.ml-cat:hover .ml-cat__art { transform: translateY(-6px) rotate(-6deg); }

/* ------------------------------------------------------------ game cards */

.ml-rail-wrap { position: relative; }

.ml-games {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 16px;
}

.ml-games--rail {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.ml-games--rail::-webkit-scrollbar { display: none; }
.ml-games--rail > .ml-game {
	flex: 0 0 clamp(158px, 15vw, 196px);
	scroll-snap-align: start;
}

.ml-game {
	display: grid;
	gap: 10px;
	transition: transform var(--ml-ease);
}
.ml-game:hover { transform: translateY(-6px); }

.ml-game__shot {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--ml-r-md);
	overflow: hidden;
	background: var(--ml-surface-2);
	box-shadow: inset 0 0 0 1px var(--ml-line), 0 14px 30px rgba(0, 0, 0, .34);
}
.ml-game__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.ml-game:hover .ml-game__shot img { transform: scale(1.06); }

.ml-game__veil {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, rgba(12, 4, 20, .1), rgba(12, 4, 20, .78));
	opacity: 0;
	transition: opacity var(--ml-ease);
}
.ml-game:hover .ml-game__veil,
.ml-game:focus-visible .ml-game__veil { opacity: 1; }

.ml-game__play {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 18px;
	border-radius: 100px;
	color: var(--ml-accent-ink);
	background: var(--ml-accent);
	font-size: 14px;
	font-weight: 800;
	transform: translateY(8px);
	transition: transform var(--ml-ease);
}
.ml-game:hover .ml-game__play { transform: none; }

.ml-badge {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 10px;
	padding: 5px 10px;
	border-radius: 8px;
	color: #170826;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.ml-badge--new { background: var(--ml-accent); }
.ml-badge--hot { color: #fff; background: var(--ml-rose); }
.ml-badge--top { background: var(--ml-gold); }

.ml-game__foot { display: grid; gap: 4px; min-width: 0; }
.ml-game__name {
	overflow: hidden;
	font-size: 15px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-game__meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ml-game__prov {
	overflow: hidden;
	color: var(--ml-muted-2);
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-game__rtp {
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 7px;
	color: var(--ml-accent);
	background: rgba(49, 233, 154, .12);
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
}

/* ----------------------------------------------------------------- promos */

.ml-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.ml-promo {
	position: relative;
	display: grid;
	gap: 7px;
	padding: 22px 22px 20px;
	border-radius: var(--ml-r-lg);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--ml-line);
	transition: transform var(--ml-ease), box-shadow var(--ml-ease);
}
.ml-promo:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ml-line-2), var(--ml-shadow); }
.ml-promo--a { background: linear-gradient(140deg, #45146f, #1e0d31); }
.ml-promo--b { background: linear-gradient(140deg, #0f4a48, #101c2e); }
.ml-promo--c { background: linear-gradient(140deg, #5c1340, #221031); }

.ml-promo__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ml-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
}
.ml-promo__t { font-size: 21px; font-weight: 900; letter-spacing: -.4px; }
.ml-promo__s { color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 600; line-height: 1.45; }
.ml-promo__go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	color: var(--ml-accent);
	font-size: 14px;
	font-weight: 800;
}

/* ------------------------------------------------------------------ perks */

.ml-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.ml-perk {
	display: grid;
	gap: 5px;
	padding: 20px;
	border-radius: var(--ml-r-lg);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}
.ml-perk__ico {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 6px;
	border-radius: 12px;
	color: var(--ml-accent);
	background: rgba(49, 233, 154, .12);
}
.ml-perk__t { font-size: 16px; font-weight: 800; }
.ml-perk__n { color: var(--ml-muted); font-size: 13px; font-weight: 600; line-height: 1.45; }

/* -------------------------------------------------------------- providers */

/* The provider list is a long chip cloud that earns little of the space it
   takes, so it collapses into one row. <details> keeps it working without JS
   and gives the summary its own keyboard and screen-reader semantics. */
.ml-drop {
	border-radius: var(--ml-r-lg);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}

.ml-drop__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 24px;
	border-radius: var(--ml-r-lg);
	cursor: pointer;
	list-style: none;
	transition: background var(--ml-ease);
}
.ml-drop__sum::-webkit-details-marker { display: none; }
.ml-drop__sum:hover { background: rgba(255, 255, 255, .04); }
.ml-drop__sum .ml-shead__t { font-size: 19px; }

.ml-drop__n {
	padding: 3px 10px;
	border-radius: 100px;
	color: var(--ml-muted);
	background: rgba(255, 255, 255, .07);
	font-size: 13px;
	font-weight: 800;
}

.ml-drop__chev {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 11px;
	color: var(--ml-muted);
	background: var(--ml-surface-2);
	transform: rotate(90deg);
	transition: transform var(--ml-ease), color var(--ml-ease);
}
.ml-drop[open] .ml-drop__chev { color: #fff; transform: rotate(-90deg); }

.ml-drop__panel { padding: 6px 24px 26px; }

.ml-provs { display: flex; flex-wrap: wrap; gap: 12px; }
.ml-prov {
	padding: 13px 22px;
	border-radius: 100px;
	color: var(--ml-muted);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
	font-size: 14px;
	font-weight: 700;
	transition: color var(--ml-ease), background var(--ml-ease);
}
.ml-prov:hover { color: #fff; background: var(--ml-surface-2); }

/* ------------------------------------------------------- content + aside */

/* The sidebar sits UNDER the copy, not beside it: a 336px rail beside a text
   column ate too much width from the reading measure. One column at every
   width, with the aside cards spreading into a 3-up strip below the article. */
.ml-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	margin-top: 38px;
	align-items: start;
}
.ml-split__main { min-width: 0; }

.ml-aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Side by side the three cards carry different amounts of copy, so they
   stretch to the tallest one and pin their CTA to the bottom edge. */
.ml-aside .ml-card { display: flex; flex-direction: column; }
.ml-aside .ml-card .ml-btn { margin-top: auto; }

.ml-card {
	display: grid;
	gap: 9px;
	padding: 20px;
	border-radius: var(--ml-r-lg);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}
.ml-card--bonus {
	background:
		radial-gradient(120% 100% at 100% 0, rgba(49, 233, 154, .16), transparent 62%),
		linear-gradient(155deg, #4a1078, #22102f);
}
.ml-card__kick {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ml-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
}
.ml-card__sum { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -1.6px; }
.ml-card__note { color: var(--ml-muted); font-size: 14px; font-weight: 600; line-height: 1.5; }
.ml-card__head {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 17px;
	font-weight: 900;
}
.ml-card .ml-btn { margin-top: 6px; }

.ml-tops { display: grid; gap: 2px; }
.ml-tops__i {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px;
	border-radius: 14px;
	color: var(--ml-muted);
	transition: background var(--ml-ease), color var(--ml-ease);
}
.ml-tops__i:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ml-tops__i img {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 11px;
	object-fit: cover;
}
.ml-tops__n {
	width: 22px;
	flex: none;
	color: var(--ml-muted-2);
	font-size: 15px;
	font-weight: 900;
	text-align: center;
}
.ml-tops__txt { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.ml-tops__name {
	overflow: hidden;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ml-tops__prov { color: var(--ml-muted-2); font-size: 12px; font-weight: 600; }

/* --------------------------------------------------------------- CMS copy */

.ml-copy {
	padding: 26px 28px 30px;
	border-radius: var(--ml-r-lg);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}

.ml-phead { padding-bottom: 18px; border-bottom: 1px solid var(--ml-line); }
.ml-phead h1 {
	margin: 0;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 900;
	line-height: 1.14;
	letter-spacing: -1px;
}
.ml-phead p { margin: 10px 0 0; color: var(--ml-muted); font-size: 15px; font-weight: 600; line-height: 1.6; }

.ml-content { margin-top: 22px; color: #e7dff0; font-weight: 500; line-height: 1.72; }
.ml-content h2,
.ml-content h3,
.ml-content h4 {
	margin: 30px 0 12px;
	color: #fff;
	font-weight: 900;
	line-height: 1.22;
	letter-spacing: -.4px;
}
.ml-content h2 { font-size: 26px; }
.ml-content h3 { font-size: 21px; }
.ml-content h4 { font-size: 18px; }
.ml-content p { margin: 0 0 15px; }
.ml-content a { color: var(--ml-accent); text-decoration: underline; text-underline-offset: 3px; }
.ml-content a:hover { color: #6bf3b8; }
.ml-content ul,
.ml-content ol { margin: 0 0 16px; padding-left: 22px; }
.ml-content li { margin-bottom: 8px; }
.ml-content li::marker { color: var(--ml-accent); font-weight: 800; }
/* Content images render at 812px and shrink with the column below that. */
.ml-content img { display: block; width: min(812px, 100%); max-width: 100%; height: auto; margin: 18px 0; border-radius: var(--ml-r-md); }
.ml-content blockquote {
	margin: 20px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--ml-accent);
	border-radius: 0 var(--ml-r-md) var(--ml-r-md) 0;
	background: rgba(255, 255, 255, .05);
	color: #fff;
}
.ml-content strong { color: #fff; font-weight: 800; }

.ml-tscroll { overflow-x: auto; margin: 0 0 18px; border-radius: var(--ml-r-md); }
.ml-content table {
	width: 100%;
	border-collapse: collapse;
	background: rgba(255, 255, 255, .03);
	font-size: 15px;
}
.ml-content th,
.ml-content td { padding: 12px 15px; border-bottom: 1px solid var(--ml-line); text-align: left; }
.ml-content th { color: #fff; background: rgba(255, 255, 255, .06); font-weight: 800; white-space: nowrap; }

/* A "page" type carries copy only, so it keeps a reading measure instead of
   stretching to the full 1320px content width — and it is centred in that
   width, otherwise the column hugs the rail and leaves a lopsided gutter. */
.ml-plain { width: min(880px, 100%); margin-inline: auto; }

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

.ml-tl { display: grid; gap: 14px; }

.ml-tl__i {
	display: grid;
	grid-template-columns: 56px 148px minmax(0, 1fr) 210px;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	border-radius: var(--ml-r-lg);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
	transition: transform var(--ml-ease), box-shadow var(--ml-ease);
}
.ml-tl__i:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ml-line-2), var(--ml-shadow); }
.ml-tl__i--top { background: linear-gradient(120deg, rgba(74, 16, 120, .72), var(--ml-surface) 58%); }

.ml-tl__rank {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--ml-surface-2);
	font-size: 19px;
	font-weight: 900;
}
.ml-tl__i--top .ml-tl__rank { color: #23110a; background: linear-gradient(135deg, #ffd77a, var(--ml-gold)); }

.ml-tl__logo {
	display: grid;
	place-items: center;
	height: 76px;
	padding: 10px;
	border-radius: var(--ml-r-md);
	background: linear-gradient(150deg, #3a1d58, #1d0f2d);
	box-shadow: inset 0 0 0 1px var(--ml-line);
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.5px;
	text-align: center;
}

.ml-tl__body { display: grid; gap: 7px; min-width: 0; }
.ml-tl__name { font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.ml-tl__bonus {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ml-accent);
	font-size: 15px;
	font-weight: 800;
}
.ml-tl__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ml-tl__tag {
	padding: 5px 11px;
	border-radius: 8px;
	color: var(--ml-muted);
	background: rgba(255, 255, 255, .06);
	font-size: 12px;
	font-weight: 700;
}
.ml-tl__side { display: grid; gap: 9px; justify-items: stretch; }

.ml-rate { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ml-rate__n { font-size: 22px; font-weight: 900; letter-spacing: -.5px; }
.ml-stars { display: inline-flex; gap: 2px; color: var(--ml-gold); }
/* Each star is an <i> wrapper, so the lit state has to sit on the wrapper —
   putting the dim opacity on the inner svg would win over .is-on. */
.ml-stars i { display: block; opacity: .26; }
.ml-stars i.is-on { opacity: 1; }

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

.ml-rev {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 240px;
	align-items: center;
	gap: 22px;
	padding: 24px;
	border-radius: var(--ml-r-lg);
	background:
		radial-gradient(110% 130% at 100% 0, rgba(172, 36, 250, .28), transparent 62%),
		var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}
.ml-rev__logo {
	display: grid;
	place-items: center;
	height: 108px;
	border-radius: var(--ml-r-md);
	background: linear-gradient(150deg, #3a1d58, #1d0f2d);
	box-shadow: inset 0 0 0 1px var(--ml-line);
	font-size: 24px;
	font-weight: 900;
}
.ml-rev__body { display: grid; gap: 9px; min-width: 0; }
.ml-rev__name { font-size: 26px; font-weight: 900; letter-spacing: -.6px; }
.ml-rev__side { display: grid; gap: 10px; }

.ml-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.ml-fact {
	display: grid;
	gap: 3px;
	padding: 16px 18px;
	border-radius: var(--ml-r-md);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}
.ml-fact__k { color: var(--ml-muted-2); font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.ml-fact__v { font-size: 16px; font-weight: 800; }

.ml-pc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ml-pc__b {
	padding: 20px 22px;
	border-radius: var(--ml-r-lg);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}
.ml-pc__t {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	font-size: 17px;
	font-weight: 900;
}
.ml-pc__l { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ml-pc__l li {
	display: flex;
	gap: 9px;
	color: #e7dff0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}
.ml-pc__l .ml-ico { margin-top: 2px; }
.ml-pc--plus .ml-pc__t,
.ml-pc--plus .ml-ico { color: var(--ml-accent); }
.ml-pc--minus .ml-pc__t,
.ml-pc--minus .ml-ico { color: var(--ml-rose); }

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

.ml-lhero {
	display: grid;
	gap: 18px;
	justify-items: center;
	padding: 56px 32px;
	border-radius: var(--ml-r-xl);
	background:
		radial-gradient(90% 130% at 50% 0, rgba(172, 36, 250, .48), transparent 66%),
		linear-gradient(160deg, #33095a, #150726);
	text-align: center;
}
.ml-lhero__sum {
	font-size: clamp(56px, 9vw, 108px);
	font-weight: 900;
	line-height: .95;
	letter-spacing: -3px;
	background: linear-gradient(180deg, #fff, #b78bff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ml-lhero__t { max-width: 720px; font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; line-height: 1.12; letter-spacing: -1px; }
.ml-lhero__n { max-width: 620px; color: rgba(255, 255, 255, .78); font-size: 16px; font-weight: 600; line-height: 1.6; }
.ml-lhero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ml-lhero__meta { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; color: var(--ml-muted); font-size: 14px; font-weight: 700; }
.ml-lhero__meta span { display: inline-flex; align-items: center; gap: 7px; }

.ml-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: ml-step; }
.ml-step {
	position: relative;
	display: grid;
	gap: 7px;
	padding: 22px 20px 20px;
	border-radius: var(--ml-r-lg);
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
}
.ml-step::before {
	counter-increment: ml-step;
	content: counter(ml-step);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 4px;
	border-radius: 12px;
	color: var(--ml-accent-ink);
	background: var(--ml-accent);
	font-size: 17px;
	font-weight: 900;
}
.ml-step__t { font-size: 16px; font-weight: 800; }
.ml-step__n { color: var(--ml-muted); font-size: 13px; font-weight: 600; line-height: 1.5; }

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

.ml-foot {
	margin-top: 56px;
	padding: 44px 30px 22px;
	border-top: 1px solid var(--ml-line);
	color: var(--ml-muted);
	background: rgba(9, 3, 16, .5);
}
.ml-foot__cols {
	display: grid;
	grid-template-columns: 1.7fr repeat(3, 1fr);
	gap: 40px;
	padding-bottom: 32px;
}
.ml-foot__brand p { max-width: 380px; margin: 15px 0 0; font-size: 14px; font-weight: 500; line-height: 1.65; }
.ml-foot__col { display: grid; align-content: start; gap: 11px; }
.ml-foot__t { margin-bottom: 4px; color: #fff; font-size: 16px; font-weight: 800; }
.ml-foot__col a { width: fit-content; color: var(--ml-muted); font-size: 14px; font-weight: 600; transition: color var(--ml-ease); }
.ml-foot__col a:hover { color: var(--ml-accent); }

.ml-foot__pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 22px 0;
	border-top: 1px solid var(--ml-line);
	border-bottom: 1px solid var(--ml-line);
}
.ml-pay {
	display: grid;
	place-items: center;
	min-width: 74px;
	height: 38px;
	padding: 0 14px;
	border-radius: 10px;
	color: #d9cce3;
	background: var(--ml-surface);
	box-shadow: inset 0 0 0 1px var(--ml-line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
}
.ml-age {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-left: auto;
	border: 2px solid #b8a9c4;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}

.ml-foot__bottom {
	display: flex;
	justify-content: space-between;
	gap: 28px;
	padding-top: 22px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.55;
}
.ml-foot__bottom p { max-width: 940px; margin: 0; }
.ml-copy-line { flex: none; color: #d8cde0; font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------- mobile actions */

.ml-bar {
	position: fixed;
	z-index: 930;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	gap: 10px;
	padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--ml-line);
	background: rgba(18, 7, 29, .95);
	box-shadow: 0 -12px 34px rgba(0, 0, 0, .42);
	backdrop-filter: blur(14px);
}
.ml-bar .ml-btn { flex: 1; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1320px) {
	.ml-cats { grid-template-columns: repeat(3, 1fr); }
	.ml-perks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1180px) {
	.ml-rail {
		transform: translateX(-102%);
		box-shadow: var(--ml-shadow);
		transition: transform var(--ml-ease);
	}
	body.ml-drawer .ml-rail { transform: none; }
	.ml-rail__close { display: grid; }
	.ml-col { margin-left: 0; }
	.ml-burger { display: flex; }
	.ml-top__mark { display: inline-flex; }
	.ml-main { padding: 22px 22px 60px; }
	.ml-top { padding: 12px 22px; }
	.ml-foot { padding: 40px 22px 20px; }
	.ml-slide { min-height: 292px; padding: 34px 70px; }
}

@media (max-width: 1020px) {
	.ml-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ml-card--help { grid-column: 1 / -1; }
	.ml-rev { grid-template-columns: 150px minmax(0, 1fr); }
	.ml-rev__side { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
	.ml-facts { grid-template-columns: repeat(2, 1fr); }
	.ml-steps { grid-template-columns: repeat(2, 1fr); }
	.ml-tl__i { grid-template-columns: 46px 120px minmax(0, 1fr); row-gap: 14px; }
	.ml-tl__side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; }
	.ml-top__chips { display: none; }
}

@media (max-width: 900px) {
	.ml-bar { display: flex; }
	.ml-top__auth { display: none; }
	body { padding-bottom: 74px; }
}

@media (max-width: 720px) {
	.ml-main { padding: 18px 14px 52px; }
	.ml-top { padding: 11px 14px; gap: 12px; }
	.ml-foot { padding: 34px 14px 18px; }
	.ml-sec { margin-top: 30px; }

	.ml-slide {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		min-height: 250px;
		padding: 26px 24px 46px;
		border-radius: var(--ml-r-lg);
	}
	/* The banner subject sits in the right third of the artwork, so the copy
	   keeps clear of it while the CTA row below still spans the slide. */
	.ml-slide__in { width: 100%; }
	.ml-slide__kick,
	.ml-slide__t { max-width: 72%; }
	.ml-slide__t { font-size: 26px; letter-spacing: -.8px; }
	.ml-slide__note { display: none; }
	.ml-slide__cta { width: 100%; }
	.ml-slide__cta .ml-btn { flex: 1; padding: 14px 16px; font-size: 15px; }
	.ml-slide--a,
	.ml-slide--b { background-position: 74% center; }
	.ml-hero__nav { display: none; }
	.ml-hero__dots { bottom: 14px; left: 24px; transform: none; }

	/* Strips that would squeeze below ~160px per card become swipe rails. */
	.ml-cats,
	.ml-promos,
	.ml-perks {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-right: -14px;
		padding-right: 14px;
	}
	.ml-cats::-webkit-scrollbar,
	.ml-promos::-webkit-scrollbar,
	.ml-perks::-webkit-scrollbar { display: none; }
	.ml-cat,
	.ml-promo,
	.ml-perk { flex: 0 0 72vw; max-width: 280px; scroll-snap-align: start; }
	.ml-cat { min-height: 120px; }

	.ml-games { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ml-games--rail {
		margin-right: -14px;
		padding-right: 14px;
	}
	.ml-games--rail > .ml-game { flex: 0 0 44vw; }
	.ml-shead__t { font-size: 19px; }
	.ml-shead__ctl .ml-arrow { display: none; }

	.ml-aside { grid-template-columns: minmax(0, 1fr); }
	.ml-copy { padding: 22px 18px 24px; }
	.ml-pc { grid-template-columns: minmax(0, 1fr); }
	/* Auto-placement would drop the body into the 46px rank column, so the
	   phone layout pins each part: rank + plate, then copy, then the CTAs. */
	.ml-tl__i { grid-template-columns: 46px minmax(0, 1fr); gap: 12px 14px; padding: 16px; }
	.ml-tl__rank { grid-area: 1 / 1; }
	.ml-tl__logo { grid-area: 1 / 2; height: 54px; font-size: 17px; }
	.ml-tl__body { grid-area: 2 / 1 / 3 / -1; }
	.ml-tl__side { grid-area: 3 / 1 / 4 / -1; }
	.ml-rev { grid-template-columns: minmax(0, 1fr); padding: 20px; }
	.ml-rev__logo { height: 88px; }
	.ml-rev__side { grid-template-columns: minmax(0, 1fr); }
	.ml-lhero { padding: 40px 20px; }
	.ml-steps { grid-template-columns: minmax(0, 1fr); }

	.ml-foot__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
	.ml-foot__brand { grid-column: 1 / -1; }
	.ml-foot__bottom { flex-direction: column; gap: 14px; }
	.ml-age { margin-left: 0; }
}

@media (max-width: 430px) {
	.ml-rail { width: min(84vw, 300px); }
	.ml-games--rail > .ml-game { flex: 0 0 58vw; }
	.ml-cat,
	.ml-promo,
	.ml-perk { flex: 0 0 82vw; }
	.ml-foot__cols { grid-template-columns: minmax(0, 1fr); }
	.ml-content h2 { font-size: 22px; }
	.ml-content h3 { font-size: 19px; }
	.ml-tl__side { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}