/* ==========================================================================
   Items grid / scroller
   --------------------------------------------------------------------------
   Универсальная система для списков карточек.

   HTML:
   <div class="itemsGrid itemsScroller itemsGrid--bonus3">...</div>
   <div class="itemsGrid itemsScroller itemsGrid--casino5">...</div>
   <div class="itemsGrid itemsScroller itemsGrid--bonus4">...</div>

   Логика:
   - desktop: заданное количество колонок;
   - если карточки не влезают по минимальной ширине — появляется горизонтальный скролл;
   - tablet/mobile: карточки идут горизонтально по 44vw.
   ========================================================================== */

.itemsGrid {
	--items-cols: 3;
	--items-gap: var(--gap, 16px);
	--items-min: 240px;
	--items-scroll-width: 44vw;

	width: 100%;
	min-width: 0;
}

.itemsScroller {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.itemsScroller::-webkit-scrollbar {
	display: none;
}

/* Inner list generated by alpaka_archive_loop() */
.itemsGrid > ul,
.itemsGrid > .loop,
.itemsGrid > .archive-loop {
	display: grid !important;
	grid-template-columns: repeat(var(--items-cols), minmax(var(--items-min), 1fr)) !important;
	gap: var(--items-gap);
	width: 100%;
	max-width: none;
	margin-top: var(--pad);
	padding: 0;
	list-style: none;
}

/* List items */
.itemsGrid > ul > li,
.itemsGrid > .loop > li,
.itemsGrid > .archive-loop > li {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

/* Card inside li */
.itemsGrid article {
	width: 100%;
	min-width: 0;
	max-width: none;
}


/* ==========================================================================
   Grid modifiers
   ========================================================================== */

/* Casino review page: bonuses inside current casino — 3 in row */
.itemsGrid--bonus3 {
	--items-cols: 3;
	--items-min: 260px;
}

/* Casino review page: related casinos — 5 in row */
.itemsGrid--casino5 {
	--items-cols: 5;
	--items-min: 180px;
}

/* Bonus review page: related bonuses — 4 in row */
.itemsGrid--bonus4 {
	--items-cols: 4;
	--items-min: 260px;
}

/* Game page: similar demo games — 4 in row */
.itemsGrid--game4 {
	--items-cols: 4;
	--items-min: 200px;
}

/* ==========================================================================
   Tablet / mobile horizontal mode
   --------------------------------------------------------------------------
   Below desktop width all item grids become horizontal scrollers.
   Card width: 44vw.
   ========================================================================== */

@media (max-width: 1179px) {
	.itemsGrid > ul,
	.itemsGrid > .loop,
	.itemsGrid > .archive-loop {
		grid-template-columns: none !important;
		grid-auto-flow: column;
		grid-auto-columns: var(--items-scroll-width);
		width: max-content;
		max-width: none;
	}

	.itemsGrid > ul > li,
	.itemsGrid > .loop > li,
	.itemsGrid > .archive-loop > li {
		width: var(--items-scroll-width);
		min-width: var(--items-scroll-width);
		max-width: var(--items-scroll-width);
	}
}


/* ==========================================================================
   Small mobile
   --------------------------------------------------------------------------
   На телефоне 44vw будет слишком узко для bonusCard.
   Если хочешь строго 44vw даже на телефоне — удали этот блок.
   ========================================================================== */

@media (max-width: 520px) {
	.itemsGrid {
		--items-scroll-width: 78vw;
	}
}




/* ==========================================================================
   Review hero — shared base
   --------------------------------------------------------------------------
   Shared hero component for:
   - single casino pages
   - single bonus pages
   ========================================================================== */

.reviewHero {
	position: relative;
	min-width: 0;
}

.reviewHero__logo {
	width: 128px;
	height: 128px;
	overflow: hidden;
}

.reviewHero__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reviewHero__logoFallback {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: rgba(255, 255, 255, .06);
}

.reviewHero__main {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.reviewHero__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.reviewHero__updated {
	display: block;
	width: fit-content;
	color: rgba(255, 255, 255, .44);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.reviewHero__cta {
	min-width: 0;
}


/* ==========================================================================
   Review hero — casino
   --------------------------------------------------------------------------
   Desktop layout:
   logo / main / metrics

   CTA inside casino hero is hidden on desktop because sidebar CTA is visible.
   It becomes visible on tablet/mobile.
   ========================================================================== */

.reviewHero--casino {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr) minmax(320px, 1fr);
	grid-template-areas: "logo main metrics";
	gap: 18px;
	align-items: center;
}

.reviewHero--casino .reviewHero__logo {
	grid-area: logo;
}

.reviewHero--casino .reviewHero__main {
	grid-area: main;
}

.reviewHero--casino .reviewHero__metrics {
	grid-area: metrics;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	min-width: 0;
}

.reviewHero--casino .reviewHero__cta {
	grid-area: cta;
	display: none;
}


/* ==========================================================================
   Review hero — bonusy
   --------------------------------------------------------------------------
   Desktop layout:
   logo / main / CTA

   CTA is always visible on bonus pages.
   ========================================================================== */

.reviewHero--bonusy {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr) minmax(280px, 360px);
	grid-template-areas: "logo main cta";
	gap: 18px;
	align-items: center;
}

.reviewHero--bonusy .reviewHero__logo {
	grid-area: logo;
}

.reviewHero--bonusy .reviewHero__main {
	grid-area: main;
}

.reviewHero--bonusy .reviewHero__cta {
	grid-area: cta;
	display: block;
	min-width: 0;
}


/* ==========================================================================
   Review hero — casino metrics
   ========================================================================== */

.reviewHero__metrics {
	min-width: 0;
}

.reviewHero__metric {
	display: grid;
	align-content: center;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
}

.reviewHero__metric b {
	margin: 0;
	color: var(--text);
	font-size: var(--fs-min);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .25px;
	text-transform: uppercase;
}

.reviewHero__metric > span {
	display: inline;
	min-height: 32px;
	margin: 0;
	align-content: center;
	color: var(--muted);
	font-weight: 400;
}

.reviewHero__score {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.reviewHero__star {
	color: var(--accent);
	line-height: 1;
}

.reviewHero__scoreMain {
	color: var(--text);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}


/* ==========================================================================
   Review hero — tablet
   --------------------------------------------------------------------------
   Both casino and bonus hero become vertical.
   Casino CTA becomes visible here.
   ========================================================================== */

@media (max-width: 859px) {
	.reviewHero--casino,
	.reviewHero--bonusy {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 16px;
	}

	.reviewHero__logo,
	.reviewHero__main,
	.reviewHero__cta,
	.reviewHero__metrics {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.reviewHero__logo {
		order: 1;
		align-self: center;
		width: 128px;
		height: 128px;
		flex: 0 0 128px;
	}

	.reviewHero__main {
		order: 2;
	}

	.reviewHero__cta {
		order: 3;
	}

	.reviewHero--casino .reviewHero__cta {
		display: block;
	}

	.reviewHero__metrics {
		order: 4;
	}
}


/* ==========================================================================
   Review hero — mobile
   ========================================================================== */

@media (max-width: 640px) {
	.reviewHero--casino,
	.reviewHero--bonusy {
		gap: 14px;
	}

	.reviewHero__title {
		font-size: 28px;
		line-height: 1.08;
		letter-spacing: -0.03em;
	}

	.reviewHero__updated {
		font-size: 12px;
		line-height: 1.3;
	}

	.reviewHero--casino .reviewHero__metrics {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 4px;
	}

	.reviewHero--casino .reviewHero__metric {
		display: grid;
		gap: 5px;
		min-height: 0;
		padding: 12px 13px;
		border: 1px solid rgba(255, 255, 255, .08);
		border-radius: 15px;
		background: rgba(255, 255, 255, .015);
	}

	.reviewHero--casino .reviewHero__metric:first-child {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 14px 16px;
	}

	.reviewHero--casino .reviewHero__metric b {
		display: block;
		font-size: 10px;
		font-weight: 900;
		line-height: 1.2;
		letter-spacing: .10em;
		color: rgba(255, 255, 255, .58);
	}

	.reviewHero--casino .reviewHero__metric > span {
		display: block;
		min-height: 0;
		color: rgba(255, 255, 255, .86);
		font-size: 14px;
		font-weight: 750;
		line-height: 1.2;
		overflow-wrap: anywhere;
	}

	.reviewHero--casino .reviewHero__score {
		justify-content: flex-end;
		margin-left: auto;
		flex: 0 0 auto;
	}

	.reviewHero--casino .reviewHero__score span {
		display: inline;
		white-space: nowrap;
	}

	.reviewHero--casino .reviewHero__star {
		display: inline-flex;
		align-items: center;
		font-size: 17px;
		flex: 0 0 auto;
	}

	.reviewHero--casino .reviewHero__scoreMain {
		display: inline;
		font-size: 21px;
		font-weight: 900;
		color: #fff;
		white-space: nowrap;
	}
}


/* ==========================================================================
   Review hero — narrow mobile
   ========================================================================== */

@media (max-width: 390px) {
	.reviewHero--casino .reviewHero__metrics {
		gap: 8px;
	}

	.reviewHero--casino .reviewHero__metric {
		padding: 11px 12px;
	}

	.reviewHero--casino .reviewHero__metric:first-child {
		padding: 13px 14px;
	}

	.reviewHero--casino .reviewHero__scoreMain {
		font-size: 19px;
	}
}





/* ==========================================================================
   Review updated time
   --------------------------------------------------------------------------
   Small update date shown under H1 in casino / bonus hero.
   Example: Aktualizacja: czerwiec 2026
   ========================================================================== */
.rankNameTime {
	display: block;
	margin-top: 9px;
	color: rgba(255, 255, 255, .46);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
}

@media (max-width: 768px) {
	.rankNameTime {
		margin-top: 8px;
		font-size: 12px;
		line-height: 1.3;
	}
}





/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   В этом блоке сейчас живут два разных desktop-варианта TOC:

   1. .reviewToc
      Используется на review-страницах казино / бонусов.
      Дизайн: компактная горизонтальная строка с разделителями "•".

   2. .gameArticleToc
      Используется на страницах игр.
      Дизайн: вертикальный sticky/sidebar TOC с левой активной линией.

   Общий мобильный dropdown лучше держать отдельно через .tocMobile
   в src/css/components/toc-mobile.css.
   ========================================================================== */


/* ==========================================================================
   Review TOC
   --------------------------------------------------------------------------
   Используется для страниц казино / бонусов.

   HTML-логика:
   <nav class="reviewToc ...">
     <span class="reviewToc__label">Na stronie</span>
     <button class="reviewToc__toggle">...</button>
     <ul class="reviewToc__list">...</ul>
   </nav>

   На desktop кнопка .reviewToc__toggle скрыта.
   На mobile её должен показывать общий .tocMobile CSS.
   ========================================================================== */

.reviewToc {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
}

/*
 * Desktop label before TOC links.
 * Example: "Na stronie".
 */
.reviewToc__label {
	font-size: 13px;
	line-height: 1.2;
	font-weight: 700;
	color: rgba(255, 255, 255, .34);
	white-space: nowrap;
}

/*
 * Horizontal TOC list for review pages.
 * Links are displayed inline and can wrap to the next line if needed.
 */
.reviewToc__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Each item is inline-flex so the separator can be vertically centered.
 */
.reviewToc__list li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/*
 * Dot separator between TOC items.
 * Disabled on mobile in .tocMobile styles.
 */
.reviewToc__list li + li::before {
	content: "•";
	margin: 0 13px;
	font-size: 12px;
	line-height: 1;
	color: rgba(255, 255, 255, .24);
}

/*
 * Compact desktop links.
 * white-space: nowrap keeps every item readable as a single short label.
 */
.reviewToc__list a {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 700;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.reviewToc__list a:hover {
	color: #fff;
}

/*
 * Keyboard focus state.
 * Important for accessibility when navigating by Tab.
 */
.reviewToc__list a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .35);
	outline-offset: 4px;
	border-radius: 6px;
}


/* ==========================================================================
   Game Article TOC
   --------------------------------------------------------------------------
   Используется на страницах игр.

   HTML-логика:
   <nav class="gameArticleToc ...">
     <button class="gameArticleToc__toggle">...</button>
     <h2 class="gameArticleToc__title">Spis treści</h2>
     <ul class="gameArticleToc__list">...</ul>
   </nav>

   Desktop-дизайн отличается от .reviewToc:
   - вертикальный список;
   - левая линия;
   - активный пункт подсвечивается border-left;
   - h3 внутри статьи выводятся как подпункты через .is-subitem.

   На desktop .gameArticleToc__toggle скрыт.
   На mobile его должен показывать общий .tocMobile CSS.
   ========================================================================== */

.gameArticleToc {
	display: grid;
	gap: 14px;
}

/*
 * Mobile toggle button.
 * Hidden on desktop by default.
 * Display is overridden in shared .tocMobile mobile styles.
 */
.gameArticleToc__toggle {
	display: none;
}

/*
 * Desktop TOC title.
 * Usually displayed in sidebar.
 */
.gameArticleToc__title {
	margin: 0;
	color: rgba(255, 255, 255, .96);
	font-size: 20px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

/*
 * Vertical list with left rail.
 * Active links visually attach to this rail via border-left.
 */
.gameArticleToc__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid rgba(255, 255, 255, .12);
}

.gameArticleToc__list li {
	margin: 0;
	padding: 0;
}

/*
 * Main TOC links.
 * margin-left: -2px aligns the active border exactly over the list rail.
 */
.gameArticleToc__list a {
	display: block;
	margin-left: -2px;
	padding: 9px 0 9px 14px;
	border-left: 2px solid transparent;
	color: rgba(255, 255, 255, .58);
	font-size: 14px;
	font-weight: 750;
	line-height: 1.25;
	text-decoration: none;
	transition:
		color .18s ease,
		border-color .18s ease;
}

/*
 * Hover / keyboard focus for game TOC links.
 */
.gameArticleToc__list a:hover,
.gameArticleToc__list a:focus-visible {
	color: rgba(255, 255, 255, .96);
	border-left-color: var(--link);
}

/*
 * Active item set by JS while scrolling.
 */
.gameArticleToc__list a.is-active {
	color: rgba(255, 255, 255, .96);
	border-left-color: var(--link);
}

/*
 * Subitems are generated from h3 headings.
 * They are visually smaller and indented under h2 items.
 */
.gameArticleToc__list a.is-subitem {
	padding-left: 28px;
	font-size: 13px;
	color: rgba(255, 255, 255, .48);
}

.gameArticleToc__list a.is-subitem:hover,
.gameArticleToc__list a.is-subitem:focus-visible,
.gameArticleToc__list a.is-subitem.is-active {
	color: rgba(255, 255, 255, .88);
}











.gamePlayerShell iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	border: 0;
	display: block;
	background: #000;
}





.affiliateDisclosure {
	padding: 0;
}

.affiliateDisclosure h2 {
	font-size: 12px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.affiliateDisclosure p {
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, .62);
	letter-spacing: 0.32px;
}








.casinoBonusCard {
	display: grid;
	gap: 10px;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--line2);
	border-radius: 16px;
	background: rgba(255,255,255,.022);
}

.casinoBonusCard__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.casinoBonusCard__title a {
	color: var(--text);
	text-decoration: none;
}

.casinoBonusCard__bonus {
	color: var(--text);
	font-size: 16px;
	font-weight: 950;
	line-height: 1.3;
}

.casinoBonusCard__link {
	color: var(--link);
	font-size: 14px;
	font-weight: 850;
	text-decoration: none;
}















.reviewQuick {
	padding: 24px;
	background: #181416;
	border: 0;
	border-radius: 18px;
	box-shadow: none;
}

.reviewQuick__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	line-height: 1.4;
}

.reviewQuick__meta img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	display: block;
}

.reviewQuick__meta a:hover {
	text-decoration: underline;
}

.reviewQuick h2 {
	font-size: 20px;
	color: rgba(255, 255, 255, .96);
}

.reviewQuick p {
	font-size: 14px;
	line-height: 18px;
	color: rgba(255, 255, 255, .82);
}















/* GUTENBERG CONTENT HELPERS */
.reviewContent{
	display:grid;
	gap:18px;
	min-width:0;
}

/* Разметка с сайдбаром */
.reviewContentGrid{
	display:grid;
	gap:20px;
	align-items:start;
margin-top: var(--pad);}

@media (min-width:860px){
	.reviewContentGrid{
		grid-template-columns:minmax(0, 1fr) 360px;
	}
}






.reviewVerdict {
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.reviewVerdict h2 {
	margin: 0 0 12px;
	font-size: 20px;
	color: rgba(255, 255, 255, .96);
}

.reviewVerdict__col {
	min-width: 0;
}

.reviewVerdict__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reviewVerdict__item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	column-gap: 8px;
	align-items: start;
	line-height: 22px;
}

.reviewVerdict__icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: calc((22px - 18px) / 2);
	border-radius: 999px;
	line-height: 1;
}

.reviewVerdict__icon svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.reviewVerdict__text {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
}

.reviewVerdict__icon--pros {
	color: #8ff0a4;
	background: rgba(34, 197, 94, .12);
}

.reviewVerdict__icon--cons {
	color: #ff9aa8;
	background: rgba(244, 63, 94, .12);
}

@media (max-width: 720px) {
	.reviewVerdict {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}



.reviewNotice{
	margin:0;
	color:var(--muted);
	font-size:var(--fs-min);
	line-height:1.45;
	grid-area: notice;
}





/* SINGLE GRY */

/* GAME HEADER */
.gameMetaLine{
	color:var(--muted);
	font-size:14px;
	font-weight:800;
	line-height:1.35;
}

.gameMetaLine span{
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.gamePlayerShell{
	position:relative;
	width:100%;
	aspect-ratio:16 / 9;
	overflow:hidden;
	border:1px solid var(--line2);
	border-radius:var(--radius);
	background:#000;
	box-shadow:0 18px 60px rgba(0,0,0,.28);
}

/* GAME CONTENT */

.gameContent{
	display:grid;
	gap:18px;
	padding-top:20px;
	padding-bottom:48px;
}

.gameBlockHead p{
	margin:0;
	color:var(--muted);
}



/* GAME CASINO BLOCK */
.gameCasinoCard{
	display:grid;
	grid-template-columns:92px minmax(0,1fr) auto;
	gap:16px;
	align-items:center;
	min-height:118px;
	padding:14px;
	border:1px solid var(--line2);
	border-radius:var(--radius);
	background:rgba(255,255,255,.02);
}

.gameCasinoLogo{
	width:92px;
	height:92px;
	display:grid;
	place-items:center;
	overflow:hidden;
	border:1px solid var(--line2);
	border-radius:18px;
	background:rgba(255,255,255,.025);
}

.gameCasinoLogo img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	padding:0;
}

.gameCasinoMain{
	display:grid;
	gap:5px;
	min-width:0;
}

.gameCasinoMain h3{
	margin:0;
	font-size:19px;
	line-height:1.15;
	letter-spacing:-.02em;
}

.gameCasinoMain h3 a{
	color:var(--text);
	text-decoration:none;
}

.gameCasinoMeta{
	color:var(--muted);
	font-size:13px;
	font-weight:800;
	line-height:1.35;
}

.gameCasinoBonus{
	color:var(--text);
	font-size:16px;
	font-weight:900;
	line-height:1.3;
}

.gameCasinoCode{
	color:var(--muted);
	font-size:13px;
	font-weight:850;
	line-height:1.35;
}

.gameCasinoCard .btn{
	justify-self:end;
	white-space:nowrap;
}






/* GAME SIMILAR */
.gameSimilarCard{
	display:grid;
	gap:10px;
	min-width:0;
}

.gameSimilarThumb{
	display:block;
	aspect-ratio:4 / 3;
	overflow:hidden;
	border:1px solid var(--line2);
	border-radius:var(--radius);
	background:rgba(255,255,255,.03);
	color:var(--text);
	text-decoration:none;
}

.gameSimilarThumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.gameSimilarCard h3{
	margin:0;
	font-size:15px;
	line-height:1.2;
}

.gameSimilarCard h3 a{
	color:var(--text);
	text-decoration:none;
}

.gameSimilarMeta{
	color:var(--muted);
	font-size:13px;
	font-weight:750;
	line-height:1.35;
}







/* GAME HOVER */

@media (hover:hover) and (pointer:fine){
	.gameCasinoMain h3 a:hover,
	.gameSimilarCard h3 a:hover{
		color:var(--link);
	}
}

@media (max-width:767px){
	.gamePlayerShell{
		aspect-ratio:16 / 10;
		border-radius:16px;
	}

	.gamePlayerMeta{
		justify-content:flex-start;
	}

	.gamePlayerMeta p{
		max-width:none;
		text-align:left;
	}

	.gameCasinoCard{
		grid-template-columns:72px minmax(0,1fr);
		gap:12px;
		min-height:0;
		padding:12px;
	}

	.gameCasinoLogo{
		width:72px;
		height:72px;
		border-radius:16px;
	}

	.gameCasinoMain h3{
		font-size:17px;
	}

	.gameCasinoCard .btn{
		grid-column:1 / -1;
		width:100%;
		justify-self:stretch;
	}

}




.reviewStickyCta {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"brand"
		"offer"
		"bonus"
		"code"
		"button"
		"notice";
	gap: 12px;
	align-items: stretch;
	padding: 18px;
	border-radius: 18px;
}

.reviewStickyBrand {
	grid-area: brand;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}



.reviewCtaCard__hint {
	margin: 0;
	color: rgba(255, 255, 255, .62);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.35;
}








.TabsTable {overflow:hidden;}

.reviewInfoTabs__nav {
	display: flex;
	padding-bottom: var(--pad);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
    overflow-y: hidden;
	overflow-x: auto;
}

.reviewInfoTabs__tab {
	position: relative;
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 800;
	color: rgba(255, 255, 255, .52);
	cursor: pointer;
	white-space: nowrap;
	transition: color .18s ease;
}

.reviewInfoTabs__tab:hover {
	color: rgba(255, 255, 255, .86);
}

.reviewInfoTabs__tab.is-active {
	color: rgba(255, 255, 255, .96);
}

.reviewInfoTabs__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -13px;
	height: 2px;
	border-radius: 999px;
	background: #3b82f6;
}

.reviewInfoTabs__panel {
	display: none;
	padding-top: var(--pad);
}

.reviewInfoTabs__panel.is-active {
	display: block;
}

.reviewInfoTabs__nav::-webkit-scrollbar {
	display: none;
}



/* Casino minimal tile — template 2 */
.casinoTile {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 10px;

	padding: 18px 16px;

	background: #111315;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
}

.logo--op.casinoTile__logo {
	width: 72px;
	height: 72px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 14px;
	overflow: hidden;
}

.casinoTile__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.casinoTile__title {
	margin: 2px 0 0;
	min-height: 40px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 16px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.02em;

	color: rgba(255, 255, 255, .96);
}

.casinoTile__review {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;

	color: #60a5fa;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.casinoTile__review:hover {
	color: #93c5fd;
}

.casinoTile__play {
	width: 100%;
	min-height: 42px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;

	font-size: 15px;
	line-height: 1;
	font-weight: 800;
}

.casinoTile__terms {
	margin-top: 1px;

	font-size: 11px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .48);
}

















.rankStar {
    color: var(--accent)!important;
}










































.reviewInfoBlock {
	margin-top: 42px;
	margin-bottom: 20px;
	max-width: 980px;
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	font-weight: 450;
	line-height: 1.65;
}

/* Games part */

.reviewInfoBlock__gamesText {
	margin: 0;
	max-width: 980px;
	color: rgba(255, 255, 255, .78);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
}

/* Titles */

.reviewInfoBlock__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--text);
	font-size: 24px;
	font-weight: 950;
	line-height: 1.15;
	letter-spacing: -0.03em;
}


.reviewInfoBlock__title--content {
	margin-top: 0;
}


.reviewInfoBlock__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .82);
}

.reviewInfoBlock__icon svg {
	display: block;
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.reviewInfoBlock__games > *:last-child {
	margin-bottom: 0;
}












/* STICKY SIDEBAR */
.reviewSideRail{
	display:none;
	min-width:0;
}
@media (min-width:860px){
	.reviewSideRail{
		display:block;
		position:sticky;
		top:84px;
		align-self:start;
	}
}




/* ==========================================================================
   Review CTA Card
   Универсальная CTA-карточка для обзоров казино и бонусов.

   Идея:
   - сама карточка не должна знать, sticky она или нет;
   - sticky-поведение задаётся внешней обёрткой;
   - этот блок можно использовать в sidebar казино и в hero бонуса.
   ========================================================================== */


/* ==========================================================================
   Title
   Название казино / бренда внутри CTA-карточки.

   Обычно это h3, поэтому margin: 0 нужен обязательно,
   чтобы браузерный отступ заголовка не ломал сетку карточки.
   ========================================================================== */

.reviewCtaCard__title {
	margin: 0;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.02em;
}


/* ==========================================================================
   Primary CTA Button
   Основная кнопка действия: "Odbierz bonus", "Przejdź" и т.п.

   Селектор .reviewCtaCard__button.btn--primary специально точнее,
   чтобы переопределить базовые стили .btn--primary, если они уже есть в теме.
   ========================================================================== */

.reviewCtaCard__button.btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 42px;
	background: linear-gradient(180deg, #fff7df 0%, #f4d87a 100%);
	color: #12100b;
	box-shadow: 0 10px 28px rgba(244, 216, 122, .18);
}


/* Текст внутри кнопки.
   Отдельный класс нужен, чтобы при необходимости управлять текстом отдельно:
   например, скрывать/менять его на мобильных или добавлять nowrap. */

.reviewCtaCard__buttonText {
	display: inline-block;
}


/* Контейнер иконки внутри кнопки.
   Фиксированный размер нужен, чтобы SVG не растягивал высоту кнопки. */

.reviewCtaCard__buttonIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
}


/* SVG-иконка стрелки в кнопке.
   fill отключён, потому что иконка рисуется stroke-линиями. */

.reviewCtaCard__buttonIcon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ==========================================================================
   Logo
   Логотип казино / оператора внутри CTA-карточки.

   Здесь используется комбинация .logo--op.reviewCtaCard__logo,
   чтобы не конфликтовать с базовым классом .logo--op из темы.
   ========================================================================== */

.logo--op.reviewCtaCard__logo {
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 999px;
	justify-self: start;
}


/* Картинка логотипа заполняет контейнер.
   object-fit: cover подходит для круглого компактного логотипа в CTA. */

.reviewCtaCard__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   Promo Code
   Блок с промокодом внутри CTA.

   .codePill уже может иметь свои глобальные стили.
   Здесь мы только гарантируем, что внутри CTA он занимает всю ширину карточки.
   ========================================================================== */

.reviewCtaCard__code .codePill {
	width: 100%;
}


/* Если reviewCtaCard__code и codeRow находятся на одном элементе,
   убираем верхний отступ, чтобы расстояния контролировались gap-ом карточки. */

.reviewCtaCard__code.codeRow {
	margin-top: 0;
}


/* ==========================================================================
   Brand Row
   Верхняя строка карточки: логотип + название казино.

   min-width: 0 нужен для корректного сжатия текста внутри flex-контейнера,
   особенно если название длинное.
   ========================================================================== */

.reviewCtaCard__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}


/* ==========================================================================
   Offer Head
   Строка над бонусом: категория слева и эксклюзивный бейдж справа.

   justify-content: space-between разводит элементы по краям.
   fallback в var(--gap, 10px) защищает от ситуации,
   если переменная --gap не объявлена глобально.
   ========================================================================== */

.reviewCtaCard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap, 10px);
	min-width: 0;
}


/* ==========================================================================
   Bonus Text
   Основной текст оффера: например "20 darmowych spinów".

   Это один из ключевых элементов карточки, поэтому жирность высокая,
   но размер не должен быть слишком большим, чтобы CTA не распирало.
   ========================================================================== */

.reviewCtaCard__bonus {
	margin: 0;
	font-size: 18px;
	font-weight: 950;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.reviewCtaBadge--category {
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(255, 255, 255, .50);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}



/* ==========================================================================
   Notice
   Юридическая / ответственная пометка под кнопкой.

   Небольшой размер и muted-цвет, чтобы текст был видимым,
   но не конкурировал с бонусом и кнопкой.
   ========================================================================== */

.reviewCtaCard__notice {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
}










/* Review hero badges */

.reviewHeroBadges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

/* Mobile: horizontal badge scroller */

@media (max-width: 640px) {
	.reviewHeroBadges {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;

		padding-bottom: 2px;
	}

	.reviewHeroBadges::-webkit-scrollbar {
		display: none;
	}

	.reviewHeroBadges .badge__text {
		white-space: nowrap;
	}
}

/* Layout for badges inside bonus cards */
.bonusCardMinimal__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}


















.bonusCard--minimal {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	min-height: 100%;
	padding: 18px;
	background: #111516;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 20px;
}

.bonusCardMinimal__top {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.bonusCardMinimal__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.bonusCardMinimal__title {
	margin: 0;
	color: rgba(255, 255, 255, .96);
	font-size: 18px;
	font-weight: 850;
	line-height: 1.12;
	letter-spacing: -0.025em;
	overflow-wrap: anywhere;
}

.bonusCardMinimal__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin-top: 18px;
	min-width: 0;
}

.bonusCardMinimal__metaItem {
	display: grid;
	gap: 4px;
	min-width: 0;
	align-content: start;
}

.bonusCardMinimal__metaItem:nth-child(4) {
	grid-column: 1 / -1;
}

.bonusCardMinimal__metaItem span {
	color: rgba(255, 255, 255, .46);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

.bonusCardMinimal__metaItem strong {
	color: rgba(255, 255, 255, .90);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Bottom pinned area */
.bonusCardMinimal__actions {
	display: grid;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
	min-width: 0;
}

.bonusCardMinimal__code.codeRow {
	margin: 0;
}

.bonusCard--minimal .codePill {
	width: 100%;
}

.bonusCard--minimal .codeRow .codeLabel {
	display: none;
}

.bonusCardMinimal__more {
	display: inline-flex;
	width: max-content;
	max-width: 100%;
	color: #60a5fa;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bonusCardMinimal__more:hover {
	color: #93c5fd;
}

.bonusCardMinimal__claim {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}



.btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
}

.btn__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}














/* Game player placeholder */

.gamePlayerShell--placeholder {
	display: block;
}

.gamePlayerPlaceholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(circle at center, rgba(255, 255, 255, .08), transparent 52%),
		#050505;
}

.gamePlayerPlaceholder__media {
	position: absolute;
	inset: 0;
	opacity: .42;
	filter: blur(1px);
	transform: scale(1.02);
}

.gamePlayerPlaceholder__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gamePlayerPlaceholder__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, .72)),
		rgba(0, 0, 0, .18);
}

.gamePlayerPlaceholder__content {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 24px;
	text-align: center;
}

.gamePlayerPlaceholder__title {
	color: rgba(255, 255, 255, .96);
	font-size: 24px;
	font-weight: 950;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.gamePlayerPlaceholder__button {
	min-width: 150px;
	min-height: 46px;
	border-radius: 999px;
}

.gamePlayerPlaceholder__button .btn__icon svg {
	fill: currentColor;
	stroke: none;
}

.gamePlayerPlaceholder__note {
	color: rgba(255, 255, 255, .62);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}


/* Game article sticky sidebar */

.gameArticleGrid {
	display: grid;
	grid-template-columns: 220px minmax(0, 760px);
	gap: 48px;
	align-items: start;
	margin-top: 28px;
}

.gameArticleSide {
	position: sticky;
	top: 96px;
	align-self: start;
	min-width: 0;
}

.gameArticleMain {
	min-width: 0;
	max-width: 760px;
}

.gameSimilarBlock {
	margin-top: 42px;
}







.factsGrid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: var(--pad);}

.factCard {
	min-width: 0;
	padding: var(--pad);
	border-radius: var(--radius);
	background: #181416;
}

.factLink {
	display: flex;
	align-items: center;
	gap: var(--gap);
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.factIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .9);
}

.factIcon svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.factText {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 4px;
}

.factLabel {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .52);
}

.factValue {
	line-height: 1.25;
	font-weight: 900;
	color: #fff;
	overflow-wrap: anywhere;
}

.factArrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin-left: auto;
	color: rgba(255, 255, 255, .55);
}

.factArrow svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.factLink:hover .factArrow,
.factLink:hover .factValue {
	color: #fff;
}

@media (max-width: 900px) {
	.factsGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.factsGrid {
		grid-template-columns: 1fr;
	}
}








/* ==========================================================================
   Game article — mobile TOC above content
   ========================================================================== */

@media (max-width: 859px) {
	.gameArticleGrid {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
		gap: 18px !important;

		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-top: 24px;
		overflow: hidden;
	}

	.gameArticleSide,
	.gameArticleMain {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.gameArticleSide {
		order: 1;
		position: static !important;
		top: auto !important;
	}

	.gameArticleMain {
		order: 2;
		overflow: hidden;
	}

	.gameArticleMain,
	.gameArticleMain article,
	.gameArticleMain .wp-block-group,
	.gameArticleMain .wp-block-group__inner-container {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.gameArticleMain h2,
	.gameArticleMain h3,
	.gameArticleMain p,
	.gameArticleMain li {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}







.badge.reviewCtaCardBadge {background:none!important;padding:0!important;}