/* Studio Arcade — resa su telefono e tablet (06/08/2026)
   Problema risolto: su schermo touch il gioco restava un riquadro piccolo
   in mezzo a intestazione, titolo e sottotitolo, con la pagina da scorrere.
   Qui il gioco prende lo spazio che c'è, in verticale e in orizzontale.

   La proporzione del canvas cambia da gioco a gioco (900x520, 900x320...):
   arcade.js scrive --ar sul contenitore, così il riquadro può crescere
   fino al limite dell'altezza disponibile senza deformare nulla e senza
   sfasare le coordinate del tocco (niente object-fit: il rettangolo
   dell'elemento resta identico all'area disegnata). */

@media (pointer: coarse) {

  /* --- comune: si recupera spazio da tutto ciò che non è gioco --- */
  body { min-height: 100dvh; }
  main { padding: 8px 8px 14px !important; }
  h1 { font-size: 20px !important; margin: 0 0 2px !important; }
  .sub { display: none !important; }
  .hint { font-size: 11px !important; margin-top: 8px !important; }
  header.site, body > header { padding: 8px 12px !important; }
  header .brand small { display: none !important; }
  footer { padding: 10px !important; font-size: 11px !important; }

  #wrap {
    max-width: min(100%, calc((100dvh - 210px) * var(--ar, 1.73))) !important;
    margin: 0 auto;
  }
  canvas { border-radius: 10px !important; }

  /* i comandi restano comodi ma non rubano l'altezza al gioco */
  .padBtn { height: 62px !important; }

  /* invito a ruotare: appare solo in verticale, e solo la prima volta */
  #rotaHint {
    display: block;
    margin: 8px auto 0;
    max-width: 340px;
    font-size: 12px;
    line-height: 1.5;
    color: #8fa3cc;
    text-align: center;
  }
}

/* --- telefono in orizzontale: schermo pieno, niente contorno --- */
@media (pointer: coarse) and (orientation: landscape) {

  header.site, body > header, footer, h1, .sub, .hint,
  #rotaHint, #padHint { display: none !important; }
  /* il gioco al centro dello schermo: i giochi panoramici (Scappa dall'F24)
     riempiono la larghezza e restano centrati in altezza */
  main {
    padding: 0 !important;
    height: 100dvh;
    justify-content: center !important;
  }
  body { overflow: hidden; }

  #wrap {
    max-width: min(100vw, calc(100dvh * var(--ar, 1.73))) !important;
    margin: 0 auto;
  }
  /* con la croce direzionale il gioco si stringe quel tanto che basta a non
     finirci sotto: meglio un campo poco più piccolo che un angolo cieco */
  body[data-pad="croce"] #wrap {
    max-width: min(calc(100vw - 210px), calc(100dvh * var(--ar, 1.61))) !important;
    margin-left: 10px;
  }
  canvas { border-radius: 0 !important; box-shadow: none !important; }

  /* comandi sovrapposti ai bordi: non tolgono altezza al gioco */
  #pad {
    position: fixed !important;
    z-index: 7;
    margin: 0 !important;
    opacity: .78;
    pointer-events: none;      /* i vuoti della griglia non intercettano i tocchi */
  }
  #pad .padBtn { pointer-events: auto; }

  /* barra sinistra-fuoco-destra (Tempesta): agli angoli bassi */
  #pad:not([data-croce]) {
    left: 10px; right: 10px; bottom: 8px;
    width: auto !important; max-width: none !important;
    gap: 8px !important;
  }
  #pad:not([data-croce]) .padBtn { height: 56px !important; flex: 0 0 84px !important; }
  #pad:not([data-croce]) #padFire { flex: 0 0 120px !important; margin-left: auto; }

  /* croce direzionale (Snake, Mangia-Utili): in basso a destra, compatta */
  #pad[data-croce] {
    right: 10px; bottom: 8px; left: auto;
    width: 186px !important; max-width: 186px !important;
    gap: 6px !important;
  }
  #pad[data-croce] .padBtn { height: 52px !important; }
}