/* Spielbericht: visuelles Spielfeld (vertikal wie Newsmagazin Elf des Tages) + Bank */

.match-pitch-visual {
	position: relative;
	margin-bottom: 1.25em;
}

/* Zwei separate Aufstellungsfelder (Heim oben, Gast unten) */
#contentArea .match-pitch-visual--stacked .match-pitch-teamblock {
	margin-bottom: 0.9em;
}

#contentArea .match-pitch-teamblock__title {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: 10px;
	margin: 0 0 0.35em;
	padding: 0 10px;
	color: #ffdfaa !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#contentArea .match-pitch-teamblock__name {
	font-weight: 800;
	font-size: 12px;
	padding-left: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.25;
}

#contentArea .match-pitch-teamblock__formation {
	font-weight: 700;
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0.02em;
	color: rgba(255, 223, 180, 0.95) !important;
}

/* Im dunklen #contentArea: eigene Lesefarben erzwingen */
#contentArea .match-pitch-visual {
	color: #f2e3cc;
}

.match-pitch-empty-overlay {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: min(92%, 420px);
	text-align: center;
	padding: 14px 18px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
	z-index: 6;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.match-pitch-empty-overlay__title {
	margin: 0 0 8px;
	font-weight: 600;
}

.match-pitch-empty-overlay__hint {
	margin: 6px 0 0;
	font-size: 12px;
	opacity: 0.92;
}

.match-pitch-legacy-empty {
	margin: 0.5em 0 0;
	padding: 8px 10px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 4px;
	color: #f2e3cc !important;
	border: 1px solid rgba(255, 215, 160, 0.2);
}

/* Horizontales Spielfeld: Gäste links, Heim rechts (FotMob-Ästhetik) */
/* position:relative ist zwingend: sonst beziehen sich absolute Spieler-Marker auf einen Vorfahren
   außerhalb des Rasens und überdecken die ganze Seite. */
.match-pitch-field--horizontal {
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: min(100%, 960px);
	margin: 0 auto 0.75em;
	aspect-ratio: 2 / 1;
	min-height: 240px;
	max-height: min(52vh, 440px);
	/* Rasen wie Referenzbild: klare vertikale Streifen */
	background:
		repeating-linear-gradient(
			90deg,
			#3aa63a 0,
			#3aa63a 60px,
			#349b34 60px,
			#349b34 120px
		);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 4px 18px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}

/* Wenn echtes Referenzbild geladen wird, reduzieren wir die zusätzliche Textur */
.match-pitch-field--image .match-pitch-grass {
	opacity: 0.06;
}

/* Bei echtem Referenzbild keine doppelten Linien/Boxen rendern */
.match-pitch-field--image .match-pitch-line--vertical,
.match-pitch-field--image .match-pitch-circle,
.match-pitch-field--image .match-pitch-box {
	display: none;
}

.match-pitch-grass {
	position: absolute;
	inset: 0;
	opacity: 0.14;
	/* leichte Textur oben drüber */
	background:
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.05) 0,
			rgba(255, 255, 255, 0.05) 2px,
			transparent 2px,
			transparent 10px
		);
	pointer-events: none;
}

.match-pitch-line--vertical {
	position: absolute;
	left: 50%;
	top: 4%;
	bottom: 4%;
	width: 1px;
	margin-left: -0.5px;
	background: rgba(255, 255, 255, 0.85);
	pointer-events: none;
}

.match-pitch-field--horizontal .match-pitch-circle {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16%;
	height: 0;
	padding-bottom: 16%;
	margin-left: -8%;
	margin-top: -8%;
	border: 1px solid rgba(255, 255, 255, 0.82);
	border-radius: 50%;
	box-sizing: content-box;
	pointer-events: none;
}

/* Strafraum: ~16,5 m von 105 m ≈ 16 % Länge; Höhe ~40,3 m von 68 m ≈ 59 % Breite */
.match-pitch-box--left,
.match-pitch-box--right {
	position: absolute;
	top: 50%;
	width: 17.5%;
	height: 60%;
	margin-top: -30%;
	border: 1px solid rgba(255, 255, 255, 0.82);
	border-radius: 2px;
	pointer-events: none;
	box-sizing: border-box;
}

.match-pitch-box--left {
	left: 0;
	border-left: none;
}

.match-pitch-box--right {
	right: 0;
	border-right: none;
}

/* Torraum (5,5 m): ~5,2 % Länge; Höhe ~26 % Breite */
.match-pitch-box--left-small,
.match-pitch-box--right-small {
	position: absolute;
	top: 50%;
	/* etwas breiter, damit der Keeper (x≈3.2%) sichtbar darin steht wie im Referenzbild */
	width: 6.2%;
	height: 28%;
	margin-top: -14%;
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: 2px;
	pointer-events: none;
	box-sizing: border-box;
}

.match-pitch-box--left-small {
	left: 0;
	border-left: none;
}

.match-pitch-box--right-small {
	right: 0;
	border-right: none;
}

/* Kompakte Spieler-Marker: Kreis + Badge, kein großer Kasten */
.match-pitch-node--compact {
	position: absolute;
	z-index: 3;
	width: auto;
	max-width: 78px;
	min-width: 0;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	pointer-events: none;
}

.match-pitch-node--compact .match-pitch-node__inner {
	position: relative;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
}

.match-pitch-node--compact.match-pitch-node--home .match-pitch-node__photo {
	box-shadow: 0 0 0 2px rgba(92, 163, 230, 0.95), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.match-pitch-node--compact.match-pitch-node--guest .match-pitch-node__photo {
	box-shadow: 0 0 0 2px rgba(232, 93, 76, 0.95), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.match-pitch-node__grade-badge {
	position: absolute;
	top: -2px;
	right: -4px;
	z-index: 4;
	min-width: 1.6em;
	padding: 1px 4px;
	border-radius: 4px;
	font-weight: 800;
	font-size: 10px;
	line-height: 1.25;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.match-pitch-node__motm-badge {
	position: absolute;
	top: -4px;
	left: -5px;
	z-index: 6;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.match-pitch-node__motm-badge img {
	width: 12px;
	height: 12px;
	object-fit: contain;
}

.match-pitch-node__grade-badge--high {
	background: #d4edda;
	color: #155724;
}

.match-pitch-node__grade-badge--mid {
	background: #fff3cd;
	color: #856404;
}

.match-pitch-node__grade-badge--low {
	background: #f8d7da;
	color: #721c24;
}

.match-pitch-node__grade-badge--na {
	background: rgba(40, 40, 40, 0.88);
	color: #e8dcc8;
}

.match-pitch-node--compact .match-pitch-node__photo {
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 50%;
	background-size: cover;
	background-position: center top;
	border: 2px solid rgba(255, 255, 255, 0.85);
	flex-shrink: 0;
}

.match-pitch-node__photo--empty {
	background: linear-gradient(145deg, rgba(60, 60, 60, 0.9), rgba(30, 30, 30, 0.95));
}

.match-pitch-node__nametag {
	display: block;
	margin-top: 3px;
	max-width: 76px;
	font-weight: 700;
	font-size: 9px;
	line-height: 1.15;
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.match-pitch-node__icons-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 3px;
	margin-top: 2px;
	max-width: 80px;
	line-height: 1;
}

.match-pitch-node__icons-inline img {
	vertical-align: middle;
}

.match-pitch-node__inj {
	font-size: 11px;
	color: #ffb4b4 !important;
}

.match-pitch-assists {
	font-size: 9px;
	color: #ffe6a8;
	font-weight: 700;
}

.match-pitch-sub {
	position: absolute;
	font-size: 8px;
	font-weight: 800;
	padding: 0 3px;
	border-radius: 2px;
	z-index: 5;
	line-height: 1.3;
}

.match-pitch-sub--in {
	left: -2px;
	top: 10px;
	background: #d4edda;
	color: #155724;
}

.match-pitch-sub--out {
	left: -2px;
	top: 10px;
	background: #f8d7da;
	color: #721c24;
}

.match-pitch-node--compact .match-pitch-node__stats {
	padding: 0 4px !important;
	line-height: 1.1;
	margin: 0;
	font-size: 10px;
	opacity: 0.92;
}

.match-pitch-bench-row {
	margin-bottom: 0.65em;
}

#contentArea .match-pitch-visual .match-pitch-bench-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.4em;
	color: #ffdfaa !important;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

#contentArea .match-pitch-visual .match-pitch-bench-formation {
	display: block;
	margin-top: 0.35em;
	font-weight: 600;
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0.02em;
	color: rgba(255, 223, 180, 0.95) !important;
	text-shadow: none;
}

#contentArea .match-pitch-formation-line {
	margin: 0.2em 0 0.55em;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 215, 175, 0.96) !important;
}

#contentArea .match-pitch-visual .match-pitch-bench-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: stretch;
	padding: 10px 10px;
	background: rgba(18, 7, 7, 0.88) !important;
	border: 1px solid rgba(255, 170, 90, 0.28) !important;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

#contentArea .match-pitch-visual .match-pitch-bench-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	padding: 6px 9px;
	background: rgba(0, 0, 0, 0.28) !important;
	border: 1px solid rgba(255, 215, 160, 0.22) !important;
	border-radius: 4px;
}

#contentArea .match-pitch-visual a.match-pitch-bench-name {
	font-weight: 600;
	color: #ffd9a8 !important;
	text-decoration: none;
}

#contentArea .match-pitch-visual a.match-pitch-bench-name:hover,
#contentArea .match-pitch-visual a.match-pitch-bench-name:focus {
	color: #fff !important;
	text-decoration: underline;
}

.match-pitch-bench-motm {
	width: 14px;
	height: 14px;
	object-fit: contain;
	flex-shrink: 0;
}

.match-pitch-stats-dumps {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.match-pitch-modal-body dl {
	margin-bottom: 0;
}

#contentArea .match-pitch-visual .match-pitch-legacy-wrap {
	margin-top: 1em;
	border: 1px solid rgba(255, 215, 160, 0.26) !important;
	border-radius: 4px;
	padding: 0.5em 0.75em;
	background: rgba(0, 0, 0, 0.28) !important;
	color: #f2e3cc !important;
}

#contentArea .match-pitch-visual .match-pitch-legacy-summary {
	cursor: pointer;
	font-weight: 700;
	outline: none;
	color: #ffd9a1 !important;
}

#contentArea .match-pitch-visual .match-pitch-legacy-summary:hover {
	color: #fff !important;
}

#contentArea .match-pitch-visual .match-pitch-legacy-inner {
	margin-top: 0.75em;
	color: #f2e3cc !important;
}

@media (max-width: 480px) {
	.match-pitch-field--horizontal {
		min-height: 200px;
		max-height: 42vh;
	}

	.match-pitch-node--compact {
		max-width: 64px;
	}

	.match-pitch-node--compact .match-pitch-node__photo {
		width: 36px;
		height: 36px;
	}

	.match-pitch-node__nametag {
		font-size: 8px;
		max-width: 62px;
	}
}

/* Bank: Lupe-Button (nicht kompakter Pitch) */
#contentArea .match-pitch-visual .match-pitch-node__stats {
	flex-shrink: 0;
}