/* Plugin Author: Carmine Liuzzi */
/* ==========================================================================
   Galleria 3D — Stili Frontend Full-Screen (Architettura Monolitica v4.5)
   ========================================================================== */

:root {
	--vg3d-accent: #c9a24b;
	--vg3d-accent-dark: #a4812f;
	--vg3d-glass-bg: rgba(255, 255, 255, 0.14);
	--vg3d-glass-bg-dark: rgba(22, 22, 28, 0.6);
	--vg3d-glass-border: rgba(255, 255, 255, 0.25);
	--vg3d-overlay-bg: rgba(10, 12, 16, 0.55);
	--vg3d-text-light: #f5f5f5;
	--vg3d-text-dark: #232323;
	--vg3d-text-muted: #5d5d5d;
	--vg3d-radius: 16px;
	--vg3d-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body.vg3d-fullscreen-body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #cfd6dc;
	font-family: var(--vg3d-font);
}

a-scene {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   FIX SBLOCCO CLICK — isolamento pointer-events
   -------------------------------------------------------------------------- */

/* Il canvas WebGL deve sempre poter ricevere i click. */
.a-canvas {
	pointer-events: auto !important;
}

/* Il wrapper generale che racchiude tutta l'interfaccia HTML
   sovrapposta deve essere trasparente ai click: per nessun motivo deve
   intercettare un evento destinato al raycaster della scena. */
#ui-wrapper,
.ui-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none !important;
	z-index: 999;
}

/* Ripristina la cliccabilità SOLO sui singoli elementi UI interattivi reali. */
button,
a,
.nav-btn,
.modal-content,
.btn-room,
.btn {
	pointer-events: auto !important;
}

/* --------------------------------------------------------------------------
   Loader iniziale
   -------------------------------------------------------------------------- */

#vg3d-loader {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: #11141a;
	color: var(--vg3d-text-light);
	transition: opacity 0.6s ease;
	pointer-events: auto;
}

#vg3d-loader.vg3d-loader-hidden {
	opacity: 0;
	pointer-events: none !important;
}

#vg3d-loader p {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: rgba(245, 245, 245, 0.7);
}

.vg3d-loader-spinner {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 3px solid rgba(201, 162, 75, 0.25);
	border-top-color: var(--vg3d-accent);
	animation: vg3d-spin 0.9s linear infinite;
}

@keyframes vg3d-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------------------
   Schermata di errore fatale — visibile invece di uno schermo muto
   -------------------------------------------------------------------------- */

.vg3d-fatal-error {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #11141a;
	padding: 24px;
	pointer-events: auto;
}

.vg3d-fatal-error-box {
	max-width: 420px;
	text-align: center;
	color: var(--vg3d-text-light);
}

.vg3d-fatal-error-box h2 {
	margin: 0 0 12px;
	font-size: 20px;
}

.vg3d-fatal-error-box p {
	margin: 0 0 20px;
	font-size: 14px;
	color: rgba(245, 245, 245, 0.7);
	line-height: 1.6;
}

.vg3d-fatal-error-reload {
	padding: 11px 22px;
	background: var(--vg3d-accent);
	color: #1a1505;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Onboarding Popup — Glassmorphism
   -------------------------------------------------------------------------- */

.vg3d-onboarding-overlay {
	position: fixed;
	inset: 0;
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--vg3d-overlay-bg);
	backdrop-filter: blur(4px);
	pointer-events: auto;
}

.vg3d-onboarding-box {
	width: 100%;
	max-width: 460px;
	padding: 32px 28px;
	background: var(--vg3d-glass-bg);
	backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid var(--vg3d-glass-border);
	border-radius: var(--vg3d-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
	text-align: center;
	color: var(--vg3d-text-dark);
}

.vg3d-onboarding-box h2 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	color: #1a1a1a;
}

.vg3d-onboarding-box p {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--vg3d-text-muted);
}

.vg3d-onboarding-choices {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.vg3d-onboarding-btn {
	flex: 1 1 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 20px 14px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.vg3d-onboarding-btn:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.vg3d-onboarding-icon {
	font-size: 30px;
	line-height: 1;
}

.vg3d-onboarding-btn-title {
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
}

.vg3d-onboarding-btn-desc {
	font-size: 11px;
	color: var(--vg3d-text-muted);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Hint d'uso
   -------------------------------------------------------------------------- */

.vg3d-hint {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 22px;
	background: rgba(15, 15, 20, 0.55);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	color: var(--vg3d-text-light);
	font-size: 12.5px;
	letter-spacing: 0.01em;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none !important;
}

.vg3d-hint.vg3d-hint-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.vg3d-hint.vg3d-hint-hidden {
	opacity: 0;
	transform: translateX(-50%) translateY(10px);
}

/* --------------------------------------------------------------------------
   Bottone uscita, badge titolo, branding, pannello stanze
   -------------------------------------------------------------------------- */

.vg3d-exit-btn {
	position: fixed;
	top: 18px;
	left: 18px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: rgba(15, 15, 20, 0.5);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 30px;
	color: var(--vg3d-text-light);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.vg3d-exit-btn:hover {
	background: rgba(30, 30, 38, 0.75);
	color: var(--vg3d-accent);
}

.vg3d-room-title-badge {
	position: fixed;
	top: 18px;
	right: 18px;
	max-width: 50vw;
	padding: 9px 18px;
	background: rgba(15, 15, 20, 0.5);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 30px;
	color: var(--vg3d-text-light);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none !important;
}

.vg3d-author-badge {
	position: fixed;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	padding: 3px 10px;
	background: rgba(0, 0, 0, 0.22);
	border-radius: 12px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 10px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	pointer-events: none !important;
}

.vg3d-room-nav {
	position: fixed;
	top: 64px;
	right: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
}

.vg3d-room-nav-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: rgba(15, 15, 20, 0.55);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 22px;
	color: var(--vg3d-text-light);
	font-size: 13px;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.vg3d-room-nav-btn::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vg3d-accent);
	flex-shrink: 0;
}

.vg3d-room-nav-btn:hover {
	background: rgba(35, 35, 42, 0.8);
	transform: translateX(-2px);
}

.vg3d-room-nav-home {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Joystick Virtuale (Free Roam, HUD mobile/touch)
   -------------------------------------------------------------------------- */

/* Zona del joystick: ampia area in basso a sinistra, per facilitare il
   tocco anche se il pollice non è esattamente sul centro del disco
   visibile. Eredita pointer-events: none dalla regola generale
   #ui-wrapper/.ui-container (vedi blocco "FIX SBLOCCO CLICK"); il
   disco e lo stick stesso riabilitano pointer-events tramite la classe
   .btn già prevista da quel sistema. */
/* --------------------------------------------------------------------------
   FIX DEFINITIVO JOYSTICK — selettore ID con !important
   Il joystick DEVE stare in basso a sinistra. Usiamo l'ID #vg3d-joystick-zone
   (massima specificità CSS possibile senza !important) più !important come
   salvaguardia contro qualsiasi stile iniettato da A-Frame o da WordPress.
   -------------------------------------------------------------------------- */
#vg3d-joystick-zone,
.vg3d-joystick-zone {
	position: fixed !important;
	bottom: 20px !important;
	left: 20px !important;
	top: auto !important;
	right: auto !important;
	width: 140px;
	height: 140px;
	z-index: 60;
}

.vg3d-joystick-base {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(15, 15, 20, 0.35);
	border: 2px solid rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
	pointer-events: auto !important;
}

.vg3d-joystick-stick {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease;
	will-change: transform;
}

.vg3d-joystick-base:active .vg3d-joystick-stick {
	background: rgba(201, 162, 75, 0.75);
}

/* Su desktop (puntatore fine = mouse, nessun hover touch) il Joystick
   resta disponibile come rete di sicurezza (drag con il mouse, vedi
   engine-3d.js) ma viene visivamente ridotto in trasparenza, dato che
   tastiera/WASD sono il metodo primario; su un reale touchscreen invece
   è sempre pienamente visibile. */
@media (hover: hover) and (pointer: fine) {
	.vg3d-joystick-zone {
		opacity: 0.55;
	}

	.vg3d-joystick-zone:hover {
		opacity: 0.9;
	}
}

/* --------------------------------------------------------------------------
   Modal Split-Screen V1 — Immagine a sinistra, Testo a destra
   -------------------------------------------------------------------------- */

/* Selettore ID (#vg3d-modal-overlay) oltre alla classe: garantisce una
   specificità SEMPRE superiore a qualunque classe generica (es.
   .modal-content, .btn) possa in futuro essere applicata per errore
   sullo stesso elemento, evitando che la regola "riabilitante" del
   blocco "FIX SBLOCCO CLICK" qui sopra possa mai sovrascrivere lo
   stato chiuso del modal e bloccare permanentemente la scena 3D
   sottostante (bug realmente verificato in una build precedente). */
#vg3d-modal-overlay.vg3d-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	pointer-events: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(8, 8, 12, 0.82);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

#vg3d-modal-overlay.vg3d-modal-overlay.vg3d-modal-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto !important;
}

.vg3d-modal-box {
	display: flex;
	width: 100%;
	height: 100%;
	max-width: 1100px;
	max-height: 720px;
	margin: auto;
	background: var(--vg3d-glass-bg-dark);
	backdrop-filter: blur(24px) saturate(140%);
	border-radius: var(--vg3d-radius);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	transform: scale(0.97);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.vg3d-modal-overlay.vg3d-modal-visible .vg3d-modal-box {
	transform: scale(1);
}

.vg3d-modal-image-col {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	padding: 24px;
	min-width: 0;
}

.vg3d-modal-image-col img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 6px;
}

.vg3d-modal-text-col {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 48px 36px 32px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
	color: rgba(255, 255, 255, 0.85);
}

.vg3d-modal-zone-badge {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 20px;
	background: rgba(201, 162, 75, 0.2);
	color: var(--vg3d-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.vg3d-modal-title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: var(--vg3d-text-light);
	line-height: 1.25;
}

.vg3d-modal-content {
	font-size: 15.5px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
}

.vg3d-modal-content p {
	margin: 0 0 14px;
}

.vg3d-modal-content a {
	color: var(--vg3d-accent);
}

.vg3d-modal-content img {
	max-width: 100%;
	border-radius: 6px;
}

.vg3d-modal-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 18px;
}

.vg3d-read-btn {
	display: block;
	width: 100%;
	min-height: 46px;
	text-align: center;
	padding: 13px 18px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--vg3d-text-light);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.vg3d-read-btn:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--vg3d-accent);
	color: var(--vg3d-accent);
}

.vg3d-cta-btn {
	display: block;
	width: 100%;
	min-height: 46px;
	text-align: center;
	padding: 13px 18px;
	background: linear-gradient(135deg, var(--vg3d-accent), var(--vg3d-accent-dark));
	color: #1a1505;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(201, 162, 75, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vg3d-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(201, 162, 75, 0.35);
}

.vg3d-modal-share {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.vg3d-share-label {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	margin-right: 2px;
}

.vg3d-share-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--vg3d-text-light);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vg3d-share-icon:hover {
	transform: translateY(-2px);
}

.vg3d-share-facebook:hover {
	background: #1877f2;
	color: #fff;
}

.vg3d-share-twitter:hover {
	background: #000000;
	color: #fff;
}

.vg3d-share-whatsapp:hover {
	background: #25d366;
	color: #fff;
}

.vg3d-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 100000;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 20, 24, 0.7);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: var(--vg3d-text-light);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.vg3d-modal-close:hover {
	background: rgba(40, 40, 46, 0.9);
	color: var(--vg3d-accent);
	transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   Responsive Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
	.vg3d-modal-box {
		flex-direction: column;
		max-width: 100vw;
		max-height: 100vh;
		border-radius: 0;
	}

	.vg3d-modal-image-col {
		flex: 0 0 36vh;
		padding: 16px;
	}

	.vg3d-modal-text-col {
		flex: 1 1 auto;
		padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
	}

	.vg3d-modal-title {
		font-size: 21px;
	}

	.vg3d-onboarding-box {
		padding: 26px 20px;
	}

	.vg3d-onboarding-choices {
		flex-direction: column;
	}

	.vg3d-room-title-badge {
		font-size: 12px;
		padding: 7px 14px;
		max-width: 46vw;
	}

	/* Su mobile il menu stanze occupa solo il lato DESTRO in basso,
	   lasciando libero il lato sinistro per il joystick.
	   Questo elimina il conflitto che in precedenza spingeva
	   il joystick verso l'alto con calc(70px + 30vh + 16px). */
	.vg3d-room-nav {
		top: auto;
		bottom: 70px;
		right: 12px;
		left: auto;
		max-width: 55vw;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-end;
		max-height: 40vh;
		overflow-y: auto;
	}

	.vg3d-room-nav-btn {
		font-size: 12px;
		padding: 7px 12px;
	}

	/* Joystick: bottom-left fisso, indipendente dall'altezza del menu.
	   Risiede nell'angolo in basso a sinistra, sempre raggiungibile
	   col pollice, non copre né il titolo in alto né il tasto
	   "Torna al sito". Il lato destro è riservato al menu stanze. */
	#vg3d-joystick-zone,
	.vg3d-joystick-zone {
		left: 16px !important;
		right: auto !important;
		bottom: 20px !important;
		top: auto !important;
		width: 120px !important;
		height: 120px !important;
	}

	.vg3d-joystick-stick {
		width: 48px;
		height: 48px;
	}

	.vg3d-hint {
		font-size: 11.5px;
		padding: 8px 16px;
		bottom: 20px;
	}

	.vg3d-author-badge {
		font-size: 9px;
	}

	.vg3d-modal-close {
		top: 14px;
		right: 14px;
		width: 38px;
		height: 38px;
		font-size: 22px;
	}
}