/* =====================================================================
   Controlli touch — overlay generico per tutti i giochi di COSMOS ARCADE
   Iniettato solo su dispositivi touch da shared/touch-controls.js
   ===================================================================== */

.ac-touch-controls{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  z-index: 999;
  user-select: none;
  -webkit-user-select: none;
}

.ac-touch-btn{
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(60,231,255,.55);
  background: rgba(8,14,28,.72);
  color: #eaf6ff;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 2px 14px rgba(0,0,0,.4);
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, background .08s ease, border-color .08s ease;
}
.ac-touch-btn:active,
.ac-touch-btn.active{
  background: rgba(60,231,255,.28);
  border-color: #3ce7ff;
  transform: scale(.92);
}

/* --- D-pad direzionale (croce) --- */
.ac-dpad{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 54px 54px 54px;
  grid-template-rows: 54px 54px 54px;
  gap: 4px;
}
.ac-dpad .ac-touch-btn{ width:54px; height:54px; }
.ac-dpad .dir-up{ grid-column: 2; grid-row: 1; }
.ac-dpad .dir-left{ grid-column: 1; grid-row: 2; }
.ac-dpad .dir-right{ grid-column: 3; grid-row: 2; }
.ac-dpad .dir-down{ grid-column: 2; grid-row: 3; }

/* --- D-pad orizzontale (solo sinistra/destra) --- */
.ac-dpad.ac-dpad-lr{
  grid-template-columns: 54px 54px;
  grid-template-rows: 54px;
}
.ac-dpad.ac-dpad-lr .dir-left{ grid-column: 1; grid-row: 1; }
.ac-dpad.ac-dpad-lr .dir-right{ grid-column: 2; grid-row: 1; }

/* --- Pulsanti azione (destra) --- */
.ac-actions{
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.ac-actions .ac-touch-btn{
  width: 62px;
  height: 62px;
  border-radius: 50%;
  font-size: 1.5rem;
  border-color: rgba(255,60,224,.6);
}
.ac-actions .ac-touch-btn.secondary{
  width: 50px;
  height: 50px;
  font-size: 1.1rem;
  border-color: rgba(60,231,255,.55);
}
.ac-actions .ac-touch-btn:active,
.ac-actions .ac-touch-btn.active{
  border-color: #ff3ce0;
  background: rgba(255,60,224,.22);
}

/* --- Pulsante centrale singolo (es. pausa/start) --- */
.ac-mid{
  pointer-events: auto;
  align-self: flex-end;
}

/* Quando i controlli touch sono attivi, lascia spazio in fondo alla pagina
   così l'ultimo pannello/canvas non resta nascosto sotto la barra */
body.has-touch-controls{
  padding-bottom: 190px; /* fallback: JS lo sovrascrive con l'altezza reale misurata */
}

/* Su schermi molto stretti riduci leggermente i pulsanti per non invadere il gioco */
@media (max-width: 360px){
  .ac-touch-btn{ width:46px; height:46px; font-size:1.1rem; }
  .ac-dpad{ grid-template-columns:46px 46px 46px; grid-template-rows:46px 46px 46px; }
  .ac-dpad .ac-touch-btn{ width:46px; height:46px; }
  .ac-actions .ac-touch-btn{ width:54px; height:54px; }
  .ac-actions .ac-touch-btn.secondary{ width:42px; height:42px; }
}

/* Nasconde il suggerimento "tasti da tastiera" quando i controlli touch sono attivi */
body.has-touch-controls .controls-hint{ display:none; }

/* Quando i controlli touch sono attivi, la barra del D-pad occupa gli angoli
   inferiori dello schermo: solleva i pulsanti flottanti (muto, classifica,
   profilo) — normalmente ancorati a bottom:20px — appena sopra la barra,
   usando l'altezza reale misurata da touch-controls.js (--ac-touch-bar-h).
   Restano così negli angoli, nello spazio già riservato e vuoto, senza
   sovrapporsi né ai pulsanti di gioco né all'intestazione del gioco in alto. */
body.has-touch-controls .pf-fab,
body.has-touch-controls .lb-fab,
body.has-touch-controls .mute-fab{
  bottom: auto !important;
  width: 38px !important;
  height: 38px !important;
  font-size: .85rem !important;
}
body.has-touch-controls .pf-fab{
  top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  left: 8px !important;
}
body.has-touch-controls .lb-fab{
  top: calc(58px + env(safe-area-inset-top, 0px)) !important;
  right: 8px !important;
}
body.has-touch-controls .mute-fab{
  top: calc(58px + env(safe-area-inset-top, 0px)) !important;
  right: 54px !important;
}