/* ============================================================
   liveFeel — FUFUBALL's own "read on the game" component set.
   Self-contained, removable: delete the two <link>/<script> tags
   in match.html and this file is fully inert/unreferenced.

   THEME NOTE: this page's cards are light "paper" surfaces but the
   root --text/--surface tokens are near-WHITE (field theme). Every
   light surface below therefore sets EXPLICIT dark text/border
   tokens so nothing renders white-on-white. Accents reuse the
   existing --p-home / --p-away team colors set by match.html.
   ============================================================ */

#liveFeel {
	/* dark-on-light token overrides — paper surface, ink text.
	   Mirrors base.html .card scoping so we never inherit the
	   near-white field --text into a light box. */
	--lf-ink:    oklch(0.20 0.03 265);
	--lf-ink-2:  oklch(0.38 0.03 265);
	--lf-ink-3:  oklch(0.52 0.02 265);
	--lf-paper:  oklch(0.985 0.003 145);
	--lf-paper-2:oklch(0.94 0.012 148);
	--lf-edge:   oklch(0.90 0.015 148);
	--lf-home: var(--p-home, oklch(0.62 0.17 255));
	--lf-away: var(--p-away, oklch(0.60 0.23 25));

	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
#liveFeel[hidden] { display: none; }

/* "settling" treatment when the read is stale — desaturate + dim,
   never present stale numbers as live. */
#liveFeel.lf-settling { opacity: .6; filter: saturate(.55); }
#liveFeel.lf-settling .lf-card::after {
	content: "settling…";
	position: absolute; top: .55rem; right: .7rem;
	font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 70;
	font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
	font-size: .56rem; color: var(--lf-ink-3);
}

.lf-card {
	position: relative;
	background: var(--lf-paper);
	color: var(--lf-ink);
	border: 1px solid var(--lf-edge);
	border-radius: var(--radius, 16px);
	box-shadow: var(--shadow-card, 0 2px 0 oklch(0.45 0.13 148), 0 10px 24px oklch(0.35 0.10 148 / 0.25));
	padding: 18px 20px;
}
.lf-card h3 {
	font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 95;
	font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
	font-size: .82rem; color: var(--lf-ink); margin: 0 0 .7rem;
}
.lf-eyebrow {
	font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 70;
	font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
	font-size: .6rem; color: var(--lf-ink-3);
}

/* ---------- 1. Vibe-o-Meter ---------- */
.lf-vibe { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.lf-gauge { position: relative; width: 100%; max-width: 320px; }
.lf-gauge svg { width: 100%; height: auto; display: block; }
.lf-gauge .lf-arc-bg { fill: none; stroke: var(--lf-paper-2); stroke-width: 16; stroke-linecap: round; }
.lf-gauge .lf-arc-fill { fill: none; stroke-width: 16; stroke-linecap: round;
	transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1), stroke .9s ease; }
.lf-gauge .lf-needle {
	stroke: var(--lf-ink); stroke-width: 3.5; stroke-linecap: round;
	transform-box: fill-box; transform-origin: 160px 130px;
	transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.lf-gauge .lf-hub { fill: var(--lf-ink); }
.lf-zone {
	font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 110;
	font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
	font-size: clamp(1.3rem, 4.5vw, 1.9rem); line-height: 1;
	color: var(--lf-ink); text-align: center;
}
.lf-pundit-sub { font-size: .9rem; color: var(--lf-ink-2); text-align: center; max-width: 46ch; min-height: 1.3em; }

/* ---------- 2. Pressure tug-of-war ---------- */
.lf-tug-bar {
	position: relative; height: 26px; border-radius: 13px; overflow: hidden;
	display: flex; background: var(--lf-paper-2);
	border: 1px solid var(--lf-edge);
}
.lf-tug-h, .lf-tug-a { height: 100%; }
.lf-tug-h { background: var(--lf-home); transition: width .8s cubic-bezier(.34,1.56,.64,1); }
.lf-tug-a { background: var(--lf-away); flex: 1; }
.lf-tug-seam {
	position: absolute; top: -3px; bottom: -3px; width: 3px;
	margin-left: -1.5px; background: var(--lf-paper);
	box-shadow: 0 0 0 1px var(--lf-edge);
	transition: left .8s cubic-bezier(.34,1.56,.64,1);
}
.lf-tug-lbls {
	display: flex; justify-content: space-between; margin-top: .4rem;
	font-family: 'Geist Mono', monospace; font-size: .78rem; color: var(--lf-ink-2);
}

/* ---------- 3. Momentum river ---------- */
.lf-river svg { width: 100%; height: auto; display: block; }
.lf-river .lf-mid { stroke: var(--lf-edge); stroke-width: 1.5; }
.lf-river .lf-bar-h { fill: var(--lf-home); }
.lf-river .lf-bar-a { fill: var(--lf-away); }
.lf-river .lf-evt-dot { fill: var(--lf-ink); stroke: var(--lf-paper); stroke-width: 1.5; }
.lf-river-cap { display: flex; justify-content: space-between; margin-top: .4rem;
	font-size: .68rem; color: var(--lf-ink-3); }

/* ---------- 4. The Pundit (ticker) ---------- */
.lf-pundit { display: flex; align-items: center; gap: .7rem; }
.lf-pundit .lf-quote { font-size: 1.55rem; line-height: 0; color: var(--lf-home); font-family: Georgia, serif; }
.lf-pundit-line {
	font-size: 1rem; color: var(--lf-ink); font-style: italic;
	min-height: 1.3em; transition: opacity .35s ease, transform .35s ease;
}
.lf-pundit-line.lf-swap { opacity: 0; transform: translateY(6px); }

/* ---------- 5. Goal takeover + VAR drama ---------- */
.lf-takeover {
	position: fixed; inset: 0; z-index: 120; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 50% 45%,
		oklch(0.27 0.08 265 / .55), oklch(0.27 0.08 265 / .82));
	opacity: 0;
}
.lf-takeover.lf-on { animation: lf-takeover-in 2.6s ease forwards; }
.lf-takeover-head {
	font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 125;
	font-weight: 900; text-transform: uppercase; letter-spacing: -.01em;
	font-size: clamp(2.4rem, 11vw, 5.5rem); line-height: .92;
	color: oklch(0.99 0.005 145); text-align: center; padding: 0 1rem;
	text-shadow: 0 4px 24px oklch(0 0 0 / .5);
}
.lf-takeover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.lf-var {
	position: fixed; inset: 0; z-index: 119; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	background: oklch(0.15 0.03 265 / .55); opacity: 0;
}
.lf-var.lf-on { animation: lf-var-in 3.2s ease forwards; }
.lf-var-tag {
	font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 100;
	font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
	font-size: clamp(1.4rem, 6vw, 2.6rem);
	color: oklch(0.99 0.005 145);
	border: 3px solid oklch(0.99 0.005 145 / .8);
	border-radius: 14px; padding: .6rem 1.4rem;
	animation: lf-var-pulse 1s ease-in-out infinite;
}

@keyframes lf-takeover-in {
	0% { opacity: 0; } 8% { opacity: 1; }
	78% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes lf-var-in {
	0% { opacity: 0; } 10% { opacity: 1; }
	85% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes lf-var-pulse { 50% { opacity: .55; transform: scale(1.04); } }

/* ---------- Reduced motion: kill all throbs/particles/transitions,
   provide static fallback (instant snap, no canvas burst, brief
   non-animated overlay still shows the headline text). ---------- */
@media (prefers-reduced-motion: reduce) {
	.lf-gauge .lf-arc-fill, .lf-gauge .lf-needle,
	.lf-tug-h, .lf-tug-seam, .lf-pundit-line { transition: none !important; }
	.lf-takeover.lf-on, .lf-var.lf-on { animation: none !important; opacity: 1; }
	.lf-takeover.lf-on { transition: opacity .2s linear; }
	.lf-var-tag { animation: none !important; }
	.lf-takeover canvas { display: none; }
}