/* =========================================================================
   POTOS — « 4 À LA SUITE » : la grille (js/quatre-game.js, socle css/jeu-socle.css).
   Grille 7 × 6 : couche des jetons DESSOUS, cadre percé (SVG statique) DESSUS, colonnes tactiles
   (boutons transparents) tout en haut. Un jeton = 1/7 de la largeur × 1/6 de la hauteur du puits ;
   il tombe par translateY (Web Animations) : seul transform bouge (docs/fluidite.md).
   Couleurs des jetons : --a (reflet) / --b (ombre), posées par la vue d'après le cosmétique du joueur.
   ========================================================================= */
.jx-quatre { --g: #E5484D; } /* grille bleue classique, jetons rouges et jaunes (docs/theme-soiree-jeux.md) */

.q4-stage { width: 100%; height: 100%; display: grid; place-items: center; }
.jx-quatre .jx-zone { container-type: size; }
.q4-board {
  /* Carré : 1 rangée de visée + 6 rangées de grille, 7 colonnes. Prend toute la table, sans défiler (unités du conteneur). */
  width: min(100cqw, 100cqh, 640px);
  min-width: 220px;
  display: grid; grid-template-rows: 1fr 6fr; aspect-ratio: 1 / 1;
  contain: layout paint;
}
.q4-ghostrow { position: relative; }
.q4-well {
  /* Derrière les trous : l'ombre de l'intérieur de la grille (les jetons passent devant, le cadre bleu dessus) */
  position: relative; overflow: hidden; border-radius: 16px;
  background: #0e1b3d;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .65);
}
.q4-tokens { position: absolute; inset: 0; }
.q4-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- Jetons ---------- */
.q4-tok { position: absolute; width: calc(100% / 7); height: calc(100% / 6); display: block; }
.q4-ghostrow .q4-tok { left: 0; top: 0; width: calc(100% / 7); height: 100%; }
.q4-tok::before {
  content: ''; position: absolute; inset: 11%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--a) 70%, #fff) 0 8%, var(--a) 30%, var(--b) 100%);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .35), inset 0 3px 6px rgba(255, 255, 255, .25);
}
.q4-tok::after { /* anneau intérieur (relief du jeton) */
  content: ''; position: absolute; inset: 24%; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
}
/* Forme distinctive (retours 14/11 §3.5) : les jaunes portent une ÉTOILE en relief, les rouges restent unis (anneau).
   On les distingue même si le téléphone fausse les couleurs (mode sombre forcé) ou pour un joueur daltonien.
   Image statique peinte avec le jeton : rien n'est animé. */
.q4-tok.is-jaune::before, .q4-badge.is-jaune {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 61,40 93,40 67,59 77,90 50,72 23,90 33,59 7,40 39,40' fill='rgba(110,64,0,.55)' transform='translate(0 5)'/%3E%3Cpolygon points='50,10 61,40 93,40 67,59 77,90 50,72 23,90 33,59 7,40 39,40' fill='rgba(255,255,255,.78)' stroke='rgba(150,95,0,.6)' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / 50% no-repeat,
    radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--a) 70%, #fff) 0 8%, var(--a) 30%, var(--b) 100%);
}
.q4-badge.is-jaune { background-size: 78%, auto; }
.q4-tok.m-ring::after { border: 3px solid rgba(60, 30, 10, .35); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .08); } /* jetons en bois : cerclage */
.q4-tok.m-facet::after { inset: 26%; border-radius: 4px; transform: rotate(45deg); border: 2px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); }

/* Jeton fantôme (visée) */
.q4-ghost { opacity: .55; transition: transform .14s var(--ease-out, ease-out), opacity .15s; pointer-events: none; }
.q4-ghost.is-sel { opacity: 1; }
.q4-ghost[hidden] { display: none; }

/* Case d'arrivée */
.q4-land { position: absolute; left: 0; top: 0; width: calc(100% / 7); height: calc(100% / 6); pointer-events: none; z-index: 2; }
.q4-land::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .7); }
.q4-land[hidden] { display: none; }

/* ---------- Fin : alignement gagnant ---------- */
.q4-board.is-over .q4-tok:not(.is-win) { opacity: .38; transition: opacity .5s ease; }
.q4-tok.is-win { z-index: 1; }
.q4-tok.is-win::after { border: 4px solid #fff; animation: q4-glow .9s ease-in-out infinite alternate; }
.q4-winline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.q4-winline line { stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-opacity: .9; }
.q4-winline:not(:empty) { opacity: .85; animation: q4-in .45s ease-out both; } /* fondu de tout le SVG : composité */
.q4-winline.is-still { animation: none; }
@keyframes q4-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes q4-in { from { opacity: 0; } to { opacity: .85; } }

/* ---------- Colonnes (zones tactiles) ---------- */
.q4-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); z-index: 4; }
.q4-col { position: relative; border: 0; background: transparent; padding: 0; cursor: default; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.q4-board.is-mine .q4-col[aria-disabled="false"] { cursor: pointer; }
.q4-col::after { /* surbrillance de la colonne choisie : opacité seulement */
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  opacity: 0; transition: opacity .15s;
}
.q4-board.is-mine .q4-col.is-sel::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .q4-board.is-mine .q4-col[aria-disabled="false"]:hover::after { opacity: .7; }
}
.q4-col:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

/* ---------- Pastille du joueur (barre des joueurs) ---------- */
.q4-badge { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle at 36% 30%, var(--a), var(--b)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }

/* Mouvement réduit / perf-lite : pas de lueur en boucle (le jeton tombe toujours : il porte l'information) */
@media (prefers-reduced-motion: reduce) { .q4-tok.is-win::after, .q4-winline { animation: none; } }
.perf-lite .q4-tok.is-win::after { animation: none; }