/*
 * Lecteur PGN : feuille de style du lecteur de parties.
 *
 * Les couleurs et les polices viennent des variables CSS du thème (--cn-…).
 * Chaque variable a une valeur de secours : le lecteur reste correct avec
 * n'importe quel thème. Une couleur écrite dans une balise [pgn] ou dans la
 * configuration du plugin arrive par les variables --lpgn-… et passe devant.
 *
 * Les règles de position de l'échiquier (cg-…) reprennent celles de
 * chessground, l'échiquier de Lichess (GPL-3.0-or-later).
 */

/* Pièces et figurines : Noto Sans Symbols 2 réduite aux douze pièces d'échecs */
@font-face {
	font-family: 'Lecteur PGN Echecs';
	src: url('../polices/noto-sans-symbols-2-echecs.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: block;
	unicode-range: U+2654-265F;
}

.lpgn {
	--_claire: var(--lpgn-case-claire, var(--cn-case-claire, #EEEDD2));
	--_foncee: var(--lpgn-case-foncee, var(--cn-case-foncee, #7A9157));
	--_dernier-clair: var(--lpgn-dernier-clair, var(--cn-dernier-clair, #F2E58A));
	--_dernier-fonce: var(--lpgn-dernier-fonce, var(--cn-dernier-fonce, #B9B34A));
	--_cadre: var(--lpgn-cadre, var(--cn-cadre-echiquier, #3E4A32));
	--_texte: var(--cn-texte, #24291D);
	--_secondaire: var(--cn-texte-secondaire, #5A6150);
	--_accent: var(--cn-accent, #4A5E2F);
	--_accent-survol: var(--cn-accent-survol, #2F3826);
	--_filet: var(--cn-filet, #C9C9AE);
	--_surface: var(--cn-surface, #FBF9F0);
	--_vert: var(--cn-vert, #39432E);
	--_sur-vert: var(--cn-sur-vert, #F3EDC8);
	--_police-texte: var(--cn-police-texte, Georgia, 'Times New Roman', serif);
	--_police-titres: var(--cn-police-titres, Georgia, 'Times New Roman', serif);

	margin: 2rem 0;
	color: var(--_texte);
	font-family: var(--_police-texte);
	container-type: inline-size;
	container-name: lpgn;
	clear: both;
}

.lpgn *,
.lpgn *::before,
.lpgn *::after {
	box-sizing: border-box;
}

/* un élément marqué « hidden » reste caché, quelle que soit la feuille de style du thème */
.lpgn [hidden] {
	display: none !important;
}

/* ---------- Mise en page ---------- */

.lpgn-corps {
	display: grid;
	gap: 1.5rem;
}

.lpgn-plateau:empty {
	display: none;
}

/* quand JavaScript est disponible, la place de l'échiquier est réservée d'avance */
@media (scripting: enabled) {
	.lpgn-plateau:empty {
		display: block;
		aspect-ratio: 1;
		background: var(--_cadre);
	}
}

@container lpgn (min-width: 760px) {
	.lpgn--horizontal .lpgn-corps {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 3rem;
		align-items: start;
	}

	.lpgn--horizontal .lpgn-plateau {
		position: sticky;
		top: 1rem;
	}

	.lpgn--horizontal.lpgn--actif .lpgn-coups {
		max-height: min(56rem, 86vh);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--_filet) transparent;
	}

	.lpgn--vertical .lpgn-plateau {
		max-width: 34rem;
	}
}

.lpgn--horizontal:not(.lpgn--actif) .lpgn-corps,
.lpgn-partie--sans-echiquier .lpgn-corps {
	grid-template-columns: minmax(0, 1fr);
}

/* ---------- En-tête de la partie ---------- */

.lpgn-entete {
	margin: 0 0 1.25rem;
}

.lpgn-joueurs {
	margin: 0;
	font-family: var(--_police-titres);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
}

.lpgn-contre {
	font-style: italic;
	font-weight: 500;
	color: var(--_secondaire);
}

.lpgn-elo {
	font-family: var(--_police-texte);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--_secondaire);
}

.lpgn-score {
	margin-left: 0.5rem;
	white-space: nowrap;
}

.lpgn-epreuve {
	margin: 0.25rem 0 0;
	font-style: italic;
	color: var(--_secondaire);
}

.lpgn-titre-partie {
	margin: 0 0 0.75rem;
	font-family: var(--_police-titres);
	font-weight: 600;
}

/* ---------- Échiquier ---------- */

.lpgn-cadre {
	padding: 10px;
	background: var(--_cadre);
}

.lpgn .lpgn-lpv {
	outline: 0;
}

.lpgn .cg-wrap {
	position: relative;
	display: block;
	width: 100%;
	/* largeur multiple de 8 pixels : huit cases égales, cadre régulier */
	width: round(down, 100%, 8px);
	height: auto;
	aspect-ratio: 1;
	margin: 0 auto;
	padding: 0;
}

.lpgn cg-container {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.lpgn cg-board {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 0;
	user-select: none;
	background-color: var(--_claire);
	background-image: conic-gradient(var(--_foncee) 0 90deg, transparent 90deg 180deg, var(--_foncee) 180deg 270deg, transparent 270deg);
	background-size: 25% 25%;
}

.lpgn cg-board square {
	position: absolute;
	top: 0;
	left: 0;
	width: 12.5%;
	height: 12.5%;
	pointer-events: none;
}

.lpgn cg-board square.lpgn-dernier--clair {
	background-color: var(--_dernier-clair);
}

.lpgn cg-board square.lpgn-dernier--fonce {
	background-color: var(--_dernier-fonce);
}

.lpgn cg-board square.check {
	background: radial-gradient(ellipse at center, rgba(178, 34, 24, 0.9) 0%, rgba(178, 34, 24, 0.55) 35%, rgba(178, 34, 24, 0) 72%);
}

/* Pièces : deux glyphes superposés, le plein donne la couleur, le contour le dessin */
.lpgn piece {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 12.5%;
	height: 12.5%;
	pointer-events: none;
	will-change: transform;
	font-family: 'Lecteur PGN Echecs', 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'DejaVu Sans', sans-serif;
	font-size: calc(var(---cg-width, 320px) / 8 * 0.82);
	line-height: 1;
}

.lpgn piece::before,
.lpgn piece::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lpgn piece.white::before { color: #FDFCF4; }
.lpgn piece.white::after { color: #1B2016; }
.lpgn piece.black::before { color: #1B2016; }

.lpgn piece.king::before { content: '\265A'; }
.lpgn piece.queen::before { content: '\265B'; }
.lpgn piece.rook::before { content: '\265C'; }
.lpgn piece.bishop::before { content: '\265D'; }
.lpgn piece.knight::before { content: '\265E'; }
.lpgn piece.pawn::before { content: '\265F'; }

.lpgn piece.white.king::after { content: '\2654'; }
.lpgn piece.white.queen::after { content: '\2655'; }
.lpgn piece.white.rook::after { content: '\2656'; }
.lpgn piece.white.bishop::after { content: '\2657'; }
.lpgn piece.white.knight::after { content: '\2658'; }
.lpgn piece.white.pawn::after { content: '\2659'; }

.lpgn piece.anim { z-index: 8; }
.lpgn piece.fading { z-index: 1; opacity: 0.5; }

.lpgn cg-container > svg,
.lpgn cg-container > cg-auto-pieces {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 3;
}

/* Coordonnées dans le coin des cases */
.lpgn coords {
	position: absolute;
	z-index: 1;
	display: flex;
	pointer-events: none;
	user-select: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(9px, calc(var(---cg-width, 320px) / 8 * 0.2), 12px);
	font-weight: 700;
	line-height: 1;
	color: #1B2016;
}

.lpgn coords.ranks {
	top: 0;
	left: 0;
	height: 100%;
	flex-flow: column-reverse;
}

.lpgn coords.ranks.black { flex-flow: column; }

.lpgn coords.ranks coord {
	flex: 1 1 0;
	padding: 3px 0 0 3px;
}

.lpgn coords.files {
	bottom: 0;
	left: 0;
	width: 100%;
	flex-flow: row;
	text-align: right;
}

.lpgn coords.files.black { flex-flow: row-reverse; }

.lpgn coords.files coord {
	flex: 1 1 0;
	padding: 0 3px 3px 0;
}

/* ---------- Commandes ---------- */

.lpgn-commandes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
}

.lpgn-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--_filet);
	border-radius: 0;
	background: var(--_surface);
	color: var(--_texte);
	cursor: pointer;
	font: inherit;
}

.lpgn-bouton:hover {
	border-color: var(--_accent);
	background: var(--_accent);
	color: #FFFFFF;
}

.lpgn-bouton[aria-disabled='true'] {
	color: #8A8F80;
	cursor: default;
}

.lpgn-bouton[aria-disabled='true']:hover {
	border-color: var(--_filet);
	background: var(--_surface);
	color: #8A8F80;
}

.lpgn-bouton--retourner {
	margin-left: 6px;
}

.lpgn-compteur {
	margin-left: auto;
	color: var(--_secondaire);
	font-size: 0.9375rem;
}

.lpgn button:focus-visible,
.lpgn a:focus-visible,
.lpgn summary:focus-visible,
.lpgn select:focus-visible {
	outline: 3px solid var(--_accent);
	outline-offset: 2px;
}

/* ---------- Encadré du coup en cours ---------- */

.lpgn-encadre {
	margin-top: 1.25rem;
	padding: 1.25rem 1.5rem;
	background: var(--_vert);
	color: var(--_sur-vert);
}

.lpgn-encadre p {
	margin: 0;
}

.lpgn-encadre-coup {
	font-family: var(--_police-titres), 'Lecteur PGN Echecs';
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.lpgn-encadre-texte {
	margin-top: 0.35rem !important;
	font-style: italic;
	line-height: 1.6;
}

.lpgn-position {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	color: var(--_secondaire);
}

.lpgn-position summary,
.lpgn-repli > summary,
.lpgn-sommaire > summary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
	color: var(--_accent);
	text-decoration: underline;
}

.lpgn-position p {
	margin: 0.25rem 0 0;
	line-height: 1.6;
}

/* ---------- Notation ---------- */

.lpgn-titre-notation {
	margin: 0 0 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--_accent);
	font-family: var(--_police-titres);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.lpgn-coups {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.lpgn-coups--suite {
	display: block;
	line-height: 2.75;
}

.lpgn-fig,
.lpgn-legende .lpgn-coup {
	font-family: 'Lecteur PGN Echecs', 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'DejaVu Sans', sans-serif;
}

.lpgn-legende .lpgn-coup {
	font-family: 'Lecteur PGN Echecs', var(--_police-texte);
}

.lpgn-num {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--_secondaire);
	font-variant-numeric: tabular-nums;
}

.lpgn-coup {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
}

button.lpgn-coup {
	cursor: pointer;
}

button.lpgn-coup:hover {
	background: var(--_claire);
}

.lpgn-coup--actif,
button.lpgn-coup--actif:hover {
	background: var(--_accent);
	color: #FFFFFF;
	font-weight: 600;
}

.lpgn-coup--illisible {
	color: var(--_secondaire);
	text-decoration: line-through;
}

.lpgn-signe {
	margin-left: 1px;
}

.lpgn-vide {
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
	color: var(--_secondaire);
}

.lpgn-coups > .lpgn-commentaire,
.lpgn-coups > .lpgn-variante,
.lpgn-coups > .lpgn-resultat {
	grid-column: 1 / -1;
}

p.lpgn-commentaire {
	margin: 0.25rem 0 0.5rem;
	padding-left: 1rem;
	border-left: 3px solid var(--_filet);
	font-style: italic;
	line-height: 1.6;
}

span.lpgn-commentaire {
	font-style: italic;
}

p.lpgn-variante {
	margin: 0.25rem 0 0.5rem;
	padding-left: 1rem;
	color: var(--_secondaire);
	font-size: 1rem;
	line-height: 2.75;
}

.lpgn-variante .lpgn-num,
.lpgn-variante .lpgn-coup,
.lpgn-coups--suite .lpgn-num,
.lpgn-coups--suite .lpgn-coup {
	display: inline-flex;
	vertical-align: middle;
}

.lpgn-variante .lpgn-coup,
.lpgn-coups--suite .lpgn-coup {
	min-width: 44px;
	justify-content: center;
	padding: 0 0.35rem;
	color: var(--_texte);
}

.lpgn-variante .lpgn-coup--actif,
.lpgn-coups--suite .lpgn-coup--actif {
	color: #FFFFFF;
}

.lpgn-variante .lpgn-num,
.lpgn-coups--suite .lpgn-num {
	margin-left: 0.25rem;
}

.lpgn-resultat {
	display: block;
	padding: 0.5rem 0 0.25rem;
	font-weight: 600;
}

.lpgn-coups--suite .lpgn-resultat {
	display: inline;
	padding-left: 0.5rem;
}

.lpgn-repli {
	margin-top: 0.25rem;
}

/* ---------- Actions ---------- */

.lpgn-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 1rem 0 0;
}

.lpgn-actions a,
.lpgn-copier,
.lpgn-fichier a,
.lpgn-sommaire a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--_accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.lpgn-actions a:hover,
.lpgn-copier:hover,
.lpgn-fichier a:hover,
.lpgn-sommaire a:hover {
	color: var(--_accent-survol);
}

.lpgn-fichier {
	margin: 0.5rem 0 0;
}

/* ---------- Plusieurs parties ---------- */

.lpgn-selecteur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 1.25rem;
}

.lpgn-selecteur label {
	font-family: var(--_police-titres);
	font-size: 1.25rem;
	font-weight: 600;
}

.lpgn-selecteur select {
	flex: 1 1 16rem;
	max-width: 100%;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--_filet);
	border-radius: 0;
	background: var(--_surface);
	color: var(--_texte);
	font: inherit;
}

.lpgn--multiple.lpgn--actif .lpgn-titre-partie {
	display: none;
}

.lpgn--multiple:not(.lpgn--actif) .lpgn-partie + .lpgn-partie {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--_filet);
}

.lpgn-sommaire {
	margin-bottom: 1.25rem;
}

.lpgn-sommaire ol {
	margin: 0.5rem 0 0;
	padding-left: 2.25rem;
	columns: 22rem auto;
	column-gap: 2rem;
}

.lpgn-sommaire li {
	break-inside: avoid;
}

/* ---------- Aperçu (page d'accueil) ---------- */

.lpgn--apercu {
	margin: 0;
}

.lpgn-legende {
	margin: 0.5rem 0 0;
	text-align: center;
	font-style: italic;
	color: var(--_secondaire);
}

.lpgn-legende .lpgn-coup {
	display: inline;
	min-height: 0;
	padding: 0;
}

.lpgn-externe,
.lpgn-vide-message {
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
	.lpgn piece {
		transition: none !important;
	}
}

@media print {
	.lpgn-commandes,
	.lpgn-actions,
	.lpgn-position,
	.lpgn-selecteur {
		display: none;
	}

	.lpgn--actif .lpgn-coups {
		max-height: none !important;
		overflow: visible !important;
	}
}