/**
 * Live 3D View — contenitore Cesium e cruscotto.
 *
 * Tutto è confinato dentro .wpvams3d: questa vista finisce dentro un tema
 * altrui, e un selettore generico verrebbe sovrascritto o sovrascriverebbe.
 */

.wpvams3d {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 70vh;
	background: #05070a;
	overflow: hidden;
	font-family: "SF Mono", "Roboto Mono", Consolas, "Courier New", monospace;
}

/* A schermo pieno esce dal flusso del tema: niente margini del contenuto, e
   sopra le barre appiccicose che quasi ogni tema mette in cima. */
.wpvams3d.is-fullscreen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100000;
}

.wpvams3d-cesium {
	position: absolute;
	inset: 0;
}

/* Cesium inserisce il proprio widget: senza questo resta alto 150px di default
   dentro un contenitore posizionato. */
.wpvams3d-cesium .cesium-viewer,
.wpvams3d-cesium .cesium-widget,
.wpvams3d-cesium .cesium-widget canvas {
	width: 100%;
	height: 100%;
	touch-action: none;
}

/* --- Cruscotto ---------------------------------------------------------- */

.wpvams3d-hud {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	transform: translateX(-50%);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1px;

	background: rgba(4, 10, 14, .82);
	border: 1px solid rgba(0, 255, 153, .28);
	border-radius: 6px;
	box-shadow: 0 0 24px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 255, 153, .04);
	backdrop-filter: blur(6px);

	/* Il cruscotto non deve rubare il mouse alla scena: si trascina la vista
	   anche partendo da sopra gli strumenti. */
	pointer-events: none;
	user-select: none;
	overflow: hidden;
	max-width: calc(100vw - 2rem);

	/* Quando gli strumenti non stanno su una riga sola, `max-width` li
	   spingeva oltre il bordo e `overflow: hidden` li tagliava via in
	   silenzio — lo squawk, quello che conta in un'emergenza, spariva senza
	   che nulla lo segnalasse. Con `flex-wrap` vanno invece a capo: restano
	   tutti visibili, solo su due righe invece di una. */
}

.wpvams3d-gauge {
	min-width: 6.6rem;
	padding: .55rem 1rem .6rem;
	text-align: center;
	background: rgba(255, 255, 255, .02);
}

.wpvams3d-gauge + .wpvams3d-gauge {
	box-shadow: inset 1px 0 0 rgba(0, 255, 153, .16);
}

.wpvams3d-label {
	display: block;
	font-size: .62rem;
	letter-spacing: .18em;
	color: rgba(190, 230, 210, .62);
	margin-bottom: .18rem;
}

.wpvams3d-value {
	display: block;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.05;
	color: #eaf6f0;
	font-variant-numeric: tabular-nums;

	/* tabular-nums da solo non basta: senza una larghezza stabile il cruscotto
	   respira a ogni cifra che cambia. */
	text-shadow: 0 0 10px rgba(0, 255, 153, .35);
}

.wpvams3d-unit {
	font-size: .62rem;
	letter-spacing: .1em;
	color: rgba(150, 200, 180, .55);
	margin-left: .15rem;
}

/* Verde per ciò che il pilota legge di continuo, bianco per il contesto. */
.wpvams3d-gauge.is-primary .wpvams3d-value { color: #00ff99; }

.wpvams3d-gauge.is-phase .wpvams3d-value,
.wpvams3d-gauge.is-gear .wpvams3d-value {
	font-size: .92rem;
	letter-spacing: .1em;
	padding-top: .38rem;
	white-space: nowrap;
}

/* Carrello estratto: verde, come una spia accesa in cabina. */
.wpvams3d-gauge.is-gear.is-down .wpvams3d-value { color: #00ff99; }

/* Sconosciuto: spento. Non è un carrello retratto, è un carrello di cui non
   sappiamo niente — la differenza va vista, non nascosta dietro un "UP". */
.wpvams3d-gauge.is-gear.is-unknown .wpvams3d-value {
	color: rgba(190, 230, 210, .38);
	text-shadow: none;
}

/* Rosa dei venti. L'ago si orienta col nord vero, non con l'aereo: e' l'unico
   riferimento fisso in una vista che ruota insieme al velivolo. */
.wpvams3d-gauge.is-rose { min-width: 4.2rem; }

.wpvams3d-rose {
	display: block;
	width: 2.05rem;
	height: 2.05rem;
	margin: .3rem auto 0;

	/* Ruota di scatti secchi a ogni fotogramma se non si smorza: la
	   transizione la rende una lancetta invece di un valore che salta. */
	transition: transform .18s linear;
}

.wpvams3d-rose svg { width: 100%; height: 100%; display: block; }

.wpvams3d-rose-ring {
	fill: none;
	stroke: rgba(0, 255, 153, .22);
	stroke-width: 1.4;
}

.wpvams3d-rose-n { fill: #00ff99; }
.wpvams3d-rose-s { fill: rgba(190, 230, 210, .32); }

@media ( prefers-reduced-motion: reduce ) {
	.wpvams3d-rose { transition: none; }
}

.wpvams3d-gauge.is-sqk .wpvams3d-value {
	font-size: 1.25rem;
	letter-spacing: .06em;
}

/* 7500 dirottamento, 7600 avaria radio, 7700 emergenza: in torre fanno alzare
   la testa a tutti, e qui devono distinguersi da un 1200 qualunque. */
.wpvams3d-gauge.is-sqk.is-alert {
	background: rgba(190, 40, 40, .28);
	animation: wpvams-alert 1.6s ease-in-out infinite;
}
.wpvams3d-gauge.is-sqk.is-alert .wpvams3d-value {
	color: #ff6b6b;
	text-shadow: 0 0 12px rgba(255, 80, 80, .6);
}
.wpvams3d-gauge.is-sqk.is-alert .wpvams3d-label { color: rgba(255, 190, 190, .8); }

@keyframes wpvams-alert {
	50% { background: rgba(190, 40, 40, .1); }
}

/* --- Modalità e stato --------------------------------------------------- */

.wpvams3d-topleft {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: flex;
	align-items: stretch;
	gap: .5rem;
}

.wpvams3d-mode {
	padding: .3rem .7rem;
	font-size: .68rem;
	letter-spacing: .2em;
	color: #00ff99;
	background: rgba(4, 10, 14, .8);
	border: 1px solid rgba(0, 255, 153, .3);
	border-radius: 4px;
	pointer-events: none;
	display: flex;
	align-items: center;
}

/* --- Segui / libera ------------------------------------------------------
   A terra il terreno sotto la telecamera cambia in continuo mentre l'aereo
   rulla: la correzione automatica di quota (keepChaseClear in live-3d.js)
   può riagganciarsi più volte al minuto, e ogni aggancio azzera l'orbita
   che l'utente si è appena scelto col dito — la vista sembra "non
   ruotare". Questo tasto sgancia la telecamera dal riferimento dell'aereo:
   da sganciata nessun codice la tocca più, e l'utente ne ha il pieno
   controllo. Ripremendolo la riaggancia, da qualunque punto sia arrivata. */
.wpvams3d-follow {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: 0 .7rem;
	background: rgba(4, 10, 14, .8);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 4px;
	color: rgba(234, 246, 240, .75);
	font: inherit;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: background-color .15s, color .15s, border-color .15s;

	/* Bersaglio comodo da toccare col dito, non solo col mouse. */
	min-height: 1.95rem;
}

.wpvams3d-follow svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	fill: none;
}

.wpvams3d-follow-dot { fill: currentColor; stroke: none; }

/* Agganciata: verde, coerente col resto del cruscotto — è lo stato normale,
   quello in cui la vista segue l'aereo da sola. */
.wpvams3d-follow.is-active {
	color: #00ff99;
	border-color: rgba(0, 255, 153, .35);
}

/* Sganciata: nessun colore d'allarme — non è un guasto, è una scelta
   dell'utente — ma deve leggersi a colpo d'occhio come "diversa dal
   solito", altrimenti si dimentica la telecamera libera e ci si chiede
   perché non segue più l'aereo. */
.wpvams3d-follow:not(.is-active) {
	color: #ffcc66;
	border-color: rgba(255, 204, 102, .4);
}

.wpvams3d-follow:hover,
.wpvams3d-follow:focus-visible {
	background: rgba(255, 255, 255, .08);
}

.wpvams3d-follow:focus-visible {
	outline: 2px solid #00ff99;
	outline-offset: 2px;
}

@media (max-width: 700px) {
	/* L'etichetta di testo è un doppione dell'icona quando lo spazio scarseggia:
	   l'icona da sola, colorata, dice già "agganciata" o "libera". */
	.wpvams3d-follow-label { display: none; }
	.wpvams3d-follow { padding: 0 .55rem; }
}

/* Callsign e chiusura: una riga sola.
   `align-items: stretch` fa sì che i due riquadri abbiano la stessa altezza
   senza che nessuno la dichiari — prima la X era alta 2.2rem contro le ~1.7rem
   del callsign, e si vedeva. */
.wpvams3d-topright {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: stretch;
	gap: .5rem;
}

.wpvams3d-callsign,
.wpvams3d-close {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 10, 14, .8);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.wpvams3d-callsign {
	padding: .38rem .85rem;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: #eaf6f0;
	pointer-events: none;
}

.wpvams3d-status {
	position: absolute;
	top: 3.4rem;
	left: 50%;
	transform: translateX(-50%);
	padding: .4rem .9rem;
	font-size: .78rem;
	color: #cfe6dc;
	background: rgba(4, 10, 14, .85);
	border-radius: 4px;
	pointer-events: none;
	text-align: center;
	max-width: 90vw;
}

.wpvams3d-status:empty      { display: none; }
.wpvams3d-status.is-warn    { color: #ffcc66; border: 1px solid rgba(255, 204, 102, .4); }
.wpvams3d-status.is-error   { color: #ff8080; border: 1px solid rgba(255, 128, 128, .45); }

/* --- Chiusura ----------------------------------------------------------- */

.wpvams3d-close {
	/* Larga quanto è alta: il rapporto lo tiene l'aspect-ratio, non due misure
	   scritte a mano che si scollano appena cambia la dimensione del testo.
	   Il min-width è il ripiego dove aspect-ratio non c'è: senza, il riquadro
	   si stringerebbe attorno all'icona. */
	box-sizing: border-box;
	aspect-ratio: 1;
	min-width: 1.95rem;
	padding: 0;
	cursor: pointer;
	color: #cfe6dc;

	/* Il tema del sito dà ai link un colore, una sottolineatura e a volte un
	   `background` proprio: qui vanno battuti, altrimenti la X esce azzurra e
	   sottolineata dentro il proprio riquadro. */
	text-decoration: none !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: background-color .15s, color .15s, border-color .15s;
}

.wpvams3d-close svg {
	width: .85rem;
	height: .85rem;
	display: block;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

.wpvams3d-close:hover,
.wpvams3d-close:focus-visible {
	background: rgba(200, 60, 60, .85);
	border-color: rgba(255, 160, 160, .55);
	color: #fff;
}

/* Il contorno di messa a fuoco resta visibile: la X è l'unica via d'uscita
   dalla vista, e chi naviga da tastiera deve poterla trovare. */
.wpvams3d-close:focus-visible {
	outline: 2px solid #00ff99;
	outline-offset: 2px;
}

.wpvams3d-close { display: none; }
.wpvams3d.is-fullscreen .wpvams3d-close { display: flex; }

/* --- Schermi stretti ---------------------------------------------------- */

/* Tablet: gli strumenti a dimensione piena spesso non stanno su una riga
   sola fra i 701 e i 1024px (un iPad in verticale è 768px). Si stringe
   quanto basta perché ci stiano quasi sempre; se anche così avanza
   qualcosa, `flex-wrap` lo manda a capo invece di tagliarlo. */
@media (min-width: 701px) and (max-width: 1024px) {
	.wpvams3d-hud   { gap: 0; }
	.wpvams3d-gauge { min-width: 5.2rem; padding: .5rem .6rem .55rem; }
	.wpvams3d-value { font-size: 1.3rem; }

	/* Il divider fra strumenti è pensato per una riga sola: su due righe
	   lascerebbe un trattino verticale a metà del primo strumento andato a
	   capo. */
	.wpvams3d-gauge + .wpvams3d-gauge { box-shadow: none; }
}

@media (max-width: 700px) {
	.wpvams3d-hud   { bottom: .8rem; gap: 0; }
	.wpvams3d-gauge { min-width: 4.6rem; padding: .45rem .55rem .5rem; }
	.wpvams3d-value { font-size: 1.1rem; }
	.wpvams3d-gauge + .wpvams3d-gauge { box-shadow: none; }

	/* La X resta della stessa dimensione: è un bersaglio da toccare col dito,
	   e rimpicciolirla insieme al resto la renderebbe il pezzo più difficile
	   da colpire di tutta la schermata. */
	.wpvams3d-topleft  { top: .7rem; left: .7rem; gap: .4rem; }
	.wpvams3d-topright { top: .7rem; right: .7rem; gap: .4rem; }
	.wpvams3d-callsign { font-size: .8rem; padding: .38rem .6rem; }
	.wpvams3d-close    { min-width: 2.3rem; }
	.wpvams3d-close svg { width: .95rem; height: .95rem; }

	/* Su schermo stretto cadono per primi fase e carrello: la fase si intuisce
	   guardando fuori, il carrello pure. Lo squawk resta: è l'unico dato che
	   non si ricava in nessun altro modo, ed è quello che conta se è 7700. */
	.wpvams3d-gauge.is-phase,
	.wpvams3d-gauge.is-gear { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wpvams3d-value { text-shadow: none; }

	/* Il lampeggio dell'emergenza sparisce, il colore resta: chi ha chiesto di
	   ridurre le animazioni non deve perdere l'informazione insieme a quelle. */
	.wpvams3d-gauge.is-sqk.is-alert { animation: none; }
}