/* app/manette/manette.css — joysticks et boutons au doigt (app/manette/manette.js).
   Au-dessus du calque du jeu (.arena-root, z-index 9000), sous le bandeau : les boutons du
   bandeau (son, pause, quitter) restent accessibles. Visible seulement pendant une partie. */
.manette{position:fixed;left:0;right:0;bottom:0;top:58px;z-index:9100;display:none;touch-action:none;}
html.petit-ecran .manette{top:46px;}
.manette.vu{display:block;}
.manette-zone{position:absolute;top:0;bottom:0;}
.manette-gauche{left:0;width:50%;}
.manette-droite{right:0;width:50%;}
/* Socle du joystick : apparaît sous le pouce. */
.manette-socle{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
 background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);opacity:0;transition:opacity .12s;pointer-events:none;}
.manette-socle.vu{opacity:1;}
.manette-socle i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
 background:rgba(255,255,255,.35);box-shadow:0 2px 8px rgba(0,0,0,.4);}
.manette-droite .manette-socle i{background:rgba(255,120,80,.45);}
/* Boutons : en bas à droite, au-dessus de la zone de visée. */
.manette-boutons{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
 display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;}
.manette-btn{pointer-events:auto;touch-action:none;border:0;border-radius:50%;width:72px;height:72px;padding:0;
 font:700 12px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:#fff;
 background:rgba(30,20,32,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);opacity:.9;}
.manette-btn[hidden]{display:none;}
.manette-btn.appui{background:rgba(255,138,31,.6);}
.manette-vehicule{background:rgba(125,154,58,.7);}
.manette-boost{background:rgba(200,80,40,.6);}