/* Solitaire à billes : styles propres à l'outil. Couleurs tirées des variables du site (thèmes clair et sombre). */
.o-solitaire-billes {
  min-width: 0;
  --o-solitaire-billes-bois: color-mix(in srgb, #b07a3c 22%, var(--surface-2));
  --o-solitaire-billes-trou: color-mix(in srgb, var(--texte) 22%, var(--surface));
  --o-solitaire-billes-vert: var(--ok-texte);
}

.o-solitaire-billes .o-solitaire-billes-choix { border-top: 0; padding-top: 0; justify-content: center; }
.atelier .o-solitaire-billes-choix .btn { min-height: 42px; font-size: .92rem; }
.atelier .o-solitaire-billes-choix .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }

.o-solitaire-billes-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; margin: 12px 0; }
.o-solitaire-billes-barre p { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; color: var(--texte-2); font-size: .92rem; }
.o-solitaire-billes-barre strong { font: 700 1.3rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--texte); min-width: 2ch; }

.o-solitaire-billes-cadre {
  width: min(100%, 470px); margin: 0 auto; padding: 14px; box-sizing: border-box;
  border-radius: 50%; background: var(--o-solitaire-billes-bois); border: 1px solid var(--bord);
}
.o-solitaire-billes[data-forme="triangle"] .o-solitaire-billes-cadre { border-radius: var(--rayon); padding: 18px 14px 14px; }
.o-solitaire-billes-plateau {
  --w: 7; --h: 7;
  position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); margin: 0 auto;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; border-radius: var(--rayon-petit);
}
.o-solitaire-billes-cadre:has(.o-solitaire-billes-plateau:focus-visible) { box-shadow: 0 0 0 3px var(--marque); }

.o-solitaire-billes-trou {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: calc(100% / var(--w)); height: calc(100% / var(--h)); display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.o-solitaire-billes-trou::before {
  content: ""; position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: var(--o-solitaire-billes-trou); box-shadow: inset 0 2px 3px color-mix(in srgb, #000 35%, transparent);
}
.o-solitaire-billes[data-forme="triangle"] .o-solitaire-billes-trou { height: calc(100% / var(--h)); }
.o-solitaire-billes-trou.centre::before { outline: 2px dashed color-mix(in srgb, var(--texte) 35%, transparent); outline-offset: 4px; }

.o-solitaire-billes-bille {
  position: relative; z-index: 1; width: 78%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #fff 0 6%, #8ab6ff 16%, #2f6fe0 55%, #173f8f 100%);
  box-shadow: 0 2px 3px color-mix(in srgb, #000 40%, transparent);
  opacity: 0; transform: scale(.4); transition: opacity .15s ease-out, transform .15s ease-out;
}
.o-solitaire-billes-trou.plein .o-solitaire-billes-bille { opacity: 1; transform: none; }
.o-solitaire-billes-trou.glisse { z-index: 5; }
.o-solitaire-billes-trou.glisse .o-solitaire-billes-bille { transition: none; box-shadow: 0 8px 14px color-mix(in srgb, #000 40%, transparent); }
.o-solitaire-billes-trou.retiree .o-solitaire-billes-bille { animation: o-solitaire-billes-retrait .3s ease-in; }
@keyframes o-solitaire-billes-retrait { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.3); } }

/* Billes qui peuvent sauter, bille choisie, trous d'arrivée, cadre du clavier */
.o-solitaire-billes-trou.jouable .o-solitaire-billes-bille { box-shadow: 0 0 0 2px var(--o-solitaire-billes-bois), 0 0 0 4px color-mix(in srgb, var(--texte) 70%, transparent), 0 2px 3px color-mix(in srgb, #000 40%, transparent); }
.o-solitaire-billes-trou.choisie .o-solitaire-billes-bille {
  background: radial-gradient(circle at 34% 30%, #fff 0 6%, #ffd27a 16%, #f0a020 55%, #a8620a 100%);
  box-shadow: 0 0 0 3px var(--texte), 0 4px 8px color-mix(in srgb, #000 40%, transparent); transform: scale(1.06);
}
.o-solitaire-billes-trou.cible::before {
  width: 56%; background: color-mix(in srgb, var(--o-solitaire-billes-vert) 45%, transparent);
  box-shadow: 0 0 0 3px var(--o-solitaire-billes-vert);
}
.o-solitaire-billes-trou.curseur::after {
  content: ""; position: absolute; inset: 4%; border-radius: 22%; border: 3px solid var(--marque); opacity: 0; pointer-events: none;
}
.o-solitaire-billes-plateau:focus-visible .o-solitaire-billes-trou.curseur::after { opacity: 1; }
@media (hover: hover) { .o-solitaire-billes-trou.plein:hover .o-solitaire-billes-bille { filter: brightness(1.12); } }

.o-solitaire-billes-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.atelier .o-solitaire-billes-actions .btn { min-height: 42px; }
.atelier .o-solitaire-billes-actions .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-solitaire-billes .btn:disabled { opacity: .45; cursor: default; }
.o-solitaire-billes .btn:focus-visible, .o-solitaire-billes input:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }
.o-solitaire-billes-option { display: flex; justify-content: center; margin: 10px 0 0; }
.o-solitaire-billes label.case { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: .95rem; color: var(--texte); cursor: pointer; }
.o-solitaire-billes input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--marque); }

.o-solitaire-billes-message { display: block; min-height: 1.5em; margin-top: 10px; text-align: center; font-size: .98rem; line-height: 1.45; color: var(--texte); }
.o-solitaire-billes-message.reussi { padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--ok-fond); color: var(--ok-texte); font-weight: 600; }
.o-solitaire-billes-message.fini { padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--surface-2); font-weight: 600; }
.o-solitaire-billes.gagne .o-solitaire-billes-cadre { box-shadow: 0 0 0 3px var(--ok-texte); }
.o-solitaire-billes.cherche [data-message] { color: var(--texte-2); }
.o-solitaire-billes .o-solitaire-billes-aide { margin: 8px 0 0; color: var(--texte-2); font-size: .88rem; line-height: 1.5; text-align: center; }

.o-solitaire-billes-bloc { display: grid; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-solitaire-billes-bloc h2 { margin: 0; font-size: 1.15rem; }
.o-solitaire-billes-bloc .o-solitaire-billes-aide { text-align: left; margin: 0; }
.o-solitaire-billes-records { width: 100%; max-width: 620px; border-collapse: collapse; font-size: .95rem; }
.o-solitaire-billes-records th, .o-solitaire-billes-records td { padding: 6px 8px; border-bottom: 1px solid var(--bord); text-align: left; }
.o-solitaire-billes-records td { font-variant-numeric: tabular-nums; }
.o-solitaire-billes-records thead th { color: var(--texte-2); font-weight: 600; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  .o-solitaire-billes-bille { transition: none; }
  .o-solitaire-billes-trou.retiree .o-solitaire-billes-bille { animation: none; }
}
@media (max-width: 560px) {
  .o-solitaire-billes-cadre { padding: 8px; }
  .o-solitaire-billes-barre { gap: 6px 16px; }
  .o-solitaire-billes-records { font-size: .86rem; }
  .o-solitaire-billes-records th, .o-solitaire-billes-records td { padding: 5px 4px; }
}