/* Line-up as a pixel pitch in the "Spieldaten" box (inc/lineup.php). Loaded on single reports only.
 * Colours as tokens: light in :root, dark by device setting (unless data-scheme="light") and by the footer switch.
 */

/* 1. Token ------------------------------------------------------------------- */
:root {
	--lu-grass-a: #4E8F52;
	--lu-grass-b: #468848;
	--lu-line: #FFFFFF;
	--lu-outline: #14151F;
	--lu-shadow: rgb(0 0 0 / .22);
	--lu-skin: #E7B48C;
	--lu-hair: #3A2A22;
	--lu-eye: #14151F;
	--lu-white: #FFFFFF;
	--lu-blue: #1111BB;
	--lu-boots: #14151F;
	--lu-gk-shirt: #D26A08;
	--lu-gk-trim: #14151F;
	--lu-gk-shorts: #3A3D4C;
	--lu-gk-socks: #8C8F9C;
	--lu-gloves: #E9EAF0;
	--lu-chip-bg: #FFFFFF;
	--lu-chip-ink: #14151F;
	--lu-net: rgb(255 255 255 / .38);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-scheme="light"]) {
		--lu-grass-a: #2F7849;
		--lu-grass-b: #2A6F44;
		--lu-line: #E8ECE8;
		--lu-outline: #03040A;
		--lu-shadow: rgb(0 0 0 / .35);
		--lu-blue: #4A52FF;
		--lu-gk-shirt: #F0A43A;
		--lu-gk-shorts: #4A4D5E;
		--lu-gk-socks: #9A9DAE;
		--lu-chip-bg: #0E0F1A;
		--lu-chip-ink: #ECEDF3;
	}
}
:root[data-scheme="dark"] {
	--lu-grass-a: #2F7849;
	--lu-grass-b: #2A6F44;
	--lu-line: #E8ECE8;
	--lu-outline: #03040A;
	--lu-shadow: rgb(0 0 0 / .35);
	--lu-blue: #4A52FF;
	--lu-gk-shirt: #F0A43A;
	--lu-gk-shorts: #4A4D5E;
	--lu-gk-socks: #9A9DAE;
	--lu-chip-bg: #0E0F1A;
	--lu-chip-ink: #ECEDF3;
}

/* 2. Kopf und Wechselzeile ------------------------------------------------------ */
.sgh-lineup { margin: 0; }
.sgh-fact.is-aufstellung dt.lu-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin: 0 0 .5rem;
	font: 700 var(--wp--preset--font-size--label, .75rem)/1.3 var(--wp--preset--font-family--heading, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--muted, #5E6170); }
.lu-formation { font: 700 var(--wp--preset--font-size--meta, .875rem)/1.2 var(--wp--preset--font-family--heading, sans-serif); letter-spacing: .06em; color: var(--wp--custom--color--link, #1111BB); }
.lu-text { margin: 0; }
.lu-subs { margin: .5rem 0 0; font-size: var(--wp--preset--font-size--meta, .875rem); line-height: 1.45; color: var(--wp--preset--color--muted, #5E6170); }
.lu-subs-k { font-weight: 700; letter-spacing: .02em; }

/* 3. Spielfeld ------------------------------------------------------------------ */
.lu-pitch {
	--lu-cell: 2px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	contain: layout paint;
	border: 2px solid var(--lu-line);
	background: repeating-linear-gradient(180deg, var(--lu-grass-a) 0 28px, var(--lu-grass-b) 28px 56px);
}
.lu-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lu-field > * { position: absolute; }
/* Mittelkreis: Halbbogen an der Mittellinie (oberer Rand des Feldes) */
.lu-arc { fill: var(--lu-line); }
.lu-arc.is-down { top: 0; left: 50%; transform: translateX(-50%); }
/* Tor: Pfosten und Latte weiß auf Grün, Netz als Raster */
.lu-goal { left: 34%; right: 34%; bottom: 0; height: 22px; border: 3px solid var(--lu-line); border-bottom: 0;
	background: conic-gradient(var(--lu-net) 25%, transparent 0 50%, var(--lu-net) 0 75%, transparent 0) 0 0 / 6px 6px; }

.lu-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem .25rem 1.875rem; }
/* Strafraum und Torraum gehören zur Torwartreihe, damit ihre Linien zwischen den Reihen liegen, egal wie hoch das Feld wird */
.lu-row.is-tor { position: relative; margin-top: .75rem; }
.lu-row.is-tor::before, .lu-row.is-tor::after { content: ""; position: absolute; z-index: -1; bottom: -30px; border: 2px solid var(--lu-line); border-bottom: 0; }
.lu-row.is-tor::before { top: -.5rem; left: 4%; right: 4%; }
.lu-row.is-tor::after { top: -2px; left: 27%; right: 27%; }
.lu-row { display: flex; align-items: flex-start; }
.lu-p { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lu-fig { display: block; flex: none; width: 33px; height: 51px;
	--lu-k-shirt: var(--lu-white); --lu-k-trim: var(--lu-blue); --lu-k-shorts: var(--lu-blue); --lu-k-socks: var(--lu-blue); }
.lu-p.is-gk .lu-fig { --lu-k-shirt: var(--lu-gk-shirt); --lu-k-trim: var(--lu-gk-trim); --lu-k-shorts: var(--lu-gk-shorts); --lu-k-socks: var(--lu-gk-socks); }
.lu-px-shadow { fill: var(--lu-shadow); }
.lu-px-line { fill: var(--lu-outline); }
.lu-px-hair { fill: var(--lu-hair); }
.lu-px-skin { fill: var(--lu-skin); }
.lu-px-eye { fill: var(--lu-eye); }
.lu-px-shirt { fill: var(--lu-k-shirt); }
.lu-px-trim { fill: var(--lu-k-trim); }
.lu-px-shorts { fill: var(--lu-k-shorts); }
.lu-px-socks { fill: var(--lu-k-socks); }
.lu-px-boots { fill: var(--lu-boots); }
.lu-px-glove { fill: var(--lu-gloves); }

/* Kapitänsbinde: kleines „C“ am linken Oberarm der Figur (aus fussball.de oder „(C)“ im Text) */
.lu-figwrap { position: relative; display: block; flex: none; }
.lu-c { position: absolute; left: -3px; top: 17px; width: 13px; height: 13px; display: grid; place-items: center;
	font: 800 9px/1 var(--wp--preset--font-family--heading, sans-serif); color: #14151F; background: var(--lu-captain, #F2C230);
	box-shadow: 0 0 0 1px var(--lu-outline); clip-path: polygon(1px 0, calc(100% - 1px) 0, 100% 1px, 100% calc(100% - 1px), calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px), 0 1px); }
.lu-c.is-inline { position: static; display: inline-grid; vertical-align: -1px; margin-right: .2rem; box-shadow: none; }
.sgh-lineup.is-playing .lu-p.is-captain .lu-c { animation: lu-band 420ms var(--sgh-ease, cubic-bezier(.2, .7, .2, 1)) both; animation-delay: calc(var(--r) * 170ms + var(--i) * 40ms + 260ms); }
@keyframes lu-band { from { transform: scale(0); } 60% { transform: scale(1.3); } }

/* Namensschild: eigene Fläche, damit der Text nicht auf dem gestreiften Rasen steht */
.lu-name { display: block; max-width: 100%; padding: 1px 3px 2px; text-align: center; color: var(--lu-chip-ink); background: var(--lu-chip-bg);
	font: 700 .8125rem/1.1 var(--wp--preset--font-family--heading, sans-serif);
	clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); }
.lu-nl { display: block; white-space: nowrap; }
.is-dense .lu-name { padding: 1px 2px 2px; font-size: .75rem; }
.lu-name.is-tight { font-size: .6875rem; letter-spacing: -.01em; }

/* 4. Motion ---------------------------------------------------------------------- */
/* Until the box is in view, players and substitutions are hidden, but only when the early flag says the script will
   reveal them (inc/lineup.php sets .sgh-lu-motion on <html>). The rows slide in from the back, about 1.3 s in all. */
.sgh-lu-motion .sgh-lineup:not(.is-played):not(.is-playing) :is(.lu-p, .lu-subs) { opacity: 0; }
@keyframes lu-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lu-fade { from { opacity: 0; } to { opacity: 1; } }
.sgh-lineup.is-playing .lu-p { animation: lu-slide 300ms var(--sgh-ease, cubic-bezier(.2, .7, .2, 1)) both; animation-delay: calc(var(--r) * 170ms + var(--i) * 40ms); }
.sgh-lineup.is-playing .lu-subs { animation: lu-fade 300ms ease-out both; animation-delay: calc(var(--rows) * 170ms + 100ms); }
@media (prefers-reduced-motion: reduce) {
	.sgh-lineup * { animation: none !important; }
	.sgh-lu-motion .sgh-lineup :is(.lu-p, .lu-subs) { opacity: 1 !important; }
}