/* El Cocal: lo strumento di bordo su una carta nautica (DIREZIONE.md). Solo gettoni in :root; il resto li usa.
   Raggio zero, nessuna ombra, nessun gradient né blur: la carta sta solo dove c'è da leggere. */
:root {
  --carta: #e7d6a9;
  --carta-margine: #d9ca9f;
  --inchiostro: #18180d;
  --mare-carta: #c6dff1;
  --blu: #4985b7;
  --rosso: #9f130c;
  --castello: #eaeae8;
  --carattere: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --carattere-titoli: "Newsreader", Georgia, serif;
  --carattere-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --raggio: 0;
  --spazio-disclaimer: 28px;
  --tocco-min: 64px;
  --inchiostro-70: rgba(24, 24, 13, 0.7);
}

.volo { position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; background: var(--inchiostro); font-family: var(--carattere-mono); color: var(--inchiostro); touch-action: none; user-select: none; -webkit-user-select: none; color-scheme: light; }
.volo-tela { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; }
.volo-hud { position: absolute; inset: 0; pointer-events: none; }

/* striscia di carta in alto */
.volo-striscia { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--carta); border-bottom: 1px solid var(--inchiostro); padding: 0 12px; min-height: 48px; }
.volo-lettura { display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 44px; white-space: nowrap; }
.volo-lettura-tappa { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.volo-lettura-tappa .volo-wp { font-weight: 700; }
.volo-lettura-tappa .volo-nome-tappa { font-weight: 400; }
.volo-letture-destra { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.volo-lettura[hidden] { display: none; }
.volo-etichetta { font-size: 14px; letter-spacing: 0.02em; }
.volo-lettura strong { font-size: 16px; font-weight: 700; }
.volo-lettura-punti strong { font-size: 28px; }
.volo-pausa-bottone { pointer-events: auto; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; align-self: center; line-height: 0; }
.volo-pausa-bottone svg { width: 24px; height: 24px; display: block; }

/* avviso al centro, su carta */
.volo-avviso { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); background: var(--carta); color: var(--inchiostro); border: 1px solid var(--inchiostro); padding: 8px 14px; font-size: 15px; font-weight: 600; max-width: 90vw; text-align: center; opacity: 0; transition: opacity 0.2s linear; }
.volo-avviso.visibile { opacity: 1; }
.volo-freccia { position: absolute; left: 0; top: 0; width: 56px; color: var(--rosso); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.volo-freccia[hidden] { display: none; }
.volo-freccia-segno { width: 56px; height: 56px; }
.volo-freccia svg { display: block; width: 56px; height: 56px; }
.volo-freccia-distanza { font-size: 14px; font-weight: 700; background: var(--carta); color: var(--inchiostro); border: 1px solid var(--inchiostro); padding: 1px 6px; white-space: nowrap; }
.volo-spazio-disclaimer { position: absolute; left: 0; right: 0; bottom: 0; height: var(--spazio-disclaimer); }

/* bussola con margine graduato e mini-carta */
.volo-bussola { position: absolute; right: 12px; bottom: calc(var(--spazio-disclaimer) + 12px); width: 160px; height: 160px; }
.volo-bussola[hidden] { display: none; }
.volo-bussola svg { display: block; }
.volo-bussola-fondo { fill: var(--carta); stroke: var(--inchiostro); stroke-width: 1; }
.volo-bussola-mare { fill: var(--mare-carta); stroke: var(--inchiostro); stroke-width: 1; }
.volo-bussola-tacche line { stroke: var(--inchiostro); stroke-width: 1; }
.volo-bussola-nord { font-family: var(--carattere-mono); font-size: 14px; font-weight: 700; fill: var(--inchiostro); }
.volo-bussola-rotta { fill: none; stroke: var(--rosso); stroke-width: 1.2; }
.volo-bussola-tappa { fill: var(--carta); stroke: var(--rosso); stroke-width: 1; transition: fill 0.2s linear; }
.volo-bussola-tappa.presa { fill: var(--rosso); }
.volo-bussola-tappa.prossima { fill: var(--rosso); r: 5; }
.volo-bussola-gabbiano path { fill: var(--inchiostro); }
.volo-bussola-ago path { fill: var(--rosso); }
.volo-bussola-ago, .volo-bussola-gabbiano { transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* comandi tattili: cerchi d'inchiostro al 70% con il segno in carta */
.volo-tocco { position: absolute; left: 0; right: 0; bottom: var(--spazio-disclaimer); height: 170px; display: none; justify-content: space-between; align-items: flex-end; padding: 0 16px 14px; }
.volo-tocco.visibile { display: flex; }
.volo-joy, .volo-spinta { pointer-events: auto; min-width: var(--tocco-min); min-height: var(--tocco-min); border-radius: 50%; background: var(--inchiostro-70); color: var(--carta); display: flex; align-items: center; justify-content: center; }
.volo-joy { width: 132px; height: 132px; position: relative; }
.volo-joy-stilo { width: 52px; height: 52px; border-radius: 50%; background: var(--carta); }
.volo-spinta { width: 108px; height: 108px; flex-direction: column; font-size: 14px; font-weight: 700; text-align: center; line-height: 1.1; gap: 2px; }
.volo-spinta.attivo { background: var(--rosso); }

/* anteprima della webcam */
.volo-anteprima { position: absolute; right: 12px; top: 56px; width: 120px; height: 90px; background: var(--inchiostro); border: 1px solid var(--inchiostro); overflow: hidden; pointer-events: auto; }
.volo-anteprima[hidden] { display: none; }
.volo-anteprima-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.volo-anteprima-chiudi { position: absolute; right: 0; top: 0; width: 32px; height: 32px; min-height: 32px; padding: 0; justify-content: center; }

/* schermate: fogli di carta con cartiglio a doppia riga */
.volo-schermate { position: absolute; inset: 0; pointer-events: none; }
.volo-schermata { position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px 20px calc(var(--spazio-disclaimer) + 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-sizing: border-box; }
.volo-avvio { background: var(--carta); }
.volo-foglio { background: var(--carta); color: var(--inchiostro); border: 1px solid var(--inchiostro); outline: 1px solid var(--inchiostro); outline-offset: 3px; padding: 24px; width: 100%; box-sizing: border-box; display: flex; gap: 24px; margin: auto 0; flex: 0 0 auto; }
.volo-foglio-avvio { max-width: 1040px; align-items: flex-start; }
.volo-foglio-piccolo { max-width: 520px; flex-direction: column; gap: 12px; }
.volo-veduta { margin: 0; flex: 1 1 52%; min-width: 0; }
.volo-veduta img { display: block; width: 100%; height: auto; border: 1px solid var(--inchiostro); outline: 1px solid var(--inchiostro); outline-offset: 3px; background: var(--mare-carta); }
.volo-veduta figcaption { font-size: 14px; margin-top: 10px; }
.volo-colonna { flex: 1 1 44%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.volo-sopratitolo { margin: 0; font-size: 14px; font-weight: 400; }
.volo-titolo { margin: 0; font-family: var(--carattere-titoli); font-size: 48px; line-height: 1; font-weight: 600; }
.volo-titolo-piccolo { font-size: 30px; }
.volo-testo { margin: 0; font-family: var(--carattere-titoli); font-size: 18px; line-height: 1.45; }
.volo-testo em { font-style: italic; }
.volo-mono { font-family: var(--carattere-mono); font-size: 15px; }
.volo-punti-grandi { margin: 0; font-size: 18px; }
.volo-punti-grandi strong { font-size: 40px; font-weight: 700; }
.volo-tasti { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.volo-bottone { pointer-events: auto; font-family: var(--carattere-mono); font-size: 16px; font-weight: 600; min-height: 48px; padding: 10px 18px; border: 1px solid var(--inchiostro); background: var(--inchiostro); color: var(--carta); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.volo-bottone:hover { background: var(--carta); color: var(--inchiostro); }
.volo-bottone:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
.volo-bottone:disabled { opacity: 0.6; cursor: default; }
.volo-primario { background: var(--rosso); border-color: var(--rosso); }
.volo-primario:focus-visible { outline-color: var(--inchiostro); }
.volo-bottone-doppio span { display: flex; flex-direction: column; gap: 2px; }
.volo-bottone-doppio small { font-size: 14px; font-weight: 400; }
.volo-sotto-tasto { margin: -4px 0 0; font-size: 14px; line-height: 1.4; }
/* interruttore «Comanda con la testa»: una riga toccabile con la casella disegnata a inchiostro */
.volo-interruttore { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; font-size: 15px; line-height: 1.4; border-top: 1px solid var(--inchiostro); margin-top: 4px; }
.volo-interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.volo-casella { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--inchiostro); outline: 1px solid var(--inchiostro); outline-offset: 2px; background: var(--carta); display: block; }
.volo-casella svg { display: block; width: 100%; height: 100%; opacity: 0; }
.volo-interruttore input:checked + .volo-casella svg { opacity: 1; }
.volo-interruttore input:focus-visible + .volo-casella { outline-width: 2px; }
.volo-interruttore strong { font-weight: 700; }
.volo-interruttore small { display: block; font-size: 14px; }
.volo-nowrap { white-space: nowrap; }
.volo-collegamento { color: var(--rosso); font-weight: 700; }
.volo-tasti-riga { flex-direction: row; flex-wrap: wrap; }
.volo-tasti-riga .volo-bottone { flex: 1 1 auto; justify-content: center; text-decoration: none; }
a.volo-bottone { text-decoration: none; }
.volo-collegamento:hover { color: var(--inchiostro); }
.volo-lettura-demo { font-weight: 700; }
.volo-demo-breve { display: none; }
.volo-tasti-demo { position: absolute; left: 12px; bottom: calc(var(--spazio-disclaimer) + 12px); display: flex; gap: 8px; pointer-events: auto; }
.volo-tasti-demo[hidden] { display: none; }
.volo-tasti-demo .volo-bottone { min-height: 44px; padding: 8px 14px; text-decoration: none; }
.volo-primario:hover { background: var(--carta); color: var(--rosso); }
.volo-pausa-bottone:hover { background: var(--carta); color: var(--inchiostro); }
.volo-come { border-top: 1px solid var(--inchiostro); padding-top: 10px; }
.volo-come p { margin: 0 0 6px; font-size: 14px; line-height: 1.4; }
.volo-modulo { display: flex; flex-direction: column; gap: 6px; }
.volo-etichetta-modulo { font-size: 14px; font-weight: 600; }
.volo-riga-modulo { display: flex; gap: 8px; }
.volo-campo { flex: 1; font-family: var(--carattere-mono); font-size: 16px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--inchiostro); border-radius: 0; color: var(--inchiostro); background: var(--carta); min-width: 0; }
.volo-campo:focus { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
.volo-campo.errore, .volo-campo.errore:focus { border-color: var(--rosso); outline-color: var(--rosso); }
.volo-esito { margin: 0; font-size: 14px; min-height: 1.4em; font-weight: 600; color: var(--rosso); }
.volo-errore .volo-titolo { color: var(--rosso); }

@media (max-width: 900px) {
  .volo-lettura-velocita { display: none; }
  .volo-foglio-avvio { flex-direction: column; }
  .volo-veduta, .volo-colonna { flex-basis: auto; width: 100%; }
}
@media (max-width: 600px) {
  .volo-bussola { display: none; }
  .volo-striscia { flex-wrap: wrap; gap: 0 12px; padding-bottom: 2px; }
  .volo-lettura-tappa { flex-basis: 100%; line-height: 30px; }
  .volo-letture-destra { width: 100%; justify-content: flex-end; }
  .volo-letture-destra .volo-lettura { line-height: 36px; }
  .volo-pausa-bottone { margin: 0; }
  .volo-avviso { top: 80px; }
  .volo-lettura-punti strong { font-size: 22px; }
  .volo-lettura { font-size: 14px; }
  .volo-lettura-demo { flex: 0 0 auto; }
  .volo-demo-lungo { display: none; }
  .volo-demo-breve { display: inline; }
  .volo-letture-destra { gap: 10px; }
  .volo-titolo { font-size: 36px; }
  .volo-foglio { padding: 16px; }
  .volo-schermata { padding: 16px 10px calc(var(--spazio-disclaimer) + 16px); }
  .volo-veduta img { max-height: 150px; object-fit: cover; }
  .volo-foglio-avvio { gap: 16px; }
  .volo-avviso { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .volo-avviso, .volo-bussola-tappa, .volo-bussola-ago, .volo-bussola-gabbiano { transition: none; }
}