/* =========================================================
   XODRAFT CSS OVERRIDES (BlueMap)
   File: xodraft.css
   Nota: tutto scritto per essere "override" stabile.
   Desktop e Mobile sono separati e non si pestano i piedi.
   ========================================================= */


/* =========================
   0) BASE (neutro)
   ========================= */
html, body {
  margin: 0;
  padding: 0;
}

#map-container, #app {
  width: 100%;
  height: 100%;
}


/* =========================================================
   1) DESKTOP (mouse + tastiera)
   - Nascondi la barra superiore
   - Nessun intervento sui controlli mobile
   ========================================================= */

/* Desktop-only: applica SOLO sopra 576px */
@media (min-width: 576px) {

  /* Barra superiore dei controlli */
  .control-bar {
    display: none !important;
  }

/* Nascondi controlli mobile su desktop */
  #ff-mobile-controls {
    display: none !important;
  }
  
  /* (Safety) se esistono varianti/wrapper della barra */
  #app .control-bar,
  #app .pos-input,
  #app .controls-switch {
    display: none !important;
  }

}


/* =========================================================
   2) MOBILE (touch)
   - Nascondi la barra superiore
   - Frecce visibili: cerchio bianco 80% + icona nera
   - Pulsanti più piccoli (layout reale, non scale)
   - Frecce su/giù in colonna
   ========================================================= */

@media (max-width: 575.98px) {

  /* 2.1 Barra superiore OFF anche su mobile */
  .control-bar {
    display: none !important;
  }

  /* 2.2 Riduci la dimensione REALE dei controlli (non usare scale) */
  #ff-mobile-controls {
    font-size: 6.5vw !important; /* regola qui se vuoi: 6.0–7.5 */
  }

  @media (orientation: portrait) {
    #ff-mobile-controls {
      font-size: 6.5vh !important;
    }
  }

  /* 2.3 Forza stack verticale: freccia su sopra, freccia giù sotto */
  #ff-mobile-controls .move-fields,
  #ff-mobile-controls .height-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.18em !important;
  }

  /* 2.4 Stile pulsanti */
  #ff-mobile-controls .button {
    transform: none !important; /* IMPORTANTISSIMO: niente scale */

    width: 1em !important;
    height: 1em !important;

    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.80) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;

    /* area tappabile e layout */
    padding: 0.06em !important;
    margin: 0.08em !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  /* Icone/frecce nere */
  #ff-mobile-controls .button svg {
    fill: #000 !important;
  }

  /* Feedback pressione */
  #ff-mobile-controls .button:active {
    background-color: rgba(255, 255, 255, 0.92) !important;
    transform: scale(0.96) !important;
  }

  /* 2.5 Riduzione gesture (best effort) */
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }
}

/* =========================================================
   Desktop HUD: keyboard controls (graphic only)
   ========================================================= */
@media (min-width: 576px) {
  .xod-hud-keys{
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 20000;

    pointer-events: none; /* non blocca la mappa */
    user-select: none;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 10px 10px 9px;

    color: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
  }

  .xod-hud-title{
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 8px 2px;
  }

  .xod-hud-grid{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    align-items: center;
    min-width: 170px;
  }

  .xod-hud-grid .key{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 22px;
    min-width: 22px;
    padding: 0 7px;

    border-radius: 7px;
    background: rgba(255,255,255,0.92);
    color: #000;
    font-weight: 700;
    font-size: 12px;
  }

  .xod-hud-grid .key.wide{
    min-width: 64px;
    justify-content: center;
  }

  .xod-hud-grid .lab{
    opacity: 0.92;
    font-size: 12px;
  }
}

/* Mobile: non mostrare HUD */
@media (max-width: 575.98px){
  .xod-hud-keys{ display: none !important; }
}