@font-face {
	font-family: 'Gilroy';
	src: url('gilroy-400.woff2') format('woff2');
	font-weight: 400 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('gilroy-700.woff2') format('woff2');
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
}

/* luckycoin_01 — tokens measured on luckycoini.best (02.11.2026) */
:root {
	--bg: #161c25;
	--hdr: #202c3e;
	--side: #19222f;
	--plate: #161f2c;
	--card: #27303d;
	--line: #27303d;
	--muted: #8b94a1;
	--text: #c3c9d2;
	--white: #fff;
	--pink: #ff427e;
	--grad: linear-gradient(-90deg, #4646fb, #be4dff, #ff427e);
	--r: 8px;
	--r-lg: 16px;
	--hdr-h: 56px;
	--side-w: 52px;
	--gap: 16px;
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--muted);
	font: 500 15px/1.45 'Gilroy', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	padding-top: var(--hdr-h);
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }

.ico { width: 20px; height: 20px; flex: none; }

.skip {
	position: absolute; left: -9999px; top: 8px; z-index: 100;
	background: var(--white); color: #000; padding: 8px 12px; border-radius: var(--r);
}
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

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

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 37px; padding: 8px 32px; border-radius: var(--r);
	font-weight: 700; font-size: 16px; line-height: 1; color: var(--white);
	white-space: nowrap; position: relative; transition: filter .2s, transform .2s;
}
.btn--grad { background: var(--grad); }
.btn--grad:hover { filter: brightness(1.12); }
.btn--outline { background: var(--bg); color: var(--muted); }
.btn--outline::before {
	content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
	background: var(--grad);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
	pointer-events: none;
}
.btn--outline:hover { color: var(--white); }
.btn--lg { height: 50px; text-transform: uppercase; }
.btn--sm { height: 34px; padding: 6px 18px; font-size: 14px; }

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

.hdr {
	position: fixed; inset: 0 0 auto 0; z-index: 40;
	height: var(--hdr-h); background: var(--hdr);
	display: flex; align-items: center; gap: 12px;
	padding: 0 16px 0 14px;
}
.burger { width: 24px; height: 24px; margin-right: 4px; }
.burger img { width: 24px; height: 24px; transition: transform .2s; }
body.is-wide .burger img { transform: scaleX(-1); }
.hdr__logo img { height: 23px; width: auto; }
.hdr__logo-m { display: none; }
.hdr__bonus {
	display: inline-flex; align-items: center; gap: 6px;
	height: 40px; padding: 8px 12px; border-radius: var(--r);
	background: var(--grad); color: var(--white); font-weight: 700; font-size: 16px;
}
.hdr__bonus img { width: 20px; height: 20px; }
.hdr__search {
	display: grid; place-items: center; width: 38px; height: 38px;
	border-radius: var(--r); background: var(--bg); color: var(--white);
}
.hdr__search .ico { width: 18px; height: 18px; }
.hdr__auth { margin-left: auto; display: flex; gap: 16px; }
.hdr__auth .btn { min-width: 115px; }
.hdr__login .ico { display: none; width: 16px; height: 16px; }

/* ---- left rail / drawer --------------------------------------------- */

.side {
	position: fixed; z-index: 35; left: 0; top: var(--hdr-h); bottom: 0;
	width: var(--side-w); background: var(--side);
	display: flex; flex-direction: column; justify-content: space-between;
	overflow: hidden auto; scrollbar-width: none;
	transition: width .2s;
}
.side::-webkit-scrollbar { display: none; }
.side__nav { display: flex; flex-direction: column; gap: 24px; padding: 34px 0 16px; }
.side__a {
	display: flex; align-items: center; gap: 14px; min-height: 32px;
	padding: 0 14px; color: var(--muted); font-weight: 700; font-size: 15px; white-space: nowrap;
}
.side__a img { width: 24px; height: 24px; flex: none; object-fit: contain; }
.side__a:hover, .side__a[aria-current] { color: var(--white); }
.side__a span { opacity: 0; transition: opacity .15s; }
.side__a--txt { display: none; }
.side__search { display: none; }
.side__hr { display: block; height: 1px; margin: 0 7px; background: #8b94a1; opacity: .45; }
.side__bottom { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 24px; }
.side__tg {
	display: grid; place-items: center; height: 28px; border-radius: 6px;
	background: var(--grad);
}
.side__tg img { width: 16px; height: 16px; }
.side__help {
	display: flex; align-items: center; justify-content: center; gap: 8px; height: 28px;
	color: var(--white); font-weight: 700; white-space: nowrap;
}
.side__help .ico { width: 17px; height: 17px; }
.side__help span { display: none; }

body.is-wide .side { width: 240px; }
body.is-wide .side__a span { opacity: 1; }
body.is-wide .side__help span { display: inline; }
body.is-wide .side__help { justify-content: flex-start; border: 1px solid var(--card); border-radius: var(--r); padding: 0 10px; height: 36px; }
body.is-wide .side__tg { height: 36px; }

.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(8, 11, 16, .6); }

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

.main {
	/* As on the source: a 1400px column centred in the viewport, never under the rail. */
	--col: 1400px;
	max-width: var(--col);
	margin-left: max(var(--side-w), calc((100vw - var(--col)) / 2));
	padding: 16px 16px 40px;
	min-height: 60vh;
}

.row { margin-top: 32px; }
.row:first-child { margin-top: 0; }
.row--narrow { max-width: 1100px; margin-left: auto; margin-right: auto; }

.row__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 16px; min-height: 34px;
}
.row__t {
	display: flex; align-items: center; gap: 16px;
	color: var(--white); font-weight: 700; font-size: 21px; line-height: 1.2;
}
.row__t--caps { text-transform: uppercase; }
.row__ico { width: 32px; height: 32px; object-fit: contain; color: var(--white); }
.row__t .ico.row__ico { width: 24px; height: 24px; margin: 0 4px; }
.row__tools { display: flex; align-items: center; gap: 8px; }

.more {
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 5px 9px 5px 17px; border-radius: var(--r);
	background: var(--plate); color: var(--white); font-weight: 700; font-size: 16px; white-space: nowrap;
}
.more img { width: 16px; height: 16px; }
.more:hover { background: var(--card); }
.more--mob { display: none; }

.arrows { display: flex; gap: 8px; }
.arrow {
	display: grid; place-items: center; width: 32px; height: 32px;
	border-radius: var(--r); background: var(--plate); position: relative;
}
.arrow::before {
	content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
	background: var(--grad);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}
.arrow img { width: 16px; height: 16px; }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow:disabled::before { background: var(--card); }
.track-wrap.is-static .arrows { display: none; }

.track {
	overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; }

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

.hero {
	position: relative; border-radius: var(--r-lg); overflow: hidden;
	height: 450px; background: #0d1119;
}
.hero__art { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__copy {
	position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; gap: 24px; max-width: 520px;
}
.hero__title {
	color: var(--white); font-weight: 900; font-size: 36px; line-height: 1.2;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero__or {
	display: inline-flex; align-items: center; gap: 10px;
	height: 50px; padding: 0 12px 0 16px; border-radius: 25px;
	background: rgba(39, 48, 61, .95); color: var(--white); font-weight: 700; font-size: 16px;
}
.hero__g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--white); }
.hero__g img { width: 18px; height: 18px; }

/* ---- promo cards ----------------------------------------------------- */

.promos {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); gap: var(--gap);
}
.promo {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	height: 128px; padding: 16px; border-radius: var(--r); background: var(--plate);
	transition: background .2s;
}
.promo:hover { background: #1b2635; }
.promo__txt { display: flex; flex-direction: column; gap: 4px; }
.badge {
	align-self: flex-start; padding: 1px 4px; border-radius: 4px; margin-bottom: 4px;
	background: var(--white); color: #3b4451; border: 1px solid var(--card);
	font-size: 13.76px; font-weight: 500; line-height: 1.3;
}
.promo__t { color: var(--white); font-weight: 700; font-size: 17px; text-transform: uppercase; line-height: 1.25; max-width: 160px; }
.promo__s { color: var(--muted); font-weight: 700; font-size: 14px; }
.promo__art { width: 114px; height: 104px; object-fit: cover; border-radius: 6px; flex: none; }

/* ---- category bar ---------------------------------------------------- */

.chips {
	display: flex; align-items: center; gap: 8px;
	margin-top: 24px; padding: 4px; border-radius: var(--r);
	background: var(--plate); border: 1px solid var(--line);
}
.chips__all, .chips__prov {
	display: inline-flex; align-items: center; gap: 10px; flex: none;
	height: 42px; padding: 0 16px; border-radius: var(--r);
	color: var(--white); font-weight: 700; font-size: 16px; white-space: nowrap;
}
.chips__all { background: var(--grad); min-width: 190px; }
.chips__all .ico, .chips__prov .ico { width: 16px; height: 16px; }
.chips__prov { background: var(--bg); min-width: 190px; margin-left: auto; }
.chips__list {
	display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.chips__list::-webkit-scrollbar { display: none; }
.chip {
	display: inline-flex; align-items: center; gap: 8px; flex: none;
	height: 36px; padding: 0 14px; border-radius: var(--r);
	color: var(--muted); font-weight: 700; font-size: 16px; white-space: nowrap;
}
.chip img { width: 16px; height: 16px; }
.chip:hover { color: var(--white); }
.chip.is-on { background: var(--card); color: var(--white); }
.chip__n { padding: 1px 4px; border-radius: 4px; background: #3b4451; color: var(--white); font-size: 13px; }
.chips__search {
	display: grid; place-items: center; width: 40px; height: 40px; flex: none;
	border-radius: var(--r); background: var(--grad); color: var(--white);
}
.chips__search .ico { width: 16px; height: 16px; }

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

.games {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--gap);
}
.tile {
	position: relative; display: block; border-radius: var(--r); overflow: hidden;
	aspect-ratio: 418 / 564; background: var(--card);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tile__hover {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	padding: 12px 10px; text-align: center; color: var(--white); font-size: 13px; line-height: 1.25;
	background: rgba(14, 18, 29, .78); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .2s;
}
.tile__play {
	display: inline-flex; align-items: center; height: 36px; padding: 0 22px; border-radius: var(--r);
	background: var(--grad); font-weight: 700; font-size: 15px;
}
.tile__studio { color: var(--muted); }
.tile:hover .tile__hover, .tile:focus-visible .tile__hover { opacity: 1; }
.tile:hover img { transform: scale(1.04); }

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

.provs {
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); gap: var(--gap);
}
.prov {
	display: grid; place-items: center; height: 196px; border-radius: var(--r-lg);
	background: var(--card); transition: background .2s;
}
.prov img { width: min(62%, 260px); height: 90px; object-fit: contain; }
.prov:hover { background: #2f3a49; }

/* ---- article --------------------------------------------------------- */

.crumbs {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px;
	font-size: 14px; color: var(--muted);
}
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); }

.prose {
	padding: 32px 40px; border-radius: var(--r-lg); background: var(--plate);
	color: var(--text); font-size: 16px; line-height: 1.65; font-weight: 500;
	overflow-wrap: break-word;
}
.prose > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--white); font-weight: 700; line-height: 1.25; margin: 1.6em 0 .6em; }
.prose h1 { font-size: 32px; font-weight: 900; margin-top: 0; }
.prose h2 { font-size: 25px; }
.prose h3 { font-size: 20px; }
.prose h4 { font-size: 17px; }
.prose p { margin: 0 0 1em; }
.prose a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #ff7aa4; }
.prose strong { color: var(--white); }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: #be4dff; }
.prose img { height: auto; border-radius: var(--r); margin: 1em auto; }
.prose blockquote {
	margin: 1.2em 0; padding: 14px 18px; border-left: 3px solid #be4dff;
	background: var(--card); border-radius: 0 var(--r) var(--r) 0; color: var(--white);
}
/* Tables size to their content (luckycoincasino.com.ua, 03.11.2026): never
   narrower than the plate, never a flat min-width that crushes 5-6 columns
   into ragged stacks. Short cells stay on one line, long prose cells wrap at
   38ch, the first column stays pinned while a wide table scrolls. The owner's
   border="1" / cellpadding attributes are neutralised. */
.table-scroll {
	overflow-x: auto; margin: 1.2em 0; border-radius: var(--r); border: 1px solid var(--card);
	-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #3a4554 transparent;
}
.prose .table-scroll table { width: max-content; min-width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border: 0; font-size: 15px; line-height: 1.45; }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--card); background: var(--plate); }
.prose th { background: var(--card); color: var(--white); font-weight: 700; white-space: nowrap; }
.prose td { max-width: 38ch; }
.prose tbody tr:nth-child(even) td { background: #1a2433; }
.prose tr:last-child td { border-bottom: 0; }
.prose th:first-child, .prose td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--card); }
.prose td:first-child { color: var(--white); font-weight: 600; }
.prose details { margin: .6em 0; padding: 12px 16px; border-radius: var(--r); background: var(--card); }
.prose summary { color: var(--white); font-weight: 700; cursor: pointer; }

/* ---- toplist / review / landing ------------------------------------- */

.rank { margin-bottom: 24px; }
.rank .row__t { margin-bottom: 14px; }
.rank__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank__row {
	display: grid; grid-template-columns: 34px 54px 1fr auto; align-items: center; gap: 14px;
	padding: 10px 14px; border-radius: var(--r); background: var(--plate);
}
.rank__n {
	display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--grad); color: var(--white); font-weight: 900;
}
.rank__img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; }
.rank__name { color: var(--white); font-weight: 700; display: flex; flex-direction: column; }
.rank__name small { color: var(--muted); font-weight: 500; font-size: 13px; }

.info {
	display: grid; gap: 18px; margin-bottom: 24px; padding: 24px;
	border-radius: var(--r-lg); background: var(--card);
}
.info__brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.info__brand img { height: 34px; width: auto; }
.info__cta { display: flex; gap: 12px; }
.info__list { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.info__list div { padding: 12px 14px; border-radius: var(--r); background: var(--plate); }
.info__list dt { color: var(--muted); font-size: 13px; }
.info__list dd { margin: 2px 0 0; color: var(--white); font-weight: 700; }

.land__end {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	margin-top: 24px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--card);
}
.land__t { color: var(--white); font-weight: 700; font-size: 20px; }

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

.foot { margin-left: var(--side-w); background: var(--plate); margin-top: 32px; }
.foot__in {
	padding: 32px 16px 24px; max-width: 1400px;
	margin-left: max(0px, calc((100vw - 1400px) / 2 - var(--side-w)));
}
.foot__logo { display: inline-block; margin-left: -6px; }
.foot__logo img { height: 34px; width: auto; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.foot__col { display: flex; flex-direction: column; gap: 8px; }
.foot__t { color: var(--white); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.foot__col a { color: var(--muted); font-weight: 600; font-size: 16px; line-height: 1.5; }
.foot__col a:hover, .foot__col a[aria-current] { color: var(--white); }
.foot__note { margin: 36px 0 0; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--muted); }
.foot__bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	margin: 30px -16px 0; padding: 34px 16px 0; border-top: 1px solid var(--card);
}
.foot__help { display: flex; align-items: center; gap: 8px; }
.foot__support {
	display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
	border-radius: var(--r); border: 1px solid var(--card); color: var(--white); font-weight: 700; font-size: 16px;
}
.foot__support .ico { width: 17px; height: 17px; }
.foot__tg { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--grad); }
.foot__tg img { width: 20px; height: 20px; }
.foot__age { display: flex; align-items: center; gap: 14px; }
.foot__age img { height: 16px; width: auto; }
.age { color: var(--muted); font-weight: 700; font-size: 18px; }
.foot__copy { text-align: right; font-size: 14px; font-weight: 700; color: var(--muted); }

/* ---- floating chat + tabbar ----------------------------------------- */

.chat {
	position: fixed; right: 16px; bottom: 80px; z-index: 30;
	display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
	background: var(--grad); color: var(--white); box-shadow: 0 6px 18px rgba(190, 77, 255, .35);
}
.chat .ico { width: 22px; height: 22px; }

.tabbar { display: none; }

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

@media (max-width: 1280px) {
	.chips__all, .chips__prov { min-width: 0; }
}

@media (max-width: 1024px) {
	:root { --side-w: 0px; --hdr-h: 56px; --gap: 8px; }
	body { padding-bottom: 64px; }
	.burger { display: none; }
	.hdr { padding: 0 12px; gap: 8px; }
	.hdr__logo-d { display: none; }
	.hdr__logo-m { display: block; height: 34px; width: 34px; }
	.hdr__bonus span { display: none; }
	.hdr__bonus { width: 40px; justify-content: center; padding: 0; }
	.hdr__search { display: none; }
	.hdr__auth { gap: 10px; }
	.hdr__auth .btn { min-width: 0; padding: 8px 14px; }
	.hdr__login { width: 38px; padding: 0 !important; }
	.hdr__login span { display: none; }
	.hdr__login .ico { display: block; }

	/* Phones: the rail becomes a full-width panel between the header and the
	   bottom bar (as on the source); both bars stay live, «Меню» toggles it. */
	.side {
		top: var(--hdr-h); bottom: 56px; width: 100%; z-index: 45;
		justify-content: flex-start; gap: 8px;
		padding: 10px 12px 20px;
		visibility: hidden; opacity: 0; transform: translateY(8px);
		transition: opacity .2s, transform .2s, visibility 0s .2s;
		overscroll-behavior: contain;
	}
	body.is-open .side { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
	body.is-open { overflow: hidden; }
	body.is-open .chat { display: none; }
	.side__search {
		display: flex; align-items: center; justify-content: center; gap: 8px; flex: none;
		height: 40px; border-radius: var(--r); background: var(--plate);
		border: 1px solid var(--line); color: var(--white); font-weight: 700; font-size: 16px;
	}
	.side__search .ico { width: 16px; height: 16px; }
	.side__nav { gap: 24px; padding: 22px 0 8px; flex: none; }
	.side__a { padding: 0 2px; font-size: 16px; gap: 8px; }
	.side__a span { opacity: 1; }
	.side__hr { margin: 0 -5px; height: 2px; }
	.side__bottom { flex-direction: row; gap: 8px; padding: 24px 4px 0; }
	.side__tg, .side__help { flex: 1; height: 40px; border-radius: 9999px; }
	.side__tg { border-radius: var(--r); }
	.side__tg img { width: 24px; height: 24px; }
	.side__help { border: 1px solid var(--card); justify-content: center; gap: 8px; }
	.side__help span { display: inline; }
	.overlay { display: none !important; }

	.main { padding: 0 12px 24px; margin-left: 0; }
	.foot { margin-left: 0; }
	.foot__in { padding: 28px 12px 24px; margin-left: 0; }
	.foot__bottom { margin: 28px -12px 0; padding: 24px 12px 0; }

	.tabbar {
		position: fixed; inset: auto 0 0 0; z-index: 50;
		display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
		height: 56px; padding-bottom: env(safe-area-inset-bottom);
		background: var(--hdr); border-radius: 16px 16px 0 0;
	}
	.tabbar a, .tabbar button {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		color: var(--muted); font-size: 10px; font-weight: 500;
	}
	.tabbar .ico { width: 20px; height: 20px; }
	.tabbar [aria-current], .tabbar button[aria-expanded="true"] { color: var(--white); }
	.chat { bottom: 72px; right: 12px; width: 46px; height: 46px; }

	.hero { height: 360px; }
	.hero__copy { left: 24px; }
	.hero__title { font-size: 30px; }
	.row { margin-top: 24px; }
	.row__t { font-size: 18px; gap: 10px; }
	.row__ico { width: 26px; height: 26px; }
	.row__tools .more { display: none; }
	.more--mob { display: flex; width: max-content; margin: 14px auto 0; }

	.promos { grid-auto-columns: 100%; }
	.promo__t { font-size: 16px; }

	.chips { flex-direction: column; align-items: stretch; background: none; border: 0; padding: 0; gap: 10px; }
	.chips__all { height: 44px; }
	.chips__prov { margin: 0; background: var(--card); height: 44px; }
	.chips__prov .ico { display: none; }
	.chips__list, .chips__search { display: none; }

	.games { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
	.games--one { grid-template-rows: auto; }
	.tile__hover { font-size: 11px; padding: 8px 6px; }
	.tile__play { height: 28px; padding: 0 12px; font-size: 13px; }


	.provs { grid-auto-columns: calc((100% - var(--gap)) / 2); }
	.prov { height: 120px; }

	.prose { padding: 22px 16px; font-size: 15px; }
	.prose .table-scroll table { font-size: 14px; }
	.prose th, .prose td { padding: 10px 12px; }
	.prose td { max-width: 26ch; }
	/* Two-column tables (parameter / value) fit the phone without scrolling. */
	.prose .table-scroll table:not(:has(th:nth-child(3), td:nth-child(3))) { width: 100%; }
	.prose .table-scroll table:not(:has(th:nth-child(3), td:nth-child(3))) td { max-width: none; }
	.prose .table-scroll table:not(:has(th:nth-child(3), td:nth-child(3))) th { white-space: normal; }
	.prose .table-scroll table:not(:has(th:nth-child(3), td:nth-child(3))) :is(th, td):first-child { position: static; width: 42%; }
	.prose h1 { font-size: 26px; }
	.prose h2 { font-size: 21px; }
	.prose h3 { font-size: 18px; }

	.foot__cols { grid-template-columns: 1fr 1fr; }
	.foot__cols .foot__col:last-child { grid-column: 1 / -1; }
	.foot__bottom { flex-direction: column; align-items: flex-start; }
	.foot__copy { text-align: left; }
	.info__list { grid-template-columns: 1fr; }
	.rank__row { grid-template-columns: 30px 44px 1fr auto; gap: 10px; padding: 8px 10px; }
	.rank__img { width: 44px; height: 60px; }
}

@media (min-width: 600px) and (max-width: 1024px) {
	.promos { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}

@media (max-width: 767px) {
	.hero { margin: 0 -12px; border-radius: 0; height: min(135vw, 640px); }
	.hero__art { object-position: center top; }
	.hero__copy {
		left: 12px; right: 12px; top: auto; bottom: 28px; transform: none; max-width: none;
		align-items: center; text-align: center; gap: 18px;
	}
	.hero__title { font-size: 32px; }
	.hero__cta { flex-direction: column; gap: 14px; }
	.hero__copy { right: 12px; }
}

@media (max-width: 420px) {
	.hdr__auth .btn--outline { padding: 8px 12px; font-size: 15px; }
	.hero__title { font-size: 28px; }
}

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

/* ---- luckycoincasino.com.ua: language switcher, sprite icons in the rail -- */
.side__a .side__ico { width: 24px; height: 24px; flex: none; }
.lsw { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--plate); border: 1px solid var(--line); }
.lsw__a {
	display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: 6px;
	color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.lsw__a:hover { color: var(--white); }
.lsw__a[aria-current] { color: var(--white); background: var(--grad); }
.lsw--hdr { margin-left: auto; }
.lsw--hdr + .hdr__auth { margin-left: 16px; }
.lsw--side { display: none; }
@media (max-width: 1024px) {
	.lsw--hdr { display: none; }
	/* The hidden switcher is still the auth block's sibling: give the buttons back their auto margin. */
	.lsw--hdr + .hdr__auth { margin-left: auto; }
	.lsw--side { display: flex; flex: none; margin-top: 12px; }
	.lsw--side .lsw__a { flex: 1; height: 36px; font-size: 14px; }
}

/* Content pictures under the H2s (figure.pic, phone shots narrower). */
.prose .pic { margin: 0 0 1.2em; }
.prose .pic img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--r); border: 1px solid var(--card); }
.prose .pic--phone img { max-width: min(100%, 340px); }

/* Contents list of the articles (nav.lc-toc, built from «Зміст»). */
.prose .lc-toc { margin: 1.2em 0 1.4em; padding: 16px 20px 14px; border-radius: var(--r); background: var(--card); border-left: 3px solid #be4dff; }
.prose .lc-toc__t { margin: 0 0 .5em; color: var(--white); font-weight: 700; font-size: 17px; }
.prose .lc-toc ol { margin: 0; padding-left: 1.3em; columns: 2 280px; column-gap: 32px; }
.prose .lc-toc li { margin: .25em 0; break-inside: avoid; }
.prose .lc-toc a { color: var(--text); text-decoration: none; }
.prose .lc-toc a:hover { color: var(--pink); text-decoration: underline; }