/* -------------------------------------------------------- 1. tokens & base */

@font-face {
	font-family: 'Geologica';
	src: url('../fonts/Geologica-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geologica';
	src: url('../fonts/Geologica-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Geologica';
	src: url('../fonts/Geologica-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Every value below is the source property's own. */
	--vv-bg:      #171722;
	--vv-bg-2:    #101018;
	--vv-panel:   #252536;
	--vv-panel-2: #2c2c40;
	--vv-panel-3: #33334a;
	--vv-line:    #3a3a54;
	--vv-line-2:  #484868;

	--vv-text:   #ffffff;
	--vv-mute:   #cfcff3;
	--vv-mute-2: #bcbcd1;
	--vv-mute-3: #8a8aae;

	--vv-red:    #fe284a;
	--vv-red-d:  #cc203b;
	--vv-red-g:  radial-gradient(circle, #fe284a 0, #cc203b 100%);
	--vv-grey-g: radial-gradient(circle, #484868 0, #33334a 100%);
	--vv-gold:   #ffde26;
	--vv-green:  #3ddc97;

	--vv-font: 'Geologica', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--vv-wrap:  1224px;
	--vv-aside: 304px;
	--vv-gut:   32px;

	/* Measured header height — main.js keeps this in sync so anchors clear the
	   sticky bar and the category strip. */
	--vv-head: 112px;

	--vv-r-sm: 4px;
	--vv-r:    8px;
	--vv-r-lg: 12px;

	--vv-sh: 0 8px 16px 0 rgb(0 0 0 / 0.2);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--vv-bg);
	color: var(--vv-text);
	font-family: var(--vv-font);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

:focus-visible {
	outline: 2px solid var(--vv-gold);
	outline-offset: 2px;
	border-radius: 3px;
}

.vv-wrap {
	width: 100%;
	max-width: calc(var(--vv-wrap) + 40px);
	margin-inline: auto;
	padding-inline: 20px;
}

.vv-sec { margin-block: 32px; }

.vv-skip {
	position: fixed;
	inset-inline-start: -999px;
	top: 0;
	z-index: 200;
	padding: 10px 16px;
	background: var(--vv-gold);
	color: #16161f;
	font-weight: 500;
}

.vv-skip:focus { inset-inline-start: 0; }

.vv-ico { flex: none; }

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

/* --------------------------------------------- 2. buttons, mark, labels */

.vv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--vv-r-sm);
	font: 400 14px/1 var(--vv-font);
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--vv-sh);
	transition: filter .16s, transform .16s, background .16s, border-color .16s;
}

.vv-btn--red   { background: var(--vv-red-g); border-color: var(--vv-red); color: #fff; }
.vv-btn--grey  { background: var(--vv-grey-g); border-color: var(--vv-line-2); color: #fff; }
.vv-btn--ghost { background: transparent; border-color: var(--vv-line-2); color: var(--vv-mute); box-shadow: none; }

.vv-btn:hover        { filter: brightness(1.12); transform: translateY(-1px); }
.vv-btn--ghost:hover { filter: none; background: var(--vv-panel-2); color: #fff; }

.vv-btn--lg    { height: 48px; padding: 0 26px; font-size: 15px; }
.vv-btn--block { display: flex; width: 100%; }

.vv-mark { display: inline-flex; align-items: center; flex: none; }
.vv-mark__img { display: block; height: var(--vv-mark-h, 28px); width: auto; }

.vv-slabel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.vv-slabel__t { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.vv-slabel__n { font-size: 12.5px; color: var(--vv-mute-3); text-align: end; }

.vv-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	height: 40px;
	padding: 0 20px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-panel);
	font-size: 14px;
	color: var(--vv-mute-2);
	transition: color .16s, border-color .16s, background .16s;
}

.vv-more:hover { color: #fff; border-color: var(--vv-red); background: var(--vv-panel-2); }

/* ------------------------------------ 3. header, apps, drawer, categories */

.vv-top {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--vv-panel);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
}

.vv-top__in {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 64px;
}

.vv-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-panel-2);
	color: #fff;
	cursor: pointer;
}

.vv-top__nav { display: flex; align-items: center; gap: 2px; min-width: 0; }

.vv-top__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--vv-r-sm);
	font-size: 14px;
	color: var(--vv-mute-2);
	white-space: nowrap;
	transition: background .16s, color .16s;
}

.vv-top__link .vv-ico { color: var(--vv-mute-3); transition: color .16s; }
.vv-top__link:hover { background: var(--vv-panel-2); color: #fff; }
.vv-top__link:hover .vv-ico { color: var(--vv-red); }

.vv-top__auth { display: flex; align-items: center; gap: 10px; flex: none; margin-inline-start: auto; }

.vv-top__sep {
	width: 1px;
	height: 32px;
	flex: none;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.02), rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.02));
}

.vv-apps { display: flex; align-items: center; gap: 10px; flex: none; }

/* The source's two app buttons, kept: black for iOS, green for Android. */
.vv-app {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 14px;
	border-radius: var(--vv-r-sm);
	box-shadow: var(--vv-sh);
	transition: filter .16s, transform .16s;
}

.vv-app--apple   { background: linear-gradient(180deg, #2b2b3c, #1b1b26); border: 1px solid var(--vv-line); }
.vv-app--android { background: linear-gradient(180deg, #2fa84f, #1f8a3c); border: 1px solid #38c05c; }
.vv-app:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vv-app img { width: 20px; height: 24px; object-fit: contain; }
.vv-app span { display: grid; line-height: 1.2; }
.vv-app i { font-style: normal; font-size: 11px; color: rgb(255 255 255 / 0.72); }
.vv-app b { font-size: 13px; font-weight: 500; color: #fff; }

/* Category strip. */
.vv-cats { background: var(--vv-panel); border-top: 1px solid rgb(255 255 255 / 0.06); }

.vv-cats__in {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
}

.vv-cats__in::-webkit-scrollbar { display: none; }

.vv-cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex: 1 0 auto;
	min-width: 148px;
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	/* The source draws the divider as a fading vertical rule, not a flat line. */
	border-inline: 1px solid transparent;
	border-image-source: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 100%);
	border-image-slice: 1;
	transition: background .16s, color .16s;
}

.vv-cat img { width: 24px; height: 24px; object-fit: contain; }
.vv-cat:hover { background: var(--vv-panel-2); }

/* The tint the source gives each label. */
.vv-cat--blue span   { color: #4aa8ff; }
.vv-cat--orange span { color: #ff9f43; }
.vv-cat--violet span { color: #b98dff; }
.vv-cat--green span  { color: #43d787; }
.vv-cat--gold span   { color: var(--vv-gold); }

/* Drawer. */
.vv-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgb(8 8 14 / 0.7);
	backdrop-filter: blur(2px);
}

.vv-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min(328px, 88vw);
	padding: 16px 16px 22px;
	background: var(--vv-panel);
	border-inline-end: 1px solid var(--vv-line);
	transform: translateX(-102%);
	transition: transform .24s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.vv-drawer.is-open { transform: none; }

.vv-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--vv-line);
	flex: none;
}

.vv-drawer__x {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-panel-2);
	color: var(--vv-mute-2);
	cursor: pointer;
}

.vv-drawer__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }

.vv-dpad {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-top: 16px;
	flex: none;
}

.vv-dtile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 12px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background: var(--vv-panel-2);
	font-size: 13.5px;
	font-weight: 500;
	transition: border-color .16s, transform .16s;
}

.vv-dtile .vv-ico { color: var(--vv-red); }
.vv-dtile:hover { border-color: var(--vv-red); transform: translateY(-1px); }

.vv-dgrp { margin-top: 18px; flex: none; }

.vv-dgrp__t {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vv-mute-3);
}

.vv-doffer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px;
	padding: 11px 12px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-panel-2);
	font-size: 14px;
	transition: border-color .16s, background .16s;
}

.vv-doffer .vv-ico { color: var(--vv-gold); }
.vv-doffer:hover { border-color: var(--vv-line-2); background: var(--vv-panel-3); }
.vv-doffer__l { flex: 1 1 auto; }
.vv-doffer__n { font-size: 11.5px; color: var(--vv-mute-3); }

.vv-dlist { margin-top: 16px; display: grid; gap: 2px; flex: none; }

.vv-dlist a {
	padding: 9px 4px;
	border-bottom: 1px solid var(--vv-line);
	font-size: 13.5px;
	color: var(--vv-mute-2);
	transition: color .16s;
}

.vv-dlist a:hover { color: #fff; }

.vv-dfoot { margin-top: auto; padding-top: 20px; display: grid; gap: 8px; flex: none; }
.vv-dfoot .vv-app { width: 100%; }

/* -------------------------------------- 4. slider, jackpot band, promos */

.vv-hero { margin-top: 20px; }

.vv-slider { position: relative; border-radius: var(--vv-r); overflow: hidden; }

.vv-slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.vv-slider__track::-webkit-scrollbar { display: none; }

.vv-slide { scroll-snap-align: start; display: block; min-width: 0; }

.vv-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 1;
	object-fit: cover;
}

.vv-sarrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: 50%;
	background: rgb(16 16 24 / 0.62);
	color: #fff;
	cursor: pointer;
	transition: background .16s, border-color .16s;
}

.vv-sarrow[hidden] { display: none; } /* the class selector beats the UA [hidden] rule */
.vv-sarrow:hover { background: var(--vv-red-d); border-color: var(--vv-red); }
.vv-sarrow--prev { inset-inline-start: 14px; }
.vv-sarrow--next { inset-inline-end: 14px; }

.vv-dots {
	position: absolute;
	inset-inline: 0;
	bottom: 12px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.vv-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.4);
	cursor: pointer;
	transition: background .16s, width .16s;
}

.vv-dot.is-on { width: 22px; border-radius: 999px; background: var(--vv-red); }

/* The jackpot band: the source's strip of baked-in dollars, as live hryvnia. */
.vv-jack {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 14px;
	padding: 14px 20px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background:
		radial-gradient(120% 180% at 0 0, rgb(255 222 38 / 0.12), transparent 55%),
		var(--vv-panel);
	transition: border-color .16s;
}

.vv-jack:hover { border-color: var(--vv-gold); }

.vv-jack__t {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vv-gold);
}

.vv-jack__rows { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 10px 26px; }
.vv-jack__i { display: grid; gap: 1px; }

.vv-jack__k {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vv-mute-3);
}

.vv-jack__v { font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.vv-jack__i--mega .vv-jack__v { color: var(--vv-gold); }

.vv-jack__go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: none;
	font-size: 13.5px;
	color: var(--vv-red);
}

/* Promo cards — the four burger tiles, as editable text. */
.vv-promos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.vv-promo {
	display: grid;
	gap: 4px;
	padding: 18px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background: linear-gradient(160deg, var(--vv-panel), var(--vv-bg-2));
	transition: border-color .16s, transform .16s;
}

.vv-promo:hover { border-color: var(--vv-red); transform: translateY(-2px); }

.vv-promo__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 4px;
	border-radius: var(--vv-r-sm);
	background: rgb(254 40 74 / 0.14);
	color: var(--vv-red);
}

.vv-promo__k { font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--vv-mute-3); }
.vv-promo__f { font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: var(--vv-gold); }
.vv-promo__n { font-size: 12.5px; line-height: 1.5; color: var(--vv-mute-2); }

/* ----------------------------------------------- 5. filters & game grid */

.vv-filters { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.vv-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.vv-chips::-webkit-scrollbar { display: none; }

.vv-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-panel);
	font-size: 14px;
	color: var(--vv-mute-2);
	transition: background .16s, color .16s, border-color .16s;
}

.vv-chip:hover { border-color: var(--vv-line-2); color: #fff; }
.vv-chip.is-on { background: #6b3bd6; border-color: #7c4ce0; color: #fff; }

.vv-search {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-bg-2);
	font-size: 14px;
	color: var(--vv-mute-3);
	transition: border-color .16s, color .16s;
}

.vv-search:hover { border-color: var(--vv-line-2); color: var(--vv-mute-2); }

.vv-provs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.vv-provs::-webkit-scrollbar { display: none; }

.vv-prov {
	flex: none;
	padding: 7px 14px;
	border: 1px solid var(--vv-line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--vv-mute-3);
	white-space: nowrap;
	transition: color .16s, border-color .16s, background .16s;
}

.vv-prov:hover  { color: #fff; border-color: var(--vv-line-2); }
.vv-prov.is-on  { color: #fff; border-color: var(--vv-red); background: rgb(254 40 74 / 0.12); }

/* The wall, capped at two rows. The tile keeps the source's 232x232 square. */
.vv-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }

.vv-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border: 1px solid rgb(255 255 255 / 0.15);
	border-radius: var(--vv-r);
	overflow: hidden;
	background: var(--vv-panel);
	transition: border-color .16s, transform .16s;
}

.vv-tile:hover { border-color: var(--vv-red); transform: translateY(-2px); }
.vv-tile__art { display: block; height: 100%; }

.vv-tile__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}

.vv-tile:hover .vv-tile__art img { transform: scale(1.05); }

.vv-tile__badges {
	position: absolute;
	inset-block-start: 8px;
	inset-inline: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	pointer-events: none;
}

/*
 * Badges, with the source property’s own values: it dresses each one
 * differently on purpose — a white plate for the favourite heart (the SVG is
 * red and would vanish on a red chip), a gold plate for the cup, and three
 * gradient chips for Hot / New / Exclusive.
 */
.vv-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 24px;
	padding: 2px 5px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1;
	color: #fff;
}

.vv-badge img { display: block; }

.vv-badge--heart {
	width: 24px;
	padding: 4px;
	border-radius: 4px 2px 4px 2px;
	background: #fff;
}

.vv-badge--cup {
	width: 24px;
	padding: 4px;
	background: linear-gradient(225deg, #ffd800 0, #ff7a00 100%);
}

.vv-badge--hot { border-color: var(--vv-red); background: var(--vv-red-d); }
.vv-badge--new { border-color: #ccff00; background: linear-gradient(241.6deg, #ccff00 0, #90cd00 20.37%, #529900 60.39%); }
.vv-badge--exc { border-color: #ff8c00; background: linear-gradient(270deg, #ff8c00 0, #e63700 90.38%); }

.vv-badge--prov {
	border-color: rgb(255 255 255 / 0.1);
	background: rgb(16 16 24 / 0.24);
	backdrop-filter: blur(8px);
}
.vv-tile__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: rgb(16 16 24 / 0.68);
	font-size: 13px;
	font-weight: 500;
	opacity: 0;
	transition: opacity .2s;
}

.vv-tile:hover .vv-tile__play { opacity: 1; }

.vv-tile__pb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vv-red-g);
	color: #fff;
}

.vv-tile__name {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 20px 10px 9px;
	background: linear-gradient(180deg, rgb(16 16 24 / 0), rgb(16 16 24 / 0.85) 55%);
	font-size: 12.5px;
	text-align: center;
	color: var(--vv-mute-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------- 6. copy, floating aside, content typography */

.vv-copy { display: flex; flex-direction: column; }
.vv-phead { order: 1; }
.vv-toc   { order: 2; }
.vv-content { order: 3; }
.vv-aside { order: 4; }

.vv-phead h1 {
	margin: 0 0 10px;
	font-size: clamp(25px, 2.8vw, 36px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.vv-lead { margin: 0 0 18px; font-size: 16px; color: var(--vv-mute-2); }

.vv-toc {
	margin: 0 0 22px;
	padding: 16px 20px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background: var(--vv-panel);
	display: flow-root;
	scroll-margin-top: calc(var(--vv-head) + 16px);
}

.vv-toc__t {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vv-mute-3);
}

.vv-toc__t .vv-ico { color: var(--vv-red); }
.vv-toc ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 5px; }
.vv-toc a { font-size: 14px; color: var(--vv-mute-2); transition: color .16s; }
.vv-toc a:hover { color: var(--vv-gold); }

.vv-aside { display: grid; gap: 14px; margin-top: 26px; }

.vv-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background: var(--vv-panel);
}

.vv-card--bonus {
	border-color: rgb(254 40 74 / 0.4);
	background:
		radial-gradient(120% 100% at 100% 0, rgb(254 40 74 / 0.18), transparent 58%),
		var(--vv-panel);
	scroll-margin-top: calc(var(--vv-head) + 16px);
}

.vv-card__kick {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vv-mute-2);
}

.vv-card__kick .vv-ico { color: var(--vv-red); }

.vv-card__sum {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 34px;
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1;
}

.vv-card__sum span { font-size: 14px; letter-spacing: 0; color: var(--vv-gold); }

.vv-card__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.vv-card__head .vv-ico { color: var(--vv-red); }

.vv-247 {
	margin-inline-start: auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgb(61 220 151 / 0.14);
	font-size: 11px;
	color: var(--vv-green);
}

.vv-card__note { font-size: 13px; line-height: 1.55; color: var(--vv-mute-2); }

.vv-tops { display: grid; gap: 6px; }

.vv-tops__i {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px;
	border-radius: var(--vv-r-sm);
	background: var(--vv-bg-2);
	transition: background .16s;
}

.vv-tops__i:hover { background: var(--vv-panel-2); }
.vv-tops__n { width: 16px; flex: none; font-size: 13px; text-align: center; color: var(--vv-mute-3); }
.vv-tops__i img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.vv-tops__txt { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.vv-tops__name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-tops__prov { font-size: 11.5px; color: var(--vv-mute-3); }
.vv-tops__i .vv-ico { color: var(--vv-mute-3); flex: none; }

/* Content typography. */
.vv-content { font-size: 16px; line-height: 1.75; color: var(--vv-mute); }
.vv-content > :first-child { margin-top: 0; }

.vv-content h2 {
	margin: 32px 0 14px;
	font-size: clamp(20px, 2.1vw, 26px);
	font-weight: 500;
	letter-spacing: -.015em;
	line-height: 1.3;
	color: #fff;
	scroll-margin-top: calc(var(--vv-head) + 16px);
}

.vv-content h3 { margin: 24px 0 10px; font-size: 19px; font-weight: 500; color: #fff; }
.vv-content h4 { margin: 20px 0 8px; font-size: 16.5px; font-weight: 500; color: #fff; }
.vv-content p  { margin: 0 0 15px; }

.vv-content a {
	color: var(--vv-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vv-content a:hover { color: #ff5f79; }
.vv-content strong { color: #fff; font-weight: 500; }

.vv-content ul, .vv-content ol { margin: 0 0 16px; padding-inline-start: 0; }
.vv-content ol { padding-inline-start: 22px; }
.vv-content li { margin-bottom: 7px; }
.vv-content ul { list-style: none; }
.vv-content ul > li { position: relative; padding-inline-start: 22px; }

.vv-content ul > li::before {
	content: '';
	position: absolute;
	inset-inline-start: 4px;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vv-red);
}

/* Content images: 812px, centred in the measure, shrinking with the column. */
.vv-content img {
	display: block;
	width: min(812px, 100%);
	height: auto;
	margin: 20px auto;
	border-radius: var(--vv-r);
}

.vv-content figure { margin: 22px 0; display: flow-root; }
.vv-content figcaption { margin-top: 8px; font-size: 13px; color: var(--vv-mute-3); text-align: center; }

.vv-content blockquote {
	margin: 22px 0;
	padding: 16px 20px;
	border: 1px solid var(--vv-line);
	border-inline-start: 3px solid var(--vv-red);
	border-radius: var(--vv-r);
	background: var(--vv-panel);
	display: flow-root;
}

.vv-content blockquote p:last-child { margin-bottom: 0; }

.vv-tscroll {
	display: flow-root;
	margin: 22px 0;
	overflow-x: auto;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
}

.vv-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vv-content th, .vv-content td { padding: 12px 16px; border-bottom: 1px solid var(--vv-line); text-align: start; }

.vv-content th {
	background: var(--vv-bg-2);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--vv-mute-2);
	white-space: nowrap;
}

.vv-content tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- 7. rating */

/*
 * The source's FAQ accordion and player reviews are not part of this template
 * (removed on request, 2026-09-14) — the page ends on the article. Only the
 * star rating survives from that section, because the toplist rows and the
 * review card still print a score.
 */
.vv-rate { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.vv-rate__stars { display: inline-flex; gap: 2px; }
.vv-rate__s { color: var(--vv-line-2); display: inline-flex; }
.vv-rate__s.is-on { color: var(--vv-gold); }
.vv-rate__n { font-size: 13px; font-weight: 500; }
/* ---------------------------------------------- 8. footer, tab bar, to-top */

.vv-foot {
	margin-top: 46px;
	padding-block: 32px 24px;
	background: var(--vv-bg-2);
	border-top: 1px solid var(--vv-line);
}

.vv-foot__cols {
	display: grid;
	grid-template-columns: minmax(230px, 1.3fr) repeat(4, minmax(0, 1fr));
	gap: 26px;
}

.vv-foot__brand { display: grid; gap: 12px; align-content: start; }
.vv-foot__about { margin: 0; font-size: 13px; line-height: 1.6; color: var(--vv-mute-3); }
.vv-foot__soc { display: flex; gap: 8px; }

.vv-foot__soci {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-panel);
	color: var(--vv-mute-3);
	transition: color .16s, border-color .16s;
}

.vv-foot__soci:hover { color: var(--vv-red); border-color: var(--vv-red); }

.vv-foot__col { display: grid; gap: 8px; align-content: start; }
.vv-foot__t { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--vv-mute-3); }
.vv-foot__col a { font-size: 13.5px; color: var(--vv-mute-2); transition: color .16s; }
.vv-foot__col a:hover { color: #fff; }

.vv-foot__bands {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
	padding-block: 18px;
	border-block: 1px solid var(--vv-line);
}

.vv-bands { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.vv-band__i {
	padding: 6px 12px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-sm);
	background: var(--vv-panel);
	font-size: 12px;
	color: var(--vv-mute-2);
}

.vv-band__i--mute { border-style: dashed; background: transparent; color: var(--vv-mute-3); }

.vv-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 2px solid var(--vv-red);
	border-radius: 50%;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--vv-red);
}

.vv-foot__legal { margin-top: 18px; display: grid; gap: 10px; }
.vv-foot__legal p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--vv-mute-3); }

.vv-foot__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--vv-line);
	font-size: 12.5px;
	color: var(--vv-mute-3);
}

.vv-foot__bottom a:hover { color: var(--vv-red); }

.vv-tabbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	background: rgb(16 16 24 / 0.97);
	border-top: 1px solid var(--vv-line);
	backdrop-filter: blur(8px);
	padding-bottom: env(safe-area-inset-bottom);
}

.vv-tabbar__i {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 9px 4px 8px;
	font-size: 10.5px;
	color: var(--vv-mute-2);
}

.vv-tabbar__i .vv-ico { color: var(--vv-mute-3); }
.vv-tabbar__i:active { color: var(--vv-red); }

.vv-totop {
	position: fixed;
	inset-inline-end: 20px;
	bottom: 24px;
	z-index: 65;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--vv-line);
	border-radius: 50%;
	background: rgb(37 37 54 / 0.95);
	color: #fff;
	cursor: pointer;
	transition: background .16s, border-color .16s;
}

.vv-totop[hidden] { display: none; } /* same as the slider arrows */
.vv-totop:hover { background: var(--vv-red-d); border-color: var(--vv-red); }

/* ------------------------------------------- 9. toplist, review, landing */

.vv-tl { display: grid; gap: 10px; }

.vv-tl__i {
	display: grid;
	grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background: var(--vv-panel);
	transition: border-color .16s, transform .16s;
}

.vv-tl__i:hover { border-color: var(--vv-red); transform: translateY(-1px); }

.vv-tl__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--vv-r-sm);
	background: rgb(254 40 74 / 0.14);
	border: 1px solid rgb(254 40 74 / 0.35);
	font-size: 17px;
	font-weight: 500;
	color: var(--vv-red);
}

.vv-tl__main { display: grid; gap: 7px; min-width: 0; }
.vv-tl__name { font-size: 16px; font-weight: 500; }
.vv-tl__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.vv-tl__tag {
	padding: 3px 9px;
	border: 1px solid var(--vv-line);
	border-radius: 999px;
	font-size: 11.5px;
	color: var(--vv-mute-3);
}

.vv-tl__bonus { display: grid; gap: 2px; min-width: 0; }
.vv-tl__sum { font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--vv-gold); }
.vv-tl__cond { font-size: 12.5px; color: var(--vv-mute-2); }
.vv-tl__go { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }

.vv-review {
	padding: 22px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r-lg);
	background:
		radial-gradient(100% 130% at 0 0, rgb(254 40 74 / 0.12), transparent 55%),
		var(--vv-panel);
}

.vv-review__head {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--vv-line);
}

.vv-review__txt { display: grid; gap: 5px; flex: 1 1 260px; min-width: 0; }
.vv-review__note { font-size: 13px; color: var(--vv-mute-2); }
.vv-review__cta { flex: none; }

.vv-review__facts {
	display: grid;
	/* 320px tracks so six facts fall into two rows of three. */
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.vv-fact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background: var(--vv-bg-2);
}

.vv-fact__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: var(--vv-r-sm);
	background: rgb(254 40 74 / 0.14);
	color: var(--vv-red);
}

.vv-fact__t { display: grid; gap: 1px; min-width: 0; }
.vv-fact__k { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--vv-mute-3); }
.vv-fact__v { font-size: 14px; line-height: 1.5; color: #fff; }

.vv-review__reg {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px dashed var(--vv-line-2);
	border-radius: var(--vv-r);
	font-size: 13px;
	line-height: 1.6;
	color: var(--vv-mute-2);
}

.vv-review__reg .vv-ico { color: var(--vv-gold); margin-top: 2px; }

.vv-pros { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.vv-pro {
	padding: 18px 20px;
	border: 1px solid var(--vv-line);
	border-radius: var(--vv-r);
	background: var(--vv-panel);
}

.vv-pro__t { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.vv-pro--plus  { border-inline-start: 3px solid var(--vv-green); }
.vv-pro--minus { border-inline-start: 3px solid var(--vv-gold); }
.vv-pro--plus .vv-pro__t .vv-ico  { color: var(--vv-green); }
.vv-pro--minus .vv-pro__t .vv-ico { color: var(--vv-gold); }
.vv-pro ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 7px; font-size: 14px; color: var(--vv-mute-2); }

.vv-land {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 34px 32px;
	border: 1px solid rgb(254 40 74 / 0.35);
	border-radius: var(--vv-r-lg);
	background:
		radial-gradient(90% 140% at 8% 0, rgb(254 40 74 / 0.28), transparent 58%),
		radial-gradient(80% 120% at 100% 100%, rgb(255 222 38 / 0.12), transparent 60%),
		var(--vv-panel);
}

.vv-land__k {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border: 1px solid rgb(254 40 74 / 0.45);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #ff8298;
}

.vv-land__h { font-size: clamp(29px, 4vw, 48px); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }
.vv-land__s { max-width: 58ch; font-size: 15px; color: var(--vv-mute-2); }
.vv-land__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.vv-land__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	width: 100%;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--vv-line);
}

.vv-land__spec { display: grid; gap: 2px; }
.vv-land__spec b { font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--vv-gold); }
.vv-land__spec i { font-style: normal; font-size: 12.5px; color: var(--vv-mute-3); }

/* ----------------------------------------------------------- 10. responsive */

/*
 * The float switches on only where the wrapped copy still fits an 812px
 * content image beside the cards: the page measure minus the 304px card column
 * and its 32px gutter must stay ≥ 812, which happens from 1190px of viewport.
 * Below that the cards drop under the article and lay out as a band, so the
 * copy never runs in a narrow ribbon with a dead gutter beside it.
 */
@media (min-width: 1190px) {
	.vv-copy--aside { display: block; }

	.vv-copy--aside .vv-aside {
		float: right;
		width: var(--vv-aside);
		margin: 0 0 24px 0;
		margin-inline-start: var(--vv-gut);
	}

	.vv-copy--aside .vv-phead,
	.vv-copy--aside .vv-content { display: block; }

	/*
	 * flow-root, NOT block: the contents card carries its own background, and a
	 * plain block only shortens its LINE boxes beside a float — the panel
	 * itself would run on under the cards. A block formatting context is what
	 * makes the box stop at the float.
	 */
	.vv-copy--aside .vv-toc { display: flow-root; }

	.vv-copy--aside .vv-content::after { content: ''; display: block; clear: both; }
}

@media (max-width: 1189px) {
	.vv-aside { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}

@media (max-width: 1100px) {
	.vv-top__nav { display: none; }
	.vv-burger { display: inline-flex; }
	.vv-apps { display: none; }
	.vv-top__sep { display: none; }
	.vv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
	.vv-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	:root { --vv-head: 108px; }
	.vv-slide img { aspect-ratio: 1140 / 299; }
	.vv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vv-jack { flex-direction: column; align-items: flex-start; gap: 12px; }
	.vv-jack__rows { width: 100%; justify-content: space-between; gap: 10px 16px; }
	.vv-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vv-foot__brand { grid-column: 1 / -1; }
	.vv-tabbar { display: flex; }
	body { padding-bottom: 62px; }
	.vv-totop { bottom: 74px; }
	.vv-sec { margin-block: 26px; }
	.vv-cat { min-width: 128px; padding: 13px 16px; font-size: 14px; }
}

@media (max-width: 680px) {
	/*
	 * The bar at phone width: the 184px wordmark plus a 40px burger plus the
	 * full-length CTA is wider than a 390px screen, so the mark steps down and
	 * the button loses its generous padding rather than the label being cut.
	 */
	.vv-top__in { height: 58px; gap: 10px; }
	.vv-mark__img { height: 22px; }
	.vv-top__auth .vv-btn--grey { display: none; }
	.vv-top__auth .vv-btn { padding: 0 12px; font-size: 13px; }
	.vv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.vv-promos { grid-template-columns: minmax(0, 1fr); }
	.vv-filters { flex-direction: column; align-items: stretch; }
	.vv-search { width: 100%; }
	.vv-sarrow { display: none; }
	.vv-tl__i { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
	.vv-tl__bonus, .vv-tl__go { grid-column: 2; }
	.vv-tl__go { flex-direction: row; align-items: center; justify-content: space-between; }
	.vv-land { padding: 24px 18px; }
	.vv-review__cta { width: 100%; }
	.vv-foot__cols { grid-template-columns: minmax(0, 1fr); }
	.vv-content { font-size: 15.5px; }
}

/*
 * Reading measure. A cap belongs ONLY on the page types with no card column
 * (page, landing): where an aside exists the copy must reclaim the full width
 * below it, and a cap would freeze the line length into a dead gutter.
 */
.vv-copy:not(.vv-copy--aside) .vv-phead,
.vv-copy:not(.vv-copy--aside) .vv-toc,
.vv-copy:not(.vv-copy--aside) .vv-content { max-width: 78ch; }