/*!
 * chess-captcha — feuille de style par défaut. MIT.
 * Tout est réglable par variables CSS : redéfinissez-les sur .chess-captcha
 * pour adapter le widget à votre site sans toucher au JS.
 */
.chess-captcha {
  --cc-light: #eddfc6;
  --cc-dark: #9a6f4d;
  --cc-selected: #f2c14e;
  --cc-target: rgba(20, 120, 60, 0.45);
  --cc-size: min(320px, 78vw);
  /* Part de la case occupée par la pièce, et retouche de centrage optique. */
  --cc-piece-scale: 0.94;
  --cc-black-piece: #111;
  --cc-white-piece: #fff;
  /* Épaisseur du contour des pièces blanches. */
  --cc-outline: 1.1px;
  --cc-radius: 10px;
  --cc-ok: #1b7f3b;
  --cc-error: #c62828;
  display: block;
  max-width: var(--cc-size);
}

.cc-prompt {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.cc-board {
  display: grid;
  /* Les huit rangées sont imposées : sans `grid-template-rows`, une rangée dont
     la pièce dépasse le huitième de la hauteur s'agrandit et les cases cessent
     d'être carrées — donc seulement sur certains problèmes. */
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1;
  width: var(--cc-size);
  height: var(--cc-size);
  border-radius: var(--cc-radius);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Grille plutôt que flex : la pièce (100 % × 100 %) épouse alors exactement la
   case, donc sa zone cliquable ne déborde pas sur les voisines. */
.cc-square {
  position: relative;
  display: grid;
  place-items: stretch;
  /* `min-*: auto` est la valeur par défaut d'un élément de grille : sans ces
     deux lignes, une pièce plus haute que sa case pousse la rangée entière. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.cc-light { background: var(--cc-light); }
.cc-dark { background: var(--cc-dark); }
.cc-selected { box-shadow: inset 0 0 0 3px var(--cc-selected); }

/* Centrage explicite : ne pas dépendre de l'alignement de la case, qui a déjà
   changé une fois (flex → grid) et avait décalé la pastille. */
.cc-target::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--cc-target);
}

/*
 * La pièce occupe toute la case et s'y centre en grille. Le dessin étant un
 * SVG à viewBox fixe, il est géométriquement centré : plus de rattrapage
 * vertical à faire, contrairement aux glyphes Unicode d'avant, dont les
 * métriques changeaient d'une police système à l'autre.
 */
.cc-piece {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.cc-piece svg {
  width: calc(100% * var(--cc-piece-scale));
  height: calc(100% * var(--cc-piece-scale));
  display: block;
  overflow: visible;
}

/*
 * Une seule silhouette sert aux deux camps.
 *
 * Le contour des blancs vient d'ombres portées et non d'un `stroke` : chaque
 * pièce est faite de plusieurs formes qui se chevauchent (le pion, par
 * exemple, est deux cercles et un socle), et cerner chaque forme dessinerait
 * les traits de construction à l'intérieur de la pièce. Les ombres, elles,
 * travaillent sur la silhouette déjà composée : le trait suit son pourtour.
 */
.cc-piece svg [fill='none'] { fill: none; }
.cc-piece svg * { fill: currentColor; }

.cc-black { color: var(--cc-black-piece); }
.cc-white { color: var(--cc-white-piece); }

.cc-white svg {
  filter:
    drop-shadow(var(--cc-outline) 0 0 var(--cc-black-piece))
    drop-shadow(calc(-1 * var(--cc-outline)) 0 0 var(--cc-black-piece))
    drop-shadow(0 var(--cc-outline) 0 var(--cc-black-piece))
    drop-shadow(0 calc(-1 * var(--cc-outline)) 0 var(--cc-black-piece));
}

.cc-dragging { opacity: 0.35; }

.cc-ghost {
  position: fixed;
  width: calc(var(--cc-size) / 8);
  height: calc(var(--cc-size) / 8);
  transform: translate(-50%, -50%) scale(1.1);
  pointer-events: none;
  z-index: 9999;
}

.cc-status {
  min-height: 1.4em;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.cc-status.cc-ok { color: var(--cc-ok); font-weight: 600; }
.cc-status.cc-error { color: var(--cc-error); }

.cc-toggle {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
}

.cc-select {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  padding: 0.3rem;
}

/* Sans cela, le `display: block` ci-dessus l'emporte sur la règle [hidden] du navigateur. */
.cc-select[hidden] { display: none; }

.cc-solved .cc-board { box-shadow: 0 0 0 3px var(--cc-ok); }
.cc-solved .cc-piece { cursor: default; }