.lpv-wrapper .lpv-select {
    margin-bottom: 0.5em;
}

.lpv-wrapper .lpv-select__input {
    width: 100%;
    max-width: 480px;
}

.lpv-wrapper .lpv-root {
    width: 100%;
}

/*
 * lichess-pgn-viewer.css färbt das Brett standardmäßig über
 * cg-board { background-color: var(--board-color); } plus einem fest
 * einprogrammierten Schachbrettmuster, das dunkle Felder nur mit 20%
 * Schwarz abdunkelt. Das ergibt unabhängig von der gewählten Farbe nur
 * ein sehr geringes Kontrastverhältnis von ca. 1,5:1 zwischen hellen und
 * dunklen Feldern. Für ein normales, gut lesbares Schachbrett wird das
 * Muster hier daher komplett durch zwei unabhängige Farben ersetzt,
 * Kontrastverhältnis ca. 2,3:1.
 */
.lpv-wrapper cg-board {
    /*
     * Die Farben aus dem Element (--lpv-square-light/-dark) stehen im
     * style-Attribut des äußeren .lpv-root und werden hierher vererbt. Die
     * Standardfarben deshalb nur als Rückfallwert in var(), nicht als
     * eigene Deklaration auf cg-board - die würde die vererbten Werte
     * überschreiben.
     */
    background-color: transparent;
    background-image: conic-gradient(
        var(--lpv-square-dark, #b58863) 0deg 90deg,
        var(--lpv-square-light, #f0d9b5) 90deg 180deg,
        var(--lpv-square-dark, #b58863) 180deg 270deg,
        var(--lpv-square-light, #f0d9b5) 270deg 360deg
    );
    background-size: 25% 25%;
}

.lpv-wrapper .lpv-empty {
    font-style: italic;
}

/*
 * Zugliste "Rechts neben dem Brett" (showMoves: 'right'), responsiv:
 * lichess-pgn-viewer.css gibt diesem Modus nur starre Spalten ("auto
 * fit-content(40%)"). Hier gelten stattdessen dieselben flexiblen Spalten,
 * die die Bibliothek für ihren Modus "auto" verwendet:
 *
 * - Brett: minmax(200px, Obergrenze). Die Obergrenze ist die kleinere von
 *   Feld "Brettbreite" (--lpv-board-width, falls gesetzt - sonst ohne
 *   Begrenzung) und der Fensterhöhe abzüglich Steuerleiste (bzw. Spieler-
 *   leisten), damit Brett und Steuerleiste immer ganz sichtbar sind.
 * - Zugliste: minmax(232px, 1fr) - sie füllt den restlichen Platz und
 *   behält mindestens 232px, das Brett gibt zuerst nach.
 *
 * "Brettbreite" ist damit eine Höchstbreite: Auf breiten Bildschirmen hat
 * das Brett genau diese Breite, fehlt der Platz, wird es kleiner. Reicht
 * die Breite des Viewers nicht mehr für beide Mindestbreiten (432px),
 * rutscht die Zugliste unter das Brett (siehe @container weiter unten).
 */
.lpv-wrapper .lpv--moves-right {
    grid-template-columns:
        minmax(200px, min(var(--lpv-board-width, 100vw), calc(100vh - var(--controls-height))))
        minmax(232px, 1fr);
}

.lpv-wrapper .lpv--players.lpv--moves-right {
    grid-template-columns:
        minmax(200px, min(var(--lpv-board-width, 100vw), calc(100vh - 2 * 2em - var(--controls-height))))
        minmax(232px, 1fr);
}

/*
 * Zugliste "Links neben dem Brett" (lpv_showMoves = 'l'): der lichess-
 * Viewer kennt diesen Modus nicht - der Controller übergibt ihm daher
 * 'right', und der Wrapper-Modifier ".lpv-wrapper--moves-left" (siehe
 * ce_lichessPgnviewer.html.twig) spiegelt hier nur die Grid-Spalten.
 * Brett und Zugliste verhalten sich genauso wie bei "rechts", nur in
 * umgekehrter Spaltenreihenfolge.
 */
.lpv-wrapper.lpv-wrapper--moves-left .lpv--moves-right {
    grid-template-areas: "side board" "side controls";
    grid-template-columns:
        minmax(232px, 1fr)
        minmax(200px, min(var(--lpv-board-width, 100vw), calc(100vh - var(--controls-height))));
}

.lpv-wrapper.lpv-wrapper--moves-left .lpv--players.lpv--moves-right {
    grid-template-areas: "side player-top" "side board" "side player-bot" "side controls";
    grid-template-columns:
        minmax(232px, 1fr)
        minmax(200px, min(var(--lpv-board-width, 100vw), calc(100vh - 2 * 2em - var(--controls-height))));
}

/*
 * Menü und PGN-Ansicht überdecken das Brett. lichess-pgn-viewer.css
 * platziert sie über feste Spaltennummern (grid-area: 1/1/2/2 bzw. mit
 * Spielerleisten 1/1/4/2), also immer in Spalte 1 - bei gespiegelten
 * Spalten läge das Menü sonst über der Zugliste statt über dem Brett.
 */
.lpv-wrapper.lpv-wrapper--moves-left .lpv--moves-right .lpv__menu,
.lpv-wrapper.lpv-wrapper--moves-left .lpv--moves-right .lpv__pgn {
    grid-area: 1 / 2 / 2 / 3;
}

.lpv-wrapper.lpv-wrapper--moves-left .lpv--players.lpv--moves-right .lpv__menu,
.lpv-wrapper.lpv-wrapper--moves-left .lpv--players.lpv--moves-right .lpv__pgn {
    grid-area: 1 / 2 / 4 / 3;
}

/*
 * Höhe der Zugliste, wenn sie unter dem Brett steht - bei Zugliste "Unter
 * dem Brett" ebenso wie beim gestapelten Layout von "rechts"/"links"
 * (siehe @container unten). lichess-pgn-viewer.css sieht dafür fest 6em
 * vor, das reicht nur für wenige Zeilen. Die Höhe ist über die CSS-
 * Variable --lpv-moves-height einstellbar (Standard 14em), z. B. im
 * eigenen Theme: ".lpv-wrapper { --lpv-moves-height: 18em; }".
 */
.lpv-wrapper .lpv--moves-bottom {
    grid-template-rows: auto var(--controls-height) var(--lpv-moves-height, 14em);
}

.lpv-wrapper .lpv--players.lpv--moves-bottom {
    grid-template-rows: 2em auto 2em var(--controls-height) var(--lpv-moves-height, 14em);
}

/*
 * Gestapeltes Layout (Zugliste unter dem Brett), sobald der Viewer selbst
 * schmaler ist als die beiden Mindestbreiten nebeneinander (Brett 200px +
 * Zugliste 232px = 432px). Maßgeblich ist bewusst die Breite des Viewers,
 * nicht die des Browserfensters (wie bei der @media(max-width: 450px)-
 * Regel für "auto" in lichess-pgn-viewer.css): Steht der Viewer in einem
 * schmaleren Bereich der Seite, würde er sonst bei knapp über 450px
 * Fensterbreite noch nebeneinander dargestellt und über den Rand ragen.
 * Container ist das innere #lpv-...-Div ([data-lpv-root]) um den Viewer.
 */
.lpv-wrapper [data-lpv-root] {
    container-type: inline-size;
}

@container (width < 432px) {
    .lpv-wrapper .lpv--moves-right,
    .lpv-wrapper.lpv-wrapper--moves-left .lpv--moves-right {
        grid-template-areas: "board" "controls" "side";
        grid-template-columns: minmax(200px, min(var(--lpv-board-width, 100vw), calc(100vh - var(--controls-height) - var(--lpv-moves-height, 14em))));
        grid-template-rows: auto var(--controls-height) var(--lpv-moves-height, 14em);
    }

    .lpv-wrapper .lpv--players.lpv--moves-right,
    .lpv-wrapper.lpv-wrapper--moves-left .lpv--players.lpv--moves-right {
        grid-template-areas: "player-top" "board" "player-bot" "controls" "side";
        grid-template-columns: minmax(200px, min(var(--lpv-board-width, 100vw), calc(100vh - 2 * 2em - var(--controls-height) - var(--lpv-moves-height, 14em))));
        grid-template-rows: 2em auto 2em var(--controls-height) var(--lpv-moves-height, 14em);
    }

    /* Gestapelt gibt es nur eine Spalte: Menü wieder in Spalte 1 */
    .lpv-wrapper.lpv-wrapper--moves-left .lpv--moves-right .lpv__menu,
    .lpv-wrapper.lpv-wrapper--moves-left .lpv--moves-right .lpv__pgn {
        grid-area: 1 / 1 / 2 / 2;
    }

    .lpv-wrapper.lpv-wrapper--moves-left .lpv--players.lpv--moves-right .lpv__menu,
    .lpv-wrapper.lpv-wrapper--moves-left .lpv--players.lpv--moves-right .lpv__pgn {
        grid-area: 1 / 1 / 4 / 2;
    }
}

.lpv-wrapper .lpv-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 1.5em;
    margin: 0 0 0.75em;
    font-size: 0.9em;
}

.lpv-wrapper .lpv-info__row {
    display: flex;
    gap: 0.35em;
    margin: 0;
}

.lpv-wrapper .lpv-info__row[hidden] {
    display: none;
}

.lpv-wrapper .lpv-info dt {
    font-weight: bold;
}

.lpv-wrapper .lpv-info dd {
    margin: 0;
}

.lpv-wrapper .lpv-round-nav {
    margin: 0 0 0.75em;
    font-size: 1em;
}

.lpv-wrapper .lpv-remark {
    margin: 0.75em 0 0;
}

.lpv-wrapper .lpv-round-nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lpv-wrapper .lpv-round-nav__current {
    font-weight: bold;
}

.lpv-wrapper .lpv-round-nav__prev,
.lpv-wrapper .lpv-round-nav__next {
    white-space: nowrap;
}

.lpv-wrapper .lpv-round-nav__next {
    margin-left: auto;
}

/*
 * Notation der Hauptlinie als Fließtext (lpv_movesLayout = 'f', Wrapper-
 * Modifier ".lpv-wrapper--moves-flow", siehe ce_lichessPgnviewer.html.twig):
 * lichess-pgn-viewer.css erzeugt die Spalten der Zugliste über feste
 * Breiten (Zugnummer 15 %, jeder Zug 41 %). Hier bekommen Zugnummer und
 * Züge nur ihre natürliche Breite und fließen wie Text. Kommentare und
 * Varianten bleiben unverändert eigene Blöcke über die volle Breite.
 */
.lpv-wrapper.lpv-wrapper--moves-flow .lpv__moves {
    align-items: baseline;
    padding: .2em .4em;
}

.lpv-wrapper.lpv-wrapper--moves-flow .lpv__moves > index {
    flex: 0 0 auto;
    margin: 0 .15em 0 .35em;
}

.lpv-wrapper.lpv-wrapper--moves-flow .lpv__moves > .move {
    flex: 0 0 auto;
    padding: 4px .2em 6px;
}

/*
 * Platzhalter "..." (die Hauptlinie geht nach einem Kommentar oder einer
 * Variante mit Schwarz weiter) ausblenden und stattdessen die Zugnummer
 * als "33..." schreiben. Ohne :has()-Unterstützung bleibt es bei "33.".
 */
.lpv-wrapper.lpv-wrapper--moves-flow .lpv__moves > .move.empty {
    display: none;
}

.lpv-wrapper.lpv-wrapper--moves-flow .lpv__moves > index:has(+ .move.empty)::after {
    content: "..";
}

/*
 * Züge in Kommentaren (siehe markCommentMoves() in
 * lichess-pgn-viewer-init.js): nicht mitten im Zug umbrechen. Die Schrift
 * (z. B. eine Figurinen-Schrift wie in der Zugliste) legt das Theme fest.
 */
.lpv-wrapper .lpv__moves .lpv-comment-move {
    white-space: nowrap;
}