/* La Quête du Cavalier — plateau : tuiles, cases, tracé et cavalier. */

/* ---------- Plateau ---------- */

.board-wrap {
  flex: 1; /* occupe la hauteur libre : commandes en bas de l'écran, sous le pouce */
  display: grid;
  place-items: center;
  container-type: inline-size;
}

.board {
  --vh: 100vh;
  --avail-w: calc(100vw - 2 * var(--gutter));
  --avail-h: calc(var(--vh) - var(--chrome));
  /* Les petits plateaux ont droit à de plus grandes cases. */
  --cell-max: max(76px, min(104px, calc(330px / var(--cols))));
  /* Taille d'une case : tenir en largeur et en hauteur, sans descendre sous 40 px (ou la
     largeur disponible si elle est plus petite) : mieux vaut défiler verticalement que viser mal. */
  --cell-w: calc(var(--avail-w) / var(--cols));
  --cell: clamp(min(40px, var(--cell-w)), min(var(--cell-w), calc(var(--avail-h) / var(--rows))), var(--cell-max));
  --gap: max(1.5px, calc(var(--cell) * 0.045));
  --round: calc(var(--cell) * 0.16);
  position: relative;
  width: calc(var(--cell) * var(--cols));
  height: calc(var(--cell) * var(--rows));
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

@supports (height: 100dvh) {
  .board { --vh: 100dvh; }
}

@supports (width: 1cqw) {
  .board { --avail-w: 100cqw; }
}

.board__tiles,
.board__cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}

.board__trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.board__cells { z-index: 2; }

.tile {
  position: relative;
  margin: var(--gap);
  border-radius: var(--round);
  background: var(--tile-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 var(--tile-edge), var(--shadow-sm);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.tile.is-dark { background: var(--tile-dark); }
.tile.is-void { visibility: hidden; }

.tile.is-rock {
  background: var(--rock-bed);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.tile.is-visited {
  background: linear-gradient(155deg, var(--visited), var(--visited-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.28), var(--shadow-sm);
}

.tile.is-current {
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 3px var(--gold-soft), var(--shadow-sm);
}

.tile.is-start::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.9;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  margin: var(--gap);
  padding: 0;
  border: 0;
  border-radius: var(--round);
  background: transparent;
}

button.cell { cursor: pointer; }
.cell--void { pointer-events: none; }

.cell.is-available::after {
  content: "";
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 calc(var(--cell) * 0.07) var(--gold-soft);
  animation: breathe 2.4s ease-in-out infinite;
}

.cell__num {
  color: var(--visited-ink);
  font-size: calc(var(--cell) * 0.3);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.cell--rock .rock-art {
  width: 74%;
  height: 74%;
}

.rock-art__shape {
  fill: var(--rock);
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.rock-art__facet {
  fill: none;
  stroke: var(--rock-hi);
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.85;
}

.cell.is-hint {
  background: var(--hint-soft);
  box-shadow: inset 0 0 0 3px var(--hint);
  animation: hint-pulse 1.3s ease-in-out infinite;
}

.cell.is-hint::after { display: none; }

.cell__star .star-art {
  width: calc(var(--cell) * 0.5);
  height: calc(var(--cell) * 0.5);
  fill: var(--hint);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.cell.is-refused { animation: refuse 0.42s var(--ease); }

/* ---------- Jalons ---------- */

/* Numéro « gravé » dans un médaillon, tant que la case attend son passage. */
.cell__milestone {
  display: grid;
  place-items: center;
  width: 62%;
  aspect-ratio: 1;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(var(--cell, 48px) * 0.27);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}

/* Jalon jouable maintenant : le médaillon remplace le point doré et en prend la couleur. */
.cell.is-milestone.is-available::after { display: none; }

.cell.is-milestone.is-available .cell__milestone {
  background: var(--gold);
  color: var(--on-gold);
  animation: breathe 2.4s ease-in-out infinite;
}

.cell.is-milestone.is-hint .cell__milestone { border-color: var(--hint); }

/* Prochain jalon à atteindre : liseré doré sur sa tuile. */
.tile.is-next-milestone:not(.is-visited) {
  box-shadow: inset 0 0 0 2px var(--gold), var(--shadow-sm);
}

/* Jalon visité : un liseré doré rappelle qu'il était imposé. */
.tile.is-milestone.is-visited:not(.is-current) {
  box-shadow: inset 0 0 0 2px var(--gold-bright), inset 0 -2px 0 rgba(0, 0, 0, 0.28), var(--shadow-sm);
}

/* Jalon devenu inaccessible : la partie est perdue, on montre pourquoi. */
.tile.is-lost {
  box-shadow: inset 0 0 0 3px var(--danger), var(--shadow-sm);
}

.tile.is-marker:not(.is-visited) {
  background: linear-gradient(160deg, var(--gold-soft), transparent 70%), var(--tile-light);
  box-shadow: inset 0 0 0 2px var(--gold), var(--shadow-sm);
}

.cell__marker {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 46%;
  color: var(--gold);
  transform: translateX(-50%);
}

.cell__marker .icon {
  width: 100%;
  height: auto;
  stroke-width: 2.4;
}

.trail {
  fill: none;
  stroke: var(--trail);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

.trail--last {
  stroke: var(--gold);
  stroke-width: 4px;
  opacity: 0.95;
}

.board.is-won .trail { opacity: 0.85; }
.board.is-won .tile.is-visited { animation: glow 1.4s var(--ease) both; }

.board__knight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: var(--cell);
  height: var(--cell);
  pointer-events: none;
  transform: translate(calc(var(--kx, 0) * var(--cell)), calc(var(--ky, 0) * var(--cell)));
  transition: transform 0.3s var(--ease);
}

.board__knight.is-placing { transition: none; }

.board__knight-art {
  width: 100%;
  height: 100%;
  padding: 11%;
}

.board__knight.is-hopping .board__knight-art { animation: hop 0.3s var(--ease); }

.knight-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}

.knight-art__body {
  fill: var(--knight-fill);
  stroke: var(--knight-stroke);
  stroke-width: 4;
  stroke-linejoin: round;
}

.knight-art__mane {
  fill: none;
  stroke: var(--knight-stroke);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.55;
}

.knight-art__eye { fill: var(--knight-stroke); }