/* Jeu d'échecs : styles propres à l'outil. L'échiquier et les pièces sont des objets volontairement colorés. */
.o-echecs {
  --o-echecs-clair: #e8e4d8; --o-echecs-fonce: #8197a9; --o-echecs-coord-clair: #5f7486; --o-echecs-coord-fonce: #eef1f4;
  --o-echecs-blanc: #fbfaf6; --o-echecs-blanc-trait: #23262c; --o-echecs-noir: #2a2e36; --o-echecs-noir-trait: #0d0f12; --o-echecs-noir-detail: #d4d8de;
  --o-echecs-dernier: rgb(234 196 76 / 48%); --o-echecs-choisie: rgb(234 196 76 / 75%); --o-echecs-point: rgb(20 30 40 / 32%); --o-echecs-echec: #d64545;
  min-width: 0;
}
:root[data-theme="dark"] .o-echecs { --o-echecs-clair: #b8b4a9; --o-echecs-fonce: #5b6f80; --o-echecs-coord-clair: #42566a; --o-echecs-coord-fonce: #dfe5ea; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .o-echecs { --o-echecs-clair: #b8b4a9; --o-echecs-fonce: #5b6f80; --o-echecs-coord-clair: #42566a; --o-echecs-coord-fonce: #dfe5ea; }
}
.o-echecs [hidden] { display: none !important; }
.o-echecs .o-echecs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.o-echecs .o-echecs-choix { padding: 0 0 8px; border-top: 0; }
.atelier .o-echecs .o-echecs-choix .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-echecs .o-echecs-reglages { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; padding-bottom: 6px; }

.o-echecs .o-echecs-scene { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 18px; border-top: 1px solid var(--bord); margin-top: 12px; }
.o-echecs .o-echecs-message { min-height: 3em; max-width: 64ch; font-weight: 700; font-size: 1.02rem; text-align: center; color: var(--texte); }
.o-echecs.fini .o-echecs-message { color: var(--marque); }
.o-echecs .tirage-astuce { margin: 0; text-align: center; }

.o-echecs .o-echecs-jeu { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 22px; width: 100%; }
.o-echecs .o-echecs-plateau { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); flex: 0 1 520px; min-width: 0; }
.o-echecs .o-echecs-cadre { position: relative; }
.o-echecs .o-echecs-echiquier {
  display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; aspect-ratio: 1; border: 3px solid var(--o-echecs-fonce); border-radius: 6px;
  overflow: hidden; container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none;
}
.o-echecs .o-echecs-case {
  position: relative; display: block; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; aspect-ratio: 1; cursor: pointer;
  background: var(--o-echecs-fonce); -webkit-tap-highlight-color: transparent;
}
.o-echecs .o-echecs-case.clair { background: var(--o-echecs-clair); }
.o-echecs .o-echecs-case.dernier { background-image: linear-gradient(var(--o-echecs-dernier), var(--o-echecs-dernier)); }
.o-echecs .o-echecs-case.choisie { background-image: linear-gradient(var(--o-echecs-choisie), var(--o-echecs-choisie)); }
.o-echecs .o-echecs-case.echec { background-image: radial-gradient(circle, var(--o-echecs-echec) 0%, rgb(214 69 69 / 55%) 45%, transparent 72%); }
.o-echecs .o-echecs-case.cible::after {
  content: ""; position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; border-radius: 50%; background: var(--o-echecs-point); pointer-events: none;
}
.o-echecs .o-echecs-case.cible-prise::after {
  content: ""; position: absolute; inset: 4%; border-radius: 50%; border: max(3px, 1.1cqi) solid var(--o-echecs-point); pointer-events: none;
}
.o-echecs .o-echecs-piece { position: absolute; inset: 4%; width: 92%; height: 92%; pointer-events: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.o-echecs .o-echecs-piece:not(.blanc):not(.noir) { display: none; }
.o-echecs .o-echecs-piece.blanc { fill: var(--o-echecs-blanc); stroke: var(--o-echecs-blanc-trait); color: var(--o-echecs-blanc-trait); }
.o-echecs .o-echecs-piece.noir { fill: var(--o-echecs-noir); stroke: var(--o-echecs-noir-trait); color: var(--o-echecs-noir-detail); }
.o-echecs .o-echecs-case.leve .o-echecs-piece { opacity: .3; }
.o-echecs .o-echecs-fantome { position: fixed; inset: auto; z-index: 50; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 6px rgb(0 0 0 / 35%)); }
.o-echecs .o-echecs-coord { position: absolute; font: 700 max(9px, 2.3cqi)/1 var(--police); pointer-events: none; color: var(--o-echecs-coord-fonce); }
.o-echecs .o-echecs-case.clair .o-echecs-coord { color: var(--o-echecs-coord-clair); }
.o-echecs .o-echecs-coord.rang { top: 3px; left: 3px; }
.o-echecs .o-echecs-coord.col { right: 3px; bottom: 2px; }
.o-echecs.sans-coords .o-echecs-coord { display: none; }
.o-echecs .o-echecs-case:focus-visible { outline: 3px solid var(--marque); outline-offset: -3px; z-index: 1; }
.o-echecs .o-echecs-case.pose .o-echecs-piece { animation: o-echecs-pose .18s ease-out; }
@keyframes o-echecs-pose { from { transform: scale(.82); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .o-echecs .o-echecs-case.pose .o-echecs-piece { animation: none; }
}

.o-echecs .o-echecs-promo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: min(92%, 340px); padding: 14px; text-align: center;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
}
.o-echecs .o-echecs-promo p { margin: 0 0 10px; font-weight: 700; }
.o-echecs .o-echecs-promo div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.o-echecs .o-echecs-promo [data-piece] { position: relative; aspect-ratio: 1; padding: 0; background: var(--o-echecs-clair); }
.o-echecs .o-echecs-promo [data-piece] svg { position: absolute; inset: 6%; width: 88%; height: 88%; }
.o-echecs .o-echecs-promo-annuler { margin-top: 10px; }

.o-echecs .o-echecs-horloge {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  background: var(--surface-2); color: var(--texte-2); font-size: .92rem;
}
.o-echecs .o-echecs-temps { font: 700 1.25rem/1.2 var(--mono); color: var(--texte); font-variant-numeric: tabular-nums; }
.o-echecs .o-echecs-horloge.actif { border-color: var(--marque); box-shadow: inset 4px 0 0 var(--marque); color: var(--texte); }
.o-echecs .o-echecs-horloge.actif.bas .o-echecs-temps { color: var(--erreur-texte); }

.o-echecs .o-echecs-cote { display: flex; flex-direction: column; gap: 10px; flex: 1 1 220px; max-width: 300px; min-width: 0; }
.o-echecs .o-echecs-titre { margin: 0; font-size: .95rem; color: var(--texte-2); font-weight: 600; }
.o-echecs .o-echecs-historique {
  margin: 0; padding: 8px 8px 8px 2.8em; height: 300px; overflow-y: auto; border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  background: var(--surface-2); font: .95rem/1.65 var(--mono); color: var(--texte);
}
.o-echecs .o-echecs-historique li span { display: inline-block; min-width: 6.5ch; }
.o-echecs .o-echecs-historique .o-echecs-aucun { list-style: none; margin-left: -2.2em; font-family: var(--police); color: var(--texte-2); }
.o-echecs .o-echecs-saisie label, .o-echecs .o-echecs-import label { display: block; margin-bottom: 4px; font-size: .9rem; color: var(--texte-2); }
.o-echecs .o-echecs-saisie div { display: flex; gap: 8px; }
.o-echecs .o-echecs-saisie input { flex: 1; min-width: 0; font-family: var(--mono); }

.o-echecs .o-echecs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.o-echecs .o-echecs-export { width: min(100%, 760px); font: .85rem/1.5 var(--mono); }
.o-echecs .o-echecs-import { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--bord); }
.o-echecs .o-echecs-import textarea { width: 100%; font: .85rem/1.5 var(--mono); box-sizing: border-box; }
.o-echecs .o-echecs-import .btn { justify-self: start; }
.o-echecs .btn:focus-visible, .o-echecs select:focus-visible, .o-echecs input:focus-visible, .o-echecs textarea:focus-visible,
.o-echecs .o-echecs-historique:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }

.o-echecs .o-echecs-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--bord); }
.o-echecs .o-echecs-stats strong { font-size: .9rem; color: var(--texte-2); font-weight: 600; }
.o-echecs .o-echecs-stats dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1; }
.o-echecs .o-echecs-stats dl div { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); }
.o-echecs .o-echecs-stats dt { font-size: .88rem; color: var(--texte-2); }
.o-echecs .o-echecs-stats dd { margin: 0; font: 700 1.05rem var(--mono); color: var(--texte); }

@media (max-width: 720px) {
  .o-echecs .o-echecs-cote { max-width: none; flex-basis: 100%; }
  .o-echecs .o-echecs-historique { height: 150px; }
}