.voice-setup{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:8px auto 0;min-height:38px;
  font-family:'Flashback',Arial,sans-serif;
}
#enableVoice,#enableAudio,#enableJoystick{
  width:auto!important;min-width:0!important;max-width:max-content!important;
  flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  height:30px!important;min-height:30px!important;padding:0 9px!important;border-radius:4px!important;
  box-sizing:border-box!important;line-height:1!important;
  border:1px solid rgba(150,150,158,.58)!important;
  background:#303034!important;color:#ededf0!important;
  font-family:'Flashback',Arial,sans-serif!important;font-size:10px!important;letter-spacing:.055em!important;
  cursor:pointer!important;box-shadow:0 0 8px rgba(0,0,0,.32)!important;white-space:nowrap!important;
}
#enableVoice:hover:not(.active),#enableAudio:hover:not(.active),#enableJoystick:hover:not(.active){
  background:#3a3a3f!important;border-color:rgba(190,190,198,.68)!important;
}
#enableVoice.active{
  background:rgba(99,34,154,.88)!important;
  border-color:#d1a8ff!important;
  color:#f4eaff!important;
  box-shadow:0 0 20px rgba(178,103,255,.42)!important;
}
#enableAudio.active,#enableJoystick.active{
  background:rgba(24,105,70,.88)!important;
  border-color:#8dffb0!important;
  color:#eafff0!important;
  box-shadow:0 0 18px rgba(80,255,130,.28)!important;
}
/* V20.72: AUDIO necesita mas ancho para que "AUDIO DESACTIVADO" no desborde. */
#enableJoystick{
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
}
#enableAudio{
  width:152px!important;
  min-width:152px!important;
  max-width:152px!important;
}
.voice-status{font-size:10px;letter-spacing:.055em;color:rgba(232,218,255,.78)}
.voice-hint,.voice-talker{
  font-family:'Flashback',Arial,sans-serif;font-size:12px;letter-spacing:.055em;
  color:#e9d8ff;text-shadow:0 0 7px rgba(151,83,255,.7);
}
.voice-hint.talking{color:#8dffb0;text-shadow:0 0 9px rgba(80,255,130,.75)}
.voice-talker{position:fixed;top:max(42px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:90;color:#8dffb0;pointer-events:none}
.voice-ptt{
  /* Zona tactil invisible. El icono visible se dibuja en el canvas para que
     naves, meteoritos, balas y mejoras puedan pasar visualmente por encima. */
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(24px,calc(env(safe-area-inset-bottom) + 20px));z-index:120;
  width:88px;height:88px;min-width:88px;min-height:88px;padding:0;border-radius:999px;
  border:0!important;background:transparent!important;color:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  opacity:0!important;touch-action:none;user-select:none;-webkit-user-select:none;
  font-size:0;line-height:0;
}
.voice-ptt::before{display:none!important;content:none!important}
.voice-ptt.talking{background:transparent!important;border:0!important;box-shadow:none!important}
.voice-ptt:active{transform:translateX(-50%)}
/* V19.11: controles BOTONES mas compactos; el PTT sigue centrado
   debajo de las dos flechas tras acercar aun mas la flecha derecha. */
@media (pointer:coarse),(max-width:900px){
  #mobileControls.button-mode:not(.keyboard-mode) ~ .voice-ptt{
    /* V19.29: micro pegado a la esquina inferior derecha,
       fuera del HUD amarillo y respetando solo la zona segura. */
    left:auto;
    right:max(20px,calc(env(safe-area-inset-right) + 20px));
    transform:none;
    bottom:max(4px,calc(env(safe-area-inset-bottom) + 4px));
    width:46px;height:46px;min-width:46px;min-height:46px;
  }
  #mobileControls.button-mode:not(.keyboard-mode) ~ .voice-ptt:active{
    transform:none;
  }
}
@media (orientation:landscape) and (max-height:520px){
  #mobileControls.button-mode:not(.keyboard-mode) ~ .voice-ptt{
    left:auto;
    right:max(19px,calc(env(safe-area-inset-right) + 19px));
    bottom:max(3px,calc(env(safe-area-inset-bottom) + 3px));
    width:42px;height:42px;min-width:42px;min-height:42px;
  }
}
@media (pointer:fine){.voice-ptt{display:none!important}}
@media (max-width:760px){
  .voice-setup{gap:7px;margin-top:4px}#enableVoice,#enableAudio{font-size:9px!important;height:28px!important;min-height:28px!important;padding:0 8px!important}.voice-status{font-size:8px}
}

/* En movil, los textos tactiles quedan discretos para no tapar la partida. */
@media (pointer:coarse){
  #mobileControls .mobile-zone span{
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.04em!important;
    opacity:.58!important;
    transform:scale(.92)!important;
    transform-origin:center!important;
  }
}

/* Controles tactiles: texto y zonas semitransparentes en movil. */
@media (pointer:coarse){
  #mobileControls .fire-zone{
    background:linear-gradient(to top,rgba(255,80,165,.035),transparent 62%)!important;
  }
  #mobileControls .thrust-zone{
    background:linear-gradient(to top,rgba(90,225,255,.035),transparent 62%)!important;
  }
  #mobileControls .mobile-zone span{
    opacity:.36!important;
  }
  #mobileControls .mobile-zone.active span{
    opacity:.78!important;
  }
}

/* V2: boton SALIR discreto para partida movil. */
.mobile-exit{display:none}
@media (pointer:coarse),(max-width:900px){
  .mobile-exit{
    position:fixed;z-index:150;
    top:max(28px,calc(env(safe-area-inset-top) + 25px));
    left:50%;transform:translateX(-50%);
    width:120px!important;min-width:120px!important;min-height:50px!important;height:50px!important;
    margin:0!important;padding:0!important;border-radius:10px!important;
    border:1px solid transparent!important;
    background:transparent!important;color:transparent!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    font-family:'Flashback',Arial,sans-serif!important;font-size:9px!important;line-height:1!important;letter-spacing:.08em!important;
    box-shadow:none!important;touch-action:manipulation;
  }
  .mobile-exit:active{background:transparent!important;color:transparent!important}
  .mobile-exit:not(.hidden){display:block!important}
}

/* V16.4.36: las zonas tactiles son solo hit-areas; el feedback visual ya vive en canvas.
   Evitamos dos grandes capas con gradiente sobre Safari/iOS durante toda la partida. */
@media (pointer:coarse){
  #mobileControls .fire-zone,#mobileControls .thrust-zone{background:transparent!important;}
}

/* V19.17: unifica CONTROL MOVIL + AUDIO/MICRO en el menu. */
@media (pointer:coarse),(max-width:900px){
  #menu .voice-setup{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
    margin:4px auto 0;
    min-height:28px;
  }
  #menu #enableVoice,
  #menu #enableAudio,
  #menu #enableJoystick{
    width:auto!important;
    min-width:76px!important;
    max-width:none!important;
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:4px 9px!important;
    border-radius:999px!important;
    border:1px solid rgba(105,196,235,.5)!important;
    background:rgba(8,27,42,.82)!important;
    color:#dff8ff!important;
    box-shadow:none!important;
    font:900 9px/1 Arial,Helvetica,sans-serif!important;
    letter-spacing:.045em!important;
    white-space:nowrap!important;
  }
  #menu #enableVoice.active,
  #menu #enableAudio.active{
    border-color:#86e9ff!important;
    background:linear-gradient(180deg,rgba(45,132,173,.96),rgba(17,73,103,.96))!important;
    box-shadow:0 0 14px rgba(90,225,255,.28)!important;
    color:#fff!important;
  }
  /* JOYSTICK conserva gris/verde tambien en movil/tablet. */
  #menu #enableJoystick{
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
    border-color:rgba(150,150,158,.58)!important;
    background:#303034!important;
    color:#ededf0!important;
  }
  #menu #enableJoystick.active{
    border-color:#8dffb0!important;
    background:rgba(24,105,70,.92)!important;
    color:#eafff0!important;
    box-shadow:0 0 14px rgba(80,255,130,.24)!important;
  }
  #menu #enableAudio{
    width:132px!important;
    min-width:132px!important;
    max-width:132px!important;
  }
  #menu #configureJoystick:not(.hidden){
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    height:28px!important;
    min-height:28px!important;
    border-radius:999px!important;
    font-size:8px!important;
  }
}


/* V22.40: JOYSTICK tambien visible en iPhone/iPad/movil.
   El boton se muestra aunque aun no haya mando conectado. */
html.handheld-device #menu #enableJoystick{display:inline-flex!important}
@media (pointer:coarse){
  #menu #enableJoystick{display:inline-flex!important}
}


/* V22.40: mismo configurador de mando en PC y movil. */
#configureJoystick{
  width:112px!important;min-width:112px!important;max-width:112px!important;
  flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  height:30px!important;min-height:30px!important;padding:0 9px!important;border-radius:4px!important;
  box-sizing:border-box!important;line-height:1!important;border:1px solid rgba(116,170,235,.68)!important;
  background:rgba(28,58,92,.92)!important;color:#e9f4ff!important;
  font-family:'Flashback',Arial,sans-serif!important;font-size:9px!important;letter-spacing:.045em!important;
  cursor:pointer!important;box-shadow:0 0 10px rgba(54,130,220,.24)!important;white-space:nowrap!important;
}
#configureJoystick:hover{background:rgba(38,78,122,.96)!important;border-color:#9fd0ff!important}
#configureJoystick.hidden{display:none!important}
html.handheld-device #menu #configureJoystick:not(.hidden){display:inline-flex!important}
@media (pointer:coarse){#menu #configureJoystick:not(.hidden){display:inline-flex!important}}

.joystick-config-dialog{
  position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(3,5,11,.82);backdrop-filter:blur(5px);
}
.joystick-config-dialog.hidden{display:none!important}
.joystick-config-card{
  position:relative;width:min(520px,92vw);padding:28px 28px 24px;border:1px solid rgba(128,200,255,.56);
  border-radius:14px;background:linear-gradient(180deg,rgba(16,28,48,.98),rgba(8,13,24,.99));
  color:#f3f8ff;text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.58),0 0 30px rgba(53,142,220,.14);
  font-family:Arial,Helvetica,sans-serif;
}
.joystick-config-close{
  position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;background:transparent;color:#fff;
  font:700 28px/1 Arial;cursor:pointer;opacity:.78;
}
.joystick-config-kicker{font:800 11px/1 Arial;letter-spacing:.24em;color:#83cfff;margin-bottom:8px}
.joystick-config-card h2{margin:0 0 18px;font:900 24px/1.1 Arial;letter-spacing:.04em}
.joystick-config-step{font:800 11px/1 Arial;letter-spacing:.12em;color:#91a8c6;margin-bottom:10px}
.joystick-config-action{font:900 26px/1.1 Arial;color:#fff;margin-bottom:10px;text-shadow:0 0 16px rgba(102,191,255,.22)}
.joystick-config-hint{min-height:38px;margin:0 auto 16px;max-width:430px;font:700 13px/1.45 Arial;color:#cfe8ff}
.joystick-config-current{margin:0 auto 18px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.055);font:700 10px/1.45 Arial;color:#aebdd1}
.joystick-config-actions{display:flex;gap:10px;justify-content:center}
.joystick-config-actions button{
  min-width:120px;height:34px;padding:0 14px;border-radius:6px;border:1px solid rgba(160,190,220,.46);
  background:#263447;color:#eef6ff;font:800 10px/1 Arial;letter-spacing:.05em;cursor:pointer;
}
.joystick-config-actions button:hover{background:#344a66;border-color:#9ac9f3}