/* ============================================================
   FANORATE — LIVE MATCH WIDGET  (global sitewide dock)
   ------------------------------------------------------------
   Ported from the standalone demo-livewidget (styles.css, the
   `.fw` widget shell onward). Two changes vs. the demo:
     1. The widget is wrapped in `.fanorate-live-widget`, a FIXED
        right-edge overlay (the demo relied on a flex `.stage`
        parent that doesn't exist on the site).
     2. The demo's brand/font CSS variables are remapped onto the
        theme's semantic design tokens (assets/css/tokens/*), so
        the widget inherits the site's red / navy / fonts instead
        of the demo's hardcoded values. Neutral greys are left as
        literals — they already equal the theme primitives.
   The widget starts `hidden`; view.js reveals it only once the
   API returns at least one fixture (so a dead API = no widget).
   ============================================================ */

.fanorate-live-widget[hidden] { display: none !important; }

/* ------------------------------------------------------------------
   LAUNCHER + DRAWER MODEL
   The widget no longer occupies a full-height right rail (which covered
   the header on small screens). Instead it sits in the bottom-right
   corner: only a small launcher bubble shows by default, and the panel
   opens as a floating drawer when the user clicks it (chat-widget style).
   ------------------------------------------------------------------ */
.fanorate-live-widget {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: auto;
	top: auto;
	z-index: 9000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;        /* let clicks pass through the empty corner */
	font-family: var(--font-ui); /* widget chrome uses the site UI font, not page serif */
}
.fanorate-live-widget > * { pointer-events: auto; }

/* ---- Launcher bubble ---- */
.fanorate-live-widget .flw-launcher{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px 10px 12px;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--text-inverse);
	font: 700 13px/1 var(--font-ui);
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: var(--shadow-pop);
	transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
	border: 2px solid var(--text-inverse);
}
.fanorate-live-widget .flw-launcher:hover{ transform: translateY(-1px); }
.fanorate-live-widget .flw-launcher__icon{ width: 20px; height: 20px; flex-shrink: 0; }

.fanorate-live-widget /* The `hidden` attribute must win even on elements we give an explicit
   display (e.g. .flw-launcher__live / __text are inline-flex, which would
   otherwise override the UA's [hidden]{display:none}). */
#fanorate-live-widget [hidden] { display: none !important; }
.fanorate-live-widget .flw-launcher__live{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	background: var(--color-primary);
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.fanorate-live-widget .flw-launcher__live[hidden]{
  display: none !important;
}

.fanorate-live-widget .flw-launcher__live .dot{
	width: 6px; height: 6px; border-radius: 50%;
	background: #fff; animation: flw-pulse 1.4s infinite;
}
.fanorate-live-widget .flw-launcher__score{ font-weight: 800; letter-spacing: 0.01em; }

/* Upcoming layout: flag + code grouped per team, on one flex baseline. */
.fanorate-live-widget .flw-launcher__text{
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.fanorate-live-widget .flw-tm{
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.fanorate-live-widget .flw-launcher__crest{
	width: 18px;
	height: 13px;                /* 4:3-ish — reads as a flag, not a squished square */
	border-radius: 2px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;    /* show the whole flag */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.fanorate-live-widget .flw-launcher__vs{
	font-size: 11px;
	font-weight: 600;
	opacity: 0.55;
	text-transform: lowercase;
}
.fanorate-live-widget .flw-launcher__time{
	font-size: 12px;
	font-weight: 600;
	opacity: 0.8;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
	padding-left: 9px;
	margin-left: 2px;
}
@keyframes flw-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---- Header live-scores ticker (opens the widget).
   Replaces the countdown in the navy bar once the tournament is under way:
   the widget JS hides .fn-countdown and shows this centred ticker. It only
   appears when there is match data, so it never competes with the countdown. ---- */
.header-live-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font: 700 11.5px/1 var(--font-ui);
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}
.header-live-trigger[hidden] { display: none !important; }
.header-live-trigger:hover { background: rgba(255, 255, 255, 0.14); }

.header-live-trigger__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: flw-pulse 1.4s infinite;
	flex-shrink: 0;
}
/* Status badge (LIVE / FT) */
.hlt-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.16);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.07em;
}
.hlt-badge--live { background: var(--color-primary); }
/* The fixture: flags + codes + score */
.hlt-match { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hlt-match b { font-weight: 800; }
.hlt-v { opacity: 0.55; font-weight: 600; text-transform: lowercase; }
.hlt-crest {
	width: 18px;
	height: 13px;
	border-radius: 2px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.hlt-more {
	font-size: 10px;
	font-weight: 700;
	opacity: 0.7;
	padding-left: 8px;
	margin-left: 2px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.hlt-cta { opacity: 0.6; font-weight: 700; font-size: 14px; }

.fanorate-live-widget /* Once the tournament countdown has ended, .fanorate-live-widget the live ticker replaces the dead
   00:00 timer. Class-based (not the `hidden` attr) because .fn-countdown is
   display:flex, .fanorate-live-widget which would override [hidden]{display:none}.fanorate-live-widget . */
.header-utility--countdown.has-live-ticker .fn-countdown{ display: none !important; }

@media (max-width: 600px) {
	.header-live-trigger { padding: 5px 10px; gap: 6px; }
	.hlt-more { display: none; }
}

/* Hide the launcher while the panel is open. */
.fanorate-live-widget.is-open .flw-launcher { display: none; }

/* ---- Panel as a floating drawer (was a full-height rail).
   Uses the #id so this beats the later `.fw.is-light` border/shadow rule. ---- */
#fanorate-live-widget .fw {
	pointer-events: auto;
	flex: 0 0 auto;              /* reset the demo's `flex:0 0 412px` (would pin height) */
	width: 400px;
	max-width: calc(100vw - 32px);
	/* Fixed tall height so the panel does NOT resize when switching tabs;
	   each tab's content scrolls inside the constant-height drawer. */
	height: 95vh;
	max-height: 95vh;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-pop);
	display: none;               /* hidden until the launcher opens it */
}

/* ---- Launcher position (configurable in Appearance → Live Widget) ---- */
.fanorate-live-widget.flw-pos-left {
	right: auto;
	left: 16px;
	align-items: flex-start;
}
#fanorate-live-widget.is-open .fw { display: flex; }

/* The old collapsed rail is replaced by the launcher — never show it. */
.fanorate-live-widget .fw__rail { display: none !important; }

.fanorate-live-widget /* The demo assumed a global `*{ box-sizing }` reset; scope it to the widget. */
.fanorate-live-widget .fw,
.fanorate-live-widget .fw *,
.fanorate-live-widget .fw *::before,
.fanorate-live-widget .fw *::after { box-sizing: border-box; }

/* ---- Reskin: demo vars -> theme semantic tokens (the "use site schema" bit).
   --font-display and --font-mono are intentionally NOT redefined here: the
   theme already declares them on :root, so the widget inherits the site's
   Anton / mono faces automatically. ---- */
.fanorate-live-widget .fw {
	--navy:      var(--color-accent);
	--navy-2:    var(--color-accent-light);
	--navy-deep: var(--color-accent-dark);
	--red:       var(--color-primary);
	--red-deep:  var(--color-primary-dark);
	--white:     #ffffff;
	--ok:        var(--color-success);
	--amber:     var(--color-warning);
	--info:      var(--color-info);
	--font:       var(--font-ui);
	--font-serif: var(--font-editorial);
	--ease: var(--ease-out);
	--dur:  var(--dur-base);
}
.fanorate-live-widget .fw.is-light { --fg: var(--text-primary); }

/* On phones the open drawer becomes a near-full-width bottom sheet. */
.fanorate-live-widget @media (max-width: 480px){
	/* Closed: launcher bubble stays in its corner. */
	.fanorate-live-widget,
	.fanorate-live-widget.flw-pos-left { left: auto; right: 16px; bottom: 12px; }
	.fanorate-live-widget.flw-pos-left { left: 16px; right: auto; }

	/* Open: the drawer becomes a full-width, full-height sheet. */
	#fanorate-live-widget.is-open { inset: 0; padding: 0; gap: 0; }
	#fanorate-live-widget.is-open .fw {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;       /* avoid the mobile address-bar gap where supported */
		max-height: none;
		border: 0;
		border-radius: 0;
	}
}

/* ============================================================ WIDGET SHELL ============================================================ */
.fanorate-live-widget .fw{
	--surface: rgba(255, 255, 255, 0.045);
	--surface-2: rgba(255, 255, 255, 0.07);
	--surface-h: rgba(255, 255, 255, 0.1);
	--line: rgba(255, 255, 255, 0.1);
	--line-2: rgba(255, 255, 255, 0.16);
	--fg: #ffffff;
	--fg-2: rgba(255, 255, 255, 0.64);
	--fg-3: rgba(255, 255, 255, 0.4);
	--chip: rgba(255, 255, 255, 0.06);
	--bg: linear-gradient(180deg, #0b2143 0%, #0a1d38 40%, #081830 100%);
	flex: 0 0 412px;
	width: 412px;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border-left: 1px solid var(--line-2);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.42);
	color: var(--fg);
	position: relative;
	z-index: 5;
	font-size: 14px;
	transition:
		flex-basis var(--dur) var(--ease),
		width var(--dur) var(--ease);
}
.fanorate-live-widget .fw.is-light{
	--surface: #ffffff;
	--surface-2: #f4f6fa;
	--surface-h: #eef1f7;
	--line: #e4e7ee;
	--line-2: #d7dbe5;
	--fg: #0a2240;
	--fg-2: #4a4a52;
	--fg-3: #8e8e99;
	--chip: #f0f3f8;
	--bg: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
	border-left: 1px solid #d7dbe5;
	box-shadow: -24px 0 60px rgba(10, 34, 64, 0.14);
}
.fanorate-live-widget .fw.is-compact{
	font-size: 13px;
}

/* ============================================================ HEADER ============================================================ */
.fanorate-live-widget .fw__head{
	flex: 0 0 auto;
	padding: 8px 12px 10px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--line-2);
}
.fanorate-live-widget .fw__bar{
	display: flex;
	align-items: center;
	gap: 9px;
}
.fanorate-live-widget .fw__logo{
	height: 42px;
	width: auto;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);
	flex-shrink: 0;
}
.fanorate-live-widget .fw.is-light .fw__logo{
	filter: none;
}
.fanorate-live-widget .fw__pill{
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 4px;
	background: rgba(79, 155, 255, 0.16);
	color: var(--info);
	white-space: nowrap;
}
.fanorate-live-widget .fw.is-light .fw__pill{
	color: #1f5fc4;
}
.fanorate-live-widget .fw__status{
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: var(--chip);
	color: var(--fg-2);
}
.fanorate-live-widget .fw__status .dot{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fg-3);
}
/* Not live (upcoming / "Today's Matches") — solid navy so it stays clearly
   visible against the light header (the old --chip nearly matched it). */
.fanorate-live-widget .fw__status[data-live="0"]{
	color: #fff;
	border-color: var(--color-accent);
	background: var(--color-accent);
}
.fanorate-live-widget .fw.is-light .fw__status[data-live="0"]{
	color: #fff;
}
.fanorate-live-widget .fw__status[data-live="0"] .dot{
	background: rgba(255, 255, 255, 0.75);
}
.fanorate-live-widget .fw__status[data-live="1"]{
	color: #fff;
	border-color: var(--color-primary);
	background: var(--color-primary);
}
.fanorate-live-widget .fw.is-light .fw__status[data-live="1"]{
	color: #fff;
}
.fanorate-live-widget .fw__status[data-live="1"] .dot{
	background: #fff;
	animation: flw-pulse 1.4s infinite; /* bip-bip pulse, same as the header LIVE badge */
}
.fanorate-live-widget .fw__collapse{
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: 7px;
	background: var(--chip);
	border: 1px solid var(--line-2);
	color: var(--fg-2);
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease);
}
.fanorate-live-widget .fw__collapse:hover{
	background: var(--surface-h);
	color: var(--fg);
}
.fanorate-live-widget .fw__collapse svg{
	width: 15px;
	height: 15px;
}

/* scorebox wrapper — contains switcher + scoreboard as one rounded card */
.fanorate-live-widget .fw__scorebox{
	margin-top: 10px;
	border-radius: 16px;
	padding: 10px;
	/* background: linear-gradient(
		135deg,
		#1a6fd4 0%,
		#1240a0 35%,
		#0d2d7a 65%,
		#3b1fa8 100%
	); */
	background: var(--color-accent, #092340);
	border: 1px solid rgba(255, 255, 255, 0.1);
	--fg: #ffffff;
	--fg-2: rgba(255, 255, 255, 0.64);
	--fg-3: rgba(255, 255, 255, 0.4);
	--chip: rgba(255, 255, 255, 0.06);
	--line: rgba(255, 255, 255, 0.1);
	--line-2: rgba(255, 255, 255, 0.16);
	--red: #22d4f5;
	--red-deep: #0fb8d8;
}
/* counter light-mode overrides for elements inside dark scorebox */
.fanorate-live-widget .fw__scorebox .fw__status[data-live="1"]{
	color: #9fe9c2;
	border-color: rgba(47, 210, 125, 0.4);
	background: rgba(47, 210, 125, 0.12);
}
.fanorate-live-widget .fw__scorebox .statechip[data-cls="live"]{
	color: #ff9aa6;
}
.fanorate-live-widget .fw__scorebox .statechip[data-cls="break"]{
	color: #f4c07a;
}

/* match switcher */
.fanorate-live-widget .switcher{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 0;
	margin-bottom: 9px; /* sits between the league meta line and the score card */
}
.fanorate-live-widget .switcher.is-hidden{
	display: none;
}
.fanorate-live-widget .mtab{
	flex: 0 0 calc(50% - 3px);
	min-width: 0;
	text-align: left;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 7px 9px;
	color: var(--fg);
	transition:
		border-color var(--dur) var(--ease),
		background var(--dur) var(--ease);
}
.fanorate-live-widget .mtab:hover{
	background: rgba(255, 255, 255, 0.08);
}
.fanorate-live-widget .mtab.is-active{
	border-color: var(--red);
	background: rgba(229, 37, 61, 0.08);
	box-shadow: 0 0 0 1px var(--red);
}
.fanorate-live-widget .mtab__hd{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}
.fanorate-live-widget .mtab__lg{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.fanorate-live-widget .mtab.is-active .mtab__lg{
	color: var(--red);
}
.fanorate-live-widget .mtab__livdot{
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ok);
	animation: ping 1.6s var(--ease) infinite;
	flex: 0 0 5px;
}
.fanorate-live-widget .mtab__st{
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fg-3);
	white-space: nowrap;
}
.fanorate-live-widget .mtab__sc-row{
	display: flex;
	align-items: center;
	gap: 6px;
}
.fanorate-live-widget .mtab__crest{
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	display: block;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.fanorate-live-widget .mtab__sc{
	font-size: 11px;
	font-weight: 900;
	color: var(--fg);
	letter-spacing: 0.01em;
	flex: 1 1 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* scoreboard */
.fanorate-live-widget .sb{
	margin-top: 7px;
}
.fanorate-live-widget .sb__meta{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--fg-3);
	margin-bottom: 7px;
}
.fanorate-live-widget .sb__meta .lg{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--red);
}
.fanorate-live-widget .sb__meta .lgdot{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
}
.fanorate-live-widget .sb__meta .lglogo{
	width: 14px;
	height: 14px;
	object-fit: contain;
	vertical-align: middle;
}
.fanorate-live-widget .sb__msep{
	color: rgba(255, 255, 255, 0.2);
	font-weight: 400;
	letter-spacing: 0;
}
.fanorate-live-widget .sb__card{
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	padding: 8px 8px 11px;
}
.fanorate-live-widget .sb__chip-row{
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}
.fanorate-live-widget .sb__hero{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 5px;
}
.fanorate-live-widget .sb__side{
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}
.fanorate-live-widget .sb__side--home{
	justify-content: flex-end;
}
.fanorate-live-widget .sb__side--away{
	justify-content: flex-start;
}
.fanorate-live-widget .sb__crest{
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 10px;
	color: #fff;
	letter-spacing: 0.02em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.fanorate-live-widget .sb__name{
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fg);
	flex: 1 1 0;
	min-width: 0;
	line-height: 1.25;
}
.fanorate-live-widget .sb__side--home .sb__name{
	text-align: right;
}
.fanorate-live-widget .sb__side:not(.is-lead) .sb__name{
	color: var(--fg-3);
}
.fanorate-live-widget .sb__nums{
	display: flex;
	align-items: center;
	gap: 5px;
}
.fanorate-live-widget .sb__score{
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	color: var(--fg);
	transition: color var(--dur) var(--ease);
}
.fanorate-live-widget .sb__score.dim{
	color: var(--fg-3);
}
.fanorate-live-widget .sb__score.bump{
	animation: bump 600ms var(--ease);
}
.fanorate-live-widget .sb__sep{
	font-family: var(--font-display);
	color: var(--fg-3);
	font-weight: 400;
	font-size: 22px;
}
.fanorate-live-widget .crest{
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 9px;
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 11px;
	color: #fff;
	letter-spacing: 0.02em;
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.fanorate-live-widget .fw.is-light .crest{
	box-shadow: 0 2px 8px rgba(10, 34, 64, 0.16);
}
@media (max-width: 360px) {
	.fanorate-live-widget .sb__score{
		font-size: 34px;
	}
	.fanorate-live-widget .sb__sep{
		font-size: 18px;
	}
	.fanorate-live-widget .sb__crest{
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
	}
	.fanorate-live-widget .sb__name{
		font-size: 9.5px;
	}
}

/* state chip */
.fanorate-live-widget .statechip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--chip);
	border: 1px solid var(--line-2);
	color: var(--fg-2);
}
.fanorate-live-widget .statechip .sdot{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fg-3);
}
.fanorate-live-widget .statechip[data-cls="live"]{
	color: #ff9aa6;
	border-color: rgba(229, 37, 61, 0.4);
	background: rgba(229, 37, 61, 0.12);
}
.fanorate-live-widget .fw.is-light .statechip[data-cls="live"]{
	color: var(--red-deep);
}
.fanorate-live-widget .statechip[data-cls="live"] .sdot{
	background: var(--red);
	animation: pulse 1.4s ease-in-out infinite;
}
.fanorate-live-widget .statechip[data-cls="break"]{
	color: #f4c07a;
	border-color: rgba(242, 160, 61, 0.4);
	background: rgba(242, 160, 61, 0.12);
}
.fanorate-live-widget .fw.is-light .statechip[data-cls="break"]{
	color: #9a6a1e;
}
.fanorate-live-widget .statechip[data-cls="break"] .sdot{
	background: var(--amber);
}
.fanorate-live-widget .statechip[data-cls="done"] .sdot{
	background: var(--info);
}
.fanorate-live-widget .statechip .clk{
	font-variant-numeric: tabular-nums;
}
.fanorate-live-widget .board__delaynote{
	display: none;
	margin-top: 10px;
	font-size: 10.5px;
	font-weight: 600;
	background: rgba(242, 160, 61, 0.14);
	border: 1px solid rgba(242, 160, 61, 0.32);
	color: #f6cd95;
	border-radius: 8px;
	padding: 5px 9px;
	text-align: center;
}
.fanorate-live-widget .fw.is-light .board__delaynote{
	color: #9a6a1e;
}
.fanorate-live-widget .fw__head[data-feed="delayed"] .board__delaynote{
	display: block;
}
.fanorate-live-widget .fw__head[data-feed="down"] .board__delaynote{
	display: block;
	background: rgba(229, 37, 61, 0.14);
	border-color: rgba(229, 37, 61, 0.34);
	color: #f6acb4;
}
.fanorate-live-widget .fw.is-light .fw__head[data-feed="down"] .board__delaynote{
	color: var(--red-deep);
}

/* ============================================================ AI HOOK BAR ============================================================ */
.fanorate-live-widget .aibar{
	flex: 0 0 auto;
	padding: 9px 14px 11px;
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .aibar__top{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 7px;
}
.fanorate-live-widget .aibar__top .ai{
	width: 13px;
	height: 13px;
	color: var(--red);
}
.fanorate-live-widget .aibar__top b{
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
	white-space: nowrap;
}
.fanorate-live-widget .aibar__top .note{
	margin-left: auto;
	font-size: 9px;
	font-weight: 700;
	color: var(--fg-3);
	white-space: nowrap;
}
.fanorate-live-widget .segbar{
	display: flex;
	height: 8px;
	border-radius: 5px;
	overflow: hidden;
	background: var(--line);
}
.fanorate-live-widget .segbar i{
	display: block;
	height: 100%;
	transition: width 500ms var(--ease);
}
.fanorate-live-widget .segbar .s-home{
	background: linear-gradient(90deg, var(--red), var(--red-deep));
}
.fanorate-live-widget .segbar .s-draw{
	background: var(--fg-3);
}
.fanorate-live-widget .segbar .s-away{
	background: var(--line-2);
}
.fanorate-live-widget .aibar__legend{
	display: flex;
	gap: 13px;
	margin-top: 7px;
}
.fanorate-live-widget .leg{
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: var(--fg-2);
}
.fanorate-live-widget .leg .lsw{
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: 0 0 auto;
}
.fanorate-live-widget .leg .lsw.s-home{
	background: var(--red);
}
.fanorate-live-widget .leg .lsw.s-draw{
	background: var(--fg-3);
}
.fanorate-live-widget .leg .lsw.s-away{
	background: var(--line-2);
}
.fanorate-live-widget .leg b{
	font-weight: 800;
	color: var(--fg);
}
.fanorate-live-widget .leg.lead b{
	color: #ff9aa6;
}
.fanorate-live-widget .fw.is-light .leg.lead b{
	color: var(--red);
}

/* ============================================================ BODY + TABS ============================================================ */
.fanorate-live-widget .btabs{
	flex: 0 0 auto;
	display: flex;
	gap: 2px;
	padding: 5px 6px 0;
	background: var(--surface);
	border-bottom: 1px solid var(--line-2);
	position: relative;
	z-index: 2;
}
.fanorate-live-widget .btab{
	flex: 1 1 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	color: var(--fg-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 2px 8px;
	font-family: inherit;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 9px 9px 0 0;
	position: relative;
	transition: color var(--dur) var(--ease);
}
.fanorate-live-widget .btab svg{
	width: 18px;
	height: 18px;
}
.fanorate-live-widget .btab:hover{
	color: var(--fg-2);
}
.fanorate-live-widget .btab.is-active{
	color: var(--fg);
}
.fanorate-live-widget .btab.is-active::before{
	content: "";
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 2.5px;
	border-radius: 3px;
	background: var(--red);
}
.fanorate-live-widget .btab .badge{
	position: absolute;
	top: 3px;
	right: 50%;
	margin-right: -16px;
	min-width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--red);
}

.fanorate-live-widget .body{
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 14px 14px;
}
.fanorate-live-widget .body::-webkit-scrollbar{
	width: 8px;
}
.fanorate-live-widget .body::-webkit-scrollbar-thumb{
	background: var(--line-2);
	border-radius: 8px;
}
.fanorate-live-widget .panel{
	display: none;
}
.fanorate-live-widget .panel.is-active{
	display: block;
	animation: fade 240ms var(--ease);
}
.fanorate-live-widget .panel__meta{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 13px;
	font-size: 11px;
	color: var(--fg-3);
	font-weight: 500;
}
.fanorate-live-widget .panel__meta .freshdot{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ok);
}
.fanorate-live-widget .panel__meta .sep{
	opacity: 0.4;
}

/* provenance footer */
.fanorate-live-widget .prov{
	margin-top: 16px;
	padding-top: 11px;
	border-top: 1px dashed var(--line-2);
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.45;
	color: var(--fg-3);
}
.fanorate-live-widget .prov svg{
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--info);
}
.fanorate-live-widget .prov b{
	color: var(--fg-2);
	font-weight: 600;
}

/* ---- LIVE (commentaries) ---- */
.fanorate-live-widget .cm{
	display: flex;
	flex-direction: column;
}
.fanorate-live-widget .cmi{
	display: flex;
	gap: 11px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .cmi:last-child{
	border-bottom: 0;
}
.fanorate-live-widget .cmi__min{
	flex: 0 0 auto;
	width: 30px;
	font-size: 12px;
	font-weight: 800;
	color: var(--fg-3);
	font-variant-numeric: tabular-nums;
	padding-top: 1px;
}
.fanorate-live-widget .cmi__body{
	flex: 1 1 auto;
	min-width: 0;
}
.fanorate-live-widget .cmi__tag{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 4px;
	margin-bottom: 5px;
}
.fanorate-live-widget .cmi__tag.goal{
	background: rgba(229, 37, 61, 0.16);
	color: #ff9aa6;
}
.fanorate-live-widget .fw.is-light .cmi__tag.goal{
	color: var(--red-deep);
}
.fanorate-live-widget .cmi__tag.key{
	background: rgba(79, 155, 255, 0.16);
	color: #a9cdff;
}
.fanorate-live-widget .fw.is-light .cmi__tag.key{
	color: #1f5fc4;
}
.fanorate-live-widget .cmi__txt{
	font-size: 13px;
	line-height: 1.5;
	color: var(--fg);
}
.fanorate-live-widget .cmi.is-min .cmi__txt{
	color: var(--fg-2);
	font-weight: 500;
}
.fanorate-live-widget .cmi.is-key{
}
.fanorate-live-widget .cmi.is-new{
	animation: slideIn 420ms var(--ease);
}

/* ---- COMMENTARIES SECTION ---- */
.fanorate-live-widget .cms{
	overflow: hidden;
}

/* Header: crests + title */
.fanorate-live-widget .cms__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 14px;
}
.fanorate-live-widget .cms__title{
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fg);
}
.fanorate-live-widget .cms__hcrest{
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	background-color: rgba(255, 255, 255, 0.1);
	display: grid;
	place-items: center;
	font-size: 9px;
	font-weight: 900;
	color: #fff;
	letter-spacing: 0.02em;
}
.fanorate-live-widget .fw.is-light .cms__hcrest{
	background-color: #e8ecf3;
	color: #0a2240;
}

/* Filter pills */
.fanorate-live-widget .cms__filters{
	display: flex;
	gap: 6px;
	padding: 10px 14px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.fanorate-live-widget .cms__filters::-webkit-scrollbar{
	display: none;
}
.fanorate-live-widget .cmf{
	flex-shrink: 0;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--fg-2);
	padding: 5px 13px;
	border-radius: 999px;
	white-space: nowrap;
	transition: all var(--dur) var(--ease);
}
.fanorate-live-widget .cmf:hover{
	background: var(--surface-h);
	color: var(--fg);
}
.fanorate-live-widget .cmf.on{
	background: var(--fg);
	border-color: var(--fg);
	color: #fff;
}
.fanorate-live-widget .fw.is-light .cmf.on{
	background: #0d1b34;
	border-color: #0d1b34;
}

/* Card list */
.fanorate-live-widget .cms__list{
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 6px 12px 12px;
}
.fanorate-live-widget .cms__empty{
	padding: 18px 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--fg-3);
	font-weight: 500;
}

/* Individual commentary card */
.fanorate-live-widget .cmc{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 11px 0;
	position: relative;
}

/* Left highlight for important/goal */
.fanorate-live-widget .cmc.is-important .cmc__badge,
.fanorate-live-widget .cmc.is-goal .cmc__badge{
	outline: 2px solid rgba(229, 37, 61, 0.35);
	outline-offset: 1px;
}
.fanorate-live-widget .cmc.is-goal .cmc__badge{
	outline-color: rgba(201, 150, 11, 0.45);
}

/* Minute badge circle */
.fanorate-live-widget .cmc__badge{
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #8b93d0, #5c67b8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	line-height: 1.2;
	flex-shrink: 0;
}
.fanorate-live-widget .cmc__badge svg{
	width: 16px;
	height: 16px;
}
.fanorate-live-widget .cmc.is-update .cmc__badge{
	background: transparent;
	border: 1.5px solid var(--line-2);
	color: var(--fg-3);
}
.fanorate-live-widget .cmc.is-end .cmc__badge{
	background: linear-gradient(135deg, #f49ea8, #e5253d);
}
.fanorate-live-widget .cmc.is-goal .cmc__badge{
	background: linear-gradient(135deg, #e8c34a, #c9960b);
}

/* Card body */
.fanorate-live-widget .cmc__body{
	flex: 1 1 auto;
	min-width: 0;
}
.fanorate-live-widget .cmc__type{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
.fanorate-live-widget .cmc__icon{
	display: inline-flex;
	align-items: center;
}
.fanorate-live-widget .cmc__icon svg{
	width: 14px;
	height: 14px;
}
.fanorate-live-widget .cmc__label{
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.01em;
}
.fanorate-live-widget .cmc__text{
	font-size: 13px;
	line-height: 1.48;
	color: var(--fg-2);
}
.fanorate-live-widget .fw.is-light .cmc__text{
	color: #3a3f4b;
}

/* Per-type icon + label colours */
.fanorate-live-widget .cmc.is-update .cmc__icon svg,
.fanorate-live-widget .cmc.is-update .cmc__label{
	color: var(--fg-3);
}
.fanorate-live-widget .cmc.is-end .cmc__icon svg,
.fanorate-live-widget .cmc.is-end .cmc__label{
	color: #e5253d;
}
.fanorate-live-widget .cmc.is-goal .cmc__icon svg,
.fanorate-live-widget .cmc.is-goal .cmc__label{
	color: #c9960b;
}
.fanorate-live-widget .fw.is-light .cmc.is-goal .cmc__icon svg,
.fanorate-live-widget .fw.is-light .cmc.is-goal .cmc__label{
	color: #a47800;
}
.fanorate-live-widget .cmc.is-corner .cmc__icon svg,
.fanorate-live-widget .cmc.is-corner .cmc__label{
	color: #1a3a6e;
}
.fanorate-live-widget .fw.is-light .cmc.is-corner .cmc__icon svg,
.fanorate-live-widget .fw.is-light .cmc.is-corner .cmc__label{
	color: #1a3a6e;
}
.fanorate-live-widget .cmc.is-shot .cmc__icon svg,
.fanorate-live-widget .cmc.is-shot .cmc__label{
	color: #3d63d8;
}
.fanorate-live-widget .cmc.is-card .cmc__icon svg,
.fanorate-live-widget .cmc.is-card .cmc__label{
	color: #d89a00;
}
.fanorate-live-widget .cmc.is-sub .cmc__icon svg,
.fanorate-live-widget .cmc.is-sub .cmc__label{
	color: #24b870;
}
.fanorate-live-widget .cmc.is-key .cmc__icon svg,
.fanorate-live-widget .cmc.is-key .cmc__label{
	color: var(--info);
}

/* ---- STATS ---- */
.fanorate-live-widget .subseg{
	display: flex;
	background: var(--chip);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 3px;
	gap: 2px;
	margin-bottom: 14px;
}
.fanorate-live-widget .subseg button{
	flex: 1 1 0;
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--fg-2);
	font-size: 11.5px;
	font-weight: 700;
	padding: 7px 6px;
	border-radius: 6px;
	transition: all var(--dur) var(--ease);
}
.fanorate-live-widget .subseg button.on{
	background: var(--red);
	color: #fff;
}
.fanorate-live-widget .statwrap{
	display: none;
}
.fanorate-live-widget .statwrap.on{
	display: block;
}

/* stat group label */
.fanorate-live-widget .sc-grp{
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-3);
	padding: 10px 0 4px;
}

/* stat card — thin line style, no box */
.fanorate-live-widget .sc{
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .sc:last-of-type{
	border-bottom: none;
}
.fanorate-live-widget .sc__row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0 5px;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}
.fanorate-live-widget .sc__val-h{
	font-size: 20px;
	font-weight: 900;
	min-width: 40px;
	line-height: 1;
}
.fanorate-live-widget .sc__val-a{
	font-size: 20px;
	font-weight: 900;
	min-width: 40px;
	text-align: right;
	line-height: 1;
}
.fanorate-live-widget .sc__label{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: 1;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-3);
	text-align: center;
}
.fanorate-live-widget .sc__label svg{
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	color: var(--fg-3);
}
.fanorate-live-widget .sc__bar{
	display: flex;
	height: 3px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--line);
	margin-bottom: 8px;
}
.fanorate-live-widget .sc__fill-h{
	background: #e5253d;
	transition: width 500ms var(--ease);
	border-radius: 2px 0 0 2px;
}
.fanorate-live-widget .sc__fill-a{
	background: #2aa8e0;
	margin-left: auto;
	transition: width 500ms var(--ease);
	border-radius: 0 2px 2px 0;
}

/* possession card */
.fanorate-live-widget .sc--poss{
	border-bottom: 1px solid var(--line);
	margin-bottom: 0;
}
.fanorate-live-widget .sc-poss__top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0 0;
	gap: 6px;
}
.fanorate-live-widget .sc-poss__team{
	display: flex;
	align-items: center;
	gap: 5px;
}
.fanorate-live-widget .sc-poss__team--r{
	flex-direction: row-reverse;
}
.fanorate-live-widget .sc-poss__logo{
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
	border-radius: 3px;
}
.fanorate-live-widget .sc-poss__logo--fb{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	font-weight: 800;
	color: #fff;
	border-radius: 50%;
}
.fanorate-live-widget .sc-poss__dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.fanorate-live-widget .sc-poss__mid{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--chip);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
}
.fanorate-live-widget .sc-poss__mid svg{
	width: 18px;
	height: 18px;
	color: var(--fg-3);
}
.fanorate-live-widget .sc-poss__pcts{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 0 8px;
}
.fanorate-live-widget .sc-poss__pct{
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
}
.fanorate-live-widget .sc-poss__lbl{
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-3);
	text-align: center;
}

/* weather strip */
.fanorate-live-widget .stat-weather{
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	padding: 10px 0 4px;
	border-top: 1px solid var(--line);
	margin-top: 4px;
}
.fanorate-live-widget .sw__item{
	font-size: 11px;
	font-weight: 600;
	color: var(--fg-2);
}
.fanorate-live-widget .sw__item--desc{
	color: var(--fg-3);
	font-weight: 500;
}

/* sidelined players */
.fanorate-live-widget .si__cols{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-bottom: 8px;
}
.fanorate-live-widget .si__col--away .si__p{
	flex-direction: row-reverse;
}
.fanorate-live-widget .si__col--away .si__info{
	align-items: flex-end;
}
.fanorate-live-widget .si__p{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 0;
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .si__p:last-child{
	border-bottom: none;
}
.fanorate-live-widget .si__av{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--line-2);
}
.fanorate-live-widget .si__av--fb{
	background: var(--chip);
	display: flex;
	align-items: center;
	justify-content: center;
}
.fanorate-live-widget .si__av--fb svg{
	width: 16px;
	height: 16px;
}
.fanorate-live-widget .si__info{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.fanorate-live-widget .si__name{
	font-size: 10px;
	font-weight: 700;
	color: var(--fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fanorate-live-widget .si__type{
	font-size: 9px;
	color: var(--amber);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fanorate-live-widget .si__none{
	font-size: 10px;
	color: var(--fg-3);
	font-style: italic;
}

/* ---- EVENTS TIMELINE ---- */
.fanorate-live-widget .evi2-hdr{
	display: flex;
	justify-content: center;
	padding: 2px 0 14px;
}
.fanorate-live-widget .evi2-hdr__pill{
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 18px;
	border-radius: 20px;
	background: var(--chip);
	border: 1px solid var(--line-2);
	color: var(--fg-2);
}
.fanorate-live-widget .evi2-tl{
	padding: 0 0 8px;
}

/* Row grid: home | centre | away */
.fanorate-live-widget .evi2-row{
	display: grid;
	grid-template-columns: 1fr 46px 1fr;
	align-items: stretch;
	gap: 4px;
	margin-bottom: 4px;
}
.fanorate-live-widget .evi2-prow{
	margin: 8px 0 4px;
}
.fanorate-live-widget .evi2-prow .evi2-col--home{
	justify-content: flex-end;
	align-items: center;
}

/* Period pill — sits in the home column, right-aligned */
.fanorate-live-widget .evi2-period__pill{
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	background: #0d1b34;
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

/* Centre column: line above + below the badge */
.fanorate-live-widget .evi2-mid{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.fanorate-live-widget .evi2-mid::before,
.fanorate-live-widget .evi2-mid::after{
	content: "";
	width: 2px;
	background: var(--line-2);
	flex: 1;
	min-height: 6px;
}
.fanorate-live-widget .evi2-min{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background: #0d1b34;
	border: 1.5px solid #2aa8e0;
	line-height: 1;
	white-space: nowrap;
}
.fanorate-live-widget .fw.is-light .evi2-min{
	background: #1a3060;
}
.fanorate-live-widget .evi2-min--empty{
	width: 40px;
	height: 8px;
	flex-shrink: 0;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
}

/* Side columns */
.fanorate-live-widget .evi2-col{
	display: flex;
	min-width: 0;
}
.fanorate-live-widget .evi2-col--home{
	justify-content: flex-end;
}
.fanorate-live-widget .evi2-col--away{
	justify-content: flex-start;
}

/* Cards */
.fanorate-live-widget .evi2-card{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 9px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	width: 100%;
	min-width: 0;
	overflow: hidden;
}
.fanorate-live-widget .fw.is-light .evi2-card{
	background: #fff;
	border-color: #e6e9f3;
	box-shadow: 0 1px 4px rgba(10, 34, 64, 0.07);
}
.fanorate-live-widget .evi2-card--home{
	border-left: 3px solid var(--ev-ac, var(--line-2));
}
.fanorate-live-widget .evi2-card--away{
	flex-direction: row-reverse;
	border-right: 3px solid var(--ev-ac, var(--line-2));
}
.fanorate-live-widget .evi2-card.t-goal{
	--ev-ac: var(--amber);
}
.fanorate-live-widget .evi2-card.t-yellowcard{
	--ev-ac: #f2a03d;
}
.fanorate-live-widget .evi2-card.t-redcard{
	--ev-ac: var(--red);
}
.fanorate-live-widget .evi2-card.t-substitution{
	--ev-ac: #22c55e;
}
.fanorate-live-widget .evi2-card.t-var{
	--ev-ac: var(--info);
}

/* Event type icon badge */
.fanorate-live-widget .evi2-badge{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fanorate-live-widget .evi2-badge svg{
	width: 12px;
	height: 12px;
}
.fanorate-live-widget .evi2-badge--goal{
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}
.fanorate-live-widget .evi2-badge--goal svg{
	width: 17px;
	height: 17px;
}
.fanorate-live-widget .evi2-badge--yellow{
	background: rgba(242, 160, 61, 0.18);
}
.fanorate-live-widget .evi2-badge--yellow svg{
	width: 9px;
	height: 13px;
}
.fanorate-live-widget .evi2-badge--red{
	background: rgba(229, 37, 61, 0.18);
}
.fanorate-live-widget .evi2-badge--red svg{
	width: 9px;
	height: 13px;
}
.fanorate-live-widget .evi2-badge--subout{
	background: rgba(248, 113, 113, 0.15);
	color: #f87171;
}
.fanorate-live-widget .evi2-badge--subin{
	background: rgba(74, 222, 128, 0.15);
	color: #4ade80;
}
.fanorate-live-widget .evi2-badge--var{
	background: rgba(96, 165, 250, 0.15);
	color: #60a5fa;
}
.fanorate-live-widget .evi2-badge--default{
	background: var(--chip);
}

/* Player avatar */
.fanorate-live-widget .evi2-av{
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 900;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.fanorate-live-widget .evi2-av__img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Card text */
.fanorate-live-widget .evi2-body{
	flex: 1;
	min-width: 0;
}
.fanorate-live-widget .evi2-card--away .evi2-body{
	text-align: right;
}
.fanorate-live-widget .evi2-name{
	font-size: 12px;
	font-weight: 700;
	color: var(--fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fanorate-live-widget .evi2-type{
	font-size: 9.5px;
	color: var(--fg-3);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fanorate-live-widget .evi2-score{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--amber);
	color: #000;
	font-size: 8px;
	font-weight: 800;
	border-radius: 3px;
	padding: 1px 4px;
	margin-left: 4px;
	vertical-align: middle;
}

@media (max-width: 340px) {
	.fanorate-live-widget .evi2-row{
		grid-template-columns: 1fr 38px 1fr;
	}
	.fanorate-live-widget .evi2-min{
		width: 34px;
		height: 34px;
		font-size: 8px;
	}
	.fanorate-live-widget .evi2-card{
		padding: 6px 7px;
		gap: 4px;
	}
	.fanorate-live-widget .evi2-av{
		width: 30px;
		height: 30px;
	}
	.fanorate-live-widget .evi2-badge{
		width: 24px;
		height: 24px;
	}
}

/* ---- Commentary Important badge ---- */
.fanorate-live-widget .cmc__imp{
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(47, 210, 125, 0.16);
	color: #157a47;
	border: 1px solid rgba(47, 210, 125, 0.3);
	white-space: nowrap;
	flex-shrink: 0;
}
.fanorate-live-widget .fw:not(.is-light) .cmc__imp{
	color: #9fe9c2;
	border-color: rgba(47, 210, 125, 0.4);
	background: rgba(47, 210, 125, 0.12);
}

/* ---- AI ---- */
.fanorate-live-widget .card{
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .card:first-child{
	padding-top: 2px;
}
.fanorate-live-widget .card__title{
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-2);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.fanorate-live-widget .card__title::before{
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--red);
	flex: 0 0 auto;
}
.fanorate-live-widget .card__title .src{
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-3);
}
.fanorate-live-widget .aisum{
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1.4;
	color: var(--fg);
}
.fanorate-live-widget .win__score{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
.fanorate-live-widget .win__k{
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.fanorate-live-widget .win__v{
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
}
.fanorate-live-widget .mom{
	position: relative;
	height: 58px;
	margin-top: 4px;
}
.fanorate-live-widget .mom svg{
	width: 100%;
	height: 100%;
	display: block;
}
.fanorate-live-widget .mom__mid{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--line-2);
}
.fanorate-live-widget .mom__lbls{
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--fg-3);
	font-weight: 700;
	margin-top: 5px;
}
.fanorate-live-widget .mom__tilt{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--fg-2);
}
.fanorate-live-widget .mom__tilt b{
	color: var(--fg);
	font-weight: 800;
}
.fanorate-live-widget .locked{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	opacity: 0.9;
}
.fanorate-live-widget .locked__icn{
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: var(--chip);
	border: 1px dashed var(--line-2);
	color: var(--fg-3);
}
.fanorate-live-widget .locked__icn svg{
	width: 16px;
	height: 16px;
}
.fanorate-live-widget .locked__txt b{
	font-size: 13px;
	font-weight: 800;
	color: var(--fg-2);
}
.fanorate-live-widget .locked__txt small{
	display: block;
	font-size: 11px;
	color: var(--fg-3);
	margin-top: 2px;
}
.fanorate-live-widget .locked__tag{
	margin-left: auto;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--amber);
	border: 1px solid rgba(242, 160, 61, 0.4);
	background: rgba(242, 160, 61, 0.12);
	padding: 3px 7px;
	border-radius: 999px;
	white-space: nowrap;
}
.fanorate-live-widget .disclaimer{
	margin-top: 12px;
	font-size: 10.5px;
	color: var(--fg-3);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.fanorate-live-widget .disclaimer svg{
	width: 12px;
	height: 12px;
}

/* ---- SETTINGS ---- */
.fanorate-live-widget .set-group{
	margin-bottom: 18px;
}
.fanorate-live-widget .set-group__h{
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-2);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.fanorate-live-widget .set-group__h svg{
	width: 13px;
	height: 13px;
	color: var(--red);
}
.fanorate-live-widget .set-group--play{
	border: 1px solid rgba(79, 155, 255, 0.3);
	background: rgba(79, 155, 255, 0.06);
	border-radius: 12px;
	padding: 13px;
}
.fanorate-live-widget .fw.is-light .set-group--play{
	background: rgba(79, 155, 255, 0.07);
}
.fanorate-live-widget .set-group--play .set-group__h{
	color: var(--info);
}
.fanorate-live-widget .set-group--play .set-group__h svg{
	color: var(--info);
}
.fanorate-live-widget .srcbtns{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fanorate-live-widget .srcbtn{
	display: flex;
	align-items: center;
	gap: 11px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	border-radius: 10px;
	padding: 10px 12px;
	color: var(--fg);
	transition:
		border-color var(--dur) var(--ease),
		background var(--dur) var(--ease);
}
.fanorate-live-widget .srcbtn:hover{
	background: var(--surface-h);
}
.fanorate-live-widget .srcbtn.on{
	border-color: var(--red);
	background: rgba(229, 37, 61, 0.1);
}
.fanorate-live-widget .srcbtn__icn{
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: var(--chip);
	color: var(--fg-2);
}
.fanorate-live-widget .srcbtn__icn svg{
	width: 16px;
	height: 16px;
}
.fanorate-live-widget .srcbtn b{
	font-size: 13px;
	font-weight: 800;
	display: block;
}
.fanorate-live-widget .srcbtn small{
	font-size: 11px;
	color: var(--fg-3);
}
.fanorate-live-widget .srcbtn__lock{
	margin-left: auto;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--amber);
	border: 1px solid rgba(242, 160, 61, 0.4);
	background: rgba(242, 160, 61, 0.12);
	padding: 3px 7px;
	border-radius: 999px;
}
.fanorate-live-widget .row{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .row:last-child{
	border-bottom: 0;
}
.fanorate-live-widget .row__lbl{
	font-size: 13px;
	font-weight: 600;
}
.fanorate-live-widget .row__lbl small{
	display: block;
	font-size: 11px;
	color: var(--fg-3);
	font-weight: 500;
	margin-top: 1px;
}
.fanorate-live-widget .row__ctl{
	margin-left: auto;
}
.fanorate-live-widget .sw{
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: var(--line-2);
	border: 0;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
	flex: 0 0 auto;
}
.fanorate-live-widget .sw::after{
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform var(--dur) var(--ease);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.fanorate-live-widget .sw.on{
	background: var(--ok);
}
.fanorate-live-widget .sw.on::after{
	transform: translateX(18px);
}
.fanorate-live-widget .seg{
	display: flex;
	background: var(--chip);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 3px;
	gap: 2px;
	flex-wrap: wrap;
}
.fanorate-live-widget .seg button{
	flex: 1 1 0;
	min-width: 0;
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--fg-2);
	font-size: 11px;
	font-weight: 700;
	padding: 7px 5px;
	border-radius: 6px;
	transition: all var(--dur) var(--ease);
	white-space: nowrap;
}
.fanorate-live-widget .seg button.on{
	background: var(--red);
	color: #fff;
}
.fanorate-live-widget .statesel{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}
.fanorate-live-widget .statesel button{
	font-family: inherit;
	cursor: pointer;
	font-size: 10.5px;
	font-weight: 700;
	padding: 8px 4px;
	border-radius: 7px;
	border: 1px solid var(--line-2);
	background: var(--surface-2);
	color: var(--fg-2);
	transition: all var(--dur) var(--ease);
}
.fanorate-live-widget .statesel button.on{
	border-color: var(--red);
	background: rgba(229, 37, 61, 0.12);
	color: var(--fg);
}
.fanorate-live-widget .avail{
	display: flex;
	flex-direction: column;
}
.fanorate-live-widget .avail__i{
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
	font-size: 12px;
}
.fanorate-live-widget .avail__i:last-child{
	border-bottom: 0;
}
.fanorate-live-widget .avail__dot{
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border-radius: 50%;
	display: grid;
	place-items: center;
}
.fanorate-live-widget .avail__dot svg{
	width: 9px;
	height: 9px;
}
.fanorate-live-widget .avail__i.yes .avail__dot{
	background: rgba(47, 210, 125, 0.18);
	color: var(--ok);
}
.fanorate-live-widget .avail__i.no .avail__dot{
	background: var(--chip);
	color: var(--fg-3);
}
.fanorate-live-widget .avail__lbl{
	flex: 1 1 auto;
	color: var(--fg);
	font-weight: 600;
}
.fanorate-live-widget .avail__i.no .avail__lbl{
	color: var(--fg-3);
}
.fanorate-live-widget .avail__tag{
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--amber);
}
.fanorate-live-widget .leaguechips{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.fanorate-live-widget .lchip{
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--chip);
	border: 1px solid var(--line-2);
	color: var(--fg-2);
}
.fanorate-live-widget .lchip b{
	color: var(--fg);
}
.fanorate-live-widget .btn{
	font-family: inherit;
	cursor: pointer;
	border: 0;
	border-radius: 8px;
	font-weight: 800;
	font-size: 12.5px;
	padding: 10px 14px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	transition:
		transform var(--dur) var(--ease),
		filter var(--dur) var(--ease),
		background var(--dur) var(--ease);
}
.fanorate-live-widget .btn svg{
	width: 15px;
	height: 15px;
}
.fanorate-live-widget .btn--primary{
	background: var(--red);
	color: #fff;
}
.fanorate-live-widget .btn--primary:hover{
	filter: brightness(0.93);
}
.fanorate-live-widget .btn--primary:active{
	transform: scale(0.98);
}
.fanorate-live-widget .btn--ghost{
	background: var(--surface-2);
	color: var(--fg);
	border: 1px solid var(--line-2);
}
.fanorate-live-widget .btn--ghost:hover{
	background: var(--surface-h);
}
.fanorate-live-widget .set-actions{
	display: flex;
	gap: 9px;
	margin-top: 6px;
}
.fanorate-live-widget .set-actions .btn{
	width: auto;
	flex: 1 1 0;
}
.fanorate-live-widget .notif-cta{
	padding: 2px 0 11px;
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .notif-cta__head{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
}
.fanorate-live-widget .notif-cta__bell{
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(229, 37, 61, 0.14);
	color: var(--red);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.fanorate-live-widget .notif-cta__bell svg{
	width: 19px;
	height: 19px;
}
.fanorate-live-widget .notif-cta__head b{
	font-size: 14px;
	font-weight: 800;
}
.fanorate-live-widget .notif-cta p{
	font-size: 12px;
	line-height: 1.45;
	color: var(--fg-2);
	margin-bottom: 11px;
}
.fanorate-live-widget .notif-state{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	padding: 9px 12px;
	border-radius: 8px;
}
.fanorate-live-widget .notif-state svg{
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}
.fanorate-live-widget .notif-state.enabled{
	background: rgba(47, 210, 125, 0.12);
	color: var(--ok);
	border: 1px solid rgba(47, 210, 125, 0.3);
}
.fanorate-live-widget .fw.is-light .notif-state.enabled{
	color: #157a47;
}
.fanorate-live-widget .notif-state small{
	display: block;
	font-weight: 500;
	color: var(--fg-3);
	font-size: 10.5px;
	margin-top: 1px;
}
.fanorate-live-widget .notif-state .col{
	display: flex;
	flex-direction: column;
}
.fanorate-live-widget .notif-cta.state-enabled .notif-cta__inner-off{
	display: none;
}
.fanorate-live-widget .notif-cta__inner-on{
	display: none;
}
.fanorate-live-widget .notif-cta.state-enabled .notif-cta__inner-on{
	display: block;
}

/* ============================================================ COLLAPSED RAIL + FLYOUT ============================================================ */
.fanorate-live-widget .fw.is-collapsed{
	flex: 0 0 66px;
	width: 66px;
}
.fanorate-live-widget .fw.is-collapsed .fw__head,
.fanorate-live-widget .fw.is-collapsed .aibar,
.fanorate-live-widget .fw.is-collapsed .body,
.fanorate-live-widget .fw.is-collapsed .btabs{
	display: none;
}
.fanorate-live-widget .fw__rail{
	display: none;
}
.fanorate-live-widget .fw.is-collapsed .fw__rail{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 12px 0 14px;
	background: var(--bg);
	color: var(--fg);
}
.fanorate-live-widget .rail__btn{
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	color: var(--fg-2);
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease);
}
.fanorate-live-widget .rail__btn:hover{
	background: var(--surface-h);
	color: var(--fg);
}
.fanorate-live-widget .rail__btn svg{
	width: 17px;
	height: 17px;
}
.fanorate-live-widget .rail__mark{
	width: 34px;
	height: 34px;
	border-radius: 8px;
	margin-top: 14px;
	flex: 0 0 auto;
	background: linear-gradient(135deg, var(--red), var(--red-deep));
	display: grid;
	place-items: center;
	box-shadow: 0 4px 12px rgba(229, 37, 61, 0.4);
}
.fanorate-live-widget .rail__mark svg{
	width: 18px;
	height: 18px;
	color: #fff;
}
.fanorate-live-widget .rail__cards{
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 0 4px;
}
.fanorate-live-widget .rail__cards::-webkit-scrollbar{
	width: 0;
}
.fanorate-live-widget .rail__card{
	flex: 0 0 auto;
	width: 52px;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 6px 0 7px;
	transition:
		border-color var(--dur) var(--ease),
		background var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}
.fanorate-live-widget .rail__card:hover{
	border-color: var(--line-2);
	background: var(--surface-h);
}
.fanorate-live-widget .rail__card.is-active{
	border-color: var(--red);
	background: rgba(229, 37, 61, 0.06);
	box-shadow: inset 0 0 0 1px var(--red);
}
.fanorate-live-widget .rail__live{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--red);
}
.fanorate-live-widget .rail__live .pulse{
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--red);
	animation: pulse 1.4s ease-in-out infinite;
}
.fanorate-live-widget .rail__live.brk{
	color: var(--amber);
}
.fanorate-live-widget .rail__live.brk .pulse{
	background: var(--amber);
	animation: none;
}
.fanorate-live-widget .rail__live.done{
	color: var(--info);
}
.fanorate-live-widget .rail__live.done .pulse{
	background: var(--info);
	animation: none;
}
.fanorate-live-widget .rail__min{
	margin-top: 1px;
	font-size: 9.5px;
	font-weight: 800;
	color: var(--fg-2);
	font-variant-numeric: tabular-nums;
	min-height: 11px;
}
.fanorate-live-widget .rail__divline{
	width: 30px;
	height: 1px;
	background: var(--line-2);
	margin: 5px 0;
}
.fanorate-live-widget .rail__score{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.fanorate-live-widget .rail__sc{
	display: flex;
	align-items: center;
	gap: 5px;
}
.fanorate-live-widget .rail__sc .mc{
	width: 12px;
	height: 12px;
	border-radius: 4px;
}
.fanorate-live-widget .rail__sc b{
	font-size: 15px;
	font-weight: 900;
	color: var(--fg);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.fanorate-live-widget .rail__sc.is-lead b{
	color: var(--red);
}
.fanorate-live-widget .rail__sep{
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--line-2);
}
.fanorate-live-widget .rail__tabs{
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	padding-top: 14px;
}
.fanorate-live-widget .rail__tab{
	width: 42px;
	height: 42px;
	cursor: pointer;
	display: grid;
	place-items: center;
	position: relative;
	border-radius: 11px;
	background: transparent;
	border: 0;
	color: var(--fg-3);
	transition:
		color var(--dur) var(--ease),
		background var(--dur) var(--ease);
}
.fanorate-live-widget .rail__tab:hover{
	color: var(--fg);
	background: var(--surface-h);
}
.fanorate-live-widget .rail__tab.is-active{
	color: var(--red);
	background: rgba(229, 37, 61, 0.12);
}
.fanorate-live-widget .rail__tab.is-active::before{
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 22px;
	border-radius: 3px;
	background: var(--red);
}
.fanorate-live-widget .rail__tab svg{
	width: 20px;
	height: 20px;
}
/* flyout */
.fanorate-live-widget .fly-head{
	display: none;
}
.fanorate-live-widget .fw.is-collapsed.has-flyout .body{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 66px;
	width: 352px;
	background: var(--bg);
	border-left: 1px solid var(--line-2);
	box-shadow: -22px 0 54px rgba(0, 0, 0, 0.3);
	z-index: 20;
	padding-top: 0;
	animation: flyIn 200ms var(--ease);
}
.fanorate-live-widget .fw.is-light.is-collapsed.has-flyout .body{
	box-shadow: -22px 0 54px rgba(10, 10, 10, 0.13);
}
.fanorate-live-widget .fw.is-collapsed.has-flyout .fly-head{
	display: flex;
	align-items: center;
	gap: 8px;
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 13px 14px 11px;
	margin: 0 -14px 8px;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.fanorate-live-widget .fly-head__title{
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fg);
}
.fanorate-live-widget .fly-head__sp{
	margin-left: auto;
}
.fanorate-live-widget .fly-head__btn{
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	cursor: pointer;
	border-radius: 7px;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	color: var(--fg-2);
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease);
}
.fanorate-live-widget .fly-head__btn:hover{
	background: var(--surface-h);
	color: var(--fg);
}
.fanorate-live-widget .fly-head__btn svg{
	width: 15px;
	height: 15px;
}

/* ---------- animations ---------- */
.fanorate-live-widget @keyframes ping{
	0% {
		box-shadow: 0 0 0 0 rgba(47, 210, 125, 0.5);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(47, 210, 125, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(47, 210, 125, 0);
	}
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.45;
		transform: scale(0.78);
	}
}
@keyframes fade {
	from {
		transform: translateY(5px);
	}
	to {
		transform: translateY(0);
	}
}
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes bump {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.35);
		color: var(--red);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes flyIn {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.fanorate-live-widget *{
		animation: none !important;
	}
}

@media (max-width: 760px) {
	.fanorate-live-widget .host{
		display: none;
	}
	.fanorate-live-widget .fw{
		flex: 1 1 auto;
		width: 100%;
		border-left: 0;
	}
}

/* ============================================================ DATA-MODE INDICATOR & EMPTY STATE (POC additions) ============================================================ */
/* The header pill (#srcPill) now states the active data mode so it's
   always clear whether you're looking at Live, Recent, or Sample data. */
.fanorate-live-widget .fw__pill[data-mode]{
	letter-spacing: 0.09em;
}
.fanorate-live-widget .fw__pill[data-mode="live"]{
	background: rgba(47, 210, 125, 0.16);
	color: #157a47;
}
.fanorate-live-widget .fw__pill[data-mode="recent"]{
	background: rgba(242, 160, 61, 0.18);
	color: #9a6a1e;
}
.fanorate-live-widget .fw__pill[data-mode="sample"]{
	background: rgba(142, 142, 153, 0.2);
	color: #5b606b;
}
.fanorate-live-widget .fw__pill[data-error="1"]{
	background: rgba(229, 37, 61, 0.14);
	color: var(--red-deep);
}

/* Settings: hint under the Data mode selector */
.fanorate-live-widget .modehint{
	margin-top: 9px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--fg-2);
	display: flex;
	gap: 7px;
	align-items: flex-start;
}
.fanorate-live-widget .modehint b{
	color: var(--fg);
	font-weight: 800;
}

/* Empty / error notice when a mode returns no match (no auto fallback) */
.fanorate-live-widget .empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 34px 18px;
}
.fanorate-live-widget .empty__icn{
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: var(--chip);
	border: 1px solid var(--line-2);
	color: var(--fg-3);
}
.fanorate-live-widget .empty__icn svg{
	width: 22px;
	height: 22px;
}
.fanorate-live-widget .empty__t{
	font-size: 14px;
	font-weight: 800;
	color: var(--fg);
}
.fanorate-live-widget .empty__s{
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fg-2);
	max-width: 280px;
}
.fanorate-live-widget .empty__btn{
	font-family: inherit;
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	background: var(--red);
	border: 0;
	border-radius: 8px;
	padding: 9px 15px;
	margin-top: 2px;
}

/* ============================================================ LINEUP PITCH ============================================================ */
.fanorate-live-widget .lu-pitch{
	background: repeating-linear-gradient(
		180deg,
		#1a7a1a 0px,
		#1a7a1a 22px,
		#1f8e1f 22px,
		#1f8e1f 44px
	);
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
	padding: 0 8px 0;
	border: 1px solid rgba(0, 0, 0, 0.14);
}
/* goal bars */
.fanorate-live-widget .lu-pitch__goal{
	display: flex;
	justify-content: center;
}
.fanorate-live-widget .lu-pitch__goal > div{
	width: 68px;
	height: 12px;
	border: 2px solid rgba(255, 255, 255, 0.62);
	background: rgba(255, 255, 255, 0.07);
}
.fanorate-live-widget .lu-pitch__goal--top{
	padding: 4px 0 0;
}
.fanorate-live-widget .lu-pitch__goal--top > div{
	border-bottom: none;
	border-radius: 3px 3px 0 0;
}
.fanorate-live-widget .lu-pitch__goal--bot{
	padding: 0 0 4px;
}
.fanorate-live-widget .lu-pitch__goal--bot > div{
	border-top: none;
	border-radius: 0 0 3px 3px;
}
/* team strips above/below the pitch */
.fanorate-live-widget .lup-strip{
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
}
.fanorate-live-widget .lup-strip--home{
	flex-direction: row;
}
.fanorate-live-widget .lup-strip--away{
	flex-direction: row-reverse;
}
.fanorate-live-widget .lup-strip__crest{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
	background-size: contain !important;
}
.fanorate-live-widget .lup-strip__name{
	font-size: 11px;
	font-weight: 700;
	color: var(--fg);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex: 1;
}
.fanorate-live-widget .lup-strip--away .lup-strip__name{
	text-align: right;
}
.fanorate-live-widget .lup-strip__form{
	font-size: 10px;
	font-weight: 600;
	color: var(--fg-3);
	background: var(--chip);
	border-radius: 4px;
	padding: 2px 7px;
}
.fanorate-live-widget .lup-half{
	padding: 4px 0;
	position: relative;
}
.fanorate-live-widget .lup-half__empty{
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	padding: 14px 0;
}
.fanorate-live-widget .lup-half__info{
	position: absolute;
	display: flex;
	align-items: center;
	gap: 5px;
	z-index: 4;
}
.fanorate-live-widget .lup-half__info--tl{
	top: 7px;
	left: 8px;
}
.fanorate-live-widget .lup-half__info--bl{
	bottom: 7px;
	left: 8px;
}
.fanorate-live-widget .lup-half__crest{
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}
.fanorate-live-widget .lup-half__form{
	font-size: 9px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.02em;
}
.fanorate-live-widget .lup-row{
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	margin: 10px 0;
}
.fanorate-live-widget .lup{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50px;
}
/* player avatar circle */
.fanorate-live-widget .lup__av{
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.fanorate-live-widget .lup__av--gk{
	border-color: rgba(251, 191, 36, 0.8);
	box-shadow:
		0 0 7px rgba(251, 191, 36, 0.55),
		0 2px 5px rgba(0, 0, 0, 0.4);
}
.fanorate-live-widget .lup__av-icon{
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.fanorate-live-widget .lup__av-img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.fanorate-live-widget .lup__cap{
	position: absolute;
	top: -2px;
	right: -2px;
	z-index: 3;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fbbf24;
	color: #000;
	font-size: 5.5px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.fanorate-live-widget .lup__info{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin-top: 3px;
	width: 100%;
	max-width: 50px;
}
.fanorate-live-widget .lup__num{
	font-size: 7px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(0, 0, 0, 0.38);
	border-radius: 3px;
	padding: 0 4px;
	line-height: 1.55;
	flex-shrink: 0;
	white-space: nowrap;
}
.fanorate-live-widget .lup__name{
	font-size: 9.5px;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.4;
	max-width: 100%;
}
.fanorate-live-widget .lup__pos--fw{
	color: #f56666;
}
.fanorate-live-widget .lu-pitch__mid{
	display: flex;
	align-items: center;
	padding: 6px 10px;
}
.fanorate-live-widget .lu-pitch__cline{
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
	position: relative;
}
.fanorate-live-widget .lu-pitch__cline::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.fanorate-live-widget .lu-pitch__cline::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}
.fanorate-live-widget .lu-subs{
	margin-top: 12px;
}
.fanorate-live-widget .lu-subs__hdr{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--line-2);
}
.fanorate-live-widget .lu-subs__title{
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fg-3);
}
.fanorate-live-widget .lu-subs__count{
	font-size: 9px;
	color: var(--fg-3);
	font-weight: 500;
}
.fanorate-live-widget .lu-sub{
	padding: 7px 0;
	border-bottom: 1px solid var(--line-2);
}
.fanorate-live-widget .lu-sub:last-child{
	border-bottom: none;
}
.fanorate-live-widget .lu-sub__panels{
	display: flex;
	align-items: stretch;
	gap: 0;
	min-width: 0;
}
.fanorate-live-widget .lu-sub__min{
	font-size: 13px;
	font-weight: 800;
	color: var(--fg);
	width: 36px;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.fanorate-live-widget .lu-sub__tcrest{
	width: 18px;
	height: 18px;
	border-radius: 3px;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
	background: var(--chip);
}
.fanorate-live-widget .lu-sub__panel{
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	background: var(--chip);
	padding: 5px 7px;
	gap: 5px;
	overflow: hidden;
}
.fanorate-live-widget .lu-sub__panel--out{
	justify-content: space-between;
	border-radius: 6px 0 0 6px;
}
.fanorate-live-widget .lu-sub__panel--in{
	justify-content: space-between;
	border-radius: 0 6px 6px 0;
}
.fanorate-live-widget .lu-sub__av{
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffffff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.fanorate-live-widget .lu-sub__av-icon{
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.fanorate-live-widget .lu-sub__img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.fanorate-live-widget .lu-sub__info{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.fanorate-live-widget .lu-sub__lbl{
	font-size: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
}
.fanorate-live-widget .lu-sub__lbl--out{
	color: #f87171;
}
.fanorate-live-widget .lu-sub__lbl--in{
	color: #4ade80;
}
.fanorate-live-widget .lu-sub__pname{
	font-size: 11px;
	font-weight: 600;
	color: var(--fg);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================
   INLINE MODE — dedicated "Live Scores" page (fanorate/live-scoreboard)
   The same widget shell rendered in the content flow instead of as a
   fixed corner dock: static position, full width, always open, no
   launcher / collapse affordances.
   ============================================================ */
.fanorate-live-widget.flw-inline {
	position: static;
	inset: auto;
	width: 100%;
	max-width: 920px;
	margin-inline: auto;
	padding: 0;
	display: block;
	pointer-events: auto;
}
/* Always-open panel: drop the floating drawer sizing — fill the column and
   grow with its content instead of being pinned to 95vh. */
#fanorate-live-widget.flw-inline .fw {
	display: flex;
	width: 100%;
	max-width: none;
	height: auto;
	min-height: 70vh;
	max-height: none;
	box-shadow: var(--shadow-md);
}
/* No launcher bubble and no close button on a dedicated page. */
.fanorate-live-widget.flw-inline .flw-launcher,
.fanorate-live-widget.flw-inline .fw__collapse { display: none !important; }
/* Keep the board visible even if the JS toggles the hidden attribute
   (e.g. a transient empty API read) — the page should not vanish. */
.fanorate-live-widget.flw-inline[hidden] { display: block !important; }