/* ==========================================================================
   Jean dit — habillage.

   Un plateau carré, quatre quartiers, et rien d'autre à l'écran. Tout ce qui
   n'est pas une pastille est une chance de plus de regarder ailleurs au moment
   où il faut mémoriser.
   ========================================================================== */
.jd {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; height: 100%;
  justify-content: center;
  padding: 10px;
}

/* LE PLATEAU EST CARRÉ, quoi qu'il arrive. `aspect-ratio` plus une largeur
   plafonnée par la hauteur disponible : sans ça, en paysage sur un portable,
   le plateau déborde vers le bas et les deux pastilles basses sortent de la
   scène — invisibles, donc injouables. */
.jd-plateau {
  position: relative;
  width: min(100%, 78vh, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--board-bg, #e7eaf1);
  box-shadow: 0 10px 30px rgba(20, 30, 50, .18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  touch-action: manipulation;
}

.jd-past {
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  background: var(--c);
  /* Éteinte, une pastille est SOMBRE ET MATE ; allumée, elle est franche. Un
     écart de luminosité se voit du coin de l'œil, alors qu'un écart de teinte
     demande de regarder — et c'est justement ce qu'on n'a pas le temps de
     faire. */
  filter: brightness(.55) saturate(.75);
  transition: filter .09s linear, transform .09s ease;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(26px, 7vw, 44px);
  color: rgba(255, 255, 255, .55);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.jd-past:nth-child(1) { border-radius: 100% 12px 12px 12px; }
.jd-past:nth-child(2) { border-radius: 12px 100% 12px 12px; }
.jd-past:nth-child(3) { border-radius: 12px 12px 12px 100%; }
.jd-past:nth-child(4) { border-radius: 12px 12px 100% 12px; }

.jd-past.allumee {
  filter: brightness(1.25) saturate(1.1);
  transform: scale(.97);
  color: #fff;
}
.jd-past:disabled { cursor: default; }

/* Le cœur du plateau : le numéro de manche. Il est au centre parce que c'est
   là que le regard se pose entre deux pastilles. */
.jd-coeur {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: var(--surface, #fff);
  box-shadow: 0 4px 14px rgba(20, 30, 50, .18);
  display: grid; place-content: center; text-align: center;
  pointer-events: none;
}
.jd-coeur b {
  display: block; font-size: clamp(26px, 8vw, 44px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jd-coeur small { font-size: 11px; opacity: .6; letter-spacing: .04em; }

.jd-barre {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
}
.jd-etat { font-weight: 600; min-width: 13ch; text-align: center; }
.jd-son {
  border: 0; border-radius: 999px; cursor: pointer;
  width: 34px; height: 34px; font-size: 15px;
  background: var(--line, #e1e5ec); color: inherit;
}

/* Le plateau ne répond pas pendant la démonstration : on le DIT, au lieu de
   laisser le joueur appuyer dans le vide et croire que le jeu est cassé. */
.jd-plateau.montre { cursor: default; }
.jd-plateau.montre .jd-past { filter: brightness(.42) saturate(.6); }
.jd-plateau.montre .jd-past.allumee { filter: brightness(1.3) saturate(1.15); }

@media (prefers-reduced-motion: reduce) {
  .jd-past { transition: none; }
}