/* Stan's Arcade (Galaga, Ms. Pac-Man…). Noir de borne d'arcade, bleu Namco. Tout est préfixé .arc. */
.arc { position: fixed; z-index: 20; transform-origin: center center; display: flex; flex-direction: column;
  background: #000; color: #eaf0ff; font-family: Nunito, sans-serif; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.arc button { font-family: inherit; }
/* Aucun zoom ni défilement dans ce jeu : le touch-action effectif est l'intersection avec les ancêtres. */
.arc, .arc * { touch-action: none !important; }

.arc-scene { flex: none; display: flex; align-items: center; justify-content: center; }
.arc-cadre { position: relative; background: #000; }
.arc-ecran { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: #000; touch-action: none; pointer-events: none; }
/* L'écran n'a rien à recevoir du doigt : les touches partent du portail vers l'émulateur. */

/* Boutons Pause / Crédit / 1 joueur : au-dessus de l'écran. */
.arc-barre { display: flex; justify-content: space-between; align-items: center; padding: 2px 22px 6px; }
.arc-petit { all: unset; box-sizing: border-box; padding: 6px 12px; border-radius: 16px; background: #141c4a; color: #b9c6ff;
  font: 800 12px Nunito, sans-serif; cursor: pointer; touch-action: manipulation; }

/* Tout l'espace sous l'écran est tactile : pavé de direction à gauche, tir à droite. */
.arc-cmd { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.7fr 1fr; grid-gap: 10px; gap: 10px; padding: 6px 12px 14px 22px; }

/* Jeu sans bouton de tir : le pavé prend toute la largeur. */
.arc-cmd.sans-tir { grid-template-columns: 1fr; }

.arc-pave { position: relative; border-radius: 28px; background: #070a1c; overflow: hidden; touch-action: none; }
.arc-pave.actif { background: #0b1030; }
.arc-stick { position: absolute; left: 50%; top: 50%; width: 140px; height: 170px; margin: -85px 0 0 -70px; pointer-events: none; transform: scale(calc(var(--u, 1) * .62)); }
.arc-socle { position: absolute; left: 0; bottom: 0; width: 140px; height: 44px; }
.arc-manche { position: absolute; left: 0; bottom: 22px; width: 140px; height: 150px; transform-origin: 50% 96%; transition: transform .07s ease-out; }
.arc-manche svg { display: block; width: 100%; height: 100%; }
.arc-pave.vers-g .arc-manche { transform: rotate(-26deg); }
.arc-pave.vers-d .arc-manche { transform: rotate(26deg); }
/* Haut / bas : le manche se penche vers l'avant ou l'arrière (perspective), sans tourner. */
.arc-pave.vers-h .arc-manche { transform: perspective(300px) rotateX(26deg); }
.arc-pave.vers-b .arc-manche { transform: perspective(300px) rotateX(-26deg); }

/* Bouton de tir : zone tactile large, bouton de console en relief à deux états. */
.arc-tirzone { all: unset; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 28px;
  background: #070a1c; touch-action: none; cursor: pointer; }
.arc-bouton3d { width: calc(112px * var(--u, 1)); height: calc(112px * var(--u, 1)); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font: 900 calc(20px * var(--u, 1)) Nunito, sans-serif; letter-spacing: .08em; color: #ffe3e7; text-shadow: 0 -1px 0 #7d0f1e;
  background: radial-gradient(circle at 36% 28%, #ff8896 0%, #f0384d 38%, #c01a30 72%, #8f1024 100%);
  box-shadow: inset 0 -6px 10px rgba(80,0,12,.55), inset 0 4px 6px rgba(255,255,255,.35), 0 8px 0 #5c0a16, 0 12px 14px rgba(0,0,0,.6);
  transition: transform .05s, box-shadow .05s; }
/* Deux boutons (Moon Patrol) : colonne de droite coupée en deux, saut au-dessus du tir, boutons plus petits. */
.arc-boutons { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.arc-cmd.double .arc-bouton3d { width: calc(70px * var(--u, 1)); height: calc(70px * var(--u, 1)); font-size: calc(15px * var(--u, 1));
  box-shadow: inset 0 -4px 7px rgba(80,0,12,.55), inset 0 3px 5px rgba(255,255,255,.35), 0 6px 0 #5c0a16, 0 9px 10px rgba(0,0,0,.6); }
.arc-tirzone.actif .arc-bouton3d.saut { background: radial-gradient(circle at 40% 36%, #3a82e6 0%, #1a55b8 55%, #0f3578 100%); }
.arc-bouton3d.saut { color: #e6f1ff; text-shadow: 0 -1px 0 #0c2a6b;
  background: radial-gradient(circle at 36% 28%, #8cc2ff 0%, #2f7de8 38%, #1a55b8 72%, #0f3578 100%); }
.arc-cmd.double .arc-bouton3d.saut { box-shadow: inset 0 -4px 7px rgba(0,20,80,.55), inset 0 3px 5px rgba(255,255,255,.35), 0 6px 0 #0a2455, 0 9px 10px rgba(0,0,0,.6); }
.arc-tirzone.actif .arc-bouton3d { transform: translateY(7px);
  background: radial-gradient(circle at 40% 36%, #e83a4e 0%, #b81a2e 55%, #7d0f1e 100%);
  box-shadow: inset 0 5px 10px rgba(60,0,8,.7), inset 0 -2px 4px rgba(255,255,255,.18), 0 1px 0 #5c0a16, 0 2px 4px rgba(0,0,0,.6); }

.arc-voile { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(3,4,12,.82); display: flex; align-items: center; justify-content: center; z-index: 5; }
.arc-aide { width: 300px; max-height: 90%; overflow: auto; background: #eaf0ff; color: #0b1030; border-radius: 14px; padding: 16px 18px; box-sizing: border-box; text-align: center; }
.arc-aide h2 { margin: 0 0 8px; font-size: 21px; }
.arc-aide p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.35; text-align: left; }
.arc-aide .arc-note { font-size: 12px; color: #4a5aa8; }
.arc-ok { all: unset; display: block; margin: 10px auto 0; padding: 10px 30px; border-radius: 22px; background: #26358f; color: #eaf0ff; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.arc-ok.second { background: transparent; color: #26358f; box-shadow: inset 0 0 0 2px #26358f; }

/* Joystick vu de dessus (Ms. Pac-Man) : plaque à guide en croix, la boule se décale dans la direction poussée. */
.arc-stick.dessus { width: 140px; height: 140px; margin: -70px 0 0 -70px; transform: scale(calc(var(--u, 1) * .75)); }
.arc-plaque { position: absolute; left: 0; top: 0; width: 140px; height: 140px; }
.arc-balle { position: absolute; left: 30px; top: 30px; width: 80px; height: 80px; transition: transform .07s ease-out; }
.arc-balle svg { display: block; width: 100%; height: 100%; }
.arc-pave.vers-g .arc-balle { transform: translate(-27px, 0); }
.arc-pave.vers-d .arc-balle { transform: translate(27px, 0); }
.arc-pave.vers-h .arc-balle { transform: translate(0, -27px); }
.arc-pave.vers-b .arc-balle { transform: translate(0, 27px); }
.arc-pave.vers-g.vers-h .arc-balle { transform: translate(-19px, -19px); }
.arc-pave.vers-d.vers-h .arc-balle { transform: translate(19px, -19px); }
.arc-pave.vers-g.vers-b .arc-balle { transform: translate(-19px, 19px); }
.arc-pave.vers-d.vers-b .arc-balle { transform: translate(19px, 19px); }

/* DEV : zones d'action du pavé à quadrants (drapeau `zones` de la fiche du jeu) : tout le pavé, aux dimensions réelles. */
.arc-zones { position: absolute; pointer-events: none; z-index: 2; }   /* carré mobile autour du repère (DEV) */
.arc-zones svg { display: block; width: 100%; height: 100%; }
.arc-zones polygon { opacity: .2; }
.arc-zones polygon.on { opacity: .6; }
.arc-zones text { fill: #fff; font: 900 12px Nunito, sans-serif; text-anchor: middle; dominant-baseline: central; opacity: .8; }
.arc-zones.idle .arc-doigt { display: none; }
.arc-zones.hors polygon { opacity: .08; }   /* doigt hors du pavé : plus de pilotage */