/*CSS HANDLER */
/* =========================================================
   TopLeagueSchedule-2 — shared card
   One applyTheme() (see the JS) writes --tls2-* on #tls2; both
   halves' own token blocks (further down) alias their original
   variable names to these, so neither half's internal rules needed
   to change.
   ========================================================= */
#tls2 {
	--tls2-surface: var(--bgColor3, #0d1730);
	--tls2-ink: var(--textColorWhite, #f5f1e6);
	--tls2-accent: var(--bgColor2, #d7ae66);
	--tls2-accent-hi: var(--tls2-accent);
	--tls2-on-accent: var(--tls2-surface);
	--tls2-icons: var(--white_icons, brightness(0) saturate(100%) invert(100%));
	--tls2-radius: 18px;

	--tls2-surface-2: var(--tls2-surface);
	--tls2-line: rgba(255, 255, 255, 0.12);
	--tls2-ink-dim: rgba(255, 255, 255, 0.62);
	--tls2-tint: rgba(255, 255, 255, 0.045);
	--tls2-tint-hi: rgba(255, 255, 255, 0.09);
	--tls2-hair: rgba(255, 255, 255, 0.07);
	--tls2-a10: rgba(255, 255, 255, 0.1);
	--tls2-a18: rgba(255, 255, 255, 0.18);
	--tls2-a30: rgba(255, 255, 255, 0.3);
}

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

/* ---------- card ---------- */
#tls2 {
	box-sizing: border-box;
	position: relative;
	width: 94%;
	margin: 18px 3% 35px;
	padding: 20px 22px 18px;
	border: 1px solid var(--tls2-line);
	border-radius: var(--tls2-radius);
	color: var(--tls2-ink);
	background:
		radial-gradient(120% 140% at 12% -10%, var(--tls2-a18) 0%, transparent 55%),
		linear-gradient(155deg, var(--tls2-surface) 0%, var(--tls2-surface-2) 100%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
	container-type: inline-size;
	container-name: tls2card;
}

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

/* ---------- two panes: side by side when there is room, stacked
   below it — THIS is the difference from TopLeagueSchedule, which
   never stacks; Lorenzo asked for live2's behaviour here instead ---------- */
#tls2 .tls2-cols {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 28px;
}

#tls2 .tls2-pane { min-width: 0; }

@container tls2card (min-width: 860px) {
	#tls2 .tls2-cols { flex-direction: row; align-items: flex-start; }
	#tls2 .tls2-pane { flex: 1 1 0; min-width: 0; }
	#tls2 .tls2-pane + .tls2-pane { padding-left: 28px; border-left: 1px solid var(--tls2-hair); }
}

/* =========================================================
   TheBet-4 half — token layer and card shell restored EXACTLY as
   TheBet-4.css has them: fixed navy/gold palette, its own stadium
   photo + gradient background, its own border/padding/topline.
   This pane does NOT follow the skin any more (same as the
   standalone TheBet-4 never did either) — only #the_bet.tb4's own
   width/margin/background-color are dropped, since those were for
   being a page-level widget, which this no longer is (the merged
   #tls2 card and the .tls2-cols layout own that now).
   ========================================================= */
#the_bet.tb4 {
	--tb4-navy-900: #0d1730;
	--tb4-navy-800: #142244;
	--tb4-navy-700: #1c2e56;
	--tb4-gold: #d7ae66;
	--tb4-gold-soft: #f0d9a6;
	--tb4-track: rgba(255, 255, 255, 0.12);
	--tb4-ink: #f5f1e6;
	--tb4-ink-dim: rgba(245, 241, 230, 0.62);
	--tb4-line: rgba(215, 174, 102, 0.28);
	--tb4-radius: 18px;
	--tb4-radius-sm: 12px;
	border-radius: var(--tb4-radius);
}

#the_bet.tb4 #the_bet_container.tb4-card {
	position: relative;
	overflow: hidden;
	/* border: 1px solid var(--border-main); */
	border-radius: var(--tb4-radius);
	padding: 18px 24px 16px;
	background: radial-gradient(120% 140% at 12% -10%, rgba(215, 174, 102, 0.16) 0%, transparent 55%), linear-gradient(155deg, rgba(13, 23, 48, 0.05) 0%, rgba(20, 34, 68, 0.65) 55%, rgba(28, 46, 86, 0.25) 100%), url('../img/thebet4.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--tb4-ink);
}

/* thin luminous rule under the header, echoes a stand floodlight beam */
#the_bet.tb4 .tb4-topline {
	position: absolute;
	top: 0; left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tb4-gold) 50%, transparent);
	opacity: 0.55;
}

/* =========================================================
   Match tabs — switch between the events of the "BS" feed (see
   maxTabs in TheBet-4.js) without a new request, since they all
   arrive in one payload. In two-column mode one tab = a pair.
   ========================================================= */
#the_bet.tb4 .tb4-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

#the_bet.tb4 .tb4-tab {
	font-family: inherit;
	cursor: pointer;
	max-width: 200px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--tb4-ink-dim);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--tb4-line);
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#the_bet.tb4 .tb4-tab:hover {
	background: rgba(255, 255, 255, 0.09);
	color: var(--tb4-ink);
}

#the_bet.tb4 .tb4-tab.active {
	color: var(--tb4-navy-900);
	background: var(--tb4-gold);
	border-color: var(--tb4-gold);
	font-weight: 700;
}

@media screen and (max-width: 640px) {
	#the_bet.tb4 .tb4-tabs { gap: 6px; }
	#the_bet.tb4 .tb4-tab { max-width: 140px; padding: 5px 12px; font-size: 11px; }
}

/* =========================================================
   Header — league eyebrow + matchup
   ========================================================= */
#the_bet.tb4 .tb4-head {
	position: relative;
	text-align: center;
	padding-bottom: 2px;
}

#the_bet.tb4 p.tb4-league {
	display: inline-block;
	white-space: nowrap;
	margin: 0 auto 10px;
	padding: 4px 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tb4-gold-soft);
	border: 1px solid var(--tb4-line);
	border-radius: 999px;
	background: rgba(215, 174, 102, 0.08);
}

/* fixed side columns + a center column that always gets the
   remaining width. The whole row is capped and centred so the
   crests sit close to the team name instead of stretching out
   to the full (very wide) card edges. */
#the_bet.tb4 .tb4-clubs {
	display: grid;
	grid-template-columns: 140px 1fr 140px;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

#the_bet.tb4 .tb4-crest {
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 140px;
}

#the_bet.tb4 .tb4-crest img {
	max-width: 100%;
	max-height: 100%;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

#the_bet.tb4 .tb4-matchup {
	min-width: 0;
}

#the_bet.tb4 .tb4-matchup h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#the_bet.tb4 .tb4-matchup .date {
	display: inline-block;
	white-space: nowrap;
	margin-top: 5px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tb4-navy-900);
	background: var(--tb4-gold);
	border-radius: 999px;
}

@media screen and (max-width: 1293px) {
	#the_bet.tb4 .tb4-crest { display: none; }
	#the_bet.tb4 .tb4-clubs { grid-template-columns: 1fr; }
}

/* =========================================================
   Featured market (1X2, etc.) — radial gauges.
   The row is centred via flex align-items on a column parent
   (not width:100%/justify-content on the row itself) so it
   stays centred no matter what width the row's own content
   ends up taking.
   ========================================================= */
#the_bet.tb4 .maxCont.tb4-main {
	width: 100% !important;
	max-width: 100% !important;
	margin: 12px auto 0 !important;
	float: none !important;
	position: relative;
	padding-top: 8px;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

#the_bet.tb4 .tb4-main::after {
	content: "";
	position: absolute;
	top: 10px; left: 8%; right: 8%;
	height: 1px;
	background: var(--tb4-line);
	opacity: 0.5;
	pointer-events: none;
}

#the_bet.tb4 .tb4-main .tb4-groupLabel {
	text-align: center;
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tb4-ink-dim);
}

#the_bet.tb4 .tb4-main .max {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 26px;
	flex-wrap: wrap;
}

/* =========================================================
   Ring gauge. Built from real, plain DOM layers instead of
   animated custom-property gradients, so the fill renders
   correctly on any browser rather than depending on modern
   @property support:
     .tb4-ring   → base circle, neutral track colour
     .tb4-fill   → white wedge, sized to the percentage
     .tb4-stripe → diagonal moving texture, clipped to .tb4-fill
     .tb4-hole   → covers the centre to create the donut shape
     .tb4-ringInner → odd + percentage text, always on top
   ========================================================= */
#the_bet.tb4 .tb4-ring {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--tb4-track);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

#the_bet.tb4 .tb4-fill,
#the_bet.tb4 .tb4-stripe {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

/* moving stripe texture — the circular counterpart of the old
   diagonal cssProgress-active-right animation on the flat bars.
   Its mask-image is set inline per item (a static conic-gradient
   matching the fill's own angle), so it only shows inside the
   filled wedge, never over the empty track. */
#the_bet.tb4 .tb4-stripe {
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(13, 23, 48, 0) 0 5px,
		rgba(13, 23, 48, 0.16) 5px 10px
	);
	background-size: 22px 22px;
	animation: tb4StripeMove 1.6s linear infinite;
	pointer-events: none;
}

@keyframes tb4StripeMove {
	from { background-position: 0 0; }
	to   { background-position: 22px 0; }
}

#the_bet.tb4 .tb4-hole {
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--tb4-navy-800);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#the_bet.tb4 .tb4-ringInner {
	position: relative;
	z-index: 1;
	text-align: center;
	line-height: 1.1;
}

#the_bet.tb4 .tb4-odd {
	display: block;
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: none;
	color: var(--tb4-ink);
}

#the_bet.tb4 .tb4-odd:hover,
#the_bet.tb4 .tb4-odd.selected {
	color: var(--tb4-gold);
}

#the_bet.tb4 .tb4-pct {
	display: block;
	margin-top: 1px;
	font-size: 10px;
	font-weight: 600;
	color: var(--tb4-gold-soft);
}

#the_bet.tb4 .tb4-pct::after {
	content: "%";
}

#the_bet.tb4 .tb4-outcome {
	margin-top: 6px;
	text-align: center;
}

#the_bet.tb4 .tb4-outcomeName {
	display: inline-block;
	min-width: 22px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	border: 1px solid var(--tb4-line);
	color: var(--tb4-ink);
	background: rgba(255, 255, 255, 0.04);
}

#the_bet.tb4 .tb4-item.selected .tb4-outcomeName {
	border-color: var(--tb4-gold);
	color: var(--tb4-navy-900);
	background: var(--tb4-gold);
}

#the_bet.tb4 .tb4-item.selected .tb4-ring {
	box-shadow: 0 0 0 2px var(--tb4-gold), 0 8px 20px rgba(0, 0, 0, 0.3);
}

#the_bet.tb4 .tb4-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

/* =========================================================
   Secondary markets — compact chip grid, centred as a group
   ========================================================= */
#the_bet.tb4 .tb4-secondary {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

#the_bet.tb4 .tb4-secondary .min {
	position: relative;
	flex: 0 1 210px;
	padding: 10px 12px 10px;
	border: 1px solid var(--tb4-line);
	border-radius: var(--tb4-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	transition: background 0.25s ease, transform 0.25s ease;
}

#the_bet.tb4 .tb4-secondary .min:hover {
	background: rgba(255, 255, 255, 0.06);
	transform: translateY(-2px);
}

#the_bet.tb4 .tb4-secondary h2 {
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tb4-ink-dim);
	text-align: center;
}

#the_bet.tb4 .tb4-secondary .tb4-row {
	display: flex;
	justify-content: center;
	gap: 14px;
}

#the_bet.tb4 .tb4-secondary .tb4-ring {
	width: 64px;
	height: 64px;
}

#the_bet.tb4 .tb4-secondary .tb4-hole {
	inset: 6px;
}

#the_bet.tb4 .tb4-secondary .tb4-odd {
	font-size: 14px;
}

#the_bet.tb4 .tb4-secondary .tb4-pct {
	font-size: 10px;
}

#the_bet.tb4 .tb4-secondary .tb4-outcome {
	margin-top: 5px;
}

#the_bet.tb4 .tb4-secondary .tb4-outcomeName {
	padding: 2px 8px;
	font-size: 11px;
}

/* =========================================================
   Entrance motion — quiet, single orchestrated reveal
   ========================================================= */
#the_bet.tb4 .tb4-item {
	animation: tb4In 0.5s ease both;
}
#the_bet.tb4 .tb4-main .tb4-item:nth-child(2) { animation-delay: 0.06s; }
#the_bet.tb4 .tb4-main .tb4-item:nth-child(3) { animation-delay: 0.12s; }

@keyframes tb4In {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#the_bet.tb4 .tb4-stripe { animation: none; }
	#the_bet.tb4 .tb4-item { animation: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 1400px) {
	#the_bet.tb4 .tb4-matchup h2 { font-size: 20px; }
}

@media screen and (max-width: 1024px) {
	#the_bet.tb4 #the_bet_container.tb4-card { padding: 16px 14px; }
	#the_bet.tb4 .tb4-main .max { gap: 18px; }
	#the_bet.tb4 .tb4-ring { width: 72px; height: 72px; }
	#the_bet.tb4 .tb4-secondary .min { flex-basis: 150px; }
}

@media screen and (max-width: 640px) {
	#the_bet.tb4 .tb4-main .max { gap: 12px; }
	#the_bet.tb4 .tb4-ring { width: 62px; height: 62px; }
	#the_bet.tb4 .tb4-odd { font-size: 14px; }
	#the_bet.tb4 .tb4-secondary .min { flex-basis: 100%; }
}

/* =========================================================
   Panels — one match per panel. On a wide card (JS adds
   .tb4-dual, see dualMinWidth in TheBet-4.js) two panels sit
   side by side; otherwise only the first panel is visible.
   ========================================================= */
#the_bet.tb4 .tb4-panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

#the_bet.tb4 .tb4-panel {
	min-width: 0;
}

#the_bet.tb4 .tb4-panel.tb4-off {
	display: none;
}

#the_bet.tb4 .tb4-dual .tb4-panels {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

#the_bet.tb4 .tb4-dual .tb4-panel:first-child {
	padding-right: 24px;
}

#the_bet.tb4 .tb4-dual .tb4-panel + .tb4-panel {
	padding-left: 24px;
	border-left: 1px solid var(--tb4-line);
}

/* odd number of matches: the last page has a single one, keep it
   centred at column width instead of leaving half the card empty */
#the_bet.tb4 .tb4-dual.tb4-solo .tb4-panels {
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
}

#the_bet.tb4 .tb4-dual.tb4-solo .tb4-panel:first-child {
	padding-right: 0;
}

/* in two columns every tab stands for a pair of matches */
#the_bet.tb4 .tb4-dual .tb4-tab {
	max-width: 580px;
}

#the_bet.tb4 .tb4-tabSep {
	margin: 0 9px;
	opacity: 0.55;
}

/* each column is about half as wide, so the header gets more compact */
@media screen and (min-width: 1294px) {
	#the_bet.tb4 .tb4-dual .tb4-clubs {
		grid-template-columns: 104px 1fr 104px;
		gap: 12px;
	}
	#the_bet.tb4 .tb4-dual .tb4-crest {
		width: 104px;
		height: 104px;
	}
	#the_bet.tb4 .tb4-dual .tb4-matchup h2 {
		font-size: 18px;
	}
}

.heading_TheBet{
	margin: 20px 0 20px 30px;
}

.heading_TheBet > h2 {
  font-size: 18px;
  font-weight: bold;
  padding-left: 100px;
  text-align: left;
  text-transform: uppercase;
}

.heading_TheBet h2.no-background {
  position: relative;
  z-index: 1;
	width: 100%;
	&:before {
    height: 2px;
    background:radial-gradient(50% 50% at 50% 50%, var(--bg_text) 0%, rgba(209, 205, 205, 0) 100%);
		content:"";
		position: absolute;
		top: 40%; left: -8%; right: 0; bottom: 0;
		width: 114%;
		z-index: -1;
	}
  span {
		background: var(--livebetLightBg);
    padding: 0 5px; 
	}
}

/* =========================================================
   TopLeagueSchedule half — token layer, now ALIASED to the shared
   --tls2-* tokens instead of computing its own. #tls here is just
   the right pane's own wrapper (nested inside #tls2 .tls2-pane),
   not an outer card any more — no width/margin/background/border
   of its own. Everything below this block that references
   var(--tls-...) is unchanged from the original TopLeagueSchedule.css.
   ========================================================= */
#tls {
	--tls-surface: var(--tls2-surface);
	--tls-ink: var(--tls2-ink);
	--tls-accent: var(--tls2-accent);
	--tls-accent-text: var(--tls-accent);
	--tls-on-accent: var(--tls2-on-accent);
	--tls-icons: var(--tls2-icons);
	--tls-ink-dim: var(--tls2-ink-dim);
	--tls-tint: var(--tls2-tint);
	--tls-tint-hi: var(--tls2-tint-hi);
	--tls-hair: var(--tls2-hair);
	--tls-a18: var(--tls2-a18);
	--tls-a30: var(--tls2-a30);
	display: block;
}

/* ---------- sport/league tabs ---------- */
#tls .tls-sports {
	all: unset;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

#tls .tls-sp {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--tls-hair);
	background: var(--tls-tint);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--tls-ink-dim);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
#tls .tls-sp:hover { color: var(--tls-ink); border-color: var(--tls-a30); }
#tls .tls-sp.tls-on { background: var(--tls-accent); border-color: var(--tls-accent); color: var(--tls-on-accent); }

/* ---------- body ---------- */
#tls .tls-body {
	display: block;
	container-type: inline-size;
	container-name: tlsbody;
	overflow-x: auto;
}

#tls .tls-body:empty {
	min-height: 220px;
	border-radius: 14px;
	background:
		linear-gradient(100deg, transparent 30%, var(--tls-tint-hi) 50%, transparent 70%) 0 0 / 220% 100%,
		repeating-linear-gradient(to bottom, var(--tls-tint) 0 56px, transparent 56px 62px);
	animation: tlsShimmer 1.5s linear infinite;
}
@keyframes tlsShimmer { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }

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

/* ---------- grid: date | code | match | 1 | X | 2 ---------- */
#tls .tls-colhead,
#tls .tls-row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 50px 46px minmax(120px, 1fr) repeat(3, minmax(42px, 56px));
	align-items: center;
	gap: 6px;
	padding: 0 4px;
}

#tls .tls-colhead { padding-bottom: 5px; min-height: 26px; }
#tls .tls-hOut { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tls-ink-dim); }

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

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

/* date */
#tls .tls-when { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 2px; line-height: 1.1; }
#tls .tls-day { font-size: 13px; font-weight: 800; color: var(--tls-ink); }
#tls .tls-mon { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; color: var(--tls-ink-dim); margin-left: 3px; }
#tls .tls-time { display: block; font-size: 10px; font-weight: 600; color: var(--tls-accent-text); margin-top: 1px; }

/* event code */
#tls .tls-code { font-size: 10px; font-weight: 600; color: var(--tls-ink-dim); font-variant-numeric: tabular-nums; }

/* teams (same grammar as next_best_controller-4, no league line: the tab already says which league this is) */
#tls .tls-match { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 5px 0; }
#tls .tls-teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#tls .tls-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
#tls .tls-tname {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	color: var(--tls-ink);
}
#tls .tls-crest { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
#tls .tls-crest.tls-crest-missing { display: none; }

/* odds */
#tls .tls-c { display: flex; align-items: center; justify-content: center; }
#tls .tls-odd {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30px;
	border: 1px solid var(--tls-hair);
	border-radius: 9px;
	background: var(--tls-tint-hi);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tls-ink);
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#tls a.tls-odd:hover { background: var(--tls-a18); border-color: var(--tls-accent); transform: translateY(-1px); }
#tls .tls-odd.selected { background: var(--tls-accent); border-color: var(--tls-accent); color: var(--tls-on-accent); }
#tls .tls-odd.tls-na { cursor: default; background: transparent; color: var(--tls-ink-dim); }

/* ---------- each pane narrows on its own ---------- */
@container tlsbody (max-width: 360px) {
	/* visibility:hidden, NOT display:none: display:none removes the element
	   from the grid's item list entirely, which shifts every column after
	   it one track to the left — exactly the next_best_controller-3 bug
	   again, just from a different cause. visibility:hidden keeps the
	   item (and its track) in place, just unpainted. */
	#tls .tls-code { visibility: hidden; }
	#tls .tls-colhead,
	#tls .tls-row { grid-template-columns: 44px 0px minmax(100px, 1fr) repeat(3, minmax(38px, 50px)); }
}
@container tlsbody (max-width: 260px) {
	#tls .tls-tname { font-size: 11.5px; }
}

/* ---------- motion ---------- */
@keyframes tlsFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#tls .tls-enter .tls-row { animation: tlsFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 26ms); }

@media (prefers-reduced-motion: reduce) {
	#tls .tls-enter .tls-row, #tls .tls-body:empty { animation: none; }
	#tls .tls-row, #tls .tls-odd { transition: none; }
}

.tls-oddv {
    color: #fff !important;
}