/* Bedburger Schachverein – Partie zum Nachspielen und Partie der Woche. Paket zu style.css, geladen von inc/css-pakete.php. */

/* ==========================================================================
   Partie zum Nachspielen (Code-Block mit PGN, PGN-Datei im Datei-Block, [partie])
   ========================================================================== */

.bsv-partie {
	margin: 2rem 0;
	padding: clamp(0.9rem, 2.5vw, 1.4rem);
	border-radius: var(--bsv-radius);
	background: var(--bsv-paper);
}

.bsv-partie__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.25rem 1rem;
	margin: 0 0 1rem;
	color: var(--bsv-ink);
	font-size: 1rem;
	line-height: 1.4;
}

.bsv-partie__players {
	display: grid;
	gap: 0.2rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.bsv-partie__player {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.bsv-partie__color {
	flex: none;
	width: 0.8rem;
	height: 0.8rem;
	border: 2px solid var(--bsv-black);
	border-radius: 50%;
	background: var(--bsv-white);
	transform: translateY(0.05rem);
}

.bsv-partie__player--b .bsv-partie__color {
	background: var(--bsv-black);
}

.bsv-partie__elo {
	color: var(--bsv-muted);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.bsv-partie__result {
	grid-row: 1;
	grid-column: 2;
	padding: 0.25rem 0.65rem;
	border-radius: 4px;
	background: var(--bsv-black);
	color: var(--bsv-white);
	font-size: 1.125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bsv-partie__event {
	grid-column: 1 / -1;
	color: var(--bsv-muted);
	font-size: 0.9375rem;
}

.bsv-partie__main {
	display: grid;
	gap: 1rem;
}

.bsv-partie__main[hidden],
.bsv-partie.is-ready .bsv-partie__pgn {
	display: none;
}

.bsv-partie__pgn {
	max-height: 18rem;
	margin: 0;
	overflow: auto;
	white-space: pre-wrap;
}

.bsv-partie__board {
	position: relative;
	box-shadow: 0 12px 30px rgba(5, 14, 17, 0.14);
}

/* Die Pfeil-Ebene ist das letzte Kind im Brett – Ecke unten rechts trotzdem rund. */
.bsv-partie__board > .sq:nth-child(64) {
	border-bottom-right-radius: 2px;
}

/* Eigene Züge: Figuren der Seite am Zug und Zielfelder sind anklickbar. */
.bsv-partie__board .sq.is-movable,
.bsv-partie__board .sq.is-target,
.bsv-partie__board .sq.is-capture {
	cursor: pointer;
}

/* Pfeile und markierte Felder aus der PGN ([%cal] / [%csl]) */
.bsv-partie__arrows {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* Brett mit Bewertungsbalken (nur bei Engine-Analysen) */
.bsv-partie__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.bsv-partie.has-eval .bsv-partie__stage {
	grid-template-columns: 0.8rem minmax(0, 1fr);
	gap: 0.45rem;
}

.bsv-partie__evalbar {
	position: relative;
	display: none;
	overflow: hidden;
	border: 2px solid var(--bsv-black);
	border-radius: 4px;
	background: #2f3a3f;
	transition: opacity 0.2s ease;
}

.bsv-partie.has-eval .bsv-partie__evalbar {
	display: block;
}

.bsv-partie__evalfill {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50%;
	background: #f6f6f1;
	transition: height 0.35s cubic-bezier(.2, .7, .2, 1);
}

.bsv-partie__evalbar.is-flipped .bsv-partie__evalfill {
	top: 0;
	bottom: auto;
}

.bsv-partie__evalbar::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 2px;
	margin-top: -1px;
	background: rgba(0, 100, 197, 0.55);
}

.bsv-partie__evalbar.is-stale {
	opacity: 0.4;
}

.bsv-partie__board:focus-visible {
	outline: 3px solid var(--bsv-blue);
	outline-offset: 3px;
}

.bsv-partie__controls {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.75rem;
}

.bsv-partie__btn {
	display: grid;
	flex: 1 1 0;
	place-items: center;
	min-width: 0;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--bsv-line);
	border-radius: 4px;
	background: var(--bsv-white);
	color: var(--bsv-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bsv-partie__btn:hover:not(:disabled) {
	border-color: var(--bsv-black);
}

.bsv-partie__btn:disabled {
	color: var(--bsv-line);
	cursor: default;
}

.bsv-partie__btn--play {
	border-color: var(--bsv-blue);
	background: var(--bsv-blue);
	color: var(--bsv-white);
}

.bsv-partie__btn--play:hover:not(:disabled) {
	border-color: var(--bsv-blue-deep);
	background: var(--bsv-blue-deep);
}

.bsv-partie__btn--flip {
	flex-grow: 0.75;
	margin-left: 0.4rem;
}

.bsv-partie__btn .i-pause,
.bsv-partie.is-playing .bsv-partie__btn .i-play {
	display: none;
}

.bsv-partie.is-playing .bsv-partie__btn .i-pause {
	display: block;
}

.entry-content .bsv-partie__status {
	min-height: 1.5em;
	margin: 0 0 0.6rem;
	font-weight: 700;
}

.bsv-partie__statusbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.6rem;
}

.entry-content .bsv-partie__statusbar .bsv-partie__status {
	margin: 0;
}

.bsv-partie__eval {
	flex: none;
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	background: var(--bsv-black);
	color: var(--bsv-white);
	font-size: 0.9375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	white-space: nowrap;
}

.bsv-partie__eval[hidden] {
	display: none;
}

/* Mehrere Partien in einer Datei */
.bsv-partie__pick {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-weight: 700;
}

.bsv-partie__select {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--bsv-line);
	border-radius: 4px;
	background: var(--bsv-white);
	color: var(--bsv-ink);
	font: inherit;
	font-weight: 600;
}

/* Abzweig: mehrere Fortsetzungen (Partie, Varianten, eigene Züge) */
.bsv-partie__fork {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	min-height: 4.6rem;
	margin: 0.6rem 0 0;
	padding: 0.4rem 0.5rem 0.5rem;
	border-radius: 4px;
	background: var(--bsv-blue-mist);
	font-size: 0.875rem;
	align-content: flex-start;
}

.bsv-partie__fork[hidden] {
	display: none;
}

.bsv-partie__fork-label {
	flex: 1 0 100%;
	color: var(--bsv-muted);
	font-size: 0.8125rem;
	font-weight: 700;
}

.bsv-partie__fork-btn {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	min-height: 2.125rem;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--bsv-line);
	border-radius: 999px;
	background: var(--bsv-white);
	color: var(--bsv-ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bsv-partie__fork-btn:hover {
	border-color: var(--bsv-black);
}

.bsv-partie__fork-btn.is-selected {
	border-color: var(--bsv-blue);
	box-shadow: inset 0 0 0 1px var(--bsv-blue);
}

.bsv-partie__fork-kind {
	color: var(--bsv-muted);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.bsv-partie__back {
	margin-left: auto;
	padding: 0.25rem 0.1rem;
	border: 0;
	background: none;
	color: var(--bsv-blue-deep);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.bsv-partie__back::before {
	content: "↩ ";
	text-decoration: none;
}

.bsv-partie__right {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.entry-content .bsv-partie__moves {
	max-height: 16rem;
	margin: 0;
	padding: 0.35rem;
	overflow-y: auto;
	border: 1px solid var(--bsv-line);
	border-radius: 4px;
	background: var(--bsv-white);
	list-style: none;
	font-variant-numeric: tabular-nums;
	overscroll-behavior: contain;
}

.entry-content .bsv-partie__moves li {
	margin: 0;
}

.bsv-partie__row {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.bsv-partie__num {
	padding-left: 0.35rem;
	color: var(--bsv-muted);
	font-size: 0.9375rem;
}

.bsv-partie__dots {
	padding: 0.3rem 0.5rem;
	color: var(--bsv-muted);
}

.bsv-partie__mv {
	padding: 0.3rem 0.5rem;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var(--bsv-ink);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.bsv-partie__mv:hover {
	background: var(--bsv-blue-mist);
}

.bsv-partie__mv.is-current {
	background: var(--bsv-blue);
	color: var(--bsv-white);
}

/* Bewertungszeichen: !! ! !? ?! ? ?? und Stellungszeichen (±, ∞ …) */
.bsv-partie__nag {
	font-weight: 800;
}

.bsv-partie__nag--brilliant { color: #0f7f86; }
.bsv-partie__nag--good { color: #22803a; }
.bsv-partie__nag--interesting { color: #7b4bb0; }
.bsv-partie__nag--dubious { color: #a87700; }
.bsv-partie__nag--mistake { color: #cc5a00; }
.bsv-partie__nag--blunder { color: #c62828; }
.bsv-partie__nag--only { color: var(--bsv-muted); }

.bsv-partie__nag--pos {
	margin-left: 0.3em;
	color: var(--bsv-muted);
	font-weight: 600;
}

.bsv-partie__mv.is-current .bsv-partie__nag {
	color: inherit;
}

/* Varianten unter dem Partiezug */
.entry-content .bsv-partie__vars {
	margin: 0.1rem 0 0.45rem 0.4rem;
	padding: 0.15rem 0 0.15rem 0.55rem;
	border-left: 2px solid var(--bsv-line);
	color: var(--bsv-ink);
	font-size: 0.9375rem;
	line-height: 1.75;
}

.bsv-partie__line + .bsv-partie__line {
	margin-top: 0.3rem;
	padding-top: 0.3rem;
	border-top: 1px dashed var(--bsv-line);
}

.bsv-partie__vnum {
	margin: 0 0.05rem 0 0.25rem;
	color: var(--bsv-muted);
	font-variant-numeric: tabular-nums;
}

.bsv-partie__vmove {
	white-space: nowrap;
}

.bsv-partie__line > .bsv-partie__vmove:first-child .bsv-partie__vnum,
.bsv-partie__sub > .bsv-partie__vmove:first-child .bsv-partie__vnum {
	margin-left: 0;
}

.bsv-partie__mv--var {
	padding: 0.05rem 0.25rem;
	font-weight: 600;
	line-height: 1.5;
}

.bsv-partie__c {
	margin: 0 0.25rem;
	color: var(--bsv-muted);
	font-style: italic;
}

.bsv-partie__sub {
	color: var(--bsv-muted);
}

.bsv-partie__sub::before {
	content: " (";
}

.bsv-partie__sub::after {
	content: ")";
}

.bsv-partie__sub .bsv-partie__mv:not(.is-current) {
	color: #2c3a41;
	font-weight: 500;
}

/* Eigene Züge der Leser */
.bsv-partie__mv.is-own:not(.is-current) {
	color: var(--bsv-blue-deep);
	font-style: italic;
}

.bsv-partie__tools {
	flex: none;
	margin: 0.6rem 0 0;
}

.bsv-partie__tools[hidden] {
	display: none;
}

.bsv-partie__clear {
	min-height: 2.25rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--bsv-line);
	border-radius: 4px;
	background: var(--bsv-white);
	color: var(--bsv-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}

.bsv-partie__clear:hover {
	border-color: var(--bsv-black);
}

/* Bewertungsverlauf (Stockfish) – Klick springt zum Zug */
.bsv-partie__graph {
	position: relative;
	flex: none;
	height: 4.25rem;
	margin-top: 0.6rem;
	overflow: hidden;
	border-radius: 4px;
	background: #2f3a3f;
	cursor: pointer;
}

.bsv-partie__graph[hidden] {
	display: none;
}

.bsv-partie__graph svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bsv-partie__graph-area {
	fill: #f6f6f1;
}

.bsv-partie__graph-mid {
	stroke: rgba(0, 100, 197, 0.45);
	stroke-width: 0.3;
}

.bsv-partie__graph-line {
	fill: none;
	stroke: #8c979c;
	stroke-width: 1.25;
}

.bsv-partie__graph-cursor {
	stroke: var(--bsv-blue);
	stroke-width: 2.5;
}

.bsv-partie__graph-dot {
	position: absolute;
	width: 0.6rem;
	height: 0.6rem;
	margin: -0.3rem 0 0 -0.3rem;
	border: 2px solid var(--bsv-white);
	border-radius: 50%;
	pointer-events: none;
}

.bsv-partie__graph-dot--dubious { background: #e0a800; }
.bsv-partie__graph-dot--mistake { background: #e06c00; }
.bsv-partie__graph-dot--blunder { background: #d32f2f; }

/* Download der PGN-Datei */
.entry-content .bsv-partie__file {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
}

.bsv-partie__file a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
}

.bsv-partie-hinweis {
	padding: 0.75rem 1rem;
	border-left: 4px solid #cc5a00;
	background: #fff4e5;
}

.entry-content .bsv-partie__note {
	margin: 0.15rem 0 0.35rem;
	padding: 0.35rem 0.6rem;
	border-left: 3px solid var(--bsv-blue);
	background: var(--bsv-paper);
	color: var(--bsv-ink);
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.45;
}

.entry-content .bsv-partie__end {
	padding: 0.45rem 0.5rem 0.2rem;
	font-weight: 800;
	text-align: center;
}

@media (min-width: 40em) {
	.bsv-partie__main {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 1.25rem;
	}

	/* Zugliste so hoch wie Brett + Knöpfe, längere Partien scrollen darin. */
	.bsv-partie__right {
		contain: size;
	}

	.entry-content .bsv-partie__moves {
		flex: 1 1 0;
		min-height: 10rem;
		max-height: none;
	}
}

/* Computer: Das Brett passt sich dem Fenster an – höchstens 45 % der Breite und so hoch, dass der
   ganze Betrachter (Spielernamen, Brett, Knöpfe) mit etwas Luft unter die Kopfzeile passt (zwischen
   20rem und 38rem). „Weiter mit“ steht dafür rechts unter der Zugliste (assets/js/src/partie.js).
   Der Betrachter ist so breit wie Brett plus Zugliste und ragt dafür bei Bedarf über die Textspalte
   hinaus. Vorschau auf der Startseite und Seiten in voller Breite bleiben, wie sie sind. */
@media (min-width: 48em) {
	.bsv-partie:not(.bsv-partie--vorschau) {
		--bsv-brett: clamp(20rem, min(45vw, 100vh - var(--bsv-header-h) - 15rem), 38rem);
	}

	.entry-content > .bsv-partie:not(.bsv-partie--vorschau) {
		--bsv-partie-w: min(100vw - 2 * var(--bsv-gutter), max(100%, var(--bsv-brett) + 24rem + 2 * clamp(0.9rem, 2.5vw, 1.4rem)));
		width: var(--bsv-partie-w);
		max-width: none;
		margin-inline: calc(50% - var(--bsv-partie-w) / 2);
	}

	.entry-content--wide > .bsv-partie:not(.bsv-partie--vorschau) {
		width: auto;
		margin-inline: 0;
	}

	.bsv-partie:not(.bsv-partie--vorschau) .bsv-partie__main {
		grid-template-columns: minmax(0, var(--bsv-brett)) minmax(17rem, 1fr);
		gap: 1.5rem;
	}
}

/* Brett-Vorschau (nur Stellung, Klick führt zur Partie) */
.bsv-partie--vorschau {
	margin: 0;
	padding: 0;
	background: none;
}

.bsv-partie--vorschau .bsv-partie__head,
.bsv-partie--vorschau .bsv-partie__controls,
.bsv-partie--vorschau .bsv-partie__right,
.bsv-partie--vorschau .bsv-partie__fork,
.bsv-partie--vorschau .bsv-partie__evalbar,
.bsv-partie--vorschau .bsv-partie__pgn,
.bsv-partie--vorschau .bsv-partie__pick {
	display: none !important;
}

.bsv-partie--vorschau .bsv-partie__main {
	display: block;
}

.bsv-partie.bsv-partie--vorschau .bsv-partie__stage {
	grid-template-columns: minmax(0, 1fr);
}

.bsv-partie--vorschau .bsv-partie__board {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bsv-partie--vorschau .bsv-partie__board:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(5, 14, 17, 0.2);
}

.bsv-partie__caption {
	margin: 0.75rem 0 0;
	color: var(--bsv-muted);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Zug suchen (Partie der Woche auf der Startseite): Brett wie bei der Aufgabe des Tages */
.bsv-partie--vorschau.is-quiz:not(.is-solved) .bsv-partie__board {
	cursor: default;
}

.bsv-partie--vorschau.is-quiz:not(.is-solved) .bsv-partie__board:hover {
	transform: none;
	box-shadow: 0 12px 30px rgba(5, 14, 17, 0.14);
}

.bsv-partie__quiz {
	margin: 0.6rem 0 0;
	padding: 0.65rem 0.9rem;
	border-left: 4px solid var(--bsv-black);
	background: var(--bsv-white);
	font-size: 0.9375rem;
	font-weight: 600;
}

.bsv-partie.is-solved .bsv-partie__quiz {
	border-left-color: #1d8a3e;
	color: var(--bsv-ink);
}

.bsv-partie__quiz-link {
	color: var(--bsv-blue-deep);
	font-weight: 700;
	white-space: nowrap;
}