/*
 * Stylesheet — "gorilla_1" (template 63).
 *
 * Analyze-mode build. The source property is followed for STRUCTURE and
 * rhythm: an accent promo strip above a black sticky bar, unlabelled game
 * rails, landscape live cards, a podium-plus-list wins board, and a rounded
 * footer card of bands. Nothing visual is taken from it — the accent moves off
 * its acid lime to a mint green, and the gorilla mark and hero art ship with
 * the package.
 *
 * Sections
 *   1. tokens & base          5. rails & tiles
 *   2. buttons & marks        6. wins board
 *   3. header, drawer, promo  7. copy, aside, content typography
 *   4. hero banner            8. cta
 *                             9. footer, tab bar, responsive
 */

/* ---------------------------------------------------------------- 1. tokens */

:root {
	--gr-bg:        #0a0b0d;
	--gr-bg-2:      #0f1113;
	--gr-surface:   #15181c;
	--gr-surface-2: #1c2026;
	--gr-surface-3: #23282f;
	--gr-line:      rgba(255, 255, 255, .08);
	--gr-line-2:    rgba(255, 255, 255, .16);
	--gr-text:      #eef1f4;
	--gr-mute:      rgba(238, 241, 244, .58);
	--gr-mute-2:    rgba(238, 241, 244, .42);

	/* One CTA colour. Amber and red are markers only — a badge, never a button. */
	--gr-accent:    #2fe3a0;
	--gr-accent-d:  #22c98a;
	--gr-accent-s:  rgba(47, 227, 160, .14);
	--gr-warn:      #ffb648;
	--gr-hot:       #ff6b5c;

	--gr-r:    16px;
	--gr-r-sm: 12px;
	--gr-r-lg: 22px;
	--gr-wrap: 1288px;
	--gr-top:  64px;

	--gr-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--gr-sh:   0 18px 40px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--gr-bg);
	color: var(--gr-text);
	font: 400 16px/1.6 var(--gr-font);
	overflow-x: hidden;
}

body.gr-locked { overflow: hidden; }

img, svg { max-width: 100%; }

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

button { font: inherit; color: inherit; }

.gr-ico { display: inline-block; flex: none; vertical-align: middle; }

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

.gr-skip {
	position: fixed;
	inset-inline-start: -999px;
	top: 0;
	z-index: 99;
	padding: 10px 16px;
	background: var(--gr-accent);
	color: #06110c;
	border-radius: 0 0 var(--gr-r-sm) 0;
}

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

.gr-main { display: block; padding-bottom: 8px; }

.gr-sec { margin-top: 34px; }

/* --------------------------------------------------- 2. buttons & the mark */

.gr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .16s, border-color .16s, color .16s, transform .16s;
}

.gr-btn--primary {
	background: var(--gr-accent);
	color: #06110c;
}

.gr-btn--primary:hover { background: var(--gr-accent-d); }

.gr-btn--ghost {
	background: transparent;
	border-color: var(--gr-line-2);
	color: var(--gr-text);
}

.gr-btn--ghost:hover { border-color: var(--gr-accent); color: var(--gr-accent); }

.gr-btn--sm { padding: 9px 18px; font-size: 14px; }
.gr-btn--lg { padding: 15px 30px; font-size: 17px; }
.gr-btn--block { display: flex; width: 100%; }
.gr-btn:active { transform: translateY(1px); }

.gr-mark { display: inline-flex; align-items: center; }

/* The mark is the image alone — no wordmark beside it. */
.gr-mark__img { display: block; height: var(--gr-mark-h); width: auto; }

/* ------------------------------------------- 3. promo strip, header, drawer */

.gr-promo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	background: linear-gradient(90deg, var(--gr-accent), #7ef0c4);
	color: #06110c;
}

.gr-promo[hidden] { display: none; }

.gr-promo__l {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
}

.gr-promo__x {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: rgba(6, 17, 12, .12);
	cursor: pointer;
}

.gr-promo__x:hover { background: rgba(6, 17, 12, .22); }

.gr-top {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(10, 11, 13, .92);
	border-bottom: 1px solid var(--gr-line);
	backdrop-filter: blur(14px);
}

.gr-top__in {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: var(--gr-wrap);
	height: var(--gr-top);
	margin-inline: auto;
	padding-inline: 20px;
}

.gr-burger {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border: 1px solid var(--gr-line);
	border-radius: 12px;
	background: var(--gr-surface);
	cursor: pointer;
}

.gr-burger:hover { border-color: var(--gr-line-2); }

.gr-top__nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline: auto;
}

.gr-top__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	color: var(--gr-mute);
	font-weight: 600;
	font-size: 15px;
	transition: background-color .16s, color .16s;
}

.gr-top__link:hover { background: var(--gr-surface); color: var(--gr-text); }
.gr-top__link .gr-ico { color: var(--gr-accent); }

.gr-top__auth { display: flex; align-items: center; gap: 10px; flex: none; }

.gr-scrim {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(4, 5, 6, .68);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
}

.gr-scrim.is-on { opacity: 1; visibility: visible; }

.gr-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	width: min(340px, 88vw);
	background: var(--gr-bg-2);
	border-inline-end: 1px solid var(--gr-line);
	transform: translateX(-102%);
	transition: transform .24s ease;
}

.gr-drawer.is-on { transform: none; }

.gr-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--gr-line);
}

.gr-drawer__x {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--gr-line);
	border-radius: 11px;
	background: var(--gr-surface);
	cursor: pointer;
}

.gr-drawer__scroll { flex: 1; overflow-y: auto; padding: 16px; }

.gr-dpromo {
	display: grid;
	gap: 3px;
	padding: 16px;
	border-radius: var(--gr-r);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(47, 227, 160, .32), transparent 62%),
		var(--gr-surface-2);
	border: 1px solid var(--gr-line);
}

.gr-dpromo__k { color: var(--gr-accent); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.gr-dpromo__s { font-weight: 800; font-size: 24px; line-height: 1.15; }
.gr-dpromo__n { color: var(--gr-mute); font-size: 13px; }

.gr-dpromo__b {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	color: var(--gr-accent);
	font-weight: 700;
	font-size: 14px;
}

.gr-dgroup { margin-top: 20px; }

.gr-dgroup__t {
	display: block;
	margin-bottom: 8px;
	color: var(--gr-mute-2);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.gr-drow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: var(--gr-r-sm);
	color: var(--gr-text);
	font-weight: 600;
	font-size: 15px;
	transition: background-color .16s;
}

.gr-drow:hover { background: var(--gr-surface); }
.gr-drow__i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--gr-surface-2); color: var(--gr-accent); }
.gr-drow__l { flex: 1; }
.gr-drow__n { padding: 3px 9px; border-radius: 999px; background: var(--gr-accent-s); color: var(--gr-accent); font-size: 11px; font-weight: 700; }
.gr-drow > .gr-ico { color: var(--gr-mute-2); }

.gr-dsoc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }

.gr-dsoc__i {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid var(--gr-line);
	border-radius: 999px;
	color: var(--gr-mute);
	font-size: 13px;
	font-weight: 600;
}

.gr-dsoc__i:hover { border-color: var(--gr-accent); color: var(--gr-accent); }

/* ------------------------------------------------------------ 4. hero banner */

/*
 * The source runs a rotator of illustrated banners. This template ships ONE
 * banner instead — a single offer message reads faster than three, and a
 * rotator that nobody waits through is decoration with a timer. The art is
 * packaged; the copy on top of it is live text.
 */
.gr-hero { margin-top: 20px; }

.gr-banner {
	position: relative;
	border-radius: var(--gr-r-lg);
	overflow: hidden;
	background: var(--gr-surface);
}

.gr-banner__art {
	display: block;
	width: 100%;
	height: clamp(260px, 30vw, 380px);
	object-fit: cover;
	object-position: right center;
}

.gr-banner__in {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	width: min(600px, 74%);
	padding: 32px clamp(20px, 4vw, 52px);
	background: linear-gradient(90deg, rgba(6, 12, 10, .92) 44%, rgba(6, 12, 10, 0));
}

.gr-banner__k {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--gr-accent-s);
	color: var(--gr-accent);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.gr-banner__h { font-weight: 800; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; }
.gr-banner__s { max-width: 46ch; color: var(--gr-mute); font-size: clamp(14px, 1.3vw, 17px); }
.gr-banner__in .gr-btn { margin-top: 10px; }

/* -------------------------------------------------------- 5. rails & tiles */

.gr-rail {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.gr-rail::-webkit-scrollbar, .gr-studios::-webkit-scrollbar { display: none; }

/*
 * Section label above a tile row — the label alone, no "more" pill and no
 * arrows (those sit on the rail). It exists so the rows read as "Ексклюзиви /
 * Топ слоти / Live-казино" rather than three identical walls of covers.
 */

.gr-slabel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-weight: 800;
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.2;
}

.gr-slabel .gr-ico { color: var(--gr-accent); }

/*
 * Static tile grid — the layout for a row short enough that a scroller would
 * be a control with nothing to scroll. Same tiles as the rail; the fixed
 * per-shape widths are dropped so the row fills the measure evenly.
 */

.gr-tiles {
	display: grid;
	/* auto-fit, so a short row stretches to fill the measure instead of
	   leaving an empty track at the end. */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.gr-tiles--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gr-tiles .gr-tile { width: auto; }
.gr-tiles--wide .gr-tile__art { aspect-ratio: 16 / 10; }

/*
 * Scroll arrows overlaid on the rail edges. The rails carry no section header
 * any more, so the pair lives on the row itself: centred on the cover art
 * rather than the whole tile (--gr-cap is the name + provider caption the
 * buttons must clear), and revealed by main.js only while the row overflows.
 */

/* Caption band under each cover: name (18px) + provider (16px) + the tile's
   own 8px art margin — subtracted so the arrows centre on the cover, not on
   the tile as a whole. */
.gr-railbox { position: relative; --gr-cap: 50px; }

.gr-rarrow {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: calc(var(--gr-cap, 40px) + 6px);
	margin-block: auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--gr-line-2);
	border-radius: 50%;
	background: rgba(10, 11, 13, .86);
	backdrop-filter: blur(6px);
	color: var(--gr-text);
	cursor: pointer;
	transition: border-color .16s, color .16s, background-color .16s, opacity .16s;
}

.gr-rarrow--prev { inset-inline-start: -6px; }
.gr-rarrow--next { inset-inline-end: -6px; }
.gr-rarrow:hover { border-color: var(--gr-accent); color: var(--gr-accent); background: var(--gr-surface-2); }
.gr-rarrow[disabled] { opacity: 0; pointer-events: none; }
.gr-rarrow[hidden] { display: none; }

/* Touch rails scroll by swipe — the buttons would only cover a cover. */
@media (hover: none) {
	.gr-rarrow { display: none; }
}

.gr-tile {
	display: grid;
	gap: 2px;
	flex: none;
	width: 168px;
	scroll-snap-align: start;
}

.gr-rail--wide .gr-tile { width: 268px; }
.gr-rail--square .gr-tile { width: 176px; }



.gr-tile__art {
	position: relative;
	display: block;
	margin-bottom: 8px;
	border-radius: var(--gr-r);
	overflow: hidden;
	background: var(--gr-surface-2);
	aspect-ratio: 1 / 1;
}

.gr-rail--wide .gr-tile__art { aspect-ratio: 16 / 10; }

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

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

.gr-tile__badge {
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 9px;
	padding: 4px 9px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: .06em;
	color: #06110c;
}

.gr-tile__badge--top { background: var(--gr-accent); }
.gr-tile__badge--hot { background: var(--gr-hot); color: #170606; }
.gr-tile__badge--new { background: var(--gr-warn); color: #171106; }

.gr-tile__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(8, 9, 11, .62);
	color: var(--gr-text);
	font-weight: 700;
	font-size: 14px;
	opacity: 0;
	transition: opacity .2s;
}

.gr-tile:hover .gr-tile__play, .gr-tile:focus-visible .gr-tile__play { opacity: 1; }

.gr-tile__pb {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gr-accent);
	color: #06110c;
}

/* The only line under a cover, so it reads a step up from a sub-caption. */
.gr-tile__prov { color: var(--gr-mute); font-weight: 600; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* studio chips */

.gr-studios { display: flex; flex-wrap: wrap; gap: 9px; }

.gr-studio {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	border: 1px solid var(--gr-line);
	border-radius: 999px;
	background: var(--gr-surface);
	color: var(--gr-mute);
	font-weight: 700;
	font-size: 14px;
	transition: border-color .16s, color .16s, background-color .16s;
}

.gr-studio:hover { border-color: var(--gr-accent); color: var(--gr-accent); background: var(--gr-surface-2); }

/* --------------------------------------------------------- 6. wins board */

.gr-wins { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }

.gr-wins__podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; }

.gr-pod {
	display: grid;
	gap: 4px;
	padding: 12px;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r);
	background: var(--gr-surface);
	transition: border-color .16s, transform .16s;
}

.gr-pod:hover { border-color: var(--gr-line-2); transform: translateY(-2px); }
.gr-pod--1 { background: linear-gradient(180deg, rgba(255, 182, 72, .14), transparent 58%), var(--gr-surface); }

.gr-pod__art { position: relative; display: block; border-radius: var(--gr-r-sm); overflow: hidden; aspect-ratio: 1 / 1; }
.gr-pod__art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gr-pod__rank {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-end: 8px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--gr-warn);
	color: #171106;
	font-weight: 800;
	font-size: 13px;
}

.gr-pod--2 .gr-pod__rank { background: #cfd6dd; color: #12161a; }
.gr-pod--3 .gr-pod__rank { background: #d8935a; color: #1a0f06; }

.gr-pod__id { color: var(--gr-mute-2); font-size: 12px; }
.gr-pod__sum { font-weight: 800; font-size: 16px; font-style: italic; }

.gr-wins__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }

.gr-win {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r);
	background: var(--gr-surface);
	transition: border-color .16s;
}

.gr-win:hover { border-color: var(--gr-line-2); }
.gr-win img { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: cover; }
.gr-win__txt { display: grid; flex: 1; min-width: 0; }
.gr-win__name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-win__id { color: var(--gr-mute-2); font-size: 12px; }
.gr-win__sum { font-weight: 800; font-size: 15.5px; font-style: italic; white-space: nowrap; }

/* ------------------------------------------- 7. copy, aside, content styles */

.gr-copy { display: flow-root; }

.gr-phead { margin-bottom: 18px; }

.gr-phead h1 {
	margin: 0;
	font-weight: 800;
	font-size: clamp(27px, 3.4vw, 40px);
	line-height: 1.16;
}

.gr-lead { margin: 12px 0 0; color: var(--gr-mute); font-size: 17px; }

.gr-aside { display: grid; gap: 14px; margin-bottom: 22px; }

.gr-card {
	display: grid;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r);
	background: var(--gr-surface);
}

.gr-card--bonus {
	/* #bonuses target for the header and burger rows — clear the sticky bar. */
	scroll-margin-top: calc(var(--gr-top) + 16px);
	background:
		radial-gradient(120% 130% at 100% 0%, rgba(47, 227, 160, .22), transparent 62%),
		var(--gr-surface-2);
}

.gr-card__kick { display: inline-flex; align-items: center; gap: 7px; color: var(--gr-accent); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.gr-card__sum { display: grid; gap: 2px; font-weight: 800; font-size: 32px; line-height: 1.05; }
.gr-card__sum span { color: var(--gr-mute); font-weight: 600; font-size: 14px; }
.gr-card__note { color: var(--gr-mute); font-size: 13.5px; }
.gr-card__head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 800; font-size: 16px; }
.gr-card__head .gr-ico { color: var(--gr-accent); }
.gr-card .gr-btn { margin-top: 12px; }

.gr-247 { margin-inline-start: auto; padding: 3px 9px; border-radius: 999px; background: var(--gr-accent-s); color: var(--gr-accent); font-size: 11px; font-weight: 700; }

.gr-tops { display: grid; gap: 4px; }

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

.gr-tops__i:hover { background: var(--gr-surface-2); }
.gr-tops__n { width: 18px; flex: none; color: var(--gr-mute-2); font-weight: 800; font-size: 14px; text-align: center; }
.gr-tops__i img { width: 40px; height: 40px; flex: none; border-radius: 9px; object-fit: cover; }
.gr-tops__txt { display: grid; flex: 1; min-width: 0; }
.gr-tops__name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-tops__prov { color: var(--gr-mute-2); font-size: 12px; }
.gr-tops__i > .gr-ico { color: var(--gr-mute-2); }

.gr-toc {
	display: flow-root;
	margin: 0 0 22px;
	padding: 18px 22px;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r);
	background: var(--gr-surface);
}

.gr-toc__t { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 800; font-size: 15px; }
.gr-toc__t .gr-ico { color: var(--gr-accent); }
.gr-toc ol { margin: 0; padding-inline-start: 20px; color: var(--gr-mute); }
.gr-toc li { margin: 5px 0; }
.gr-toc a:hover { color: var(--gr-accent); }

.gr-content { font-size: 16.5px; }

.gr-content h2,
.gr-content h3,
.gr-content h4 { margin: 34px 0 12px; font-weight: 800; line-height: 1.22; scroll-margin-top: calc(var(--gr-top) + 16px); }

.gr-content h2 { font-size: clamp(22px, 2.4vw, 28px); }
.gr-content h3 { font-size: clamp(19px, 2vw, 22px); }
.gr-content h4 { font-size: 18px; }
.gr-content p { margin: 0 0 16px; color: rgba(238, 241, 244, .84); }
.gr-content a { color: var(--gr-accent); text-decoration: underline; text-underline-offset: 3px; }
.gr-content a:hover { color: var(--gr-accent-d); }
.gr-content ul, .gr-content ol { margin: 0 0 18px; padding-inline-start: 22px; color: rgba(238, 241, 244, .84); }
.gr-content li { margin: 7px 0; }
.gr-content ul { list-style: none; padding-inline-start: 0; }

.gr-content ul li {
	position: relative;
	padding-inline-start: 26px;
}

.gr-content ul li::before {
	content: '';
	position: absolute;
	inset-block-start: .62em;
	inset-inline-start: 4px;
	width: 8px;
	height: 8px;
	border-radius: 3px;
	background: var(--gr-accent);
}

.gr-content img {
	display: block;
	width: min(812px, 100%);
	height: auto;
	margin: 22px auto;
	border-radius: var(--gr-r);
}

.gr-content figure { display: flow-root; margin: 22px 0; }
.gr-content figcaption { color: var(--gr-mute-2); font-size: 13.5px; text-align: center; }

.gr-content blockquote {
	display: flow-root;
	margin: 22px 0;
	padding: 18px 22px;
	border: 1px solid var(--gr-line);
	border-inline-start: 3px solid var(--gr-accent);
	border-radius: var(--gr-r-sm);
	background: var(--gr-surface);
	color: var(--gr-mute);
}

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

.gr-tscroll { display: flow-root; overflow-x: auto; margin: 22px 0; border: 1px solid var(--gr-line); border-radius: var(--gr-r); }
.gr-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gr-content th, .gr-content td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--gr-line); }
.gr-content th { background: var(--gr-surface-2); font-weight: 700; }
.gr-content tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- 8. cta */

.gr-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 34px 0 40px;
	padding: 28px clamp(20px, 3vw, 38px);
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r-lg);
	background:
		radial-gradient(90% 200% at 0% 0%, rgba(47, 227, 160, .18), transparent 60%),
		var(--gr-surface);
}

.gr-cta__txt { display: grid; gap: 5px; }
.gr-cta__h { font-weight: 800; font-size: clamp(21px, 2.4vw, 27px); }
.gr-cta__s { color: var(--gr-mute); font-size: 15px; }

/* ------------------------------------------- 9. footer, tab bar, responsive */

.gr-foot { padding-bottom: 26px; }

.gr-foot__card {
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r-lg);
	background: var(--gr-bg-2);
	overflow: hidden;
}

.gr-foot__cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 26px;
	padding: 30px clamp(20px, 3vw, 34px);
}

.gr-foot__about { margin: 14px 0 0; color: var(--gr-mute); font-size: 14px; max-width: 34ch; }
.gr-foot__soc { display: flex; gap: 8px; margin-top: 16px; }

.gr-foot__soci {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--gr-line);
	border-radius: 12px;
	color: var(--gr-mute);
	transition: border-color .16s, color .16s;
}

.gr-foot__soci:hover { border-color: var(--gr-accent); color: var(--gr-accent); }

.gr-foot__col { display: grid; align-content: start; gap: 9px; }
.gr-foot__ct { margin-bottom: 4px; font-weight: 800; font-size: 15px; }
.gr-foot__col a { color: var(--gr-mute); font-size: 14px; }
.gr-foot__col a:hover { color: var(--gr-accent); }

.gr-band {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 18px clamp(20px, 3vw, 34px);
	border-top: 1px solid var(--gr-line);
}

.gr-band__t { color: var(--gr-mute-2); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.gr-band__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.gr-band__i {
	padding: 8px 14px;
	border: 1px solid var(--gr-line);
	border-radius: 10px;
	background: var(--gr-surface);
	color: var(--gr-mute);
	font-weight: 700;
	font-size: 13px;
}

.gr-band__i--mute { background: transparent; color: var(--gr-mute-2); }

.gr-age {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 2px solid var(--gr-hot);
	border-radius: 50%;
	color: var(--gr-hot);
	font-weight: 800;
	font-size: 13px;
}

.gr-foot__legal { padding: 18px clamp(20px, 3vw, 34px); border-top: 1px solid var(--gr-line); }
.gr-foot__legal p { margin: 0 0 8px; color: var(--gr-mute-2); font-size: 12.5px; line-height: 1.55; }
.gr-foot__legal p:last-child { margin-bottom: 0; }

.gr-foot__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px clamp(20px, 3vw, 34px);
	border-top: 1px solid var(--gr-line);
	color: var(--gr-mute-2);
	font-size: 13px;
}

.gr-tabbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 45;
	display: none;
	background: rgba(10, 11, 13, .96);
	border-top: 1px solid var(--gr-line);
	backdrop-filter: blur(12px);
}

.gr-tabbar__i {
	display: grid;
	justify-items: center;
	gap: 3px;
	flex: 1;
	padding: 9px 4px calc(9px + env(safe-area-inset-bottom, 0px));
	color: var(--gr-mute);
	font-size: 11px;
	font-weight: 600;
}

.gr-tabbar__i:hover { color: var(--gr-accent); }

.gr-totop {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 22px;
	z-index: 44;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--gr-line-2);
	border-radius: 50%;
	background: var(--gr-surface);
	color: var(--gr-text);
	cursor: pointer;
}

.gr-totop[hidden] { display: none; }
.gr-totop:hover { background: var(--gr-accent); color: #06110c; border-color: transparent; }

:where(a, button, summary):focus-visible {
	outline: 2px solid var(--gr-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/*
 * The card column FLOATS, so the copy wraps beside it and then reclaims the
 * full measure once the cards end. A grid track is deliberately not used — it
 * would hold the article at one width down the whole page and leave a dead
 * gutter beside the short cards.
 *
 * The float switches on at the first width where the wrapped copy still fits
 * an 812px content image: measure − card column − gutter ≥ 812. Both are
 * fluid, so that point is 1180px (1140 − 288 − 24 = 828) rather than the 1240
 * a fixed 324px column would need, and the column grows back to 324px on a
 * full-width page.
 */
@media (min-width: 1180px) {
	.gr-copy--aside .gr-aside {
		float: right;
		width: clamp(288px, 24vw, 324px);
		margin: 0 0 22px clamp(24px, 2vw, 34px);
	}
}

/*
 * Below that the cards cannot sit beside the copy without squeezing it, so
 * they drop BELOW the article as a band — three across, one per row on a
 * phone. Source order puts the aside before the article (it is a card column,
 * not a footer), so the order is reset here rather than in the markup.
 */
@media (max-width: 1179px) {
	.gr-copy--aside { display: flex; flex-direction: column; }
	.gr-copy--aside .gr-phead   { order: 1; }
	.gr-copy--aside .gr-toc     { order: 2; }
	.gr-copy--aside .gr-content { order: 3; }

	.gr-copy--aside .gr-aside {
		order: 4;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		margin: 28px 0 0;
	}
}


@media (max-width: 1100px) {
	.gr-wins { grid-template-columns: 1fr; }
	.gr-wins__list { grid-template-columns: 1fr 1fr; }
	.gr-foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
	.gr-top__nav { display: none; }
}

@media (max-width: 900px) {
	.gr-tabbar { display: flex; }
	.gr-main { padding-bottom: 6px; }
	.gr-foot { padding-bottom: 84px; }
	.gr-totop { bottom: 84px; }
	.gr-banner__in { width: 100%; background: linear-gradient(90deg, rgba(6, 12, 10, .94) 58%, rgba(6, 12, 10, .4)); }
}

@media (max-width: 720px) {
	.gr-sec { margin-top: 26px; }
	.gr-rarrow { display: none; }
	.gr-copy--aside .gr-aside { grid-template-columns: minmax(0, 1fr); }
	.gr-promo__l span { font-size: 13px; text-align: start; }
	.gr-top__auth .gr-btn--ghost { display: none; }
	.gr-wins__podium { grid-template-columns: 1fr; }
	.gr-wins__list { grid-template-columns: 1fr; }
	.gr-pod { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 4px 14px; }
	.gr-pod__art { grid-row: span 2; aspect-ratio: 1 / 1; }
	.gr-foot__cols { grid-template-columns: 1fr; gap: 22px; }
	.gr-cta { flex-direction: column; align-items: flex-start; }
	.gr-tile, .gr-rail--square .gr-tile { width: 148px; }
	.gr-rail--wide .gr-tile { width: 232px; }
	.gr-content { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* --------------------------------------- 10. toplist, review, landing, page */

.gr-tl { display: grid; gap: 12px; }

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

.gr-tl__i:hover { border-color: var(--gr-line-2); }

.gr-tl__n {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: var(--gr-accent-s);
	color: var(--gr-accent);
	font-weight: 800;
	font-size: 17px;
}

.gr-tl__main { display: grid; gap: 7px; min-width: 0; }
.gr-tl__name { font-weight: 800; font-size: 17px; }
.gr-tl__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.gr-tl__tag {
	padding: 4px 10px;
	border: 1px solid var(--gr-line);
	border-radius: 999px;
	color: var(--gr-mute);
	font-size: 12px;
	font-weight: 600;
}

.gr-tl__bonus { display: grid; gap: 2px; min-width: 0; }
.gr-tl__sum { font-weight: 800; font-size: 21px; color: var(--gr-accent); line-height: 1.15; }
.gr-tl__cond { color: var(--gr-mute); font-size: 13px; }
.gr-tl__go { display: grid; justify-items: end; gap: 9px; }

.gr-rate { display: inline-flex; align-items: center; gap: 7px; }
.gr-rate__stars { display: inline-flex; gap: 2px; color: var(--gr-line-2); }
.gr-rate__s.is-on { color: var(--gr-warn); }
.gr-rate__n { font-weight: 800; font-size: 14px; }

.gr-review {
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r-lg);
	background:
		radial-gradient(80% 160% at 0% 0%, rgba(47, 227, 160, .14), transparent 58%),
		var(--gr-surface);
	overflow: hidden;
}

.gr-review__head {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	padding: 24px clamp(20px, 3vw, 30px);
}

.gr-review__score { display: grid; gap: 4px; flex: 1; min-width: 200px; }
.gr-review__note { color: var(--gr-mute); font-size: 13.5px; }

.gr-review__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--gr-line);
}

.gr-fact {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: center;
	gap: 2px 12px;
	padding: 16px clamp(20px, 3vw, 30px);
	border-inline-end: 1px solid var(--gr-line);
	border-bottom: 1px solid var(--gr-line);
}

.gr-fact:nth-child(3n) { border-inline-end: 0; }
.gr-fact:nth-last-child(-n+3) { border-bottom: 0; }
.gr-fact__i { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gr-accent-s); color: var(--gr-accent); }
.gr-fact__l { color: var(--gr-mute); font-size: 12.5px; }
.gr-fact__v { font-weight: 700; font-size: 15px; }

.gr-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }

.gr-pc__col {
	padding: 20px 22px;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r);
	background: var(--gr-surface);
}

.gr-pc__t { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 800; font-size: 16px; }
.gr-pc__col--pro .gr-pc__t .gr-ico { color: var(--gr-accent); }
.gr-pc__col--con .gr-pc__t .gr-ico { color: var(--gr-warn); }
.gr-pc__col ul { margin: 0; padding: 0; list-style: none; }
.gr-pc__col li { position: relative; margin: 8px 0; padding-inline-start: 20px; color: rgba(238, 241, 244, .84); font-size: 15px; }

.gr-pc__col li::before {
	content: '';
	position: absolute;
	inset-block-start: .62em;
	inset-inline-start: 2px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--gr-accent);
}

.gr-pc__col--con li::before { background: var(--gr-warn); }

.gr-land {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: clamp(26px, 4vw, 44px);
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r-lg);
	background:
		radial-gradient(70% 150% at 100% 0%, rgba(47, 227, 160, .2), transparent 62%),
		var(--gr-surface);
}

.gr-land__k { padding: 5px 12px; border-radius: 999px; background: var(--gr-accent-s); color: var(--gr-accent); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.gr-land__h { font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; }
.gr-land__s { max-width: 60ch; color: var(--gr-mute); font-size: 16px; }
.gr-land .gr-btn { margin-top: 12px; }

.gr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }

.gr-step {
	display: grid;
	gap: 4px;
	padding: 20px;
	border: 1px solid var(--gr-line);
	border-radius: var(--gr-r);
	background: var(--gr-surface);
}

.gr-step__n {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 6px;
	border-radius: 11px;
	background: var(--gr-accent);
	color: #06110c;
	font-weight: 800;
}

.gr-step__l { font-weight: 800; font-size: 16px; }
.gr-step__note { color: var(--gr-mute); font-size: 13.5px; }

/* Page types with no card column keep a reading measure — nothing reclaims
   the width later, so a long line here is just a long line. */
.gr-plain { max-width: 860px; }

@media (max-width: 900px) {
	.gr-tl__i { grid-template-columns: 40px 1fr; gap: 12px 14px; }
	.gr-tl__bonus { grid-column: 2; }
	.gr-tl__go { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: space-between; width: 100%; }
	.gr-review__facts { grid-template-columns: 1fr 1fr; }
	.gr-fact:nth-child(3n) { border-inline-end: 1px solid var(--gr-line); }
	.gr-fact:nth-child(2n) { border-inline-end: 0; }
	.gr-fact:nth-last-child(-n+3) { border-bottom: 1px solid var(--gr-line); }
	.gr-fact:nth-last-child(-n+2) { border-bottom: 0; }
	.gr-pc { grid-template-columns: 1fr; }
	.gr-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.gr-steps { grid-template-columns: 1fr; }
	.gr-review__facts { grid-template-columns: 1fr; }
	.gr-fact { border-inline-end: 0 !important; border-bottom: 1px solid var(--gr-line) !important; }
	.gr-fact:last-child { border-bottom: 0 !important; }
}