/* Zone de jeu Match 3 : consigne, compteur de coups et barre a remplir,
   grille carree, logo, confettis. Tout est DOM : chaque piece est un bloc
   place par transform (en % de sa propre taille), les chutes sont des
   transitions CSS — rien ne depend du nombre d images par seconde. */
.m3-jeu { --m3-accent: #ff842b; position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 92px 10px max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; background-color: var(--fond, #111111); background-size: cover; background-position: center; }
.m3-jeu:not([style*="background-image: url"]) { background-image: radial-gradient(ellipse 80% 50% at 50% 55%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2px, rgba(255, 255, 255, 0) 2px 24px); }
.m3-jeu[hidden] { display: none; }
.m3-consigne { margin: 0; max-width: 92vw; color: #ffffff; font-weight: 900; font-size: clamp(14px, 4vw, 20px); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.m3-consigne[hidden], .m3-hud[hidden], .m3-hote[hidden], .m3-logo[hidden] { display: none; }
.m3-logo { max-height: 42px; max-width: 50vw; object-fit: contain; }

/* Compteur de coups a gauche, barre a droite. */
.m3-hud { display: flex; align-items: center; gap: 12px; width: min(92vw, 62vh, 470px); }
.m3-coups { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 6px 10px; border-radius: 16px; background: rgba(0, 0, 0, .45); color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }
.m3-coups-n { font-weight: 900; font-size: clamp(22px, 6vw, 30px); line-height: 1; font-variant-numeric: tabular-nums; }
.m3-coups-libelle { font-weight: 800; font-size: 11px; letter-spacing: .12em; opacity: .85; }
.m3-hud.m3-derniers .m3-coups { background: #c62828; animation: m3-battement .6s ease-in-out infinite; }
.m3-barre { position: relative; flex: 1 1 auto; height: 22px; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); overflow: hidden; }
.m3-barre-plein { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--m3-accent), #ffd54f); box-shadow: 0 0 12px var(--m3-accent); transition: width .35s ease-out; }
.m3-barre-plein::after { content: ''; position: absolute; inset: 3px 6px auto 6px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .45); }

/* La grille : carree, au plus large possible sous le HUD. */
.m3-hote { position: relative; width: min(92vw, 62vh, 470px); aspect-ratio: 1; }
.m3-plateau { --m3-n: 6; position: absolute; inset: 0; border-radius: 18px; background: rgba(10, 12, 30, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 14px 30px rgba(0, 0, 0, .45); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: calc(100% / var(--m3-n)) calc(100% / var(--m3-n)); }
.m3-plateau:focus-visible { box-shadow: 0 0 0 3px #ffffff, 0 14px 30px rgba(0, 0, 0, .45); }
.m3-piece { position: absolute; left: 0; top: 0; width: calc(100% / var(--m3-n)); height: calc(100% / var(--m3-n)); display: flex; align-items: center; justify-content: center; transition: transform .26s cubic-bezier(.3, 1.25, .5, 1); will-change: transform; }
.m3-piece svg, .m3-piece img { display: block; width: 84%; height: 84%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); transition: transform .2s ease, opacity .2s ease; }
.m3-piece.m3-choisie svg, .m3-piece.m3-choisie img { transform: scale(1.14); filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.m3-piece.m3-pop svg, .m3-piece.m3-pop img { transform: scale(1.35); opacity: 0; transition-duration: .23s; }
.m3-piece.m3-refus svg, .m3-piece.m3-refus img { animation: m3-non .28s ease-in-out; }
.m3-piece.m3-indice svg, .m3-piece.m3-indice img { animation: m3-indice .7s ease-in-out 2; }
.m3-piece.m3-nait svg, .m3-piece.m3-nait img { animation: m3-nait .3s ease-out; }
.m3-curseur { position: absolute; left: 0; top: 0; width: calc(100% / var(--m3-n)); height: calc(100% / var(--m3-n)); box-sizing: border-box; border: 3px solid #ffffff; border-radius: 12px; pointer-events: none; transition: transform .12s ease; }

/* Pieces speciales : rayures blanches (ligne ou colonne), anneau pour la bombe. */
.m3-piece[data-p]::after { content: ''; position: absolute; inset: 14%; border-radius: 30%; pointer-events: none; }
.m3-piece[data-p="ligne"]::after { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .85) 0 3px, transparent 3px 9px); mix-blend-mode: soft-light; }
.m3-piece[data-p="colonne"]::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 3px, transparent 3px 9px); mix-blend-mode: soft-light; }
.m3-piece[data-p="bombe"]::after { inset: 4%; border-radius: 50%; box-shadow: 0 0 0 3px #ffffff, 0 0 14px 4px #ffd54f; animation: m3-lueur 1.1s ease-in-out infinite; }

/* Effet des pieces speciales : un rayon sur la ligne ou la colonne, une
   onde sur le carre 3x3. */
.m3-eclat { position: absolute; pointer-events: none; animation: m3-eclat .42s ease-out forwards; }
.m3-eclat-ligne { left: 0; right: 0; top: calc(100% / var(--m3-n) * var(--l)); height: calc(100% / var(--m3-n)); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .95) 45% 55%, transparent); }
.m3-eclat-colonne { top: 0; bottom: 0; left: calc(100% / var(--m3-n) * var(--c)); width: calc(100% / var(--m3-n)); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 45% 55%, transparent); }
.m3-eclat-bombe { left: calc(100% / var(--m3-n) * (var(--c) - 1)); top: calc(100% / var(--m3-n) * (var(--l) - 1)); width: calc(300% / var(--m3-n)); height: calc(300% / var(--m3-n)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 213, 79, .7) 45%, transparent 70%); }
.m3-plateau.m3-melange .m3-piece { transition-duration: .42s; }
.m3-plateau.m3-gagne { box-shadow: inset 0 0 0 3px #ffd54f, 0 0 28px var(--m3-accent); }

.m3-fete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

@keyframes m3-battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes m3-non { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-8%); } 70% { transform: translateX(8%); } }
@keyframes m3-indice { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18) rotate(-6deg); } }
@keyframes m3-nait { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes m3-lueur { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes m3-eclat { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }

/* Mouvement reduit : plus d animation ni de glissement ; les durees du
   rendu tombent aussi a presque zero (match3.DUREES). */
@media (prefers-reduced-motion: reduce) {
  .m3-piece, .m3-curseur, .m3-barre-plein { transition: none; }
  .m3-piece svg, .m3-piece img, .m3-hud.m3-derniers .m3-coups, .m3-piece[data-p="bombe"]::after { animation: none; }
}

@media (min-height: 900px) { .m3-jeu { padding-top: 116px; } }