/*CSS HANDLER */
/* =========================================================
   LiveBettingLight-list
   Same adaptive-skin card language as TheBet-4 and
   next_best_controller-3 (see the applyTheme() block in the JS):
   this file only ever reads the --lbl-* tokens below, the JS
   corrects them per skin so text stays readable everywhere.
   ========================================================= */
#lbl {
	--lbl-surface: var(--bgColor3, #0d1730);
	--lbl-ink: var(--textColorWhite, #f5f1e6);
	--lbl-accent: var(--bgColor2, #d7ae66);
	--lbl-accent-text: var(--lbl-accent);
	--lbl-on-accent: var(--lbl-surface);
	--lbl-icons: var(--white_icons, brightness(0) saturate(100%) invert(100%));
	--lbl-radius: 18px;
	/* "live" is a status colour, not a brand accent: it stays this red on
	   every skin, the same way a REC dot does not follow a site's palette */
	--lbl-live: #ef4444;

	--lbl-surface-2: var(--lbl-surface);
	--lbl-accent-hi: var(--lbl-accent);
	--lbl-line: rgba(255, 255, 255, 0.12);
	--lbl-ink-dim: rgba(255, 255, 255, 0.62);
	--lbl-tint: rgba(255, 255, 255, 0.045);
	--lbl-tint-hi: rgba(255, 255, 255, 0.09);
	--lbl-hair: rgba(255, 255, 255, 0.07);
	--lbl-a10: rgba(255, 255, 255, 0.1);
	--lbl-a18: rgba(255, 255, 255, 0.18);
	--lbl-a30: rgba(255, 255, 255, 0.3);
	--lbl-shade: rgba(0, 0, 0, 0.25);
	--lbl-up: #3ddc84;
	--lbl-down: #ef4444;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	#lbl {
		--lbl-surface-2: color-mix(in srgb, var(--lbl-surface) 90%, var(--lbl-ink));
		--lbl-accent-hi: color-mix(in srgb, var(--lbl-accent) 80%, #fff);
		--lbl-line: color-mix(in srgb, var(--lbl-ink) 12%, transparent);
		--lbl-ink-dim: color-mix(in srgb, var(--lbl-ink) 62%, transparent);
		--lbl-tint: color-mix(in srgb, var(--lbl-ink) 4.5%, transparent);
		--lbl-tint-hi: color-mix(in srgb, var(--lbl-ink) 9%, transparent);
		--lbl-hair: color-mix(in srgb, var(--lbl-ink) 7%, transparent);
		--lbl-a10: color-mix(in srgb, var(--lbl-accent) 10%, transparent);
		--lbl-a18: color-mix(in srgb, var(--lbl-accent) 18%, transparent);
		--lbl-a30: color-mix(in srgb, var(--lbl-accent) 30%, transparent);
		--lbl-shade: color-mix(in srgb, var(--lbl-on-accent) 28%, transparent);
	}
}

/* ---------- card ----------
   The site's own global CSS has rules that also match this element
   (it carries the "widget" and "statsBoxContent" classes, kept for
   consistency with the module it replaces): ".offer #center_column
   .widget" and "#center_column .widget" both set their own width
   and margin, and both out-specificity a bare "#lbl" selector
   (an ancestor id inside a descendant selector still counts towards
   specificity, so two of their classes plus that id beats our one
   id with zero classes). TheBet-4 hit the same thing and is already
   armoured with !important; this does the same. */
#lbl {
	box-sizing: border-box !important;
	position: relative !important;
	width: 94% !important;
	margin: 18px 3% 35px !important;
	padding: 20px 22px 18px;
	border: 1px solid var(--lbl-line);
	border-radius: var(--lbl-radius);
	color: var(--lbl-ink);
	background:
		radial-gradient(120% 140% at 12% -10%, var(--lbl-a18) 0%, transparent 55%),
		linear-gradient(155deg, var(--lbl-surface) 0%, var(--lbl-surface-2) 100%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
	container-type: inline-size;
	container-name: lblcard;
}

#lbl::before {
	content: "";
	position: absolute;
	top: 0; left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lbl-accent) 50%, transparent);
	opacity: 0.55;
}

/* ---------- header ---------- */
#lbl .lbl-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
}

#lbl .lbl-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--lbl-live);
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
	animation: lblPulse 1.8s ease-out infinite;
}

#lbl .lbl-title {
	all: unset;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lbl-ink);
}

@keyframes lblPulse {
	0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
	70%  { box-shadow: 0 0 0 7px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- sport tabs (same grammar as next_best_controller) ---------- */
#lbl .lbl-sports {
	all: unset;
	display: flex;
	gap: 2px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--lbl-hair);
	overflow-x: auto;
	scrollbar-width: none;
}

#lbl .lbl-sports::-webkit-scrollbar { display: none; }

#lbl .lbl-sports > li {
	all: unset;
	position: relative;
	flex: 0 0 auto;
	cursor: pointer;
	padding: 8px 14px 11px;
}

#lbl .lbl-sports .navGroupWrapper {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lbl-ink-dim);
	transition: color 0.2s ease;
}

#lbl .lbl-sports .navGroupWrapper a {
	all: unset;
	display: inline-flex;
	cursor: pointer;
}

#lbl .lbl-sports > li:hover .navGroupWrapper,
#lbl .lbl-sports > li.lbl-on .navGroupWrapper { color: var(--lbl-ink); }

#lbl .lbl-sports > li::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: var(--lbl-accent);
	transform: scaleX(0);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#lbl .lbl-sports > li.lbl-on::after { transform: scaleX(1); }

#lbl .lbl-count {
	all: unset;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 16px;
	color: var(--lbl-ink-dim);
	background: var(--lbl-tint-hi);
}

#lbl .lbl-sports > li.lbl-on .lbl-count {
	color: var(--lbl-on-accent);
	background: var(--lbl-accent);
}

#lbl .sport-icon-livebetting {
	width: 16px; height: 16px;
	filter: var(--lbl-icons);
	opacity: 0.85;
}

/* ---------- body / groups ---------- */
#lbl .lbl-body { display: block; }

#lbl .lbl-empty {
	margin: 10px 0 4px;
	font-size: 13px;
	color: var(--lbl-ink-dim);
	text-align: center;
}

#lbl .lbl-group { display: none; }
#lbl .lbl-group.lbl-on { display: block; }

/* column grid: clock | match | score | N odds | open-button, shared
   between the (optional) header labels and every row so they align */
#lbl .lbl-colhead,
#lbl .lbl-row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 58px minmax(170px, 1fr) 54px repeat(var(--cols), minmax(46px, 64px));
	align-items: center;
	gap: 8px;
	padding: 0 4px;
}

#lbl .lbl-colhead {
	padding-bottom: 5px;
}

#lbl .lbl-hOut {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lbl-ink-dim);
}

#lbl .lbl-rows { display: block; }

#lbl .lbl-row {
	position: relative;
	min-height: 52px;
	margin-top: 6px;
	border: 1px solid var(--lbl-hair);
	border-radius: 12px;
	background: var(--lbl-tint);
	transition: background 0.2s ease, border-color 0.2s ease;
}

#lbl .lbl-row:hover {
	background: var(--lbl-tint-hi);
	border-color: var(--lbl-a30);
}

/* live clock */
#lbl .lbl-live {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding-left: 2px;
}

#lbl .lbl-liveDot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--lbl-live);
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
	animation: lblPulse 1.8s ease-out infinite;
}

#lbl .lbl-clock {
	font-size: 12px;
	font-weight: 800;
	color: var(--lbl-ink);
	font-variant-numeric: tabular-nums;
}

/* teams + league — same stacked crest + name grammar as next_best_controller-3,
   so the two widgets read as one family on the page */
#lbl .lbl-match {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 6px 0;
}

#lbl .lbl-teams {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

#lbl .lbl-team {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

#lbl .lbl-tname {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lbl-ink);
}

#lbl .lbl-crest {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

#lbl .lbl-crest.lbl-nocrest { display: none; }

#lbl .lbl-league {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lbl-accent-text);
}

/* score */
#lbl .lbl-score {
	text-align: center;
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--lbl-ink);
}

/* odds */
#lbl .lbl-c { display: flex; align-items: center; justify-content: center; }

#lbl .lbl-odd {
	all: unset;
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: 32px;
	border: 1px solid var(--lbl-hair);
	border-radius: 9px;
	background: var(--lbl-tint-hi);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--lbl-ink);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

#lbl a.lbl-odd:hover {
	background: var(--lbl-a18);
	border-color: var(--lbl-accent);
	transform: translateY(-1px);
}

#lbl .lbl-odd.selected {
	background: var(--lbl-accent);
	border-color: var(--lbl-accent);
	color: var(--lbl-on-accent);
}

#lbl .lbl-odd.lbl-na {
	cursor: default;
	background: transparent;
	color: var(--lbl-ink-dim);
}

/* a quote that just moved: a coloured arrow, fading out so it doesn't
   stay highlighted forever — it reappears only when the row is rebuilt
   with a new up/down flag from the feed */
#lbl .lbl-arrow {
	display: none;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

#lbl .lbl-odd.lbl-up,
#lbl .lbl-odd.lbl-down {
	animation: lblFlash 2.6s ease-out both;
}

#lbl .lbl-up .lbl-arrow { display: block; border-bottom: 6px solid var(--lbl-up); }
#lbl .lbl-down .lbl-arrow { display: block; border-top: 6px solid var(--lbl-down); margin-top: 2px; }
#lbl .lbl-up .lbl-oddv { color: var(--lbl-up); }
#lbl .lbl-down .lbl-oddv { color: var(--lbl-down); }

@keyframes lblFlash {
	0%   { box-shadow: 0 0 0 1px var(--lbl-hair) inset; }
	15%  { box-shadow: 0 0 0 1px currentColor inset; }
	100% { box-shadow: 0 0 0 1px var(--lbl-hair) inset; }
}

/* ---------- narrower card: fewer, wider odd cells; hide the score first (it's inside the match line already if needed) ---------- */
@container lblcard (max-width: 640px) {
	#lbl .lbl-colhead,
	#lbl .lbl-row {
		grid-template-columns: 50px minmax(120px, 1fr) repeat(var(--cols), minmax(42px, 60px));
	}
	#lbl .lbl-score { display: none; }
}

@container lblcard (max-width: 460px) {
	#lbl .lbl-league { display: none; }
	#lbl .lbl-tname { font-size: 12.5px; }
}

/* ---------- motion ---------- */
@keyframes lblFade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

#lbl .lbl-enter .lbl-row {
	animation: lblFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 26ms);
}

@media (prefers-reduced-motion: reduce) {
	#lbl .lbl-dot,
	#lbl .lbl-liveDot,
	#lbl .lbl-enter .lbl-row,
	#lbl .lbl-odd.lbl-up,
	#lbl .lbl-odd.lbl-down { animation: none; }
	#lbl .lbl-row,
	#lbl .lbl-odd { transition: none; }
}