@font-face {
	font-family: 'Fester';
	src: url('/assets/fonts/Fester-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Fester';
	src: url('/assets/fonts/Fester-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Fester';
	src: url('/assets/fonts/Fester-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}

:root {
	--bsr-bg: #131313;
	--bsr-surface: #212121;
	--bsr-footer: #151515;
	--bsr-card: linear-gradient(#424242, #1a1a1a);
	--bsr-accent: #fb3c3c;
	--bsr-accent-grad: linear-gradient(177deg, #fb3c3c 1.96%, #880303 98.23%);
	--bsr-light-grad: linear-gradient(177deg, #f4f4f4 2%, #dcdcdc 100%);
	--bsr-text: #fff;
	--bsr-muted: rgba(255, 255, 255, .7);
	--bsr-dim: rgba(255, 255, 255, .45);
	--bsr-line: rgba(255, 255, 255, .08);
	--bsr-pill: 44px;
	--bsr-radius: 10px;
	/* 1144px content box — the source's header and nav span 148–1292 at 1440 */
	--bsr-container: 1176px;
}

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--bsr-bg);
	color: var(--bsr-text);
	font-family: 'Fester', 'Trebuchet MS', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
}

img {
	max-width: 100%;
	display: block;
}

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

.bsr-container {
	width: 100%;
	max-width: var(--bsr-container);
	margin: 0 auto;
	padding: 0 16px;
}

.bsr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: var(--bsr-pill);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	/* source renders every button in caps; lang="tr" gives the dotted İ */
	text-transform: uppercase;
	padding: 14px 26px;
	cursor: pointer;
	white-space: nowrap;
	transition: filter .18s ease, transform .18s ease;
}

.bsr-btn:hover {
	filter: brightness(1.08);
}

.bsr-btn:active {
	transform: translateY(1px);
}

.bsr-btn--accent {
	background-image: var(--bsr-accent-grad);
	color: #fff;
}

.bsr-btn--light {
	background-image: var(--bsr-light-grad);
	color: #000;
}

.bsr-btn--ghost {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}

.bsr-btn--sm {
	padding: 11px 20px;
}

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

.bsr-header {
	position: relative;
	z-index: 30;
	background: var(--bsr-surface);
}

.bsr-header__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 64px;
}

.bsr-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.bsr-header__logo img {
	width: 164px;
	height: 32px;
}

.bsr-header__spacer {
	flex: 1 1 auto;
}

.bsr-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.bsr-header__actions > .bsr-btn {
	height: 48px;
	padding: 0 30px;
	letter-spacing: .5px;
}

.bsr-header__actions > .bsr-btn--accent {
	min-width: 143px;
}

.bsr-header__actions > .bsr-btn--light {
	min-width: 95px;
}

.bsr-header__or {
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
}

.bsr-social {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bsr-social__item {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: background .18s ease;
}

.bsr-social__item:hover {
	background: rgba(255, 255, 255, .2);
}

.bsr-social__item svg {
	width: 15px;
	height: 15px;
}

.bsr-burger {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 0;
}

.bsr-burger svg {
	width: 26px;
	height: 26px;
}

/* ---------- nav ---------- */

.bsr-nav {
	position: relative;
	z-index: 20;
	background: transparent;
	margin-bottom: -80px;
}

.bsr-nav__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 17px;
	height: 80px;
	overflow-x: auto;
	scrollbar-width: none;
}

.bsr-nav__inner::-webkit-scrollbar {
	display: none;
}

.bsr-nav__link {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	transition: color .18s ease;
}

.bsr-nav__link:hover {
	color: var(--bsr-accent);
}

.bsr-nav__link.is-active {
	color: var(--bsr-accent);
}

.bsr-nav__lang {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 23px;
	color: #fff;
}

.bsr-nav__lang img {
	width: 20px;
	height: 14px;
	border-radius: 2px;
}

.bsr-nav__lang svg {
	width: 14px;
	height: 14px;
}

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

.bsr-hero {
	position: relative;
	overflow: hidden;
}

.bsr-hero__track {
	position: relative;
	width: 100%;
	height: 328px;
}

.bsr-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

.bsr-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.bsr-hero__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.bsr-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bsr-hero__copy {
	position: absolute;
	top: 50%;
	/* source copy block sits 9px below the track's true centre */
	transform: translateY(calc(-50% + 9px));
	left: max(24px, calc(50vw - var(--bsr-container) / 2 + 16px));
	max-width: 340px;
}

.bsr-hero__title {
	margin: 0 0 18px;
	font-size: 26px;
	font-weight: 700;
	line-height: 32px;
	color: #fff;
}

.bsr-hero__title em {
	font-style: normal;
}

.bsr-hero__cta {
	width: 240px;
	height: 48px;
	padding: 0 24px;
}

.bsr-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

/* source dots are hollow rings; the active one fills in */
.bsr-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .85);
	padding: 0;
	cursor: pointer;
	transition: background .18s ease;
}

.bsr-hero__dot.is-active {
	background: #fff;
}

/* ---------- filter bar ---------- */

.bsr-filters {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--bsr-surface);
	border-radius: var(--bsr-pill);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 20px 0 52px;
	height: 80px;
}

.bsr-filters__list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1 1 auto;
}

.bsr-filters__list::-webkit-scrollbar {
	display: none;
}

.bsr-filters__link {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	transition: color .18s ease;
}

.bsr-filters__link:hover {
	color: var(--bsr-accent);
}

.bsr-filters__fav {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0e0e0e;
}

.bsr-filters__fav svg {
	width: 30px;
	height: 30px;
}

.bsr-searchrow {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 8px;
}

.bsr-search {
	flex: 0 0 304px;
	height: 80px;
	background: #2d2d2d;
	border-radius: var(--bsr-pill);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 28px;
	color: #fff;
}

.bsr-search svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.bsr-search input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: #fff;
	font-family: inherit;
	font-size: 17px;
}

.bsr-search input::placeholder {
	color: rgba(255, 255, 255, .6);
}

/* mobile-only controls: provider pill + round category icons */
.bsr-provpill,
.bsr-cats {
	display: none;
}

/* ---------- layout grid ---------- */

.bsr-main {
	padding: 0 0 40px;
}

.bsr-cols {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
}

.bsr-cols__main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 28px 0 0 48px;
}

.bsr-cols__side {
	flex: 0 0 304px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ---------- toolbar ---------- */

.bsr-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 24px;
	padding: 0 48px 0 5px;
	margin-bottom: 22px;
}

.bsr-toolbar__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 14px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.bsr-toolbar__btn svg {
	width: 15px;
	height: 15px;
}

.bsr-toolbar__btn svg:last-child:not(:first-child) {
	width: 11px;
	height: 11px;
	margin-left: -2px;
}

.bsr-toolbar__btn:last-child svg:last-child {
	color: var(--bsr-accent);
}

/* ---------- game grid ---------- */

.bsr-games {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

.bsr-game {
	display: block;
	width: 176px;
	margin: 6px 8px 8px;
	position: relative;
}

.bsr-game__thumb {
	display: block;
	position: relative;
	width: 176px;
	height: 112px;
	border-radius: var(--bsr-radius);
	overflow: hidden;
	background: #1a1a1a;
}

.bsr-game__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}

.bsr-game:hover .bsr-game__thumb img {
	transform: scale(1.06);
}

/* source tag: white tab flush in the top-left corner, dark label */
.bsr-game__badge {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	color: #111;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 8px;
	border-radius: 0 0 8px 0;
}

.bsr-game__title {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: #fff;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- promo strip ---------- */
/* Sampled off the source banner (x 180–947 at 1440): grey-violet #333236 at the
   top sinking to maroon #472627, a warm pool low in the middle, gold second
   line (#fcc669), thin gold hairline border, and the brand's BB monogram
   scattered faintly across it. The strip sits 8px left of the game grid. */

.bsr-promo {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 181px;
	border-radius: 8px;
	border: 1px solid rgba(232, 193, 74, .45);
	overflow: hidden;
	background:
		url('/assets/img/promo-pattern.svg') 0 0 / 230px 180px repeat,
		radial-gradient(60% 85% at 55% 115%, rgba(118, 58, 36, .8), transparent 70%),
		linear-gradient(180deg, #333236 0%, #3b2c30 55%, #472627 100%);
	margin: 24px 24px 18px -8px;
	padding: 22px 30px;
}

.bsr-promo__text {
	position: relative;
	z-index: 1;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.12;
	max-width: 420px;
	text-transform: uppercase;
}

.bsr-promo__text em {
	font-style: normal;
	color: #fcc669;
}

.bsr-promo__cta {
	position: relative;
	z-index: 1;
	height: 32px;
	margin-top: 14px;
	padding: 0 16px;
	font-size: 12px;
}

/* The art is a flat crop with its own backdrop baked in; fading its left edge
   into the strip hides the seam the source (a cut-out PNG) never shows. */
.bsr-promo__art {
	position: absolute;
	right: 36px;
	bottom: 0;
	top: 0;
	width: 232px;
	object-fit: cover;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 86%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 86%, transparent 100%);
}

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

.bsr-widget {
	background-image: var(--bsr-card);
	border-radius: var(--bsr-radius);
	padding: 24px 32px 26px;
	position: relative;
	overflow: hidden;
}

.bsr-widget__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.bsr-widget__label {
	font-size: 22px;
	font-weight: 700;
}

.bsr-widget__value {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.bsr-widget__row {
	position: relative;
	z-index: 1;
	margin-top: 13px;
}

.bsr-widget__cap {
	display: block;
	font-size: 14px;
	color: var(--bsr-muted);
}

.bsr-widget__big {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

/* source paints the deposit amount gold, the countdown stays white */
.bsr-widget__big--gold {
	color: #eeb42e;
}

.bsr-widget__cta {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 48px;
	margin-top: 16px;
	letter-spacing: .5px;
}

.bsr-widget__more {
	position: relative;
	z-index: 1;
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 14px;
	color: var(--bsr-muted);
	text-decoration: underline;
}

/* The gift PNG is cropped flat along its lower edge; anchoring it to the card
   bottom lets the card's own edge hide that cut, as on the source. */
.bsr-widget__art {
	position: absolute;
	right: -22px;
	bottom: -4px;
	width: 212px;
	pointer-events: none;
}

.bsr-widget--tour {
	background: #292929;
	padding: 0 0 32px;
}

/* stands in for the source's tournament banner (geo-blocked from this host):
   the banner's own deep-red palette with a warm glow behind the copy */
.bsr-tour__art {
	height: 256px;
	padding: 23px 32px;
	background:
		radial-gradient(120% 90% at 85% 40%, rgba(214, 96, 36, .55), transparent 60%),
		radial-gradient(80% 70% at 20% 100%, rgba(255, 170, 60, .25), transparent 70%),
		linear-gradient(160deg, #5f0f0f 0%, #6b1a12 55%, #3a0a08 100%);
}

.bsr-tour__art .bsr-widget__row {
	margin-top: 12px;
}

.bsr-tour__art .bsr-widget__title {
	margin-bottom: 15px;
}

/* the source sets the lira sign apart from the amount */
.bsr-cur {
	margin-right: 12px;
}

.bsr-tour__pager {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: -16px;
}

.bsr-tour__pager span {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #2e2e2e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.bsr-tour__pager .is-active {
	background-image: var(--bsr-accent-grad);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .15);
}

.bsr-widget--tour .bsr-widget__cta {
	width: 240px;
	margin: 14px auto 0;
}

.bsr-widget__kicker {
	font-size: 14px;
	color: var(--bsr-muted);
}

.bsr-widget__title {
	margin: 2px 0 10px;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
}

.bsr-board {
	width: calc(100% - 48px);
	margin: 14px 24px 0;
	border-collapse: collapse;
	font-size: 14px;
}

.bsr-board th {
	text-align: left;
	font-weight: 400;
	color: var(--bsr-muted);
	padding: 0 0 4px;
}

.bsr-board td {
	padding: 0;
	height: 26px;
	color: #fff;
}

.bsr-board td:first-child,
.bsr-board th:first-child {
	width: 16px;
	padding-right: 6px;
	color: var(--bsr-muted);
}

.bsr-board td:last-child,
.bsr-board th:last-child {
	text-align: right;
}

/* ---------- news card ---------- */

/* stands in for the source's news banner (geo-blocked from this host) */
.bsr-news {
	position: relative;
	height: 180px;
	border-radius: var(--bsr-radius);
	overflow: hidden;
	padding: 24px 24px;
	background:
		radial-gradient(70% 90% at 78% 70%, rgba(236, 170, 70, .38), transparent 65%),
		radial-gradient(60% 80% at 40% 110%, rgba(120, 40, 160, .35), transparent 70%),
		linear-gradient(135deg, #200000 0%, #2a0710 50%, #120008 100%);
}

.bsr-news__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.bsr-news__cta {
	position: absolute;
	right: 24px;
	bottom: 32px;
	height: 34px;
	padding: 0 16px;
	font-size: 12px;
}

/* ---------- popular matches ---------- */
/* The source renders this strip from its betting SPA in Roboto, on flat
   #2d2d2d cards; it sits 8px left of the game grid. */

.bsr-sport {
	margin: 44px 0 0 -8px;
	font-family: 'Roboto', Arial, sans-serif;
}

.bsr-sport__title {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

.bsr-sport__sub {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 500;
}

.bsr-sport__sub span {
	font-size: 20px;
}

.bsr-sport__tabs,
.bsr-sport__cards {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.bsr-sport__tabs::-webkit-scrollbar,
.bsr-sport__cards::-webkit-scrollbar {
	display: none;
}

.bsr-sport__tab {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 16px 0 12px;
	border-radius: 16px;
	background: #2c2c2c;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.bsr-sport__tab svg {
	width: 20px;
	height: 20px;
}

.bsr-sport__tab.is-active {
	background: #ffc94d;
	color: #131313;
}

.bsr-sport__cards {
	margin-top: 8px;
}

.bsr-match {
	flex: 0 0 322px;
	display: flex;
	flex-direction: column;
	padding: 12px 16px 18px;
	border-radius: var(--bsr-radius);
	background: #2d2d2d;
	color: #fff;
}

.bsr-match__league {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}

.bsr-match__league span {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bsr-match__league svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.bsr-match__league svg:last-child {
	width: 14px;
	height: 14px;
	color: #d0d0d0;
}

.bsr-match__when {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 14px;
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}

.bsr-match__when i {
	font-size: 10px;
	font-weight: 700;
	color: #ffc94d;
}

.bsr-match__team {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 28px;
	font-size: 15px;
}

.bsr-crest {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.bsr-match__market {
	margin: 6px 0 6px;
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
}

.bsr-match__odds {
	display: flex;
	gap: 4px;
}

.bsr-match__odd {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	padding: 0 8px;
	border-radius: 6px;
	background: #3b3b3b;
	font-size: 14px;
}

.bsr-match__odd span {
	color: rgba(255, 255, 255, .8);
}

.bsr-match__odd b {
	font-weight: 500;
	color: #ffc94d;
}

.bsr-match__odd--more {
	flex: 0 0 46px;
	justify-content: center;
	color: rgba(255, 255, 255, .7);
}

.bsr-match__odd--more svg {
	width: 18px;
	height: 18px;
}

/* the source main row sits 8px left of the header's content box */
@media (min-width: 1101px) {
	.bsr-main > .bsr-container {
		padding-left: 8px;
		padding-right: 24px;
	}
}

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

.bsr-article {
	margin-top: 28px;
}

.bsr-article__title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.2;
}

.bsr-body {
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	line-height: 1.75;
}

.bsr-body h2 {
	font-size: 21px;
	font-weight: 700;
	color: #fff;
	margin: 26px 0 12px;
}

.bsr-body h3 {
	font-size: 17px;
	font-weight: 600;
	color: #fff;
	margin: 20px 0 10px;
}

.bsr-body p {
	margin: 0 0 14px;
}

.bsr-body a {
	color: var(--bsr-accent);
	text-decoration: underline;
}

.bsr-body ul,
.bsr-body ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.bsr-body li {
	margin-bottom: 7px;
}

.bsr-body img {
	border-radius: var(--bsr-radius);
	margin: 16px 0;
}

.bsr-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 13px;
}

.bsr-body th,
.bsr-body td {
	border: 1px solid var(--bsr-line);
	padding: 10px 12px;
	text-align: left;
}

.bsr-body th {
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font-weight: 600;
}

.bsr-cta {
	margin: 22px 0;
	text-align: center;
}

/* ---------- footer ---------- */
/* Source footer: 1056px content box, the top four rows (pays, tickers, socials,
   apps) centred and split by full-bleed hairlines, then links, language,
   studios and the copyright row with no rules between them. */

.bsr-footer {
	background: var(--bsr-footer);
	margin-top: 40px;
	overflow: hidden;
}

.bsr-footer > .bsr-container {
	max-width: 1088px;
}

.bsr-pays,
.bsr-ticker,
.bsr-footer__socials {
	position: relative;
}

.bsr-pays::after,
.bsr-ticker::after,
.bsr-footer__socials::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100vw;
	height: 1px;
	transform: translateX(-50%);
	background: #262626;
}

.bsr-pays {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 36px;
	padding: 30px 0 31px;
}

/* the card-scheme SVGs carry generous internal padding */
.bsr-pays > img {
	height: 32px;
	width: auto;
}

.bsr-pays__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
}

.bsr-pays__item img {
	width: 18px;
	height: 18px;
	opacity: .8;
}

.bsr-ticker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 9px;
	padding: 12px 0 18px;
}

/* coin badge overlaps the pill's left end; falling coins get a red wash */
.bsr-ticker__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 110px;
	height: 40px;
	margin-left: 12px;
	padding: 0 10px 0 20px;
	border-radius: 20px;
	background: linear-gradient(90deg, #2a2a2a 0%, #333 100%);
	line-height: 1.2;
}

.bsr-ticker__item--down {
	background: linear-gradient(90deg, #2a2a2a 25%, #4c2420 100%);
}

.bsr-ticker__item img {
	position: absolute;
	left: -12px;
	top: 8px;
	width: 24px;
	height: 24px;
}

.bsr-ticker__sym {
	font-size: 12px;
	color: #fff;
}

.bsr-ticker__val {
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
}

.bsr-footer__socials {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 17px 0;
}

.bsr-footer__socials .bsr-social__item {
	width: 40px;
	height: 40px;
	background: #262626;
}

.bsr-footer__socials .bsr-social__item svg {
	width: 20px;
	height: 20px;
}

.bsr-social__item--whatsapp { color: #25d366; }
.bsr-social__item--support { color: #1ea7d4; }
.bsr-social__item--discord { color: #5865f2; }
.bsr-social__item--pinterest { color: #e60023; }

.bsr-apps {
	display: flex;
	justify-content: center;
	gap: 18px;
	padding: 17px 0;
}

.bsr-app {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	background: #000;
	border: 1px solid #a6a6a6;
	border-radius: 6px;
	padding: 0 12px 0 10px;
	min-width: 135px;
	font-family: 'Roboto', Arial, sans-serif;
}

.bsr-app svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.bsr-app__sm {
	display: block;
	font-size: 9px;
	color: #fff;
	letter-spacing: .02em;
	line-height: 1;
}

.bsr-app__lg {
	display: block;
	font-size: 17px;
	font-weight: 500;
	color: #fff;
	line-height: 1.1;
}

.bsr-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding: 10px 0 20px;
}

.bsr-footer__col {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 150px;
}

.bsr-footer__col li {
	margin-bottom: 6px;
}

.bsr-footer__col a {
	font-size: 13px;
	color: var(--bsr-muted);
	transition: color .18s ease;
}

.bsr-footer__col a:hover {
	color: #fff;
}

.bsr-lang {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 158px;
	font-size: 14px;
	color: #fff;
	margin-bottom: 24px;
}

.bsr-lang svg:last-child {
	width: 12px;
	height: 12px;
	margin-left: auto;
}

.bsr-provs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 0;
	justify-content: center;
	padding: 18px 0 30px;
}

.bsr-provs__item {
	width: 94px;
	height: 32px;
	padding: 4px 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bsr-provs__item img {
	max-width: 84px;
	max-height: 26px;
	width: auto;
	height: auto;
}

.bsr-provs__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	margin-left: 10px;
	padding: 0 14px;
	border-radius: 16px;
	background: #262626;
	font-size: 13px;
}

.bsr-provs__more svg {
	width: 12px;
	height: 12px;
}

.bsr-copy {
	padding: 18px 0 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--bsr-muted);
}

.bsr-copy__mail {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
}

.bsr-copy__mail svg {
	width: 14px;
	height: 14px;
}

.bsr-copy__center {
	text-align: left;
	flex: 0 0 auto;
}

.bsr-copy__marks {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bsr-copy__marks img {
	height: 26px;
	width: auto;
	max-width: 104px;
	object-fit: contain;
}

/* ---------- mobile ---------- */

.bsr-tabbar {
	display: none;
}

@media (max-width: 1100px) {
	/* stretch, not flex-start: stacked columns must take the row's width, or the
	   main column sizes to its widest row (the match strip) and blows out the
	   mobile viewport */
	.bsr-cols {
		flex-direction: column;
		align-items: stretch;
	}

	.bsr-cols__main {
		padding-left: 0;
	}

	.bsr-cols__side {
		flex: 1 1 auto;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.bsr-cols__side > * {
		flex: 1 1 280px;
	}
}

@media (max-width: 860px) {
	.bsr-header__actions .bsr-header__or,
	.bsr-header__actions .bsr-social,
	.bsr-header__actions .bsr-btn--accent {
		display: none;
	}

	.bsr-burger {
		display: flex;
	}

	/* source mobile: transparent 50px header floating over the hero art */
	.bsr-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: transparent;
	}

	.bsr-header__bar {
		height: 50px;
	}

	.bsr-burger {
		width: 30px;
		margin-right: -4px;
	}

	.bsr-burger svg {
		width: 22px;
		height: 22px;
	}

	.bsr-header__actions > .bsr-btn--light {
		height: 30px;
		min-width: 60px;
		padding: 0 14px;
		font-size: 12px;
		letter-spacing: 0;
	}

	/* the menu drops over the hero instead of pushing it down */
	.bsr-nav {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		z-index: 25;
		margin-bottom: 0;
		background: var(--bsr-surface);
	}

	.bsr-nav__inner {
		display: none;
		height: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 8px 16px 14px;
	}

	.bsr-nav.is-open .bsr-nav__inner {
		display: flex;
	}

	.bsr-nav__link {
		width: 100%;
		padding: 12px 4px;
		border-bottom: 1px solid var(--bsr-line);
	}

	.bsr-nav__lang {
		margin: 12px 0 0;
	}

	.bsr-hero__track {
		height: 290px;
	}

	/* the mobile art is a square cut-out: full height, pinned right, copy on the
	   dark left */
	.bsr-hero__track {
		background: #0b0b0b;
	}

	.bsr-hero__slide img {
		position: absolute;
		right: 0;
		bottom: 0;
		width: auto;
		height: 218px;
		object-fit: contain;
		/* the square art carries its own dark backdrop; fade its edges out */
		-webkit-mask-image: radial-gradient(ellipse 62% 62% at 55% 58%, #000 62%, transparent 100%);
		mask-image: radial-gradient(ellipse 62% 62% at 55% 58%, #000 62%, transparent 100%);
	}

	/* source mobile content column runs on a 24px gutter (header keeps 16) */
	.bsr-main > .bsr-container {
		padding: 0 24px;
	}

	.bsr-hero__copy {
		top: 100px;
		left: 24px;
		right: 24px;
		max-width: none;
		transform: none;
	}

	.bsr-hero__title {
		margin-bottom: 14px;
		font-size: 22px;
		line-height: 27px;
	}

	.bsr-hero__title em {
		color: #ffc02e;
	}

	.bsr-hero__cta {
		width: auto;
		height: 40px;
		padding: 0 20px;
		font-size: 13px;
		background: transparent;
		color: #fff;
		border: 2px solid #fff;
	}

	/* source mobile puts the popular-matches strip ahead of the games */
	.bsr-cols__main {
		display: flex;
		flex-direction: column;
		padding-top: 27px;
	}

	.bsr-sport {
		order: -1;
		margin: 0 0 24px;
	}



	.bsr-match {
		flex-basis: 291px;
	}

	/* mobile odds cells stack the pick over the price */
	.bsr-match__odd {
		flex-direction: column;
		justify-content: center;
		gap: 2px;
	}

	/* source mobile: slider progress as a short bar under the copy */
	.bsr-hero__dots {
		left: 24px;
		right: auto;
		bottom: 36px;
		gap: 6px;
	}

	.bsr-hero__dot {
		width: 14px;
		height: 3px;
		border: 0;
		border-radius: 2px;
		background: rgba(255, 255, 255, .25);
	}

	.bsr-hero__dot.is-active {
		width: 44px;
		background: var(--bsr-accent);
	}

	/* provider pill + round search button replace the text bar */
	.bsr-searchrow {
		margin-top: -28px;
		position: relative;
		z-index: 2;
	}

	.bsr-filters {
		display: none;
	}

	.bsr-provpill {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		gap: 8px;
		height: 48px;
		padding: 0 18px;
		border: 1px solid rgba(255, 255, 255, .12);
		border-radius: 24px;
		background: #2a2a2a;
		color: #fff;
		font-family: inherit;
		font-size: 15px;
		cursor: pointer;
	}

	.bsr-provpill svg {
		width: 18px;
		height: 18px;
	}

	.bsr-provpill svg:last-child {
		width: 14px;
		height: 14px;
		margin-left: auto;
	}

	.bsr-search {
		flex: 0 0 48px;
		height: 48px;
		padding: 0;
		justify-content: center;
		border: 1px solid rgba(255, 255, 255, .12);
		background: #2a2a2a;
	}

	.bsr-search input {
		display: none;
	}

	.bsr-cats {
		display: flex;
		gap: 6px;
		margin: 20px -24px 0 0;
		padding-right: 24px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bsr-cats::-webkit-scrollbar {
		display: none;
	}

	.bsr-cats__item {
		flex: 0 0 56px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		white-space: nowrap;
		color: rgba(255, 255, 255, .85);
	}

	.bsr-cats__ico {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #3a3a3a;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bsr-cats__item.is-active .bsr-cats__ico {
		box-shadow: inset 0 0 0 2px #fff;
		background: #2a2a2a;
	}

	.bsr-cats__ico svg {
		width: 26px;
		height: 26px;
	}

	.bsr-toolbar {
		display: none;
	}

	.bsr-games {
		margin: 0 -5px;
	}

	.bsr-game {
		width: calc(50% - 10px);
		margin: 5px;
	}

	.bsr-game__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 176 / 112;
	}

	.bsr-promo {
		margin: 14px 5px 18px;
	}

	.bsr-promo__text {
		font-size: 15px;
	}

	.bsr-footer {
		padding-bottom: 76px;
	}

	.bsr-footer__nav {
		gap: 22px;
	}

	.bsr-copy {
		justify-content: center;
		text-align: center;
	}

	.bsr-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #2a2a2a;
		padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
	}

	.bsr-tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		font-size: 10px;
		color: var(--bsr-muted);
		flex: 1 1 0;
	}

	.bsr-tabbar__item svg {
		width: 21px;
		height: 21px;
	}

	.bsr-tabbar__fab {
		flex: 0 0 auto;
		width: 56px;
		height: 56px;
		margin-top: -26px;
		border-radius: 50%;
		background-image: var(--bsr-accent-grad);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		gap: 0;
		box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
	}

	.bsr-tabbar__fab svg {
		width: 22px;
		height: 22px;
	}

	.bsr-tabbar__fab span {
		display: none;
	}
}

@media (max-width: 480px) {
	.bsr-article__title {
		font-size: 21px;
	}

	.bsr-body h2 {
		font-size: 18px;
	}
}

.bsr-filters__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.bsr-filters__more svg {
	width: 13px;
	height: 13px;
}