/* Il simulatore: la scena a tutto schermo, l'interfaccia sopra, nella lingua della direzione:
   lastre piene d'inchiostro, la pausa gialla, la macchia rossa sulla prossima porta. Gettoni da /stile.css */
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--mare); }
body.volo { touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#scena { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

/* pannelli: campitura blu piena, voci in righe di registro */
.pannello { position: fixed; inset: 0; z-index: 5; overflow: auto; display: grid; align-items: end; padding: 0; }
.pannello[hidden] { display: none; }
.menu-corpo, .carica-corpo { background: var(--mare); color: #fff; padding: var(--s5) var(--margine) calc(var(--s5) + var(--avviso-h, 90px)); display: grid; gap: var(--s4); width: 100%; }
@media (min-width: 1000px) {
  /* al portatile la campitura blu è una fascia a tutta altezza dal bordo sinistro, a bordo netto */
  .pannello { align-items: stretch; justify-items: start; padding-left: 0; }
  .menu-corpo, .carica-corpo { width: min(560px, 92vw); padding: var(--s6) var(--s6) calc(var(--s5) + var(--avviso-h, 44px)); align-content: center; }
  .pannello { padding-bottom: var(--avviso-h, 44px); }
}
.pannello h1, .pannello h2 { font-weight: 850; font-stretch: 125%; line-height: .95; letter-spacing: -.03em; font-size: clamp(36px, 7vw, 60px); }
.menu-sotto, .menu-corpo > p { color: var(--schiuma); }
.occhiello-volo { font-weight: 700; font-stretch: 112%; color: var(--becco); }
.carica { align-items: end; }
.carica-binario { height: 6px; background: var(--inchiostro); }
#carica-barra { height: 100%; background: var(--becco); transform: scaleX(0); transform-origin: left; transition: transform var(--planata); }
#carica-testo { color: var(--schiuma); font-size: var(--t-piccolo); }
body.errore #carica-testo { color: #fff; font-size: var(--t-testo); }

.menu-azioni { display: flex; flex-direction: column; align-items: stretch; border-top: var(--filetto); border-top-color: var(--schiuma); }
.menu-azioni > * { border-bottom: 1px solid var(--mantello); }
.tasto { display: flex; align-items: center; justify-content: space-between; min-height: 56px; width: 100%; padding: 0; background: none; border: 0; color: #fff; font: 700 var(--t-voce)/1.2 var(--carattere); font-stretch: 112%; text-align: left; text-decoration: none; cursor: pointer; }
.tasto::after { content: ""; flex: none; width: 12px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 55%, 0 100%); transition: transform var(--colpo); }
.tasto:hover::after { transform: translateX(5px); }
.tasto:focus-visible { outline: 3px solid var(--becco); outline-offset: 2px; }
.tasto-primo.tasto { justify-content: flex-start; width: auto; margin: var(--s3) 0; padding: 0 40px 0 22px; color: var(--inchiostro); background: var(--becco); font-size: var(--t-azione); font-weight: 800; font-stretch: 118%; border: 0; min-height: var(--azione-alta); }
.tasto-primo.tasto::after { display: none; }
.menu-azioni > .tasto-primo { border-bottom: 0; align-self: flex-start; }
.tasto[disabled] { opacity: .6; cursor: progress; }
.tasto[data-stato="fatto"]::after { width: 12px; height: 12px; border-radius: 50%; background: var(--macchia); outline: 3px solid #fff; clip-path: none; }

.menu-comandi { display: grid; gap: var(--s3); font-size: var(--t-piccolo); color: var(--schiuma); }
.menu-comandi strong { color: #fff; }
.comandi-tocco { display: none; }
@media (pointer: coarse), (max-width: 700px) { .comandi-tocco { display: block; } }
@media (pointer: coarse) { .comandi-tasti { display: none; } }
.testa { border-bottom: 1px solid var(--mantello); }
.testa summary { min-height: 52px; display: flex; align-items: center; font-weight: 700; font-stretch: 112%; font-size: var(--t-voce); color: #fff; cursor: pointer; list-style: none; }
.testa summary::-webkit-details-marker { display: none; }
.testa summary::after { content: ""; margin-left: auto; width: 14px; height: 12px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform var(--colpo); }
.testa[open] summary::after { transform: rotate(180deg); }
.testa > p, .testa > div { margin-left: 0; }
.testa p { margin-bottom: var(--s3); }
.privacy-webcam { color: #fff; font-weight: 600; }
.testa-azioni { display: flex; flex-direction: column; border-top: 1px solid var(--mantello); }
.testa-azioni .tasto { border-bottom: 1px solid var(--mantello); }
#testa-esito:empty { display: none; }
.menu-link { display: flex; gap: var(--s4); flex-wrap: wrap; }
.menu-link a { min-height: var(--bersaglio); display: inline-flex; align-items: center; color: #fff; font-weight: 600; }

/* fine del percorso */
.fine-grande { font-weight: 850; font-stretch: 125%; font-size: clamp(48px, 12vw, 96px); line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.fine-grande .unita { font-size: 24px; font-weight: 700; font-stretch: 100%; }
.fine-dati { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 2px solid var(--schiuma); }
.fine-dati div { padding: var(--s2) 0; border-bottom: 1px solid var(--mantello); }
.fine-dati dt { font-size: var(--t-piccolo); color: var(--schiuma); }
.fine-dati dd { margin: 0; font-weight: 850; font-stretch: 125%; font-size: 24px; font-variant-numeric: tabular-nums; }
.modulo-classifica { display: grid; gap: var(--s2); }
.modulo-classifica[hidden] { display: none; }
.modulo-classifica label { font-weight: 700; color: #fff; }
.riga-invio { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.riga-invio input:focus-visible { outline: 3px solid var(--becco); outline-offset: 2px; }
.riga-invio input { flex: 1 1 200px; min-height: 52px; padding: 0 var(--s3); border: 0; border-bottom: 3px solid var(--becco); border-radius: 0; background: var(--piuma); color: var(--inchiostro); font: 600 18px var(--carattere); user-select: text; -webkit-user-select: text; }
.riga-invio .tasto-primo { margin: 0; }
.nota { font-size: var(--t-piccolo); color: var(--schiuma); }
.nota a { color: #fff; }
#esito-invio { color: #fff; font-weight: 600; }
#esito-invio:empty { display: none; }

/* HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; display: none; font-variant-numeric: tabular-nums; }
body[data-modo="volo"] .hud, body[data-modo="demo"] .hud, body[data-modo="conto"] .hud { display: block; }
.hud-alto { position: absolute; top: calc(var(--s3) + env(safe-area-inset-top)); left: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; max-width: calc(100% - 150px); }
.hud-dato { background: var(--inchiostro); color: #fff; padding: 6px 12px 8px; min-width: 72px; display: grid; }
.hud-et { font-size: var(--t-piccolo); color: var(--schiuma); line-height: 1.2; }
.hud-dato span:last-child { font-weight: 850; font-stretch: 125%; font-size: 28px; line-height: 1; }
body[data-tipo="libero"] .hud-percorso { display: none; }
@media (max-width: 700px) { .hud-strumenti, .hud-dato:nth-child(3) { display: none; } .hud-dato span:last-child { font-size: 24px; } }
@media (min-width: 1000px) { .hud-dato span:last-child { font-size: 36px; } }
.hud-tasti-alto { position: absolute; top: calc(var(--s3) + env(safe-area-inset-top)); right: var(--s3); display: flex; gap: var(--s2); pointer-events: auto; }
.tasto-hud { min-width: var(--bersaglio); min-height: var(--bersaglio); padding: 0 var(--s3); background: var(--inchiostro); color: #fff; border: 0; font: 600 var(--t-piccolo) var(--carattere); cursor: pointer; }
#tasto-pausa { width: var(--pausa); height: var(--pausa); background: var(--becco); display: grid; place-items: center; padding: 0; }
#tasto-pausa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#tasto-pausa::before { content: ""; width: 16px; height: 20px; border-left: 6px solid var(--inchiostro); border-right: 6px solid var(--inchiostro); }
#tasto-audio[aria-pressed="false"] { color: var(--schiuma); text-decoration: line-through; }
#tasto-mappa { display: none; }
@media (max-width: 700px) { #tasto-mappa { display: block; } #mappa { display: none; } body.mappa-aperta #mappa { display: block; } }

/* la macchia sulla prossima porta, proiettata sullo schermo; fuori campo diventa una freccia sul bordo */
.segno-porta { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--macchia); outline: 4px solid #fff; display: none; }
.segno-porta.fuori::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border: 9px solid transparent; border-left: 14px solid #fff; transform: translate(10px, -50%) rotate(var(--ang, 0deg)); transform-origin: -10px 50%; }
body[data-tipo="percorso"][data-modo="volo"] .segno-porta.visibile, body[data-modo="demo"] .segno-porta.visibile { display: block; }
.segno-porta.colpo { animation: pulsa var(--virata); }
@keyframes pulsa { 50% { transform: scale(1.25); } }

/* bussola: un nastro d'orizzonte pieno */
.bussola { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(44px + env(safe-area-inset-bottom)); width: min(420px, 60vw); height: 40px; background: var(--inchiostro); color: var(--schiuma); overflow: hidden; }
.bussola-nastro { position: absolute; left: 50%; top: 0; height: 100%; white-space: nowrap; }
.bussola-nastro span { position: absolute; top: 0; height: 40px; width: 40px; margin-left: -20px; display: grid; place-items: center; font-weight: 700; font-size: var(--t-piccolo); }
.bussola-nastro span.bora { width: 3px; margin-left: -1px; height: 10px; top: 30px; background: var(--becco); }
.bussola::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 10px; background: var(--becco); margin-left: -1px; }
@media (pointer: coarse) and (max-width: 700px) { .bussola { width: 46vw; } }

#mappa { position: absolute; left: var(--s3); bottom: calc(44px + var(--s3) + env(safe-area-inset-bottom)); width: 180px; height: 180px; border: 2px solid var(--inchiostro); }
@media (max-width: 700px) { #mappa { top: 74px; bottom: auto; width: 150px; height: 150px; } }
#anteprima { position: absolute; right: var(--s3); top: 80px; width: 120px; transform: scaleX(-1); display: none; border: 2px solid var(--inchiostro); background: var(--inchiostro); }
body.con-testa #anteprima { display: block; }
.tasti-tocco { position: absolute; right: var(--s3); bottom: calc(44px + 52px + env(safe-area-inset-bottom)); display: none; gap: var(--s3); pointer-events: auto; }
@media (pointer: coarse) { .tasti-tocco { display: flex; } }
.tasto-tocco { min-width: 84px; min-height: 84px; border: 0; background: var(--inchiostro); color: #fff; font: 700 15px/1.1 var(--carattere); padding: 0 var(--s2); touch-action: none; }
.tasto-ali { background: var(--becco); color: var(--inchiostro); }
.tasto-tocco.premuto { transform: translateY(2px); background: var(--macchia); color: #fff; }
.levetta { position: fixed; left: -60px; top: -60px; width: 120px; height: 120px; border: 3px solid var(--piuma); border-radius: 50%; pointer-events: none; z-index: 4; }
.levetta[hidden] { display: none; }
.levetta div { position: absolute; left: 37px; top: 37px; width: 40px; height: 40px; background: var(--piuma); border-radius: 50%; }

.lampo { position: fixed; left: 50%; top: 28%; transform: translateX(-50%); z-index: 4; margin: 0; pointer-events: none; background: var(--inchiostro); color: #fff; padding: 6px 14px; font-weight: 850; font-stretch: 125%; font-size: 28px; opacity: 0; }
.lampo.avviso { background: var(--piuma); color: var(--inchiostro); font-size: 20px; }
.lampo.vivo { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .lampo.vivo { animation: sale var(--planata); } @keyframes sale { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } } }
.conto { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; z-index: 4; pointer-events: none; }
.conto[hidden] { display: none; }
.conto { font-weight: 850; font-stretch: 125%; font-size: clamp(80px, 20vw, 180px); color: #fff; -webkit-text-stroke: 3px var(--inchiostro); paint-order: stroke fill; }

/* l'avviso non ufficiale nel volo: riga piena in fondo; al telefono si apre col tocco */
.avviso-volo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; margin: 0; min-height: 44px; padding: 12px var(--s3) calc(12px + env(safe-area-inset-bottom)); font-size: var(--t-piccolo); background: var(--inchiostro); color: var(--piuma); line-height: 1.4; }
body[data-modo="volo"] .avviso-volo, body[data-modo="demo"] .avviso-volo, body[data-modo="conto"] .avviso-volo { background: var(--piuma); color: var(--inchiostro); }
body[data-modo="volo"] .avviso-volo::before, body[data-modo="demo"] .avviso-volo::before { color: var(--inchiostro); }
.avviso-corto { display: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; min-height: 20px; }
@media (max-width: 700px) {
  body[data-modo="volo"] .avviso-volo:not(.aperto) .avviso-intero, body[data-modo="conto"] .avviso-volo:not(.aperto) .avviso-intero { display: none; }
  body[data-modo="volo"] .avviso-volo:not(.aperto) .avviso-corto, body[data-modo="conto"] .avviso-volo:not(.aperto) .avviso-corto { display: inline; }
  body[data-modo="volo"] .avviso-volo:not(.aperto)::before, body[data-modo="conto"] .avviso-volo:not(.aperto)::before { content: none; }
  body[data-modo="volo"] .avviso-volo { pointer-events: auto; }
}

/* volo dimostrativo: niente comandi a schermo */
.demo-fine { position: fixed; inset: 0; display: grid; place-content: center; gap: var(--s3); z-index: 6; background: var(--mare); color: #fff; text-align: center; padding: var(--s5); }
.demo-fine[hidden] { display: none; }
.demo-fine a { color: var(--becco); }
body.demo .hud-tasti-alto, body.demo .tasti-tocco, body.demo .hud-strumenti, body.demo #anteprima { display: none !important; }

body.pulito .hud, body.pulito .lampo { display: none !important; }

/* al telefono si tolgono funzioni, non si stringono i tasti: l'audio passa nel menu di pausa,
   la bussola va in basso a sinistra, accanto ai tasti del pollice destro */
@media (max-width: 700px) {
  #tasto-audio { display: none; }
  .hud-alto { max-width: calc(100% - 140px); }
  .hud-dato { min-width: 0; padding: 6px 10px 8px; }
  .bussola { left: var(--s3); transform: none; width: calc(100% - 210px); }
}
@media (min-width: 701px) { .solo-telefono { display: none !important; } }

/* al telefono il menu lascia vedere il mondo: niente paragrafo, solo il titolo e le scelte */
@media (max-width: 700px) { .menu-sotto { display: none; } .pannello h1 { font-size: 40px; } .menu .menu-corpo { gap: var(--s3); padding-top: var(--s4); } }

.bussola-nastro span.ora { color: var(--becco); }
/* il primo volo col dito: dove va il pollice */
.guida-pollice { position: absolute; left: 12%; bottom: 26%; display: grid; justify-items: center; gap: var(--s2); pointer-events: none; }
.guida-pollice[hidden] { display: none; }
.guida-cerchio { width: 96px; height: 96px; border: 3px solid var(--piuma); border-radius: 50%; }
.guida-testo { background: var(--inchiostro); color: #fff; font-size: var(--t-piccolo); font-weight: 700; padding: 4px 10px; max-width: 12em; text-align: center; }
@media (prefers-reduced-motion: no-preference) { .guida-cerchio { animation: pulsa 1.6s var(--planata) infinite; } }