/*
 * Ergänzungen des Bundles zum mitgelieferten Chesstempo-Stylesheet.
 *
 * Diese Datei wird nach pgnviewerext.vers1.css geladen. Schriften und
 * Brett-Hintergründe kommen aus dem Bundle; die Adressen dafür stehen direkt im
 * Chesstempo-Stylesheet (siehe README, Abschnitt „Änderungen an den Dateien von
 * Chesstempo“).
 */

/* -------------------------------------------------------------------------
 * Verhalten auf schmalen Bildschirmen
 * ------------------------------------------------------------------------- */

/* Der Bereich um das Brett bekommt vom Chesstempo-Stylesheet die Breite des
   Brettes fest zugewiesen. Ist das Brett breiter als der Bildschirm, ragt es
   in jeder Anordnung hinaus. */
.ce_pgnviewer .ct-pgn-viewer-board-holder {
	max-width: 100%;
}

/* Der Block aus Zugliste und Bedienknöpfen hat ebenfalls eine feste Breite von
   400 Pixeln. Steht die Zugliste unter dem Brett, kann er nicht schrumpfen und
   schiebt die ganze Seite auf Mobilgeräten seitwärts.
   Nur für diesen Fall gedacht: Steht die Zugliste rechts, sorgt genau diese
   Mindestbreite dafür, dass die Flex-Zeile auf schmalen Bildschirmen umbricht —
   dort würde min-width: 0 die Zugliste auf wenige Pixel zusammenquetschen. */
.ce_pgnviewer .ct-pgn-viewer-move-position-under .ct-pgn-viewer-move-list-and-controls {
	max-width: 100%;
	min-width: 0;
}

/* Die im Backend eingestellte Figurengröße ergibt eine feste Brettbreite. Auf
   schmalen Bildschirmen wird das Brett hier verkleinert; die Höhe steht am
   Element selbst und muss deshalb ausdrücklich überschrieben werden, sonst
   entsteht ein Rechteck statt eines Quadrats. */
.ce_pgnviewer chess-board.ct-pgn-viewer-board {
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
}

/* Der Rahmen des Brettes zählt zur Breite; ohne diese Zeile ragt die
   Spielfläche vier Pixel über das Brett hinaus, sobald es verkleinert wird. */
.ce_pgnviewer chess-board.ct-pgn-viewer-board .ct-board-holder {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Zugliste
 * ------------------------------------------------------------------------- */

/* Höhe der Zugliste. Der Wert gehört an den Behälter, in dem der Viewer
   ohnehin schon scrollt (Voreinstellung 350 Pixel) — läge er am äußeren
   Element, entstünde eine zweite Bildlaufleiste, und der innere Bereich würde
   einfach abgeschnitten. Das Inhaltselement setzt --pgn-notation-height nur,
   wenn im Backend eine Höhe eingetragen ist. */
.ce_pgnviewer ct-pgn-viewer .ct-move-list-container {
	height: var(--pgn-notation-height, 350px);
}

/* -------------------------------------------------------------------------
 * Anordnung „Zugliste umfließt das Brett“
 * ------------------------------------------------------------------------- */

/* Der Betrachter stellt Brett und Zugliste nebeneinander (Flexbox). Für das
   Umfließen wird daraus ein gewöhnlicher Textfluss mit dem Brett als
   umflossenem Element rechts oben. */
.ce_pgnviewer.pgn_umfliessend .ct-pgn-viewer-board-and-move-list {
	display: block;
}

.ce_pgnviewer.pgn_umfliessend .ct-pgn-viewer-board-holder {
	float: right;
	margin: 0 0 1em 1.5em;

	/* Damit das Brett beim Durchklicken einer langen Partie im Bild bleibt,
	   statt nach oben aus dem Fenster zu wandern. */
	position: sticky;
	top: 1rem;

	/* Der Block mit der Zugliste ist positioniert und hat eine eigene Fläche.
	   Ohne diese Zeile legt er sich über das umflossene Brett und verdeckt es
	   vollständig — sichtbar blieb es nur die ersten Augenblicke nach dem
	   Laden, solange die Zugliste noch leer war. */
	z-index: 1;
}

.ce_pgnviewer.pgn_umfliessend .ct-pgn-viewer-move-list-and-controls {
	display: block;
	width: auto;
	margin: 0;
}

/* Die Kopfzeile steht als einzelner Block über der Zugliste. In voller Breite
   passt sie nicht neben das Brett und würde mitsamt der Zugliste darunter
   rutschen — dann bliebe die Fläche links vom Brett leer. Sie bekommt deshalb
   genau die Breite, die neben dem Brett übrig bleibt; das Inhaltselement gibt
   dessen Kantenlänge als Variable mit.
   Partieauswahl und Knopfleiste brauchen das nicht: ct-layout.js hängt sie an
   das Brett, sie stehen also ohnehin in dessen Spalte. */
.ce_pgnviewer.pgn_umfliessend game-header {
	max-width: calc(100% - var(--pgn-board-size, 400px) - 1.5em);
}

/* Ein Bereich mit eigenem Bildlauf umfließt nichts, sondern stellt sich als
   schmaler Kasten neben das Brett. Die Zugliste läuft hier deshalb ohne eigene
   Höhe; gescrollt wird die Seite. */
.ce_pgnviewer.pgn_umfliessend .ct-move-list-container {
	height: auto;
	max-height: none;
	overflow: visible;
}

/* Auf schmalen Bildschirmen ist für ein Umfließen kein Platz: Dort steht das
   Brett wieder über der Zugliste. */
@media (max-width: 600px) {
	.ce_pgnviewer.pgn_umfliessend .ct-pgn-viewer-board-holder {
		float: none;
		position: static;
		margin: 0 auto 1em;
	}
}

/* -------------------------------------------------------------------------
 * Partieauswahl und Knopfleiste am Brett
 * ------------------------------------------------------------------------- */

/* ct-layout.js hängt beide in den Bereich des Brettes: die Auswahlliste
   darüber, die Knöpfe darunter. Damit sie die Breite des Brettes annehmen,
   bekommen sie hier die volle Breite ihres neuen Behälters. */
.ce_pgnviewer .ct-pgn-viewer-board-holder .ct-pgn-viewer-multi-game-selector-panel,
.ce_pgnviewer .ct-pgn-viewer-board-holder board-controls {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ce_pgnviewer .ct-pgn-viewer-board-holder .ct-pgn-viewer-multi-game-select {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0.4em;
}

/* Die Knöpfe stehen in einer Zeile — auch auf schmalen Bildschirmen, wo der
   Betrachter sie sonst untereinander setzt. Sie dürfen dafür schrumpfen, aber
   nicht unter die Größe, die sich mit dem Finger noch treffen lässt. */
.ce_pgnviewer .ct-pgn-viewer-board-holder board-controls .ct-nav-buttons,
.ce_pgnviewer .ct-pgn-viewer-board-holder board-controls > div {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.ce_pgnviewer .ct-pgn-viewer-board-holder board-controls button {
	flex: 0 1 auto;
	min-width: 40px;
}

/* -------------------------------------------------------------------------
 * Kopfzeile der Partie
 * ------------------------------------------------------------------------- */

/* Turnier, Ort, Runde, ECO-Schlüssel und Jahr stehen unter den Namen. Diese
   Zeile ist eine Nebenangabe und tritt deshalb etwas zurück. */
.ce_pgnviewer .ct-game-header-event-site-round-eco-year {
	font-size: 0.85em;
	font-style: italic;
}
/* -------------------------------------------------------------------------
 * Bedienung mit der Tastatur
 * ------------------------------------------------------------------------- */

/* Der Viewer schaltet den Fokusrahmen seiner Knöpfe ab. Wer mit der
   Tabulatortaste bedient, sieht sonst nicht, wo er gerade steht. */
.ce_pgnviewer ct-pgn-viewer button:focus-visible,
.ce_pgnviewer ct-pgn-viewer select:focus-visible,
.ce_pgnviewer ct-pgn-viewer input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Zeilen des Bundles um den Viewer herum
 * ------------------------------------------------------------------------- */

/* Hinweis auf Chesstempo unter dem Brett */
.pgn_backlink {
	margin: 0.3em 0 0;
	font-size: 0.8em;
}

/* Downloadlink der PGN-Datei */
.pgn_download {
	margin-top: 0.5em;
}

.pgn_download .mime_icon {
	vertical-align: middle;
	margin-right: 0.3em;
}

/* Der Viewer bringt eigene Abstände mit; nach unten etwas Luft zum nächsten
   Inhaltselement */
.ce_pgnviewer ct-pgn-viewer {
	margin-bottom: 0.5em;
}

/* -------------------------------------------------------------------------
 * Farben aus dem Theme der Website
 * ------------------------------------------------------------------------- */

/*
 * Der Betrachter bringt ein dunkles Design mit: fast schwarze Flächen, helle
 * Schrift. Auf einer Website mit hellem Layout wirkt er dadurch wie ein
 * Fremdkörper, und die Zugliste steht schwarz im weißen Text.
 *
 * Sein Stylesheet ist aber durchgehend über Variablen des Material-Designs
 * aufgebaut, jeweils mit dem dunklen Wert als Rückfall. Es genügt daher, diese
 * Variablen zu setzen: „transparent“ für die Flächen und „currentColor“ für die
 * Schrift. Beides nimmt, was die Seite vorgibt — das wirkt in einem hellen wie
 * in einem dunklen Theme.
 *
 * Wer einen eigenen Akzent möchte (Zugnummern, hervorgehobene Angaben), setzt
 * im Stylesheet der Website --pgn-akzent auf eine Farbe.
 */
.ce_pgnviewer {
	--mdc-theme-surface: transparent;
	--ct-theme-surface-lighter: transparent;
	--mdc-theme-background: transparent;
	--mdc-theme-on-surface: currentColor;
	--mdc-theme-text-primary-on-background: currentColor;
	--mdc-theme-text-secondary-on-background: currentColor;
	--mdc-theme-text-hint-on-background: currentColor;
	--mdc-theme-text-icon-on-background: currentColor;
	--mdc-theme-primary: var(--pgn-akzent, currentColor);
	--mdc-theme-secondary: var(--pgn-akzent, currentColor);
}

/* Ein paar Stellen im Chesstempo-Stylesheet setzen ihre Farbe unmittelbar,
   ohne den Umweg über eine Variable. */
.ce_pgnviewer board-controls,
.ce_pgnviewer game-header,
.ce_pgnviewer move-list,
.ce_pgnviewer .ct-move-list-container,
.ce_pgnviewer .ct-move-number {
	background-color: transparent;
}

/* Ohne eigene Fläche wirkt der Schatten der Karte verloren */
.ce_pgnviewer .ct-pgn-viewer-move-list-and-controls {
	box-shadow: none;
}

/* In der zweispaltigen Zugliste steht jeder Zug in einem Kästchen, dessen
   Rahmen sonst mit der Fläche verschwände. color-mix mischt die Schriftfarbe
   der Seite mit Transparenz und passt sich so jedem Theme an; Browser ohne
   color-mix zeigen einfach keinen Rahmen. */
.ce_pgnviewer .ct-move-list-style-twocolumn .ct-move-move {
	border-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* Kommentare, Varianten und das Ergebnis sind im mitgelieferten Design farbig
   abgesetzt — in Blau, Grün und Rot, abgestimmt auf den fast schwarzen Grund.
   Auf hellem Grund erreicht das Blau der Kommentare nur 2,5:1.
   Eine Farbe zu finden, die auf hellem UND dunklem Grund trägt, geht nicht;
   und color-mix hilft hier nicht weiter, weil currentColor innerhalb der
   Eigenschaft color gegen Schwarz rechnet statt gegen die geerbte Farbe.
   Deshalb übernehmen auch diese Stellen die Schrift der Seite und setzen sich
   über die Deckkraft ab: gut lesbar, aber ruhiger als die Züge. */
.ce_pgnviewer .ct-move-comment,
.ce_pgnviewer .ct-move-list-result-comment,
.ce_pgnviewer .ct-move-pre-comments,
.ce_pgnviewer .ct-variation-first-move,
.ce_pgnviewer .ct-varhandle-expand,
.ce_pgnviewer .ct-varhandle-expand-marker,
.ce_pgnviewer .ct-varhandle-collapse,
.ce_pgnviewer .ct-move-list-result-resultstring {
	color: inherit;
	opacity: 0.8;
}

/* Das Ergebnis der Partie steht für sich und bleibt voll deckend */
.ce_pgnviewer .ct-move-list-result-resultstring {
	opacity: 1;
	font-weight: 700;
}

/* Das Ergebnis gehört hinter den letzten Zug.
   Der Betrachter setzt es als eigenen Block mit clear:both ans Ende der
   Zugliste. In der Anordnung „Zugliste umfließt das Brett“ rutscht es dadurch
   unter das Brett: bei einer kurzen Partie gemessene 370 Pixel hinter dem
   letzten Zug, weit weg von den Partiedaten. Als Teil des Textflusses steht es
   dort, wo es hingehört. Der leere Behälter davor würde die Zeile trennen. */
.ce_pgnviewer .ct-move-list-result {
	display: inline;
	clear: none;
	margin-left: 0.4em;
}

.ce_pgnviewer .ct-move-list-empty-list-comment:empty {
	display: none;
}