/* ---------------------------------------------------------------- 1. tokens */

:root {
	--bk-bg:      #05070b; /* the source's own ground */
	--bk-bg-2:    #080b10;
	--bk-panel:   #0e1219;
	--bk-panel-2: #141a22;
	--bk-panel-3: #1a212b;
	--bk-line:    #1d2630;
	--bk-line-2:  #2a3542;

	--bk-text:   #e9eef3;
	--bk-mute:   #94a2b0;
	--bk-mute-2: #6b7a88;

	/* The source's green, kept verbatim, plus one brighter step for states —
	   #0B5E3B alone is too dark to read as a hover or an active price. */
	--bk-green:   #0b5e3b;
	--bk-green-d: #09452c;
	--bk-green-l: #12885a;
	--bk-green-s: rgba(18, 136, 90, .16);
	--bk-green-g: linear-gradient(100deg, #09452c 0%, #0b5e3b 52%, #0f7549 100%);

	--bk-gold:   #ffd000; /* the source's accent */
	--bk-gold-d: #d9a800;
	--bk-gold-l: #ffe680;
	--bk-gold-s: rgba(255, 208, 0, .12);

	--bk-live: #ff4d4f;
	--bk-win:  #3ddc97;

	--bk-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--bk-wrap:  1320px;
	--bk-rail:  248px;
	--bk-aside: 328px;
	--bk-gut:   36px;

	/* Measured header height — main.js keeps this in sync so the sticky rail
	   and the anchor scroll-margin follow the bar as the ticker collapses. */
	--bk-head: 148px;

	--bk-r-sm: 8px;
	--bk-r:    14px;
	--bk-r-lg: 20px;

	--bk-sh:   0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bk-bg);
	color: var(--bk-text);
	font-family: var(--bk-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

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

img { max-width: 100%; }

:focus-visible {
	outline: 2px solid var(--bk-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

.bk-wrap {
	width: 100%;
	max-width: calc(var(--bk-wrap) + 40px);
	margin-inline: auto;
	padding-inline: 20px;
}

.bk-sec { margin-block: 34px; }

.bk-skip {
	position: fixed;
	inset-inline-start: -999px;
	top: 0;
	z-index: 200;
	padding: 10px 16px;
	background: var(--bk-gold);
	color: #101010;
	font-weight: 700;
}

.bk-skip:focus { inset-inline-start: 0; }

.bk-ico { flex: none; }

/* The live dot every "in play" label carries. */
.bk-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bk-live);
	box-shadow: 0 0 0 0 rgba(255, 77, 79, .55);
	animation: bk-pulse 1.8s infinite;
}

@keyframes bk-pulse {
	70%  { box-shadow: 0 0 0 7px rgba(255, 77, 79, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bk-dot { animation: none; }
	* { transition-duration: .01ms !important; }
}

/* ------------------------------------------- 2. buttons, mark, section label */

.bk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: 600 14px/1 var(--bk-font);
	white-space: nowrap;
	cursor: pointer;
	transition: transform .16s, box-shadow .16s, background .16s, color .16s, border-color .16s;
}

.bk-btn--gold {
	background: linear-gradient(180deg, #ffdc3d, var(--bk-gold) 45%, var(--bk-gold-d));
	color: #12130c;
	font-weight: 800;
	box-shadow: 0 6px 18px rgba(255, 208, 0, .18);
}

.bk-btn--green {
	background: var(--bk-green-g);
	color: #fff;
	font-weight: 700;
	border-color: rgba(255, 255, 255, .12);
}

.bk-btn--ghost {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .22);
	color: #fff;
}

.bk-btn:hover { transform: translateY(-1px); }
.bk-btn--gold:hover  { box-shadow: 0 10px 26px rgba(255, 208, 0, .3); }
.bk-btn--green:hover { box-shadow: 0 10px 26px rgba(18, 136, 90, .3); }
.bk-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .38); }

.bk-btn--sm  { padding: 8px 15px; font-size: 13px; }
.bk-btn--lg  { padding: 13px 26px; font-size: 15.5px; }
.bk-btn--block { display: flex; width: 100%; }

.bk-mark { display: inline-flex; align-items: center; flex: none; }

.bk-mark__img {
	display: block;
	height: var(--bk-mark-h, 34px);
	width: auto;
	filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .45));
}

.bk-slabel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bk-line);
}

.bk-slabel__t {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.015em;
}

.bk-slabel__t .bk-ico { color: var(--bk-gold); align-self: center; }
.bk-slabel__n { font-size: 12.5px; color: var(--bk-mute-2); text-align: end; }

.bk-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 9px 16px;
	border: 1px solid var(--bk-line-2);
	border-radius: 999px;
	background: var(--bk-panel);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bk-mute);
	transition: color .16s, border-color .16s, background .16s;
}

.bk-more:hover { color: var(--bk-text); border-color: var(--bk-green-l); background: var(--bk-panel-2); }

/* --------------------------------------------- 3. header: ticker, bar, tabs */

.bk-top {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--bk-bg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

/*
 * The scoreboard strip. The source spends this row on four product links that
 * all open the same page; here it carries live scores instead, and it folds
 * away once the page scrolls so the bar and the sport tabs keep the top.
 */
.bk-ticker {
	max-height: 40px;
	background: var(--bk-bg-2);
	border-bottom: 1px solid var(--bk-line);
	overflow: hidden;
	transition: max-height .22s ease, opacity .22s ease;
}

.bk-top.is-stuck .bk-ticker { max-height: 0; opacity: 0; border-bottom-color: transparent; }

.bk-ticker__in {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 39px;
}

.bk-ticker__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bk-live);
}

.bk-ticker__rail {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.bk-ticker__rail::-webkit-scrollbar { display: none; }

.bk-score {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 12.5px;
	white-space: nowrap;
	color: var(--bk-mute);
}

.bk-score__l {
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .05);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-score__t { color: var(--bk-text); }
.bk-score__v { font-weight: 800; color: var(--bk-gold); }
.bk-score__m { font-size: 11px; color: var(--bk-mute-2); }

.bk-ticker__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--bk-mute);
	transition: color .16s;
}

.bk-ticker__all:hover { color: var(--bk-gold); }

/* The green bar. The source's flat #0B5E3B becomes a lit gradient with a
   hairline, so the bar reads as a surface rather than a painted block. */
.bk-bar {
	background: var(--bk-green-g);
	border-bottom: 1px solid rgba(0, 0, 0, .35);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset;
}

.bk-bar__in {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 66px;
}

.bk-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	background: rgba(0, 0, 0, .18);
	color: #fff;
	cursor: pointer;
}

.bk-bar__nav { display: flex; align-items: center; gap: 4px; min-width: 0; }

.bk-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, .88);
	white-space: nowrap;
	transition: background .16s, color .16s;
}

.bk-bar__link .bk-ico { color: var(--bk-gold-l); transition: color .16s; }
.bk-bar__link:hover { background: rgba(0, 0, 0, .22); color: #fff; }
.bk-bar__link:hover .bk-ico { color: var(--bk-gold); }

/* The offer pill: the figure first, the CTA after it. */
.bk-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-inline-start: auto;
	padding: 7px 16px 7px 12px;
	border: 1px solid rgba(255, 208, 0, .38);
	border-radius: 999px;
	background: rgba(0, 0, 0, .26);
	transition: border-color .16s, background .16s;
}

.bk-pill:hover { border-color: var(--bk-gold); background: rgba(0, 0, 0, .4); }
.bk-pill .bk-ico { color: var(--bk-gold); }
.bk-pill span { display: grid; gap: 1px; line-height: 1.25; }
.bk-pill b { font-size: 13.5px; font-weight: 800; color: var(--bk-gold-l); }
.bk-pill i { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .66); }

.bk-bar__auth { display: flex; align-items: center; gap: 9px; flex: none; }

/* Sport tab row. */
.bk-tabs { background: var(--bk-panel); border-bottom: 1px solid var(--bk-line); }

.bk-tabs__in {
	display: flex;
	align-items: stretch;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.bk-tabs__in::-webkit-scrollbar { display: none; }

.bk-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 13px 14px;
	border-bottom: 2px solid transparent;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bk-mute);
	white-space: nowrap;
	transition: color .16s, border-color .16s, background .16s;
}

.bk-tab .bk-ico { color: var(--bk-mute-2); transition: color .16s; }
.bk-tab:hover { color: var(--bk-text); background: rgba(255, 255, 255, .03); }
.bk-tab:hover .bk-ico { color: var(--bk-green-l); }
.bk-tab.is-on { color: var(--bk-gold); border-bottom-color: var(--bk-gold); }
.bk-tab.is-on .bk-ico { color: var(--bk-gold); }

/* ------------------------------------------------------------- 4. drawer */

.bk-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(3, 5, 8, .68);
	backdrop-filter: blur(2px);
}

.bk-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min(330px, 88vw);
	padding: 16px 16px 22px;
	background: var(--bk-panel);
	border-inline-end: 1px solid var(--bk-line);
	transform: translateX(-102%);
	transition: transform .24s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bk-drawer.is-open { transform: none; }

.bk-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--bk-line);
}

.bk-drawer__x {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--bk-line-2);
	border-radius: 10px;
	background: var(--bk-panel-2);
	color: var(--bk-mute);
	cursor: pointer;
}

.bk-dpad {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 9px;
	flex: none;
}

.bk-dtile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 12px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
	background: linear-gradient(180deg, var(--bk-panel-2), var(--bk-panel));
	font-size: 13.5px;
	font-weight: 700;
	transition: border-color .16s, transform .16s;
}

.bk-dtile .bk-ico { color: var(--bk-green-l); }
.bk-dtile:hover { border-color: var(--bk-green-l); transform: translateY(-1px); }

.bk-dgrp { margin-top: 18px; flex: none; }

.bk-dgrp__t {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-doffer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border: 1px solid var(--bk-line);
	border-radius: 10px;
	background: var(--bk-panel-2);
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	transition: border-color .16s, background .16s;
}

.bk-doffer .bk-ico { color: var(--bk-gold); }
.bk-doffer:hover { border-color: var(--bk-gold-d); background: var(--bk-panel-3); }
.bk-doffer__l { flex: 1 1 auto; }
.bk-doffer__n { font-size: 11.5px; color: var(--bk-mute-2); }

.bk-dlist { margin-top: 16px; display: grid; gap: 2px; flex: none; }

.bk-dlist a {
	padding: 9px 4px;
	font-size: 13.5px;
	color: var(--bk-mute);
	border-bottom: 1px solid var(--bk-line);
	transition: color .16s;
}

.bk-dlist a:hover { color: var(--bk-text); }

.bk-dfoot { margin-top: auto; padding-top: 20px; flex: none; }

/* --------------------------------- 5. shell, sports rail, promo, the coupon */

.bk-shell {
	display: grid;
	grid-template-columns: var(--bk-rail) minmax(0, 1fr);
	gap: 24px;
	margin-top: 22px;
}

/*
 * The sports rail. It is sticky, and on a short screen it SCROLLS: its rows
 * keep flex-shrink 0, because a column whose children shrink never generates
 * overflow and silently compresses instead (the network has shipped that bug
 * once already).
 */
.bk-rail {
	position: sticky;
	top: calc(var(--bk-head) + 14px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: calc(100vh - var(--bk-head) - 28px);
	padding: 14px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
	background: var(--bk-panel);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--bk-line-2) transparent;
}

.bk-rail::-webkit-scrollbar { width: 8px; }
.bk-rail::-webkit-scrollbar-thumb { background: var(--bk-line-2); border-radius: 999px; }

.bk-rail__grp { display: flex; flex-direction: column; gap: 2px; flex: none; }

.bk-rail__t {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-rail__t .bk-ico { color: var(--bk-gold-d); }

.bk-rail__i {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	padding: 8px 10px;
	border-radius: 9px;
	font-size: 13.5px;
	color: var(--bk-text);
	transition: background .16s, color .16s;
}

.bk-rail__i .bk-ico { color: var(--bk-mute-2); transition: color .16s; }
.bk-rail__i:hover { background: var(--bk-panel-2); }
.bk-rail__i:hover .bk-ico { color: var(--bk-green-l); }
.bk-rail__l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bk-rail__c {
	flex: none;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	font-size: 11px;
	font-weight: 700;
	color: var(--bk-mute-2);
}

.bk-rail__promo {
	display: grid;
	gap: 4px;
	flex: none;
	padding: 14px;
	border: 1px solid rgba(255, 208, 0, .22);
	border-radius: var(--bk-r);
	background: radial-gradient(120% 120% at 100% 0, rgba(255, 208, 0, .14), transparent 60%), var(--bk-panel-2);
	transition: border-color .16s, transform .16s;
}

.bk-rail__promo:hover { border-color: var(--bk-gold); transform: translateY(-1px); }
.bk-rail__promoi { color: var(--bk-gold); }
.bk-rail__promot { font-size: 13.5px; font-weight: 800; }
.bk-rail__promon { font-size: 12px; color: var(--bk-mute); line-height: 1.45; }

.bk-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.bk-col > .bk-sec:first-child { margin-top: 0; }
.bk-col > .bk-sec { margin: 0; }

/* The promo grid — the source's 2 + 1 shape. */
.bk-promo {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 16px;
}

.bk-promo__big {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 26px 28px 28px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--bk-r-lg);
	background:
		radial-gradient(110% 130% at 8% 0, rgba(18, 136, 90, .55), transparent 55%),
		radial-gradient(90% 120% at 100% 100%, rgba(255, 208, 0, .16), transparent 60%),
		linear-gradient(140deg, #0a3d28, #061018 72%);
	overflow: hidden;
	box-shadow: var(--bk-sh);
	transition: transform .18s, border-color .18s;
}

.bk-promo__big:hover { transform: translateY(-2px); border-color: rgba(255, 208, 0, .3); }

.bk-promo__k {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border: 1px solid rgba(255, 208, 0, .3);
	border-radius: 999px;
	background: rgba(255, 208, 0, .08);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bk-gold-l);
}

.bk-promo__h {
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
	background: linear-gradient(180deg, #fff 30%, var(--bk-gold-l));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bk-promo__s {
	max-width: 46ch;
	font-size: 14px;
	color: rgba(233, 238, 243, .78);
}

.bk-promo__big .bk-btn { margin-top: auto; }

.bk-promo__suit {
	position: absolute;
	inset-block-start: -26px;
	inset-inline-end: -30px;
	color: rgba(255, 255, 255, .05);
	pointer-events: none;
	transform: rotate(14deg);
}

.bk-promo__side { display: grid; gap: 16px; }

.bk-promo__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r-lg);
	background: linear-gradient(160deg, var(--bk-panel-2), var(--bk-panel));
	transition: transform .18s, border-color .18s;
}

.bk-promo__card:hover { transform: translateY(-2px); border-color: var(--bk-green-l); }

.bk-promo__ck {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-promo__ct { font-size: 15px; font-weight: 700; line-height: 1.3; }
.bk-promo__cn { font-size: 12.5px; color: var(--bk-mute); line-height: 1.5; }

.bk-promo__crow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
}

.bk-promo__cf {
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--bk-green-s);
	border: 1px solid rgba(18, 136, 90, .4);
	font-size: 13px;
	font-weight: 800;
	color: var(--bk-win);
}

.bk-promo__cgo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bk-gold);
}

/*
 * The coupon. This is the block the whole page exists for, so it gets the
 * most design: a named market, a priced 1/X/2 triple per row, and rows that
 * stay readable when they stack on a phone.
 */
.bk-coupon {
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
	background: var(--bk-panel);
	overflow: hidden;
	box-shadow: var(--bk-sh);
}

.bk-coupon__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 18px;
	background: var(--bk-bg-2);
	border-bottom: 1px solid var(--bk-line);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-coupon__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 276px; text-align: center; }

.bk-match {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr) 276px;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--bk-line);
	transition: background .16s;
}

.bk-match:last-child { border-bottom: 0; }
.bk-match:hover { background: rgba(255, 255, 255, .022); }

.bk-match__meta { display: grid; gap: 4px; min-width: 0; }

.bk-match__league {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-match__time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--bk-mute);
}

.bk-match__time .bk-ico { color: var(--bk-mute-2); }

.bk-match__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bk-live);
}

.bk-match__teams { display: grid; gap: 3px; min-width: 0; }

.bk-match__team {
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bk-match__odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.bk-odd {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 6px;
	border: 1px solid var(--bk-line-2);
	border-radius: 10px;
	background: linear-gradient(180deg, var(--bk-panel-3), var(--bk-panel-2));
	transition: border-color .16s, background .16s, transform .16s;
}

.bk-odd__k { font-size: 11.5px; font-weight: 700; color: var(--bk-mute-2); }
.bk-odd__v { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

.bk-odd:hover {
	border-color: var(--bk-green-l);
	background: linear-gradient(180deg, #0f5c3d, #0b4630);
	transform: translateY(-1px);
}

.bk-odd:hover .bk-odd__k { color: rgba(255, 255, 255, .75); }
.bk-odd:hover .bk-odd__v { color: var(--bk-gold); }

/* The four-row spec table of the source, read as cards. */
.bk-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.bk-fact {
	display: grid;
	gap: 6px;
	padding: 18px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
	background: linear-gradient(170deg, var(--bk-panel-2), var(--bk-panel));
}

.bk-fact__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--bk-green-s);
	color: var(--bk-win);
}

.bk-fact__k { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bk-mute-2); }
.bk-fact__v { font-size: 14px; line-height: 1.5; color: var(--bk-text); }

/* ------------------------------------------------- 6. casino rails & tiles */

.bk-railbox { position: relative; }

.bk-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 210px;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.bk-row::-webkit-scrollbar { display: none; }

.bk-rarrow {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--bk-line-2);
	border-radius: 50%;
	background: rgba(8, 11, 16, .9);
	color: var(--bk-text);
	cursor: pointer;
	transition: background .16s, border-color .16s;
}

.bk-rarrow[hidden] { display: none; } /* the class selector beats the UA [hidden] rule */
.bk-rarrow:hover { background: var(--bk-green); border-color: var(--bk-green-l); }
.bk-rarrow--prev { inset-inline-start: -14px; }
.bk-rarrow--next { inset-inline-end: -14px; }

.bk-tile {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.bk-tile__art {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--bk-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--bk-panel-2);
}

.bk-tile__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}

.bk-tile:hover .bk-tile__art img { transform: scale(1.06); }
.bk-tile:hover .bk-tile__art { border-color: var(--bk-green-l); }

.bk-tile__badge {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--bk-gold);
	color: #14140a;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
}

.bk-tile__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(5, 7, 11, .62);
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	opacity: 0;
	transition: opacity .2s;
}

.bk-tile:hover .bk-tile__play { opacity: 1; }

.bk-tile__pb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--bk-gold);
	color: #12130c;
}

.bk-tile__prov {
	font-size: 11.5px;
	color: var(--bk-mute-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------- 7. copy, floating aside, content typography */

.bk-copy { display: flex; flex-direction: column; }
.bk-phead { order: 1; }
.bk-toc   { order: 2; }
.bk-content { order: 3; }
.bk-aside { order: 4; }

.bk-phead h1 {
	margin: 0 0 10px;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.15;
}

.bk-lead {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bk-mute);
}

.bk-toc {
	margin: 0 0 22px;
	padding: 16px 20px;
	border: 1px solid var(--bk-line);
	border-inline-start: 3px solid var(--bk-gold);
	border-radius: var(--bk-r);
	background: var(--bk-panel);
	display: flow-root;
}

.bk-toc__t {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-toc__t .bk-ico { color: var(--bk-gold); }
.bk-toc ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 5px; }
.bk-toc a { font-size: 14px; color: var(--bk-mute); transition: color .16s; }
.bk-toc a:hover { color: var(--bk-gold); }

/* The card column. */
.bk-aside { display: grid; gap: 16px; margin-top: 26px; }

.bk-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
	background: linear-gradient(170deg, var(--bk-panel-2), var(--bk-panel));
}

.bk-card--bonus {
	border-color: rgba(255, 208, 0, .28);
	background:
		radial-gradient(120% 100% at 100% 0, rgba(255, 208, 0, .14), transparent 58%),
		linear-gradient(170deg, #10281e, var(--bk-panel));
	scroll-margin-top: calc(var(--bk-head) + 16px);
}

.bk-card__kick {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bk-gold-l);
}

.bk-card__kick .bk-ico { color: var(--bk-gold); }

.bk-card__sum {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	color: #fff;
}

.bk-card__sum span { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--bk-gold-l); }

.bk-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 800;
}

.bk-card__head .bk-ico { color: var(--bk-gold); }

.bk-247 {
	margin-inline-start: auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--bk-green-s);
	font-size: 11px;
	font-weight: 700;
	color: var(--bk-win);
}

.bk-card__note { font-size: 13px; line-height: 1.55; color: var(--bk-mute); }

.bk-acca { display: grid; gap: 6px; }

.bk-acca__i {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border: 1px solid var(--bk-line);
	border-radius: 9px;
	background: var(--bk-bg-2);
	transition: border-color .16s;
}

.bk-acca__i:hover { border-color: var(--bk-green-l); }
.bk-acca__t { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.bk-acca__pair { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-acca__pick { font-size: 11.5px; color: var(--bk-mute-2); }
.bk-acca__v { flex: none; font-size: 14px; font-weight: 800; color: var(--bk-gold); }

.bk-acca__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 8px;
	border-top: 1px dashed var(--bk-line-2);
	font-size: 12.5px;
	color: var(--bk-mute);
}

.bk-acca__sum b { font-size: 18px; font-weight: 800; color: var(--bk-win); }

/* Content typography. */
.bk-content { font-size: 16px; line-height: 1.75; color: #d8e0e8; }
.bk-content > :first-child { margin-top: 0; }

.bk-content h2 {
	margin: 34px 0 14px;
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--bk-gold);
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: #fff;
	scroll-margin-top: calc(var(--bk-head) + 16px);
}

.bk-content h3 {
	margin: 26px 0 10px;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
}

.bk-content h4 { margin: 20px 0 8px; font-size: 16.5px; font-weight: 700; color: #fff; }
.bk-content p { margin: 0 0 15px; }

.bk-content a {
	color: var(--bk-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.bk-content a:hover { color: var(--bk-gold-l); }
.bk-content strong { color: #fff; font-weight: 700; }

.bk-content ul, .bk-content ol { margin: 0 0 16px; padding-inline-start: 0; }
.bk-content ol { padding-inline-start: 22px; }
.bk-content li { margin-bottom: 7px; }
.bk-content ul { list-style: none; }

.bk-content ul > li {
	position: relative;
	padding-inline-start: 24px;
}

.bk-content ul > li::before {
	content: '';
	position: absolute;
	inset-inline-start: 4px;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--bk-gold);
	transform: rotate(45deg);
}

/* Content images: 812px, centred in the measure, shrinking with the column. */
.bk-content img {
	display: block;
	width: min(812px, 100%);
	height: auto;
	margin: 20px auto;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
}

.bk-content figure { margin: 22px 0; display: flow-root; }
.bk-content figcaption { margin-top: 8px; font-size: 13px; color: var(--bk-mute-2); text-align: center; }

.bk-content blockquote {
	margin: 22px 0;
	padding: 16px 20px;
	border: 1px solid var(--bk-line);
	border-inline-start: 3px solid var(--bk-green-l);
	border-radius: var(--bk-r);
	background: var(--bk-panel);
	color: var(--bk-mute);
	display: flow-root;
}

.bk-content blockquote p:last-child { margin-bottom: 0; }

.bk-tscroll {
	display: flow-root;
	margin: 22px 0;
	overflow-x: auto;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
}

.bk-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bk-content th, .bk-content td { padding: 12px 16px; border-bottom: 1px solid var(--bk-line); text-align: start; }

.bk-content th {
	background: var(--bk-bg-2);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bk-mute);
	white-space: nowrap;
}

.bk-content tr:last-child td { border-bottom: 0; }
.bk-content tbody tr:hover td { background: rgba(255, 255, 255, .02); }


/*
 * Reading measure. A cap belongs ONLY on the page types with no card column
 * (page, landing): where an aside exists the copy must reclaim the full width
 * below it, and a cap would freeze the line length into the same dead gutter
 * a grid track produces.
 */
.bk-copy:not(.bk-copy--aside) .bk-phead,
.bk-copy:not(.bk-copy--aside) .bk-toc,
.bk-copy:not(.bk-copy--aside) .bk-content { max-width: 78ch; }

/* ---------------------------------------------- 8. footer, tab bar, to-top */

.bk-foot {
	margin-top: 48px;
	padding-block: 34px 26px;
	background: var(--bk-bg-2);
	border-top: 1px solid var(--bk-line);
}

.bk-foot__cols {
	display: grid;
	grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.bk-foot__brand { display: grid; gap: 12px; align-content: start; }
.bk-foot__about { margin: 0; font-size: 13px; line-height: 1.6; color: var(--bk-mute); }
.bk-foot__soc { display: flex; gap: 8px; }

.bk-foot__soci {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--bk-line);
	border-radius: 10px;
	background: var(--bk-panel);
	color: var(--bk-mute);
	transition: color .16s, border-color .16s;
}

.bk-foot__soci:hover { color: var(--bk-gold); border-color: var(--bk-gold-d); }

.bk-foot__col { display: grid; gap: 8px; align-content: start; }

.bk-foot__t {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bk-mute-2);
}

.bk-foot__col a { font-size: 13.5px; color: var(--bk-mute); transition: color .16s; }
.bk-foot__col a:hover { color: var(--bk-text); }

.bk-foot__bands {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	padding-block: 18px;
	border-block: 1px solid var(--bk-line);
}

.bk-bands { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.bk-band__i {
	padding: 6px 12px;
	border: 1px solid var(--bk-line);
	border-radius: 8px;
	background: var(--bk-panel);
	font-size: 12px;
	font-weight: 600;
	color: var(--bk-mute);
}

.bk-band__i--mute { border-style: dashed; color: var(--bk-mute-2); background: transparent; }

.bk-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 2px solid var(--bk-live);
	border-radius: 50%;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--bk-live);
}

.bk-foot__legal { margin-top: 18px; display: grid; gap: 10px; }
.bk-foot__legal p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--bk-mute-2); }

.bk-foot__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--bk-line);
	font-size: 12.5px;
	color: var(--bk-mute-2);
}

.bk-foot__bottom a { transition: color .16s; }
.bk-foot__bottom a:hover { color: var(--bk-gold); }

.bk-tabbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	background: rgba(8, 11, 16, .97);
	border-top: 1px solid var(--bk-line);
	backdrop-filter: blur(8px);
	padding-bottom: env(safe-area-inset-bottom);
}

.bk-tabbar__i {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 9px 4px 8px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--bk-mute);
}

.bk-tabbar__i .bk-ico { color: var(--bk-mute-2); }
.bk-tabbar__i:active { color: var(--bk-gold); }

.bk-totop {
	position: fixed;
	inset-inline-end: 20px;
	bottom: 24px;
	z-index: 65;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--bk-line-2);
	border-radius: 50%;
	background: rgba(8, 11, 16, .92);
	color: var(--bk-text);
	cursor: pointer;
	transition: background .16s, border-color .16s;
}

.bk-totop[hidden] { display: none; } /* same as the rail arrows: the class beats UA [hidden] */
.bk-totop:hover { background: var(--bk-green); border-color: var(--bk-green-l); }

/* ------------------------------------------ 9. toplist, review, landing */

.bk-tl { display: grid; gap: 10px; }

.bk-tl__i {
	display: grid;
	grid-template-columns: 46px minmax(0, 1.5fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
	background: linear-gradient(170deg, var(--bk-panel-2), var(--bk-panel));
	transition: border-color .16s, transform .16s;
}

.bk-tl__i:hover { border-color: var(--bk-green-l); transform: translateY(-1px); }

.bk-tl__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--bk-green-s);
	border: 1px solid rgba(18, 136, 90, .35);
	font-size: 17px;
	font-weight: 800;
	color: var(--bk-win);
}

.bk-tl__main { display: grid; gap: 7px; min-width: 0; }
.bk-tl__name { font-size: 16px; font-weight: 700; }
.bk-tl__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.bk-tl__tag {
	padding: 3px 9px;
	border: 1px solid var(--bk-line-2);
	border-radius: 999px;
	font-size: 11.5px;
	color: var(--bk-mute-2);
}

.bk-tl__bonus { display: grid; gap: 2px; min-width: 0; }
.bk-tl__sum { font-size: 19px; font-weight: 800; color: var(--bk-gold); letter-spacing: -.02em; }
.bk-tl__cond { font-size: 12.5px; color: var(--bk-mute); }
.bk-tl__go { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }

.bk-rate { display: inline-flex; align-items: center; gap: 7px; }
.bk-rate__stars { display: inline-flex; gap: 2px; }
.bk-rate__s { color: var(--bk-line-2); display: inline-flex; }
.bk-rate__s.is-on { color: var(--bk-gold); }
.bk-rate__n { font-size: 13px; font-weight: 800; }

.bk-review {
	padding: 22px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r-lg);
	background:
		radial-gradient(100% 130% at 0 0, rgba(18, 136, 90, .18), transparent 55%),
		linear-gradient(170deg, var(--bk-panel-2), var(--bk-panel));
	box-shadow: var(--bk-sh);
}

.bk-review__head {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bk-line);
}

.bk-review__txt { display: grid; gap: 5px; flex: 1 1 260px; min-width: 0; }
.bk-review__note { font-size: 13px; color: var(--bk-mute); }
.bk-review__cta { flex: none; }

.bk-review__facts {
	display: grid;
	/* 320px tracks so six facts fall into two rows of three rather than a row
	   of four and a half-empty second row. */
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.bk-fact--row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	background: var(--bk-bg-2);
}

.bk-fact__t { display: grid; gap: 1px; min-width: 0; }
.bk-fact--row .bk-fact__i { width: 34px; height: 34px; flex: none; }

.bk-review__reg {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px dashed var(--bk-line-2);
	border-radius: var(--bk-r);
	font-size: 13px;
	line-height: 1.6;
	color: var(--bk-mute);
}

.bk-review__reg .bk-ico { color: var(--bk-gold); margin-top: 2px; }

.bk-pros { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.bk-pro {
	padding: 18px 20px;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-r);
	background: var(--bk-panel);
}

.bk-pro__t { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 15px; font-weight: 800; }
.bk-pro--plus .bk-pro__t .bk-ico { color: var(--bk-win); }
.bk-pro--minus .bk-pro__t .bk-ico { color: var(--bk-gold); }
.bk-pro ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 7px; font-size: 14px; color: var(--bk-mute); }
.bk-pro--plus { border-inline-start: 3px solid var(--bk-win); }
.bk-pro--minus { border-inline-start: 3px solid var(--bk-gold); }

.bk-land {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 36px 34px;
	border: 1px solid rgba(255, 208, 0, .22);
	border-radius: var(--bk-r-lg);
	background:
		radial-gradient(110% 130% at 6% 0, rgba(18, 136, 90, .5), transparent 55%),
		radial-gradient(90% 120% at 100% 100%, rgba(255, 208, 0, .16), transparent 60%),
		linear-gradient(140deg, #0a3d28, #061018 72%);
	overflow: hidden;
	box-shadow: var(--bk-sh);
}

.bk-land__suit {
	position: absolute;
	inset-block-start: -40px;
	inset-inline-end: -40px;
	color: rgba(255, 255, 255, .045);
	transform: rotate(12deg);
	pointer-events: none;
}

.bk-land__k {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border: 1px solid rgba(255, 208, 0, .3);
	border-radius: 999px;
	background: rgba(255, 208, 0, .08);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bk-gold-l);
}

.bk-land__h {
	font-size: clamp(32px, 4.4vw, 56px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.02;
	background: linear-gradient(180deg, #fff 30%, var(--bk-gold-l));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bk-land__s { max-width: 56ch; font-size: 15px; color: rgba(233, 238, 243, .78); }
.bk-land__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.bk-land__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	width: 100%;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.bk-land__spec { display: grid; gap: 2px; }
.bk-land__spec b { font-size: 21px; font-weight: 800; color: var(--bk-gold); letter-spacing: -.02em; }
.bk-land__spec i { font-style: normal; font-size: 12.5px; color: rgba(233, 238, 243, .66); }

/* ----------------------------------------------------------- 10. responsive */

/*
 * The float switches on only where the wrapped copy still fits an 812px
 * content image beside the cards: 1320 page − 328 card − 36 gutter = 956, and
 * the page stops growing at 1220px of viewport. Below that the cards drop
 * under the article and lay out as a band, so the copy never runs in a narrow
 * ribbon with a dead gutter beside it.
 */
@media (min-width: 1220px) {
	.bk-copy--aside { display: block; }

	.bk-copy--aside .bk-aside {
		float: right;
		width: var(--bk-aside);
		margin: 0 0 24px var(--bk-gut);
		margin-inline-start: var(--bk-gut);
		margin-inline-end: 0;
	}

	.bk-copy--aside .bk-phead,
	.bk-copy--aside .bk-content { display: block; }

	/*
	 * flow-root, NOT block: the contents card carries its own background, and a
	 * plain block only shortens its LINE boxes beside a float — the panel
	 * itself would run on under the cards. A block formatting context is what
	 * makes the box stop at the float.
	 */
	.bk-copy--aside .bk-toc { display: flow-root; }

	.bk-copy--aside .bk-content::after { content: ''; display: block; clear: both; }
}

@media (max-width: 1219px) {
	.bk-aside { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}

@media (max-width: 1120px) {
	.bk-shell { grid-template-columns: minmax(0, 1fr); }
	.bk-rail { display: none; }
	.bk-match { grid-template-columns: 150px minmax(0, 1fr) 250px; gap: 12px; }
}

@media (max-width: 1000px) {
	.bk-bar__nav { display: none; }
	.bk-burger { display: inline-flex; }
	.bk-pill { display: none; }
	.bk-promo { grid-template-columns: minmax(0, 1fr); }
	.bk-promo__side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.bk-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.bk-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	:root { --bk-head: 104px; }
	.bk-ticker { display: none; }
	.bk-bar__in { height: 58px; gap: 12px; }

	/* The match row stacks: meta and teams first, then the price triple runs
	   full width — three 84px buttons never fit beside a pair on a phone. */
	.bk-match {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 13px 14px;
	}

	.bk-match__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
	.bk-coupon__cols { display: none; }
	.bk-coupon__head { justify-content: flex-start; }
	.bk-match__team { font-size: 14.5px; }
	.bk-tabbar { display: flex; }
	body { padding-bottom: 62px; }
	.bk-totop { bottom: 74px; }
	.bk-sec { margin-block: 26px; }
}

@media (max-width: 720px) {
	.bk-tl__i { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
	.bk-tl__bonus { grid-column: 2; }
	.bk-tl__go { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
	.bk-land { padding: 26px 20px; }
	.bk-review__head { gap: 14px; }
	.bk-review__cta { width: 100%; }
	.bk-row { grid-auto-columns: 168px; }
	.bk-rarrow { display: none; }
	.bk-foot__cols { grid-template-columns: minmax(0, 1fr); }
	.bk-content { font-size: 15.5px; }
}

@media (max-width: 480px) {
	.bk-bar__auth .bk-btn--ghost { display: none; }
	.bk-card__sum { font-size: 28px; }
	.bk-slabel { flex-direction: column; align-items: flex-start; gap: 4px; }
	.bk-slabel__n { text-align: start; }
}