/* Zone de jeu Memory : colonne HUD / grille / bouton son, sous le HUD
   commun (manche, score) du socle. Les cartes sont des boutons DOM
   retournes en CSS 3D ; leur taille vient du script (disposition). */
.mm-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 96px 12px max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; background-color: var(--fond, #111111); }
.mm-jeu[hidden] { display: none; }
.mm-hud { display: flex; justify-content: space-between; width: min(94vw, 560px); margin-bottom: 8px; color: var(--jeu-hud-texte); font-weight: 900; font-size: clamp(13px, 3.6vw, 18px); letter-spacing: .04em; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.mm-zone { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-start; justify-content: center; }
/* Sous le classement, HUD, grille et bouton son sont masques mais le fond reste. */
.mm-hud[hidden], .mm-zone[hidden], .mm-son[hidden] { display: none; }
.mm-grille { display: grid; gap: 8px; }
.mm-carte { position: relative; width: 100%; height: 100%; border: none; padding: 0; margin: 0; background: transparent; perspective: 600px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mm-carte:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; border-radius: 12px; }
.mm-carte-int { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease; }
.mm-carte.visible .mm-carte-int { transform: rotateY(180deg); }
.mm-carte.trouvee { cursor: default; }
.mm-carte.trouvee .mm-avant { opacity: .8; }
.mm-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.mm-dos { background: var(--accent, #ff842b); }
.mm-dos img { width: 100%; height: 100%; object-fit: cover; }
.mm-dos .mm-dos-logo { width: 70%; height: 70%; object-fit: contain; }
.mm-avant { transform: rotateY(180deg); background: #ffffff; color: #111111; }
.mm-avant img { width: 100%; height: 100%; object-fit: cover; }
.mm-avant .mm-symbole { width: 72%; height: 72%; }
.mm-avant .mm-symbole svg { width: 100%; height: 100%; display: block; }
.mm-avant .mm-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background: rgba(0, 0, 0, .55); color: #ffffff; font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 12px; background: var(--jeu-voile); color: #fff; font-weight: 900; font-size: clamp(20px, 6vw, 32px); white-space: nowrap; pointer-events: none; z-index: 2; }
.mm-message[hidden] { display: none; }
.mm-son { margin-top: 12px; border: none; border-radius: 999px; width: 44px; height: 44px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-size: 20px; cursor: pointer; }
.mm-son[aria-pressed="false"] { opacity: .55; }
@media (min-height: 900px) { .mm-jeu { padding-top: 120px; } }