html, body {
		  margin: 0;
		  padding: 0;
		  overflow: hidden;
		  width: 100vw;
		  height: 100vh;
		  font-family: sans-serif;
    }

	.fianco {
		  position: fixed;
		  top: 0;
		  height: 100vh;
		  width: calc(0.256 * 100vh); /* 262 ÷ 1022 */
		  background-size: contain;
		  background-repeat: no-repeat;
		  z-index: 4;
		  pointer-events: none;
	}

	.fianco-sx { left: 0; 	background-image: url('images/fianco-left.png'); }
	.fianco-dx { right: 0; 	background-image: url('images/fianco-right.png'); }

    .tetto{
		  position: fixed;
		  left: 0;
		  top: 0;
		  width: 100vw;
		  height: calc(100vh * 0.0757);
		  z-index: 3;
		  background-color: #000; /* fallback nero o elimina se non serve */
		  background-image: url('images/tetto.png');
		  background-repeat: repeat-x;
		  background-position: top center;
		  background-size: auto 100%; /* altezza piena, larghezza automatica */
		  pointer-events: none;
	  }

	.pavimento {
		  position: fixed;
		  left: 0;
		  bottom: 0;
		  width: 100vw;
		  height: calc(100vh * 0.106);
		  z-index: 3;
		  background-color: #000; /* fallback nero o elimina se non serve */
		  background-image: url('images/pavimento.png');
		  background-repeat: repeat-x;
		  background-position: top center;
		  background-size: auto 100%; /* altezza piena, larghezza automatica */
		  pointer-events: none;
	}
	
    .palco {
		  position: fixed;
		  top: calc(100vh * 0.075);
		  height: 82vh;
		  width: 100vw;
		  z-index: 2;	
		  background: black url('images/sfondo.png') center bottom ;	
	  
    }

    .porta-container {
		  position: absolute;
		  top: 0;
		  height: 82vh;
		  display: flex;
		  z-index: 3;
		  overflow: hidden;
    }

    .porta-sx-container {
		  left: 0;
		  flex-direction: row-reverse;
		  width: 50%;
		  
    }

    .porta-dx-container {
		  right: 0;
		  flex-direction: row;
		  width: 50%;
		  
    }

   
    
    #arrow {
		  position: fixed;
		  top: 46vh;
		  right: 0;
		  width: 3vw;
		  height: 6vh;
		  background-image: url('images/arrow.png');
		  background-repeat: no-repeat;
		  background-size: contain;
		  z-index: 9999;
		  cursor: pointer;
    }
	
	.pannello {
		  position:relative;
		  
		  background-repeat: no-repeat;
		  position: relative;
		  transition: transform 1100ms linear;
    }

    .sx, .dx {
	  background-position: right top;
	  background-image: url('images/door.png');
	  background-size: 100% 100%;
	  transform: translateX(0);
	}

	

	.pannello > .numporte,.logporte,.autore{ 
		position:absolute; 
		 color: transparent;
		  text-shadow: 
			1px 1px 1px rgba(255,255,255,0.1),
		   -1px -1px 1px rgba(0,0,0,0.6);
		font-family: Orbitron; 
		font-weight:bold
	}
	
	

	.pannello.sx > .numporte{top: 14vh;  left:50%;  transform: translate(-50%, -50%); font-size: clamp(1rem, 4vh, 4rem); }
	.pannello.dx > .numporte{top: 14vh;  left:50%;  transform: translate(-50%, -50%); font-size: clamp(1rem, 4vh, 4rem); }
	
	.pannello.sx > .logporte{top: 65vh; left:50%; transform: translate(-50%, -50%); font-size: clamp(0.7rem, 2.1vh, 1.9rem);}	
	.pannello.dx > .logporte{top: 65vh; left:50%; transform: translate(-50%, -50%); font-size: clamp(0.7rem, 2.1vh, 1.9rem);}
	
	.autore { top: 75vh; left:50%; transform: translate(-50%, -50%); clamp(0.7rem, 2.1vh, 1.9rem);}
		
	/*************************************************************/
	/*************************************************************/

	/* 📦 Contenitore principale scalabile */
	#lampContainer {
	  position: fixed;
	  top:  10px;
	  left: 5px;
	  width: 50px;
	  border:0px solid #333;	 
	  z-index: 9;
	  --lamp-scale: 1;
	  transform: scale(var(--lamp-scale));
	  
	  /* 🪞 Effetto background scavato */
		background-color: #1a1a1a; /* sfondo scuro */
		box-shadow:
		inset 4px 4px 8px rgba(0, 0, 0, 0.8),
		inset -4px -4px 8px rgba(255, 255, 255, 0.1);
		border-radius: 45px;
		
	    padding:6px;
	}

	

	/* 💡 Corpo della lampada rossa */
	.lampara {
	  position: relative;
	  margin: 0 auto;	 
	  height: 30px;
	  width:30px;
	  border-radius: 40%;
	  background: radial-gradient(circle at 30% 30%, crimson 30%, darkred 90%);
	  box-shadow:
		0 0 10px rgba(255,0,0,0.4),
		inset -2px -2px 4px rgba(0,0,0,0.6),
		inset 2px 2px 6px rgba(255,100,100,0.2);
	  animation: glow 1.5s ease-in-out infinite;
	  overflow: hidden;
	  z-index: 2;
	  transform: scale(var(--lamp-scale, 1));
	}

	.lampara.spenta {
	  background: radial-gradient(circle at 30% 30%, #3a0000 20%, #140000 90%);
	  box-shadow:
		inset -2px -2px 4px rgba(0, 0, 0, 0.8),
		inset 2px 2px 6px rgba(30, 0, 0, 0.2);
	  animation: none;
	  filter: brightness(0.4) saturate(0.6);
	}

	/* ✨ Effetto vetroso della cupola */
	.cupola {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 90%;
	  height: 90%;
	  border-radius: 50%;
	  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.32), transparent 45%);
	  backdrop-filter: blur(0.4px) brightness(1.1);
	  pointer-events: none;
	  z-index: 10;
	}

	

	/* 💥 Pulsazione realistica */
	@keyframes glow {
	  0%, 100% {
		filter: brightness(1);
		box-shadow:
		  0 0 6px  rgba(255, 0, 0, 0.3),
		  0 0 15px rgba(255, 0, 0, 0.2);
	  }
	  50% {
		filter: brightness(2);
		box-shadow:
		  0 0 12px rgba(255, 0, 0, 0.6),
		  0 0 25px rgba(255, 0, 0, 0.3);
	  }
	}

	/*************************************************************/
	.digDisplay {
		position: fixed;
		z-index: 9999;
		top: 10px;
		height: 40px;
		width: 100%;

		display: flex;
		align-items: center;
		justify-content: center;

		/*font-family: Orbitron, sans-serif;*/

		font-family: 'Share Tech Mono', monospace;
		font-weight: bold;
		font-size: clamp(2.5rem, 2vw, 3rem);
		letter-spacing: 0.1em;	  

		/* 🎨 Testo con gradiente */
		background: linear-gradient(90deg, aqua, cyan);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);

		/* 🪞 Effetto background scavato */
		background-color: #1a1a1a; /* sfondo scuro */
		box-shadow:
		inset 4px 4px 8px rgba(0, 0, 0, 0.8),
		inset -4px -4px 8px rgba(255, 255, 255, 0.1);

		border-radius: 10px;
		padding: 0 1rem;
	}

	.contaBox {		
		width: clamp(60px, 15vw, 90px); /* min, dinamico, max */
		left: 50.8%;
		transform: translate(-50%, 0%);
		text-align:center;		
	}

	.clockBox {		
		width: clamp(160px, 15vw, 200px); /* min, dinamico, max */
		
		left: 6%;
		transform: translate(-14%, 0%);
		transform: scaleX(1.2); 
		text-align:center;
	}
	.btnBox {		
		width: clamp(100px, 15vw, 120px); /* min, dinamico, max */
		right:3%;
		transform: translate(-50%, 0%);
		
	}
	
	
	#btnClock,
	#btnExit {
		display:block; cursor:pointer; width:48%; text-align:center;	
	}
	#btnClock:hover,
	#btnExit:hover {  
		  color: aqua;
		  transform: scale(1.1) rotate(-2deg);
		  transition: all 0.2s ease-in-out;
		  text-shadow: 0 0 3px rgba(0, 255, 255, 0.6);
		}
	#btnClock{float-left;}		
	#btnExit{ float-right; }
	
	/*************************************************************/
	/*************************************************************/
	#documento{
			margin-left:auto;
			margin-right:auto;
			height: 90%;
			
			 /*overflow-y: initial !important
			*/
		}
		
		#documento .modal-body{ 
			 height: 80vh;
			overflow-y: auto;		
		}
		
		
		
		.fa-flag > span{ font-size:12px ; font-weight:bold; font-family:arial;
		}	
		
		
		.modal-header
		{
			 background-color: 	#c66e53;
			 color:white;
			 border-radius:5px 5px 0px 0px;
		
		}
		
	
	
		
	.glyphicon{font-size:30px !important;}	
	
	.countdown-container{  
	
			padding-top:3px;
			width:75% !important;
			height:100% !important;
	}
	
	pre{
	
	
		color: #004d99 !important;
		font-weight:bold !important;
		font-size:3vw;		
		
		white-space: pre-wrap;                 /* CSS3 browsers  */
		white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
		white-space: -pre-wrap;                /* Opera 4 thru 6 */
		white-space: -o-pre-wrap;              /* Opera 7 and up */
		word-wrap: break-word;                 /* IE 5.5+ and up */
		
		overflow-x: auto;
		
		}
	
	#BTNVERIFICA
		{	display:block;
			
			width:400px;
			height:400px;
			font-size:3rem;
			margin-left:auto;
			margin-right:auto;
			text-decoration:none;
			color: #fcd303;	
			
		}
	 
	#BTNVERIFICA:hover i
		{
			color: red;
		}
			
	

	.bootbox >.modal-dialog {
	  position: fixed !important;
	  top: 50% !important;
	  left: 50% !important;
	  transform: translate(-50%, -75%) !important;
	  margin: 0 !important;
	  z-index: 1050; /* o superiore, a seconda del contesto */
	}

	.modal-header{
		background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
		color:white;
		font-size:3rem !important;
	}
	.modal-content {
		/*height: 100% !important;*/
		overflow:visible;
	}

	.modal-body {
		/*height: 80%;*/
		overflow: auto;
	}
		
	
	
	.gameover{ font-weight: normal; font-family: 'Orbitron', sans-serif; letter-spacing:3px}
	.gameBig{ color: #0066cc}
	
	/*----------------------------------*/
	/*----------------------------------*/
	/*----------------------------------*/
		
		
	#CAROSELLO {
	  height: 79vh;

	  max-width: 62vw;
	  min-width: 10vw;

	  overflow-y: auto !important;   /* Abilita lo scroll verticale */
	  overflow-x: hidden;            /* Blocca lo scroll orizzontale se vuoi */

	  margin: 20px auto;
	  position: relative;

	  /* Nascondi scrollbar su tutti i browser principali */
	  scrollbar-width: none;         /* Firefox */
	  -ms-overflow-style: none;      /* IE/Edge Legacy */
	}

	#CAROSELLO::-webkit-scrollbar {
	  display: none;                 /* Chrome, Safari, Edge Chromium */
	}


	
	.QST_DIV {
	  flex: 0 0 100%;
	  
	  max-width: 62vw;
	  min-width: 10vw;
	  text-align: center;
	  
	}

	.QstDivHidden{visibility: hidden;}
	
	#QUESTIONARIO {
	  display: flex;
	  width: max-content; /* 👈 importante */
	  transition: transform 0.5s ease;
	  border:none !important;
	}


	#T-ITOLO{ 
		
		color:#ccc;
	}	

	#I-NTROD{ 
		color:black;  
		border:2px solid #ccc;
		border-radius: 10px;
		padding:10pt; 
		font-weight:normal; 
		margin:10pt; 
		text-align:left;
		background:#efefef; 
		line-height: 18pt; 
		font-size:11pt;
		width:80%;
		margin-left:auto;
		margin-right:auto;
		min-height:200px;
	}	

	.bootbox.modal {
	  top: -20% !important;
	}
		
		
	.no-select {
	  -webkit-user-select: none; /* Chrome, Safari */
	  -moz-user-select: none;    /* Firefox */
	  -ms-user-select: none;     /* Edge */
	  user-select: none;         /* Standard */
	}