/* Zone de jeu Pac-Man : colonne HUD / labyrinthe / croix, sous le HUD
   commun (manche, score) du socle. Le canvas est dimensionne par le
   script (cases entieres), jamais etire par le CSS. */
.pm-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 96px 0 max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; }
.pm-jeu[hidden] { display: none; }
.pm-fond { position: fixed; inset: 0; z-index: -1; background: #000 center / cover no-repeat; }
.pm-hud { display: flex; justify-content: space-between; width: min(94vw, 560px); margin-bottom: 6px; 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); }
.pm-zone { position: relative; flex: 0 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; touch-action: none; }
/* Sous le classement, HUD et labyrinthe sont masques mais le fond reste. */
.pm-hud[hidden], .pm-zone[hidden] { display: none; }
.pm-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: transparent; }
.pm-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; }
.pm-message[hidden] { display: none; }
.pm-croix { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 54px); grid-template-areas: ". haut ." "gauche bas droite"; gap: 6px; margin-top: 12px; }
.pm-croix[hidden] { display: none; }
.pm-croix button { border: none; border-radius: 12px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-size: 24px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pm-croix button:active { transform: scale(.94); }
.pm-croix button[data-direction="3"] { grid-area: haut; }
.pm-croix button[data-direction="2"] { grid-area: gauche; }
.pm-croix button[data-direction="1"] { grid-area: bas; }
.pm-croix button[data-direction="0"] { grid-area: droite; }
@media (min-height: 900px) { .pm-jeu { padding-top: 120px; } }