/*
 * Enzima Gesture Nav — stile "widget da sito vero", non da HUD di laboratorio.
 * Ogni blocco porta il proprio set di token (vedi field-notes: un overlay in
 * body.appendChild non eredita variabili definite altrove).
 */
.egn-btn,
.egn-hint,
.egn-modal-overlay,
.egn-hud,
#egn-reticle {
	--egn-violet: #6f00ff;
	--egn-green: #48ffa4;
	--egn-ink: #16121f;
	--egn-bg: #ffffff;
	--egn-line: rgba(111, 0, 255, 0.14);
	--egn-shadow: 0 12px 32px rgba(20, 10, 40, 0.18);
	font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}
.egn-btn *,
.egn-hint *,
.egn-modal-overlay *,
.egn-hud * {
	box-sizing: border-box;
}

/* ─── Bottone flottante ───────────────────────────────────────── */
.egn-btn {
	position: fixed;
	bottom: 24px;
	z-index: 2147483000;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--egn-violet);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--egn-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.egn-btn.egn-pos-left { left: 24px; }
.egn-btn.egn-pos-right { right: 24px; }
.egn-btn:hover { transform: scale(1.06); }
.egn-btn:focus-visible {
	outline: 3px solid var(--egn-green);
	outline-offset: 2px;
}
.egn-btn svg { width: 26px; height: 26px; }
.egn-btn .egn-icon-emoji { font-size: 22px; line-height: 1; }
.egn-btn.egn-active { background: var(--egn-green); color: var(--egn-ink); }

/* ─── Fumetto di invito ───────────────────────────────────────── */
.egn-hint {
	position: fixed;
	bottom: 88px;
	z-index: 2147483000;
	max-width: 220px;
	background: var(--egn-bg);
	color: var(--egn-ink);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: var(--egn-shadow);
	display: flex;
	align-items: flex-start;
	gap: 8px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.egn-hint.egn-pos-left { left: 24px; }
.egn-hint.egn-pos-right { right: 24px; }
.egn-hint.egn-show { opacity: 1; transform: translateY(0); }
.egn-hint button {
	border: none;
	background: none;
	color: var(--egn-ink);
	opacity: 0.5;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
}
.egn-hint button:hover { opacity: 1; }

/* ─── Modale tutorial ─────────────────────────────────────────── */
.egn-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483001;
	background: rgba(10, 6, 20, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.egn-modal {
	background: var(--egn-bg);
	color: var(--egn-ink);
	border-radius: 16px;
	max-width: 420px;
	width: 100%;
	padding: 28px;
	box-shadow: var(--egn-shadow);
}
.egn-modal h2 {
	margin: 0 0 16px;
	font-size: 19px;
}
.egn-modal .egn-step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 14px;
}
.egn-modal .egn-step .egn-icon {
	font-size: 26px;
	line-height: 1;
	flex: none;
}
.egn-modal .egn-step strong {
	display: block;
	margin-bottom: 2px;
	font-size: 14px;
}
.egn-modal .egn-step p {
	margin: 0;
	font-size: 13px;
	color: #55506a;
	line-height: 1.45;
}
.egn-modal .egn-privacy {
	font-size: 12px;
	color: #7a7690;
	border-top: 1px solid var(--egn-line);
	padding-top: 12px;
	margin-top: 8px;
}
.egn-modal .egn-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}
.egn-modal button {
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.egn-modal .egn-cancel { background: transparent; color: var(--egn-ink); }
.egn-modal .egn-cancel:hover { background: rgba(0, 0, 0, 0.05); }
.egn-modal .egn-activate { background: var(--egn-violet); color: #fff; }
.egn-modal .egn-activate:hover { background: #5c00d1; }
.egn-modal .egn-error {
	font-size: 12px;
	color: #b3261e;
	margin-top: 10px;
	display: none;
}
.egn-modal.egn-has-error .egn-error { display: block; }

/* ─── Pannello webcam (HUD) ───────────────────────────────────── */
.egn-hud {
	position: fixed;
	bottom: 24px;
	z-index: 2147483000;
	width: 200px;
	background: var(--egn-bg);
	color: var(--egn-ink);
	border-radius: 14px;
	box-shadow: var(--egn-shadow);
	overflow: hidden;
	font-size: 12px;
}
.egn-hud.egn-pos-left { left: 24px; }
.egn-hud.egn-pos-right { right: 24px; }
.egn-hud .egn-hud-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: 1px solid var(--egn-line);
}
.egn-hud .egn-rec {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}
.egn-hud .egn-rec b {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e5484d;
	display: inline-block;
}
.egn-hud.egn-paused .egn-rec b { background: #b8b3c9; }
.egn-hud .egn-hud-actions { display: flex; gap: 4px; }
.egn-hud .egn-hud-actions button {
	border: none;
	background: transparent;
	color: var(--egn-ink);
	cursor: pointer;
	font-size: 11px;
	padding: 3px 6px;
	border-radius: 6px;
}
.egn-hud .egn-hud-actions button:hover { background: rgba(0, 0, 0, 0.06); }
.egn-hud .egn-view {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #000;
}
/* "Anteprima video webcam" disattivata da pannello: il video/canvas restano
   nel DOM (servono comunque al tracking), semplicemente non si vedono. */
.egn-hud.egn-no-preview .egn-view { display: none; }
.egn-hud .egn-view video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scaleX(-1);
}
.egn-hud .egn-view canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* stesso specchio del <video>: lo skeleton è disegnato con le coordinate
	   grezze (non mirrorate) di MediaPipe, senza questo transform risulterebbe
	   sfasato rispetto alla mano che si vede nel video. */
	transform: scaleX(-1);
}
.egn-hud .egn-gesture {
	padding: 6px 10px;
	text-align: center;
	letter-spacing: 0.03em;
	color: #55506a;
}
.egn-hud .egn-gesture b { color: var(--egn-ink); }

/* ─── Cursore gestuale ────────────────────────────────────────── */
#egn-reticle {
	position: fixed;
	z-index: 2147483002;
	top: 0;
	left: 0;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
#egn-reticle .egn-ring {
	position: absolute;
	inset: 0;
	border: 2px solid var(--egn-violet);
	border-radius: 50%;
	transition: transform 0.1s ease, background 0.1s;
}
#egn-reticle .egn-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background: var(--egn-violet);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
#egn-reticle .egn-charge {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	opacity: 0;
	background: conic-gradient(var(--egn-green) var(--egn-p, 0%), transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
	transition: opacity 0.15s;
}
#egn-reticle.egn-dwell .egn-charge { opacity: 1; }
#egn-reticle.egn-drag .egn-ring { transform: scale(0.55); background: var(--egn-violet); }

/* Reticolo con l'icona del cursore già in uso sul sito (rilevata da JS via
   getComputedStyle su cursor:url(...)) invece del cerchio generico: niente
   due cursori diversi in giro, quello gestuale è "lo stesso" cursore. */
#egn-reticle.egn-native-icon {
	width: var(--egn-native-w, 34px);
	height: var(--egn-native-h, 34px);
	transform: translate(calc(-1 * var(--egn-native-hx, 17px)), calc(-1 * var(--egn-native-hy, 17px)));
}
#egn-reticle.egn-native-icon .egn-ring,
#egn-reticle.egn-native-icon .egn-dot {
	display: none;
}
#egn-reticle .egn-native-img {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
#egn-reticle.egn-native-icon .egn-native-img {
	display: block;
}
#egn-reticle.egn-native-icon .egn-charge {
	inset: -6px;
}

/* Mentre la navigazione a gesti è attiva, il cursore di sistema del sito
   (mouse reale) resta fermo dov'era e farebbe "doppione" col reticolo:
   lo nascondiamo per tutta la sessione gestuale. */
html.egn-cursor-hidden,
html.egn-cursor-hidden * {
	cursor: none !important;
}

/* Evidenzia il link/bottone attualmente puntato dal cursore gestuale */
.egn-hot {
	outline: 2px solid var(--egn-green, #48ffa4) !important;
	outline-offset: 2px !important;
	border-radius: 4px;
}