:root{
  --c1:#ffffff;
  --c2:#bd6baa;
  --c3:#f4d6ff;

  /* Couleurs board */
  --tile-bg: #f4d6ff;      /* plein (clair) */
  --tile-border: #bd6baa;  /* bordure */
  --text-dark: #2b2b2b;    /* gris foncé lisible */
  --used-bg: #cfcfd6;      /* grisé quand used */
}

html, body{
  margin:0;
  width:1920px;
  height:1080px;
  overflow:hidden;
  background:transparent;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.root{
  position:absolute;
  inset:0;
  background:transparent;
}

/* Board calé: coin bas-droit = (1660, 880)
   width=1640 => left=20
   height=760 => top=120
*/
.board{
  position:absolute;
  left:600px;
  top:40px;
  width:1140px;
  height:760px;

  display:grid;
  grid-template-columns: repeat(6, 1fr);
  /* grid-template-rows est defini dynamiquement par board.js (1 ligne titres + N lignes) */
  grid-template-rows: repeat(7, 1fr);
  gap:10px;
}

.tile{
  border:3px solid rgba(189,107,170,.95);
  border-radius:18px;

  background: var(--tile-bg);          /* plein */
  color: var(--text-dark);             /* texte foncé */

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding:10px;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}

/* Headers catégorie : plein + texte clair pour contraster */
.tile.header{
  background: var(--c2);               /* plein violet */
  color: var(--c1);
  font-weight:950;
  font-size:26px;
  letter-spacing:.2px;
  text-transform:uppercase;
}

.board .tile.header:nth-child(1){
  font-size: 18px;
  letter-spacing: .2px;
}

/* Valeurs : gris foncé */
.tile.value{
  font-weight:1000;
  font-size:46px;
  color: var(--text-dark);
}

/* Cases à emoji (boardLabel dans questions.json).
   Police emoji explicite : sans elle, le rendu dépend de la machine
   qui affiche l'overlay et peut tomber sur un carré vide.
   Taille plus généreuse, un emoji occupe moins de place qu'un nombre. */
.tile.value.emoji{
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 68px;
  line-height: 1;
  font-weight: 400;
}

/* Used : grisé (plein), texte atténué */
.tile.used{
  background: var(--used-bg);
  border-color: rgba(120,120,140,.55);
  color: rgba(40,40,40,.45);
  filter: grayscale(0.25);
}
/* Case inexistante : trou invisible, aucun aspect "jouable" */
.tile.empty{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}