@font-face { font-family: 'OpenSans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('os-cyr.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'OpenSans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('os-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'OpenSans'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('os-i-cyr.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'OpenSans'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('os-i-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	/* Tokens read with getComputedStyle from the owner's snapshot of jet.casino. */
	--page: #232e39;
	--panel: #2e3a47;
	--panel-2: #394755;
	--panel-3: #445565;
	--card: #283440;
	--deep: #151b22;
	--line: #657381;
	--muted: #b4c8db;
	--soft: #dce7f3;
	--blue: #3e3eeb;
	--violet: #6d3eeb;
	--purple: #a53eeb;
	--sky: #4aa1ff;
	--link: #1183ff;
	--gold: #f4d135;
	--green: #50d155;
	--red: #ff5050;
	--grad: linear-gradient(270deg, var(--purple), var(--blue));
	--grad-2: linear-gradient(270deg, var(--violet), var(--blue));
	--skew: skewX(-15deg);
	--unskew: skewX(15deg);
	--wrap: 1268px;
	--bar: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 12px); }
body {
	margin: 0;
	background: var(--page);
	color: #fff;
	font: 400 14px/1.5 'OpenSans', 'Open Sans', Arial, sans-serif;
	padding-top: var(--bar);
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--page); padding: 8px 14px; }
.skip:focus { left: 12px; }
.wrap { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; }

/* ---- skewed button ------------------------------------------------------ */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 22px;
	isolation: isolate;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	white-space: nowrap;
}
.btn__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--grad-2);
	border-radius: 2px;
	transform: var(--skew);
	transition: filter .2s, box-shadow .2s;
}
.btn:hover .btn__bg { filter: brightness(1.15); box-shadow: 0 0 14px rgba(109, 62, 235, .6); }
.btn--sm { height: 30px; min-width: 120px; font-size: 10px; font-weight: 600; }
.btn--lg { height: 44px; padding: 0 30px; font-size: 13px; }
.btn--hub { min-width: 154px; margin: 16px auto 0; font-size: 10.5px; font-weight: 600; }

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

.bar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--bar);
	display: flex;
	justify-content: space-between;
	background: var(--panel);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	/* Clip only sideways: the skewed sign-up block bleeds past the right edge,
	   while the language panel has to drop below the bar. */
	overflow-x: clip;
}
.bar__left { display: flex; align-items: center; min-width: 0; }
.burger { display: flex; align-items: center; height: var(--bar); padding: 0 12px 0 18px; }
.burger .ic { width: 20px; height: 20px; }
.burger:hover { color: var(--sky); }
.bar__logo { margin-right: 46px; flex: none; }
.bar__logo img { width: 42px; height: 20px; }
.bar__nav { display: flex; gap: 27px; }
.bar__nav a { font-size: 12px; font-weight: 600; white-space: nowrap; transition: color .2s; }
.bar__nav a:hover, .bar__nav a.is-on { color: var(--sky); }

.bar__right { display: flex; align-items: center; }
.bar__login { display: flex; margin-right: 32px; opacity: .9; }
.bar__login .ic { width: 25px; height: 24px; }
.bar__login:hover { color: var(--sky); }
.bar__signup {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--bar);
	padding: 0 24px 0 18px;
	isolation: isolate;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
}
.bar__signup-bg {
	position: absolute;
	inset: 0 -40px 0 0;
	z-index: -1;
	background: var(--grad);
	transform: var(--skew);
	transform-origin: 0 100%;
}
.bar__signup:hover .bar__signup-bg { filter: brightness(1.15); }

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

.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(21, 27, 34, .7); }
.drawer {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 61;
	width: min(320px, 86vw);
	padding: 0 0 24px;
	background: var(--panel);
	overflow-y: auto;
	transform: translateX(-102%);
	transition: transform .25s ease;
	visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--bar); padding: 0 12px 0 20px; background: var(--deep); }
.drawer__head img { width: 42px; height: 20px; }
.drawer__close { display: flex; padding: 8px; }
.drawer__close .ic { width: 20px; height: 20px; }
.drawer__act { display: flex; align-items: center; gap: 22px; padding: 18px 20px; }
.drawer__login { font-size: 12px; font-weight: 700; font-style: italic; text-transform: uppercase; color: var(--muted); }
.drawer nav { display: flex; flex-direction: column; padding: 4px 0; border-top: 1px solid var(--panel-2); }
.drawer nav a { padding: 11px 20px; font-size: 13px; font-weight: 600; }
.drawer nav a:hover, .drawer nav a.is-on { background: var(--panel-2); color: var(--sky); box-shadow: inset 3px 0 0 var(--violet); }
.drawer__info a { font-size: 12px !important; font-weight: 400 !important; color: var(--muted); padding: 8px 20px !important; }

/* ---- language switcher ---------------------------------------------------- */

/* One component, two placements: in the bar on wide screens, inside the
   drawer on phones, where the bar row has no room left. */
.lsw { position: relative; }
.lsw__btn { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 2px; font-size: 12px; font-weight: 700; color: var(--soft); transition: background .2s, color .2s; }
.lsw__btn:hover, .lsw.is-open .lsw__btn { background: var(--panel-2); color: #fff; }
.lsw__globe { width: 17px; height: 17px; color: var(--sky); }
.lsw__caret { width: 11px; height: 11px; transition: transform .2s; }
.lsw.is-open .lsw__caret { transform: rotate(180deg); }
.lsw__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 168px; padding: 6px 0; background: var(--panel-2); border-radius: 2px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); display: none; }
.lsw.is-open .lsw__panel { display: block; }
.lsw__opt { display: flex; align-items: center; gap: 12px; padding: 9px 14px; font-size: 13px; color: var(--soft); }
.lsw__opt b { display: inline-flex; justify-content: center; min-width: 30px; padding: 2px 0; font-size: 11px; font-style: italic; color: #fff; background: var(--panel); transform: var(--skew); }
.lsw__opt:hover { background: var(--panel-3); color: #fff; }
.lsw__opt.is-on { color: var(--sky); }
.lsw__opt.is-on b { background: var(--grad); }
.lsw--hdr { margin-right: 20px; }
.lsw--drawer { display: none; padding: 0 20px 16px; }
.lsw--drawer .lsw__btn { width: 100%; height: 40px; background: var(--panel-2); }
.lsw--drawer .lsw__code { flex: 1; text-align: left; }
.lsw--drawer .lsw__panel { position: static; margin-top: 6px; box-shadow: none; background: var(--deep); }
@media (max-width: 900px) {
	.lsw--hdr { display: none; }
	.lsw--drawer { display: block; }
}

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

.hub { position: relative; height: 300px; overflow: hidden; background: #0b0730; }
.hub__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub__in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; width: min(845px, calc(100% - 32px)); margin: 0 auto; }
.hub__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.hub__badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 8px;
	border: 1px solid var(--gold);
	border-radius: 1px;
	background: rgba(12, 7, 51, .7);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}
.hub__badge .ic { width: 12px; height: 12px; color: var(--gold); }
.hub__t { display: block; max-width: 300px; margin: 10px 0 6px; font-size: 28px; line-height: 39px; font-weight: 700; font-style: italic; text-transform: uppercase; }
.hub__grad { background: linear-gradient(90deg, #fff 0%, #c9b8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 10px rgba(142, 117, 254, .8)); }
.hub__acts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; }
.hub__act { display: inline-flex; align-items: center; gap: 4px; }
.hub__act .ic { width: 12px; height: 12px; color: var(--sky); }
.hub__cards { display: flex; gap: 9px; margin-top: 10px; }
.hcard {
	display: flex;
	flex-direction: column;
	width: 213px;
	min-height: 127px;
	padding: 9px 9px 0;
	border-radius: 2px;
	background: linear-gradient(#0c0733, rgba(12, 7, 51, 0) 50%);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.hcard__top { display: flex; align-items: center; gap: 6px; }
.hcard__top img { width: 33px; height: 33px; }
.hcard__name { display: flex; flex-direction: column; }
.hcard__t { font-size: 13px; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.hcard__sub { font-size: 8px; color: var(--muted); }
.hcard__text { margin-top: 8px; font-size: 9.5px; line-height: 1.3; }
.hcard .btn { margin-top: auto; margin-bottom: 0; }
.hub__art { position: absolute; right: -20px; top: 50%; width: 450px; height: auto; transform: translateY(-50%); }

/* ---- payment strip + jackpot ---------------------------------------------- */

.strip { position: relative; display: flex; background: var(--panel); min-height: 60px; overflow-x: clip; }
.pays { display: flex; align-items: center; justify-content: center; gap: 36px; flex: 1; padding: 15px 16px; padding-right: 420px; }
.pays img { height: 30px; width: auto; }
.jp {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 410px;
	height: 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}
.jp::before {
	content: '';
	position: absolute;
	inset: 0 -40px 0 0;
	z-index: -1;
	background: linear-gradient(180deg, #2b3747 0%, var(--page) 100%);
	transform: var(--skew);
	transform-origin: 0 100%;
	box-shadow: -4px 0 12px rgba(0, 0, 0, .35);
}
.jp__t { font-size: 38px; line-height: 1; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.5px; text-shadow: 0 0 14px rgba(142, 117, 254, .95), 0 0 2px #8e75fe; }
.jp__v { margin-top: 6px; font-size: 28px; line-height: 1; font-weight: 700; font-style: italic; text-shadow: 0 0 12px rgba(165, 62, 235, .9); }
.jp__c { position: absolute; height: auto; pointer-events: none; }
.jp__c--1 { left: 0; top: 34px; width: 58px; }
.jp__c--2 { left: 60px; top: 18px; width: 38px; }
.jp__c--3 { right: 54px; top: -6px; width: 34px; }
.jp__c--4 { right: 0; top: 4px; width: 46px; }
.jp__c--5 { right: 12px; top: 50px; width: 62px; }

/* ---- two-column body ------------------------------------------------------ */

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; padding: 26px 0 40px; }
.cols__main { min-width: 0; }

.sec { margin-bottom: 36px; }
.sec__head { display: flex; align-items: center; min-height: 30px; margin-bottom: 22px; }
.sec__ic { width: 26px; height: 26px; flex: none; color: var(--sky); object-fit: contain; }
.sec__t { margin-left: 20px; font-size: 13.5px; font-weight: 600; font-style: italic; text-transform: uppercase; }
.sec__head .btn { margin-left: auto; margin-right: 4px; }

/* trending */
.trend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.trend__card { position: relative; display: block; aspect-ratio: 306 / 189; border-radius: 3px; overflow: hidden; background: var(--deep); }
.trend__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.trend__card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(21, 27, 34, 0) 45%, rgba(21, 27, 34, .85) 93%); border-radius: 3px; transition: box-shadow .2s; }
.trend__card:hover::before { box-shadow: inset 0 0 0 2px var(--violet); }
.trend__card:hover img { transform: scale(1.05); }
.trend__t {
	position: absolute;
	inset: auto 15px 9px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}
.trend__t .ic { width: 12px; height: 12px; }

/* provider tabs */
.ptabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: -6px 0 18px; }
.ptabs__b {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	padding-top: 3px;
	border-radius: 2px;
	background: var(--panel);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s;
}
.ptabs__b img { width: 18px; height: 18px; }
.ptabs__b:hover { background: var(--panel-2); }
.ptabs__b.is-on { background: var(--panel-2); box-shadow: inset 0 -3px 0 var(--violet); }

/* game grid */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.grid--big { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile.is-off { display: none; }
.tile__link { display: block; border-radius: 2px; overflow: hidden; }
.tile__art { position: relative; display: block; aspect-ratio: 153 / 103; background: var(--panel); overflow: hidden; }
.tile--big .tile__art { aspect-ratio: 185 / 124; }
.tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tile__tags { position: absolute; left: 6px; top: 3px; display: flex; gap: 4px; }
.tag { display: inline-flex; align-items: center; gap: 3px; height: 15px; padding: 0 6px 0 7px; border-radius: 2px; transform: var(--skew); font-size: 9px; font-weight: 600; font-style: italic; line-height: 1; }
.tag > span, .tag > svg { transform: var(--unskew); }
.tag--rtp { background: var(--red); }
.tag--jp { background: var(--grad-2); }
.tag__ic { width: 10px; height: 10px; }
.tag--live { background: rgba(21, 27, 34, .75); }
.tag--live > span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.tile__marks { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mark { display: flex; align-items: center; justify-content: center; min-width: 26px; height: 15px; padding: 0 5px 0 7px; margin-right: -3px; border-radius: 0 0 0 2px; transform: var(--skew); }
.mark > * { transform: var(--unskew); }
.mark--new { background: var(--green); color: var(--deep); font-size: 8px; font-weight: 700; font-style: italic; }
.mark--cup { background: var(--gold); color: var(--deep); }
.mark--gift { background: var(--violet); color: #fff; }
.mark__ic { width: 10px; height: 10px; }
.tile__excl { position: absolute; left: -6px; bottom: -2px; width: 56px; height: auto; max-width: none; pointer-events: none; }
.tile__hover {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(21, 27, 34, .72);
	opacity: 0;
	transition: opacity .2s;
}
.tile__play { display: flex; align-items: center; justify-content: center; width: 44px; height: 30px; border-radius: 2px; background: var(--grad); transform: var(--skew); }
.tile__play .ic { width: 16px; height: 16px; transform: var(--unskew); }
.tile__hname { padding: 0 8px; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; }
.tile__link:hover .tile__hover, .tile__link:focus-visible .tile__hover { opacity: 1; }
.tile__link:hover .tile__img { transform: scale(1.06); }
.tile__cap {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 9px 12px;
	background: var(--panel) linear-gradient(rgba(98, 98, 239, 0) 13%, rgba(98, 98, 239, .4) 184%);
	text-align: center;
}
.tile__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tile__prov { font-size: 9px; font-weight: 600; color: var(--muted); }

/* promo tiles: the tall Bonuses tile, then 2 tiles over 3 on the right */
.promo { display: grid; grid-template-columns: 255fr repeat(6, 115fr); grid-template-rows: 124px 125px; gap: 12px 9px; margin: -2px 0 38px; }
.promo__card { position: relative; display: block; overflow: hidden; padding: 15px; border-radius: 2px; background: var(--card); transition: transform .2s; }
.promo__card:hover { transform: translateY(-2px); }
.promo__card img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; transition: transform .3s; }
.promo__card:hover img { transform: scale(1.05); }
.promo__t { position: relative; z-index: 1; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.promo__card--bonus { grid-column: 1; grid-row: 1 / 3; background-image: radial-gradient(circle at 50% 100%, rgba(255, 51, 51, .75), transparent 80%); }
.promo__card--bonus img { left: 50%; right: auto; height: 68%; transform: translateX(-50%); }
.promo__card--bonus:hover img { transform: translateX(-50%) scale(1.05); }
.promo__card--jp { grid-column: 2 / 5; background-image: linear-gradient(90deg, var(--card) 10%, #3b3fb3 100%); }
.promo__card--events { grid-column: 5 / 8; background-image: linear-gradient(90deg, var(--card) 10%, #2f74c7 100%); }
.promo__card--tour { grid-column: 2 / 4; background-image: linear-gradient(90deg, var(--card) 10%, #b7692b 100%); }
.promo__card--cash { grid-column: 4 / 6; background-image: linear-gradient(90deg, var(--card) 10%, #2f8f45 100%); }
.promo__card--vip { grid-column: 6 / 8; background-image: linear-gradient(90deg, var(--card) 10%, #6a3fd0 100%); }

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

.side { display: flex; flex-direction: column; gap: 30px; min-width: 0; padding-top: 62px; }
.sbox { background: var(--panel); border-radius: 2px; padding: 0 12px 12px; }
.sbox__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 12px; }
.sbox__tab { padding: 10px 0 9px; text-align: left; color: var(--muted); font-size: 13.5px; font-weight: 700; text-transform: uppercase; box-shadow: inset 0 -3px 0 transparent; }
.sbox__tab.is-on { color: #fff; box-shadow: inset 0 -3px 0 var(--violet); }
.sbox__search { display: flex; align-items: center; gap: 10px; height: 36px; margin-bottom: 12px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; }
.sbox__search .ic { width: 16px; height: 16px; color: var(--muted); }
.sbox__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 12px; }
.sbox__search input::placeholder { color: var(--muted); }
.sbox__search:focus-within { border-color: var(--violet); }
.slist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.slist--one { grid-template-columns: 1fr; }
.slist a { display: flex; align-items: center; gap: 8px; height: 33px; padding: 0 8px; border-radius: 2px; background: var(--card); font-size: 12px; font-weight: 600; transition: background .2s; }
.slist a:hover { background: var(--panel-2); }
.slist a img, .slist a .ic { width: 18px; height: 18px; flex: none; color: var(--sky); }
.slist a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slist small { margin-left: 4px; font-size: 10px; font-weight: 400; color: var(--muted); }
.slist__none { display: block; padding: 10px 0 2px; font-size: 12px; color: var(--muted); }

.events { position: relative; }
.events__head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding-left: 18px; }
.events__head .ic { width: 14px; height: 22px; color: var(--sky); }
.events__t { font-size: 13.5px; font-weight: 600; font-style: italic; text-transform: uppercase; }
.events__view { overflow: hidden; border-radius: 2px; }
.events__track { display: flex; transition: transform .35s ease; }
.ecard { position: relative; flex: 0 0 100%; aspect-ratio: 245 / 332; overflow: hidden; }
.ecard > img { width: 100%; height: 100%; object-fit: cover; }
.ecard__t, .ecard__prize { position: absolute; left: 0; display: inline-flex; padding: 3px 14px 3px 22px; transform: var(--skew); transform-origin: 0 0; }
.ecard__t > span, .ecard__prize > span { transform: var(--unskew); }
.ecard__t { top: 0; background: rgba(35, 46, 57, .75); font-size: 13.5px; font-weight: 700; font-style: italic; text-transform: uppercase; }
.ecard__prize { top: 30px; background: var(--grad-2); font-size: 16px; font-weight: 700; font-style: italic; }
.ecard__kind { position: absolute; right: 14px; top: 36px; font-size: 13px; font-weight: 700; font-style: italic; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.ecard__btn { position: absolute; right: 12px; bottom: 14px; min-width: 76px; }
.events__nav { position: absolute; top: 55%; z-index: 2; display: flex; padding: 10px 6px; color: #fff; }
.events__nav .ic { width: 14px; height: 27px; }
.events__nav--prev { left: 4px; }
.events__nav--next { right: 4px; }
.events__nav:hover { color: var(--sky); }

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

.plate { margin-top: 8px; padding: 30px 32px; border-radius: 2px; background: var(--panel); }
.prose { color: var(--soft); font-size: 14px; line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose h1 { margin: 0 0 18px; color: #fff; font-size: 26px; line-height: 1.25; font-weight: 700; font-style: italic; text-transform: uppercase; }
.prose h2 { margin: 30px 0 12px; color: #fff; font-size: 20px; line-height: 1.3; font-weight: 700; font-style: italic; }
.prose h3 { margin: 24px 0 10px; color: #fff; font-size: 16px; font-weight: 700; }
.prose h4, .prose h5, .prose h6 { margin: 20px 0 8px; color: #fff; font-size: 14px; font-weight: 700; }
.prose p { margin: 0 0 14px; }
.prose a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #fff; }
.prose strong, .prose b { color: #fff; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 4px; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.prose ul li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border: 1.5px solid var(--sky); border-radius: 50%; }
.prose ol { list-style: none; counter-reset: ol; }
.prose ol li { position: relative; padding-left: 28px; margin-bottom: 6px; counter-increment: ol; }
.prose ol li::before { content: counter(ol); position: absolute; left: 0; top: .15em; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 2px; background: var(--grad-2); color: #fff; font-size: 11px; font-weight: 700; font-style: italic; }
.prose img { display: block; margin: 18px auto; border-radius: 2px; }
.prose .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: -6px 0 22px; font-size: 13px; color: var(--muted); }
.prose .byline__name { color: var(--soft); font-weight: 700; }
.prose .byline__date::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px; background: var(--grad); transform: var(--skew); }
.prose figure { margin: 18px 0; }
.prose figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); }
.prose blockquote { margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--violet); background: var(--card); color: #fff; }
.prose hr { border: 0; border-top: 1px solid var(--panel-3); margin: 26px 0; }
.table-scroll { margin: 0 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prose th { background: var(--panel-2); color: #fff; font-weight: 700; text-align: left; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--panel-3); }
.prose tr:nth-child(even) td { background: rgba(40, 52, 64, .6); }
.prose details { margin: 0 0 8px; border-radius: 2px; background: var(--card); }
.prose summary { padding: 12px 16px; color: #fff; font-weight: 700; cursor: pointer; }
.prose details > :not(summary) { padding: 0 16px; }

/* ---- provider strip ------------------------------------------------------- */

.provs { padding: 36px 0; background: var(--deep); }
.provs .sec__head { margin-bottom: 26px; }
.provs .sec__ic { width: 30px; height: 30px; }
.provs__row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.provs__item { display: flex; align-items: center; justify-content: center; height: 70px; padding: 8px; border-radius: 2px; background: var(--panel); transition: background .2s; }
.provs__item:hover { background: var(--panel-2); }
.provs__item img { width: 100%; max-width: 119px; height: 42px; object-fit: contain; }

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

.foot { padding: 24px 0 40px; background: var(--page); text-align: center; }
.foot__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 27px; padding: 10px 0 24px; }
.foot__menu a { font-size: 12px; font-weight: 600; }
.foot__menu a:hover { color: var(--sky); }
.foot__social { display: flex; justify-content: center; gap: 18px; }
.foot__social a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-2); }
.foot__social .ic { width: 12px; height: 12px; }
.foot__social a:hover { background: var(--violet); }
.foot__app { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; padding: 3px 14px 3px 8px; border-radius: 2px; background: var(--panel-2); text-align: left; }
.foot__app .ic { width: 15px; height: 15px; }
.foot__app-t { display: flex; flex-direction: column; line-height: 1.1; }
.foot__app-t span { font-size: 6.5px; }
.foot__app-t b { font-size: 10px; }
.foot__about { display: flex; align-items: center; gap: 24px; margin: 30px auto 0; padding: 18px 0; max-width: 1100px; text-align: left; }
.foot__logo { width: 84px; height: 40px; flex: none; opacity: .9; }
.foot__text { padding-left: 24px; border-left: 1px solid var(--line); font-size: 12px; line-height: 1.55; color: var(--soft); }
.foot__seals { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 18px; }
.foot__seals img { height: 28px; width: auto; opacity: .8; }
.foot__age { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.5px solid #8f9395; border-radius: 50%; color: #8f9395; font-size: 11px; font-weight: 700; }
.foot__note { display: block; margin-top: 26px; font-size: 12px; color: var(--soft); }
.foot__copy { display: block; margin-top: 16px; font-size: 12px; font-weight: 700; }

/* ---- inner page types (page / toplist / review / landing) ---------------- */

.inner { width: min(var(--wrap), calc(100% - 32px)); margin: 0 auto; padding: 26px 0 40px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.crumbs a:hover { color: var(--sky); }
.crumbs__now { color: #fff; }
.inner__t { display: block; margin: 0 0 22px; font-size: 26px; line-height: 1.25; font-weight: 700; font-style: italic; text-transform: uppercase; }
.inner .plate { margin-top: 0; }
.inner--narrow .plate { max-width: 960px; }

.offer {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px;
	margin-bottom: 26px;
	padding: 26px 30px;
	overflow: hidden;
	border-radius: 2px;
	background: #0b0730 url('../img/promo/hero-bg.webp') center / cover;
}
.offer__k { display: block; font-size: 12px; font-weight: 700; font-style: italic; text-transform: uppercase; color: var(--gold); }
.offer__v { display: block; margin: 6px 0; font-size: 30px; line-height: 1.15; font-weight: 800; font-style: italic; text-transform: uppercase; text-shadow: 0 0 14px rgba(142, 117, 254, .9); }
.offer__n { display: block; font-size: 12px; color: var(--soft); }

.rank { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.rank__row { display: grid; grid-template-columns: 48px 1.3fr 1fr auto; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 2px; background: var(--panel); }
.rank__n { display: flex; align-items: center; justify-content: center; width: 36px; height: 30px; transform: var(--skew); background: var(--grad-2); font-weight: 800; font-style: italic; }
.rank__n span { transform: var(--unskew); }
.rank__t { font-size: 15px; font-weight: 700; }
.rank__d { font-size: 12px; color: var(--muted); }
.rank__v { font-size: 13px; font-weight: 700; font-style: italic; color: var(--gold); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 26px; }
.facts__i { padding: 14px 16px; border-radius: 2px; background: var(--panel); }
.facts__k { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.facts__v { display: block; margin: 4px 0 0; font-size: 15px; font-weight: 700; }

.land-strip { margin-bottom: 26px; }

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

@media (max-width: 1240px) {
	.pays { gap: 22px; padding-right: 380px; }
	.jp { width: 370px; }
	.jp__t { font-size: 32px; }
	.jp__v { font-size: 24px; }
	.provs__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.bar__nav { display: none; }
	.cols { grid-template-columns: minmax(0, 1fr); }
	.side { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 0; }
	.events { grid-column: span 2; max-width: 360px; }
	.strip { flex-direction: column; }
	.pays { padding-right: 16px; flex-wrap: wrap; }
	.jp { position: relative; width: 100%; height: 90px; }
	.jp::before { inset: 0; transform: none; }
}

@media (max-width: 900px) {
	.hub { height: auto; }
	.hub__in { padding: 22px 0 26px; }
	.hub__art { width: 300px; right: -60px; opacity: .55; }
	.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid--big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ptabs { display: flex; overflow-x: auto; scrollbar-width: none; }
	.ptabs::-webkit-scrollbar { display: none; }
	.ptabs__b { flex: 0 0 auto; padding: 3px 16px 0; }
	.promo { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 120px; }
	.promo__card { grid-column: auto !important; }
	.promo__card--bonus { grid-row: span 2; }
	.promo__card.promo__card--vip { grid-column: 1 / -1 !important; }
	.rank__row { grid-template-columns: 40px 1fr; }
	.rank__row .btn { grid-column: 1 / -1; }
	.facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	body { font-size: 14px; }
	.bar__logo { margin-right: 0; }
	.bar__login { margin-right: 22px; }
	.bar__signup { padding: 0 16px 0 14px; font-size: 11px; }
	.hub__t { font-size: 22px; line-height: 30px; }
	.hub__cards { flex-direction: column; width: 100%; }
	.hcard { width: 100%; min-height: 0; padding-bottom: 12px; }
	.hcard .btn { margin-top: 12px; }
	.hub__art { top: 70px; width: 210px; right: -50px; transform: none; }
	.pays { gap: 14px 20px; }
	.pays img { height: 22px; }
	.jp__t { font-size: 26px; }
	.jp__v { font-size: 20px; }
	.jp__c--1, .jp__c--2 { display: none; }
	.trend { grid-template-columns: 1fr; }
	.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sec__t { margin-left: 12px; }
	.sec__head .btn { min-width: 0; padding: 0 14px; }
	.side { grid-template-columns: 1fr; }
	.events { grid-column: auto; max-width: none; }
	.plate { padding: 22px 16px; }
	.prose h1, .inner__t { font-size: 21px; }
	.prose h2 { font-size: 18px; }
	.provs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot__about { flex-direction: column; text-align: center; gap: 14px; }
	.foot__text { padding-left: 0; border-left: 0; }
	.offer { grid-template-columns: 1fr; padding: 22px 18px; }
	.offer__v { font-size: 24px; }
	.facts { grid-template-columns: 1fr; }
}

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

/* landing hero — the PromoHub plate carrying the page title */
.hub--land { height: 340px; }
h1.hub__t { max-width: 460px; }
.hub--land .hub__t { max-width: 460px; }
.hub__lead { display: block; max-width: 420px; margin-top: 4px; font-size: 13px; color: var(--soft); }
.hub__cta { margin-top: 18px; }
.hub__note { display: block; margin-top: 12px; font-size: 11px; color: var(--muted); }
.pays--full { padding-right: 16px; }
@media (max-width: 900px) { .hub--land { height: auto; } }

/* ---- phone layout, matched to the owner's screenshot of the source app ----
   App banner, taller sticky bar, compact PromoHub, single-line payments,
   jackpot row, category icons, fixed bottom bar. Hidden on desktop. */

.appbar, .tabbar, .cats, .jp__ic, .hcard__short { display: none; }

@media (max-width: 1100px) {
	.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 20px 8px 18px; border-bottom: 1px solid var(--panel); }
	.cats__i { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; line-height: 1.2; }
	.cats__ic { width: 36px; height: 36px; color: var(--sky); object-fit: contain; }
	.cats__i:hover { color: var(--sky); }
}

@media (max-width: 900px) {
	:root { --bar: 64px; }
	body { padding-top: 0; padding-bottom: 64px; }
	.main { overflow-x: clip; }

	.appbar { display: flex; align-items: center; gap: 12px; height: 70px; padding: 0 12px 0 10px; background: #28323e; }
	.appbar[hidden] { display: none; }
	.appbar__x { display: flex; padding: 6px; color: var(--muted); }
	.appbar__x .ic { width: 20px; height: 20px; }
	.appbar__ic { width: 48px; height: 48px; border-radius: 10px; }
	.appbar__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
	.appbar__t b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.appbar__t span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
	.appbar__btn { margin-left: auto; padding: 7px 12px; border-radius: 4px; background: var(--link); font-size: 14px; font-weight: 600; white-space: nowrap; }

	.bar { position: sticky; top: 0; }
	.burger { padding: 0 12px 0 14px; }
	.burger .ic { width: 26px; height: 26px; }
	.bar__logo { margin-right: 0; }
	.bar__logo img { width: 46px; height: 22px; }
	.bar__login { margin-right: 26px; }
	.bar__login .ic { width: 26px; height: 26px; }
	.bar__signup { padding: 0 16px 0 22px; font-size: 14px; }

	.hub { height: auto; }
	.hub__in { display: block; padding: 48px 0 36px; }
	.hub__badge, .hub__lead-in { display: none; }
	.hub__t { max-width: none; margin: 0 0 14px; font-size: 24px; line-height: 1.2; }
	.hub__acts { flex-direction: column; gap: 9px; font-size: 15px; }
	.hub__act { gap: 8px; }
	.hub__act .ic { width: 16px; height: 16px; }
	.hub__art { top: 18px; right: -18px; width: 210px; opacity: 1; transform: none; }
	.hub__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 28px; }
	.hcard { width: auto; min-height: 0; padding: 0; background: none; box-shadow: none; }
	.hcard__top { gap: 8px; min-height: 56px; padding: 8px 10px; background: linear-gradient(#0c0733, rgba(12, 7, 51, .25)); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
	.hcard__top img { width: 34px; height: 34px; }
	.hcard__t { font-size: 15px; }
	.hcard__full, .hcard__text { display: none; }
	.hcard__short { display: inline; }
	.hcard__sub { font-size: 12px; }
	.hcard .btn { width: 100%; min-width: 0; height: 46px; margin: 12px 0 0; font-size: 15px; font-weight: 700; }

	.strip { flex-direction: column; }
	.pays { flex-wrap: nowrap; justify-content: flex-start; gap: 24px; padding: 18px 16px; overflow: hidden; }
	.pays img { height: 30px; flex: none; }
	.jp { position: relative; flex-direction: row; justify-content: space-between; width: 100%; height: 62px; padding: 0 16px; background: radial-gradient(circle at 100% 50%, rgba(109, 62, 235, .6), transparent 32%), var(--page); }
	.jp::before, .jp__c { display: none; }
	.jp__t { display: flex; align-items: center; gap: 10px; color: #8a97a5; font-size: 20px; font-weight: 700; text-shadow: none; letter-spacing: 0; }
	.jp__ic { display: block; width: 24px; height: 24px; }
	.jp__v { margin: 0; font-size: 20px; text-shadow: none; }

	.sec--trend { display: none; }
	.cols { padding-top: 22px; }
	.sec__head { margin-bottom: 18px; }
	.sec__ic { width: 28px; height: 28px; }
	.sec__t { margin-left: 22px; font-size: 15px; font-weight: 700; }
	.sec__head .btn { height: 44px; min-width: 116px; margin-right: -16px; padding: 0 26px; font-size: 13px; }

	.tabbar { position: fixed; inset: auto 0 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 64px; background: var(--panel); box-shadow: 0 -2px 10px rgba(0, 0, 0, .3); }
	.tabbar__i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; }
	.tabbar__i .ic { width: 26px; height: 26px; }
	.tabbar__i.is-on { background: radial-gradient(ellipse at 50% 100%, rgba(109, 62, 235, .75), transparent 70%); }
	.tabbar__i:hover { color: var(--sky); }
}