/* ==========================================================================
   rino_01_vst — clone of rino-casinos.com/ua
   Palette, radii and metrics lifted from the source's own CSS custom
   properties: near-black #080b11 canvas, neon-green #26e176 brand, flat 8px
   radii, Ubuntu throughout, 61px fixed header, 1200px content column.
   ========================================================================== */

:root {
	--bg:          #080b11;
	--bg-2:        #10141c;
	--card:        #1b1e24;
	--card-2:      #1f242f;
	--line:        #393e48;
	--green:       #26e176;
	--green-2:     #31ea77;
	--green-glow:  #04f660;
	--text:        #f5f5f5;
	--muted:       #9b9b9b;
	--dim:         #6d6d6d;
	--gold:        #ffcb3a;
	--red:         #df0129;
	--r:           8px;
	--hdr:         61px;
	--wrap:        1200px;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.5 Ubuntu, system-ui, sans-serif;
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Horizontal rails: the source hides the scrollbar and keeps momentum scroll. */
.rn-rail {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.rn-rail::-webkit-scrollbar { display: none; }

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

.rn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 32px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--r);
	font: 500 16px/18px Ubuntu, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .15s, background .15s;
}
.rn-btn--cta   { background: var(--green); border-color: var(--green-2); color: #080b11; }
.rn-btn--ghost { background: linear-gradient(90deg, #242830, #2e333d); border-color: var(--line); color: var(--text); }
.rn-btn--cta:hover   { filter: brightness(1.08); }
.rn-btn--ghost:hover { background: linear-gradient(90deg, #2e333d, #383e4a); }
.rn-btn--full  { width: 100%; }
.rn-btn--lg    { height: 44px; padding: 0 32px; font-size: 18px; }

/* ---------- header ------------------------------------------------------- */

.rn-hdr {
	position: fixed;
	inset: 0 0 auto;
	z-index: 40;
	height: var(--hdr);
	background: linear-gradient(180deg, #110808, #080b11);
}
/* The source's signature green hairline glow under the header. */
.rn-hdr::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--green-glow), transparent);
	box-shadow: 0 0 12px rgba(4, 246, 96, .45);
}
.rn-hdr__in {
	display: flex;
	align-items: center;
	height: var(--hdr);
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 16px;
}
.rn-hdr__left,
.rn-hdr__right { display: flex; align-items: center; gap: 8px; flex: 1 1 0; }
.rn-hdr__right { justify-content: flex-end; }

.rn-burger {
	display: grid;
	place-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	flex: none;
	padding: 0;
	border: 1px solid #2b3a31;
	border-radius: var(--r);
	background: linear-gradient(90deg, #1d2620, #2f3d34);
	cursor: pointer;
}
.rn-burger span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--text);
}

.rn-routes { display: flex; gap: 4px; }
.rn-routes__i {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 58px;
	height: 48px;
	padding: 0 6px;
	border-radius: var(--r);
	font-size: 12px;
	color: var(--text);
	transition: background .15s;
}
.rn-routes__i img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.rn-routes__i:hover { background: #ffffff0d; }
.rn-routes__i.is-on { position: relative; color: var(--green); }
.rn-routes__i.is-on img { filter: none; }
.rn-routes__i.is-on::after {
	content: '';
	position: absolute;
	left: 8px; right: 8px; bottom: -6px;
	height: 2px;
	background: linear-gradient(90deg, #26e17600, #26e1768c 50%, #26e17600);
}

.rn-logo { flex: none; }
.rn-logo img { width: auto; height: 38px; }

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

.rn-dim {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: #000d23cc;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
}
.rn-dim.is-on { opacity: 1; visibility: visible; }

.rn-drawer {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	z-index: 60;
	width: 300px;
	max-width: 86vw;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	background: #0d1119;
	border-right: 1px solid #1c232c;
	transform: translateX(-100%);
	transition: transform .25s ease;
	overflow-y: auto;
}
.rn-drawer.is-on { transform: none; }
.rn-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.rn-drawer__head img { width: auto; height: 28px; }
.rn-drawer__x {
	width: 32px; height: 32px;
	border: 0; border-radius: var(--r);
	background: #1b1e24;
	color: var(--text);
	font-size: 22px; line-height: 1;
	cursor: pointer;
}
.rn-drawer__promo {
	display: grid;
	gap: 8px;
	padding: 14px;
	border: 1px solid #26e17680;
	border-radius: var(--r);
	background: linear-gradient(180deg, #26e1761f, #26e1760d);
}
.rn-drawer__promo-tag { font-size: 13px; color: var(--green); text-transform: uppercase; letter-spacing: .4px; }
.rn-drawer__promo-sum { font-size: 18px; line-height: 1.25; }
.rn-drawer__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rn-drawer__nav a {
	display: block;
	padding: 11px 12px;
	border-radius: var(--r);
	color: #ededed;
}
.rn-drawer__nav a:hover,
.rn-drawer__nav a.is-on { background: #ffffff0d; color: var(--green); }
.rn-drawer__foot { display: grid; gap: 8px; margin-top: auto; }

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

.rn-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: var(--hdr);
	padding-bottom: 32px;
}
.rn-sec {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 16px;
}

.rn-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.rn-head__name { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rn-head__name img { width: 32px; height: 32px; flex: none; }
.rn-head__name b {
	font: 500 20px/28px Ubuntu, sans-serif;
	letter-spacing: -.4px;
	color: var(--text);
}
.rn-head__act { display: flex; align-items: center; gap: 8px; flex: none; }
.rn-all { font-size: 14px; color: var(--green); }
.rn-all:hover { text-decoration: underline; }
.rn-arr {
	display: grid;
	place-content: center;
	width: 28px; height: 28px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: linear-gradient(90deg, #242830, #2e333d);
	cursor: pointer;
}
.rn-arr svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rn-arr:hover { background: #2e333d; }

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

.rn-hero { position: relative; width: 100%; }
.rn-hero__vp { overflow: hidden; }
.rn-hero__track { display: flex; transition: transform .4s ease; }
.rn-hero__card { flex: 0 0 100%; }
.rn-hero__card img { width: 100%; height: auto; }
.rn-hero__arr {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #080b1199;
	cursor: pointer;
}
.rn-hero__arr::before {
	content: '';
	position: absolute;
	inset: 0;
	background: no-repeat center / 12px 12px;
}
.rn-hero__arr--l { left: 16px; }
.rn-hero__arr--r { right: 16px; }
.rn-hero__arr--l::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.rn-hero__arr--r::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.rn-hero__dots {
	position: absolute;
	left: 0; right: 0; bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.rn-hero__dots button {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff59;
	cursor: pointer;
}
.rn-hero__dots button.is-on { background: var(--green); width: 20px; border-radius: 4px; }
/* A single-slide carousel keeps no chrome — the source snapshot had one banner. */
.rn-hero.is-single .rn-hero__arr,
.rn-hero.is-single .rn-hero__dots { display: none; }

/* ---------- provider rail ------------------------------------------------ */

.rn-provs { padding-top: 8px; }
.rn-prov {
	position: relative;
	flex: 0 0 auto;
	width: 152px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 8px 10px;
	border-radius: var(--r);
	text-align: center;
	transition: background .15s;
}
.rn-prov:hover { background: #ffffff0a; }
.rn-prov img { width: auto; max-width: 130px; height: 52px; object-fit: contain; }
/* The source's CARD_WIDE_LOGO_NO_BACK tile shows the logo alone — the name and
   game count stay in the DOM for screen readers and crawlers only. */
.rn-prov__name,
.rn-prov__count {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.rn-prov--all svg {
	width: 34px; height: 34px;
	fill: none;
	stroke: var(--text);
	stroke-width: 1.6;
	stroke-linejoin: round;
}
.rn-prov--all circle { fill: var(--text); stroke: none; }
.rn-prov--all .rn-prov__name {
	position: static;
	width: auto; height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	font-size: 12px;
	color: var(--dim);
}

/* HOT / TOP / NEW pills used on provider tiles and slot cards. */
.rn-lbl {
	position: absolute;
	top: 2px;
	right: 6px;
	z-index: 2;
	padding: 2px 8px;
	border-radius: 1px 8px 1px 8px;
	box-shadow: 0 2px 8px 1px #00000040;
	font: 500 11px/12px Ubuntu, sans-serif;
	font-style: normal;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #080b11;
}
.rn-lbl--hot   { background: #ff2f8e; color: #fff; }
.rn-lbl--top   { background: var(--green); }
.rn-lbl--new   { background: var(--gold); }
.rn-lbl--crash { background: #ff7a2f; color: #fff; }
.rn-lbl--live  { background: var(--red); color: #fff; }

/* ---------- search + chip panel ------------------------------------------ */

.rn-panel {
	position: sticky;
	top: var(--hdr);
	z-index: 20;
	padding: 8px 0;
	background: #080b11f2;
	backdrop-filter: blur(6px);
}
.rn-panel__in {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 16px;
}
.rn-search { display: flex; align-items: center; flex: none; }
.rn-search__btn {
	display: grid;
	place-content: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid #3a473f;
	border-radius: var(--r);
	background: linear-gradient(90deg, #1d2620, #2f3d34);
	cursor: pointer;
}
.rn-search__btn svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.rn-search__in {
	width: 0;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--r);
	background: #10151a;
	color: var(--text);
	font: 400 14px Ubuntu, sans-serif;
	opacity: 0;
	transition: width .2s, opacity .2s, padding .2s;
}
.rn-search:focus-within .rn-search__in,
.rn-search__in:not(:placeholder-shown) {
	width: 180px;
	margin-left: 8px;
	padding: 0 12px;
	border-color: #3a473f;
	opacity: 1;
}
.rn-search__in:focus { outline: none; border-color: var(--green-2); }

.rn-panel__chips {
	flex: 1 1 auto;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.rn-panel__chips::-webkit-scrollbar { display: none; }
.rn-chip {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 74px;
	height: 44px;
	padding: 4px 8px;
	border: 1px solid #3a473f;
	border-radius: var(--r);
	background: linear-gradient(90deg, #1d2620, #2f3d34);
	font-size: 10px;
	line-height: 12px;
	color: #ededed;
	text-align: center;
}
.rn-chip img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.rn-chip:hover { border-color: #4a5a50; }
.rn-chip.is-on {
	border-color: #0fff6a59;
	background: linear-gradient(90deg, #04f66059, #16a85559);
}
.rn-chip.is-on img { filter: none; }

/* ---------- winners rail ------------------------------------------------- */

.rn-win {
	position: relative;
	flex: 0 0 auto;
	width: 132px;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--card);
}
.rn-win img { width: 100%; height: auto; aspect-ratio: 223 / 300; object-fit: cover; }
.rn-win__t {
	display: block;
	padding: 6px 8px 0;
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rn-win__s { display: block; padding: 0 8px 8px; font-size: 14px; color: var(--green); }

/* ---------- slot grids --------------------------------------------------- */

/* Two rows deep, scrolling sideways — the source's `grid-auto-flow: column`. */
.rn-grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	grid-auto-columns: 132px;
	gap: 8px;
}
.rn-gc {
	position: relative;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--card);
	cursor: pointer;
}
.rn-gc img {
	width: 100%;
	height: auto;
	aspect-ratio: 223 / 300;
	object-fit: cover;
	transition: transform .25s;
}
.rn-gc__over {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px;
	background: linear-gradient(180deg, #080b1180, #080b11e6);
	text-align: center;
	opacity: 0;
	transition: opacity .2s;
}
.rn-gc:hover img { transform: scale(1.06); }
.rn-gc:hover .rn-gc__over { opacity: 1; }
.rn-gc__name { font: 500 13px/16px Ubuntu, sans-serif; }
.rn-gc__prov { font-size: 11px; font-style: normal; color: var(--dim); }
.rn-gc__play { margin-top: 6px; height: 28px; padding: 0 16px; font-size: 14px; }

/* ---------- "Грай — забирай" scene panel --------------------------------- */

.rn-slider {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px 16px 24px;
	border-radius: var(--r);
	overflow: hidden;
	background: #0e2a2c;
}
.rn-slider__bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.rn-slider__title { position: relative; z-index: 2; width: auto; max-height: 96px; }
.rn-slider__hero {
	position: absolute;
	right: 8px; bottom: 0;
	z-index: 4;
	width: auto;
	max-height: 190px;
	pointer-events: none;
}
.rn-slider__rail {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 8px;
	width: 100%;
	padding-right: 200px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.rn-slider__rail::-webkit-scrollbar { display: none; }
.rn-slider__card { flex: 0 0 auto; width: 132px; border-radius: var(--r); overflow: hidden; }
.rn-slider__card img { width: 100%; height: auto; aspect-ratio: 223 / 300; object-fit: cover; }
.rn-slider__cta { position: relative; z-index: 3; height: 40px; padding: 0 28px; font-size: 18px; }

/* ---------- live games --------------------------------------------------- */

.rn-live {
	position: relative;
	padding: 14px;
	border-radius: var(--r);
	background: linear-gradient(135deg, #241033, #120a20 60%, #0b0d16);
}
.rn-live__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rn-live__kicker {
	font: 500 11px/14px Ubuntu, sans-serif;
	letter-spacing: 1px;
	color: var(--gold);
}
.rn-live__title { font: 500 16px/20px Ubuntu, sans-serif; }
.rn-live__brand { width: 44px; height: 44px; margin-left: auto; }
.rn-live__rail { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 210px; gap: 8px; }
.rn-lc {
	position: relative;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--bg);
}
.rn-lc img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.rn-lc__bar {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 8px;
}
.rn-lc__bar b { font: 400 13px/16px Ubuntu, sans-serif; }
.rn-lc__bar i { font-size: 11px; font-style: normal; color: var(--dim); }
.rn-lc:hover img { filter: brightness(1.12); }

/* ---------- tournaments -------------------------------------------------- */

/* Three 300px cards don't fill a 1200px column, so centre them on desktop.
   Below that the rail overflows and must stay left-aligned, or the first card
   scrolls out of reach. */
.rn-tours { padding: 4px 0; align-items: stretch; }
@media (min-width: 1000px) {
	.rn-tours { justify-content: center; }
}
.rn-tour {
	flex: 0 0 auto;
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border: 1px solid #26e17633;
	border-radius: var(--r);
	background: var(--card-2);
	text-align: center;
}
.rn-tour__top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.rn-tour__timer { font-size: 11px; color: var(--muted); }
.rn-tour__state {
	padding: 2px 10px;
	border-radius: 4px;
	font: 500 11px/16px Ubuntu, sans-serif;
	font-style: normal;
	color: #080b11;
}
.rn-tour__state--now  { background: #fc0a55; color: #fff; }
.rn-tour__state--soon { background: #1bb154; color: #fff; }
.rn-tour__art { width: auto; height: 150px; object-fit: contain; }
.rn-tour__name {
	font: 500 14px/18px Ubuntu, sans-serif;
	letter-spacing: .6px;
	text-transform: uppercase;
}
.rn-tour__prize { font: 700 28px/32px Ubuntu, sans-serif; }
.rn-tour__games { display: flex; gap: 4px; width: 100%; overflow: hidden; }
.rn-tour__games img { width: 52px; height: auto; aspect-ratio: 223 / 300; object-fit: cover; border-radius: 4px; }
.rn-tour__btn { width: 100%; margin-top: auto; }

/* ---------- prose content ------------------------------------------------ */

.rn-content {
	width: 100%;
	max-width: var(--wrap);
	margin: 8px auto 0;
	padding: 0 16px;
	color: #d5d8de;
}
.rn-content h1,
.rn-content h2,
.rn-content h3 { color: var(--green); font-weight: 500; line-height: 1.25; }
.rn-content h1 { font-size: 28px; margin: 24px 0 12px; }
.rn-content h2 { font-size: 22px; margin: 28px 0 10px; }
.rn-content h3 { font-size: 18px; margin: 22px 0 8px; color: var(--text); }
.rn-content p,
.rn-content li { font-size: 15px; line-height: 1.65; }
.rn-content ul,
.rn-content ol { padding-left: 20px; }
.rn-content li { margin: 6px 0; }
.rn-content li::marker { color: var(--green); }
.rn-content a { color: var(--green); text-decoration: underline; }
/* Editorial images: never distorted by stray width/height attributes, and
   centred so a narrow graphic doesn't hug the left edge of the column. */
.rn-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 16px auto;
	border-radius: var(--r);
}
/* Content tables are sized to their own content and scroll inside the wrapper —
   a fixed min-width squeezes every cell into a ragged stack instead. */
.rn-content .table-scroll {
	margin: 20px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.rn-content .table-scroll table { width: max-content; min-width: 100%; margin: 0; }
.rn-content .table-scroll th { white-space: nowrap; }
.rn-content .table-scroll td { max-width: 38ch; }
.rn-content table {
	width: 100%;
	margin: 16px 0;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--card);
	border-radius: var(--r);
	overflow: hidden;
}
.rn-content th,
.rn-content td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #262b34; }
.rn-content th { background: #202631; color: var(--text); font-weight: 500; }
.rn-content tr:last-child td { border-bottom: 0; }
.rn-content blockquote {
	margin: 16px 0;
	padding: 12px 16px;
	border-left: 3px solid var(--green);
	border-radius: 0 var(--r) var(--r) 0;
	background: #26e1760d;
}

/* ---------- page-type headers -------------------------------------------- */

.rn-phead {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 24px 16px 0;
}
.rn-phead__title {
	display: block;
	font: 500 30px/1.2 Ubuntu, sans-serif;
	color: var(--text);
}
.rn-phead p { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 780px; }

.rn-rate { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.rn-rate .stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; }
.rn-rate b { font-size: 24px; color: var(--green); }
.rn-rate em { font-style: normal; color: var(--dim); }

.rn-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
}
.rn-facts > div {
	padding: 10px 14px;
	border: 1px solid #262b34;
	border-radius: var(--r);
	background: var(--card);
}
.rn-facts dt { font-size: 12px; color: var(--dim); }
.rn-facts dd { margin: 2px 0 0; font-size: 15px; }

.rn-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--wrap);
	margin: 24px auto 0;
	padding: 20px;
	border: 1px solid #26e17640;
	border-radius: var(--r);
	background: linear-gradient(90deg, #26e17626, #26e1760d);
}
.rn-cta__txt span { display: block; font-size: 13px; color: var(--muted); }
.rn-cta__txt b { display: block; margin-top: 4px; font: 500 20px/1.3 Ubuntu, sans-serif; }
.rn-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

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

.rn-foot { margin-top: 24px; padding: 24px 0 0; background: #0b0e15; border-top: 1px solid #161b23; }
.rn-foot__in {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
	gap: 24px;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 16px;
}
.rn-foot__logo img { width: auto; height: 34px; }
.rn-foot__nav { display: grid; gap: 8px; align-content: start; }
.rn-foot__nav a { font-size: 14px; color: #c9ccd1; }
.rn-foot__nav a:hover { color: var(--green); }
.rn-foot__cta { display: grid; gap: 12px; align-content: start; }
.rn-tg {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--r);
	background: linear-gradient(90deg, #1ca758, var(--green));
	color: #08210f;
	font-size: 13px;
	line-height: 1.3;
}
.rn-tg b { font-size: 15px; }
.rn-tg svg { width: 26px; height: 26px; flex: none; fill: #08210f; }
.rn-foot__copy { margin: 0; font-size: 13px; color: var(--dim); }
.rn-foot__legal {
	max-width: var(--wrap);
	margin: 20px auto 0;
	padding: 16px;
	border-top: 1px solid #161b23;
	color: var(--dim);
	font-size: 12px;
	line-height: 1.6;
}
.rn-foot__legal p { margin: 6px 0 0; }
.rn-foot__age {
	display: inline-grid;
	place-content: center;
	width: 34px; height: 34px;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: 13px;
	color: var(--text);
}

/* ---------- mobile bottom bar -------------------------------------------- */

/* Phones drop the header route rail, so the bar carries those same four
   destinations. The drawer stays behind the header burger only — one entry
   point, never two. */
.rn-bottom {
	display: none;
	position: fixed;
	inset: auto 0 0;
	z-index: 30;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	background: #0c1017;
	border-top: 1px solid #1a212b;
}
.rn-bottom__i {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 4px 2px;
	font-size: 10px;
	color: #c9ccd1;
}
.rn-bottom__i img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.rn-bottom__i.is-on { color: var(--green); }
.rn-bottom__i.is-on img { filter: none; }

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

@media (max-width: 1100px) {
	.rn-routes { display: none; }
}

@media (max-width: 900px) {
	.rn-foot__in { grid-template-columns: 1fr 1fr; }
	.rn-foot__logo { grid-column: 1 / -1; }
	.rn-foot__cta { grid-column: 1 / -1; }
	.rn-slider__hero { max-height: 130px; opacity: .9; }
}

@media (max-width: 720px) {
	.rn-hdr__in { padding: 0 12px; gap: 8px; }
	.rn-hdr__left, .rn-hdr__right { flex: 0 0 auto; }
	.rn-logo { flex: 1 1 auto; display: flex; justify-content: center; }
	.rn-logo img { height: 36px; }
	/* Registration lives in the drawer on phones — the source keeps only Вхід. */
	.rn-hdr__right .rn-btn--cta { display: none; }
	.rn-bottom { display: grid; }
	.rn-main { padding-bottom: 78px; }

	/* The offer text is baked into the banner, so it must never be cropped —
	   the source shows the full-width creative on phones too. */

	.rn-sec { padding: 0 12px; }
	.rn-panel__in { padding: 0 12px; }
	.rn-grid { grid-auto-columns: 108px; }
	.rn-win, .rn-prov, .rn-slider__card { width: 108px; }
	.rn-prov img { max-width: 92px; height: 28px; }
	.rn-head__name { gap: 10px; }
	.rn-head__name b { font-size: 17px; line-height: 24px; }
	.rn-head__name img { width: 26px; height: 26px; }
	.rn-live__rail { grid-auto-columns: 168px; }
	.rn-tour { width: 260px; }
	.rn-tour__prize { font-size: 24px; }
	.rn-slider__title { max-height: 60px; }
	.rn-slider__hero { max-height: 96px; right: 0; }
	.rn-content h1 { font-size: 23px; }
	.rn-content h2 { font-size: 19px; }
	.rn-phead__title { font-size: 24px; }
	/* Tap targets can't hover — show the slot card's title bar permanently. */
	.rn-gc__over {
		opacity: 1;
		justify-content: flex-end;
		gap: 0;
		padding: 6px;
		background: linear-gradient(180deg, transparent 55%, #080b11e6);
	}
	.rn-gc__name { font-size: 11px; }
	.rn-gc__prov, .rn-gc__play { display: none; }
}