/* ============================================================
   motex-grid.css — Composant grille MoteX (Motus)
   v1 — réutilisable site + POV + extension Twitch
   Famille MOTS (rouge). Indépendant du design-system :
   variables locales préfixées --mtx-* pour fonctionner même hors pomme.gg
   (ex: dans l'extension Twitch).
   ============================================================ */

.mtx-grid {
  --mtx-red:     #ff3c6e;   /* bien placé */
  --mtx-yellow:  #ffd166;   /* mal placé (rond) */
  --mtx-cell:    #1c1c2a;   /* case sombre */
  --mtx-dim:     #8989a8;   /* lettre absente */
  --mtx-dark:    #07070f;   /* texte sur rond jaune */
  --mtx-line:    rgba(255,255,255,.26);   /* contour des cases vides */
  --mtx-cell-empty: rgba(255,255,255,.035); /* fond leger des cases vides */
  --mtx-cell-size: 44px;
  --mtx-gap:       6px;
  --mtx-radius:    8px;

  display: inline-grid;
  gap: var(--mtx-gap);
  /* grid-template-columns posé en JS selon la longueur du mot */
}

.mtx-cell {
  width: var(--mtx-cell-size);
  height: var(--mtx-cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: calc(var(--mtx-cell-size) * .5);
  line-height: 1;
  color: #fff;
  border-radius: var(--mtx-radius);
  position: relative;
  text-transform: uppercase;
  user-select: none;
}

/* La lettre est posée au-dessus du rond jaune éventuel */
.mtx-cell > .mtx-l {
  position: relative;
  z-index: 1;
}

/* Bien placé : carré rouge */
.mtx-cell.is-correct { background: var(--mtx-red); }

/* Absent : case sombre, lettre grisée */
.mtx-cell.is-absent {
  background: var(--mtx-cell);
  color: var(--mtx-dim);
}

/* Mal placé : case sombre + gros rond jaune derrière la lettre */
.mtx-cell.is-present {
  background: var(--mtx-cell);
  color: var(--mtx-dark);
}
.mtx-cell.is-present::before {
  content: "";
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: var(--mtx-yellow);
  z-index: 0;
}

/* Case vide à remplir */
.mtx-cell.is-empty {
  background: var(--mtx-cell-empty);
  border: 1px solid var(--mtx-line);
}

/* 1re lettre donnée (hint) sur la prochaine ligne à jouer */
.mtx-cell.is-hint {
  background: transparent;
  border: 1px solid rgba(255,60,110,.5);
  color: var(--mtx-red);
}

/* Saisie en cours (site interactif) */
.mtx-cell.is-typed {
  background: var(--mtx-cell-empty);
  border: 1px solid var(--mtx-line);
  color: #fff;
}
.mtx-cell.is-cursor {
  border-color: var(--mtx-red);
}

/* Animation d'apparition d'une ligne validée */
.mtx-row-reveal .mtx-cell { animation: mtx-pop .25s ease both; }
@keyframes mtx-pop {
  0%   { transform: scale(.85); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Tailles alternatives (POV plus grande, extension plus petite) */
.mtx-grid.mtx-lg { --mtx-cell-size: 64px; --mtx-gap: 8px; }
.mtx-grid.mtx-sm { --mtx-cell-size: 32px; --mtx-gap: 4px; --mtx-radius: 6px; }