@charset "utf-8";
/* CSS Document */



body {
	background-color: #000;
	background-image:url(mainsfond2.jpg);
	background-position:top center;
	background-repeat:repeat-y;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	-webkit-user-select: none;
	-webkit-touch-callout: none; 
}
input {
	width: 90%;
	height: auto;
	background-color: #FFF;
	color:#666;
	padding: 5px 10px;

	font-size: 40px;
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	-ms-transition: 0.2s ease;
	transition: 0.2s ease;
	}
form {
	color: #FFF;
	
	}
	

	
.schermo {
	width: 640px;
	height: 960px;
	background-image: url(ruxone.jpg);
	position: absolute;
	left: 50%;
	margin-left: -320px;
	-webkit-perspective: 1500;
	-moz-perspective: 1500;
	perspective: 1500;
	perspective-origin: center;
	overflow: hidden;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
}

.main {
	background-image: url(mainsfond.jpg);
	min-height: 960px;
	height: auto;
}


.riquadro {
	position: absolute;
	width: 600px;
	height: 850px;
	top: 60px;
	left: 20px;
}

.intaglio {
	font-size:24px;
	padding-left:20px;
	}
	
.elenco {
	position: relative;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	color: #FFF;
	width: 640px;
	height: 320px;

}
.elenco ul{
	width:5000px;


}
.elenco li{
	cursor: pointer;
	width: 150px;
	height: 240px;
 	color: #FFE;
	float:left;
	overflow:hidden;
	font-size:22px;
	font-weight:normal;
	margin-right: 10px;
	padding:15px;
	text-align:center;
	background-image:url(trasp4.png);
	list-style:none;

	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	-ms-transition: 0.2s ease;
	transition: 0.2s ease;
	
	}

.gioca{
	color:#663 !important;
	background-image:none !important;
	background-color:#FF6;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	}
.gioca i{color:#330 !important;}
	
.allena{
	color:#666 !important;
	background-image:none !important;
	background-color:#DDD;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	}
.allena i{color:#333 !important;}

.elenco li i{
	color:#FF9 ;

	}

.elenco li:hover {
	-webkit-box-shadow: black 1px 2px 3px;
	-moz-box-shadow: black 1px 2px 3px;
	-ms-box-shadow: black 1px 2px 3px;

	
	}		
.elenco li:active {
	background-color:#F00;
	color:#FFF !important;
	background-image:none !important;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow:none;
	}
.elenco li:active i{
		color:#FFA !important;
}
		
.icona {
	line-height:18px;
	cursor: pointer;
	background-color: #DDD;
	color:#666;
	padding: 10px;
	font-size: 20px;
	text-align: center;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	transform: rotate(-2deg);
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	-webkit-transition: 0.2s ease;
	-moz-transition: 0.2s ease;
	-ms-transition: 0.2s ease;
	transition: 0.2s ease;
	}	
.nuovo {
	background-color:#FFF;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	transform: rotate(-1deg);
	margin-bottom:5px;
	
	}
.allenamento {
	font-size: 40px;
	width: 400px;
	height: auto;	
	margin: 20px;
	padding: 20px;
	}
.icona i{

	font-size:18px;
	}
.icona:active{
	background-color: #F00;
	color:#FFF;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);	
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow:none;
}

.box {
	width: 110px;
	height: 110px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-align: center;
	text-transform: capitalize;
	font-size: 85px;
	background: #FF9;
	vertical-align: central;
	color: #993;
	z-index: 2;
	-webkit-transition: -webkit-transform 0.4s, border 0.4s;
	-moz-transition: -moz-transform 0.4s, border 0.4s;
	transition: transform 0.4s, border 0.4s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: absolute;
	box-shadow: black 1px 2px 4px;
	-webkit-box-shadow: black 1px 2px 4px;
	-moz-box-shadow: black 1px 2px 4px;
	-ms-box-shadow: black 1px 2px 4px;
	-webkit-transform: translate3d(0,0,3000px);
	-moz-transform: translate3d(0,0,3000px);
	transform: translate3d(0px,-960px,3000px);
}

.boz {
	width: 110px;
	height: 110px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: normal;
	text-align: center;
	text-transform: capitalize;
	font-size: 85px;
	background: #EEE;
	color: #999;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.4s, border 0.4s;
	-moz-transition: -moz-transform 0.4s, border 0.4s;
	transition: transform 0.4s, border 0.4s;		
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: absolute;
	
	box-shadow: black 1px 2px 4px;
	-webkit-box-shadow: black 1px 2px 4px;
	-moz-box-shadow:  black 1px 2px 4px;
	-ms-box-shadow:  black 1px 2px 4px;

-webkit-transform: translate3d(0,0,2000px);
-moz-transform: translate3d(0,0,2000px);
transform: translate3d(-960px,0px,2000px);

}

.finepartita {
	position:absolute;
	width: 640px;
	height: 960px;
	z-index: 200;
	opacity:0;
	filter:alpha(opacity=0);	
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
	top:1000px;
	}
	
.scuro {
	position:absolute;
	width: 640px;
	height: 960px;
	background-color:#000;
	opacity:0.7;
	z-index: 201;
	filter:alpha(opacity=70);
	}

.finebase {
	top:0px;
	opacity:1;
	filter:alpha(opacity=100);	}

.finebox {
	width: 447px;
	height: 430px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-align: left;
	font-size: 18px;
	vertical-align: central;
	color: #FF9;
	z-index: 202;

	position: absolute;

	left: 62px;
	top: 220px;
	padding: 15px;
}
.finebox b{
	font-size:48px;
	padding: 10px;
	background-color:#F00;
	color:#FFF;
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	
	}
.finebox2 {
	width: 447px;
	height: 430px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-align: left;
	font-size: 18px;
	vertical-align: central;
	color: #BBB;
	z-index: 202;

	position: absolute;

	left: 320px;
	top: 220px;
	padding: 15px;
}
.finebox2 b{
	font-size:48px;
	padding: 10px;
	background-color:#A00;
	color:#CCC;
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	}
	
		
.pulsante {
	display: none;
	width: auto;
	height: auto;
	background-color: #FF9;
	position: absolute;
	right: 50px;
	bottom: 150px;
	padding: 15px;
	font-size: 24px;
	text-align: center;
	z-index: 203;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	transform: rotate(-2deg);
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	}	
.pulsante2 {
	display: none;
	width: auto;
	height: auto;
	background-color: #CCC;
	color: #666;
	position: absolute;
	right: 40px;
	bottom: 230px;
	padding: 10px;
	font-size: 18px;
	text-align: center;
	z-index: 203;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	transform: rotate(-1deg);
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	}	
	
.pulback {
	width: auto;
	height: auto;
	background-color: #4a2a11;
	color: #CC9;
	position: absolute;
	left: 10px;
	top: 8px;
	opacity:0.7;
	filter:alpha(opacity=70);	
	padding: 10px;
	font-size: 14px;
	text-align: center;
	z-index: 1;

	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 1px 2px 3px;
	-moz-box-shadow: black 1px 2px 3px;
	-ms-box-shadow: black 1px 2px 3px;
	}		

.pronto {
	width: auto;
	height: auto;
	background-color: #FFF;
	position: absolute;
	right: 50px;
	bottom: 200px;
	padding: 15px;
	font-size: 24px;
	text-align: center;
	z-index: 208;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	transform: rotate(-2deg);
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-ms-transition: 0.5s ease;
	transition: 0.5s ease;
	}		

.regole {
	width: 330px;
	height: 330px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-align: left;
	font-size: 12px;
	background: #eee;
	vertical-align: central;
	color: #7E802C;
	z-index: 100;
	-webkit-transition: -webkit-transform 4s ease-out;
	-moz-transition: -moz-transform 4s ease-out;
	transition: transform 4s ease-out;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotate(-6deg) translate3d(0,0,500px);
	-moz-transform: rotate(-6deg) translate3d(0,0,500px);
	transform: rotate(-6deg) translate3d(0,0,500px);
	position: absolute;
	box-shadow: black 2px 4px 6px;
	-webkit-box-shadow: black 2px 4px 6px;
	-moz-box-shadow: black 2px 4px 6px;
	-ms-box-shadow: black 2px 4px 6px;
	left: 120px;
	top: 270px;
	padding: 15px;
}

.regole b{
	font-size:24px;
	}

.regolea {
	-webkit-transform: rotate(2deg) translate3d(0,0,400px);
	-moz-transform: rotate(2deg) translate3d(0,0,400px);
	transform: rotate(2deg) translate3d(0,0,400px);
	box-shadow: black 4px 4px 6px;
	-webkit-box-shadow: black 4px 4px 6px;
	-moz-box-shadow: black 4px 4px 6px;
	-ms-box-shadow: black 4px 4px 6px;
	}


.base {
-webkit-transform: translate3d(0px,0px,0px);
-moz-transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);	
}

.anilento {
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	transition: transform 1s;
	-webkit-transition-timing-function: cubic-bezier(0,0,0,1);
	-moz-transition-timing-function: cubic-bezier(0,0,0,1);
	transition-timing-function: cubic-bezier(0,0,0,1);

	
	}
.anticlick {
	position: absolute;
	z-index: 100;
	top: 78px;
	width: 601px;
	height: 680px;
}
.casella {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-align: left;
	text-transform: capitalize;
	font-size: 55px;
	color: #FFF;
	position: absolute;
	z-index: 0;
	left: 4px;
	top: 70px;
	width: 347px;
	height: 70px;
	text-shadow: black 1px 2px 4px;
}

.xy {
	font-family: Verdana, Geneva, sans-serif;
	text-align: right;
	font-size: 10px;
	color: #FFF;
	position: absolute;
	z-index: 0;
	left: 324px;
	top: 8px;
	width: 270px;
	height: 130px;
	text-shadow: black 1px 2px 4px;
	line-height: 35px;
}
.xy b{
	font-size: 35px;
	}
.xy i{
	background-color: #FFF;
	color: #666;
	text-shadow: none;
	padding: 5px 10px;
	margin-bottom: 10px;
	font-size: 18px;
	box-shadow: black 1px 2px 3px;
	-webkit-box-shadow: black 1px 2px 3px;
	-moz-box-shadow: black 1px 2px 3px;
	-ms-box-shadow: black 1px 2px 3px;
	opacity:0.7;
	filter:alpha(opacity=70);	
	}

.c1 {left: 5px;}
.c2 {left: 125px;}
.c3 {left: 245px;}
.c4 {left: 365px;}
.c5 {left: 485px;}


.r1 {top: 155px;}
.r2 {top: 275px;}
.r3 {top: 395px;}
.r4 {top: 515px;}
.r5 {top: 635px;}
.r6 {top: 755px;}

.sel { 
-webkit-transform: translate3d(-6px,-6px,0px) !important;
-moz-transform: translate3d(-6px,-6px,0px) !important;
transform: translate3d(-6px,-6px,0px) !important;
	box-shadow: black 0px 0px 0px;
	-webkit-box-shadow: black 0px 0px 0px;
	-moz-box-shadow:  black 0px 0px 0px;
	z-index: 20;
	background-color:#F00;
	color:#fff; 
	border: 6px solid red;

}

.via {
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
-webkit-transform: translate3d(-6px,800px,200px) !important;
-moz-transform: translate3d(-6px,800px,200px) !important;
transform: translate3d(-6px,800px,200px) !important;
	}




a:link {
	color: #7E802C;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #7E802C;
}
a:hover {
	text-decoration: none;
	color: #7E802C;
}
a:active {
	text-decoration: none;
	color: #7E802C;
}


/* ---- elenco partite: slider moderno, senza barra di scorrimento ---- */
.elenco {
	height: 300px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	scroll-padding-left: 20px;
	scroll-behavior: smooth;
	cursor: grab;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
}
.elenco::-webkit-scrollbar { display: none; width: 0; height: 0; }
.elenco.trascina { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.elenco ul { display: flex; width: max-content; margin: 0; padding: 14px 20px 26px 20px; }
.elenco li {
	float: none;
	flex: 0 0 auto;
	box-sizing: content-box;
	height: 220px;
	margin-right: 14px;
	border-radius: 14px;
	scroll-snap-align: start;
	box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.elenco li:last-child { margin-right: 0; }
.gioca, .allena {
	transform: none !important;
	-webkit-transform: none !important;
	-webkit-box-shadow: none;
	box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.gioca { background-color: #E8E566; }
.elenco li:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 22px rgba(0,0,0,.55); }
.elenco li:active { transform: scale(.97) !important; box-shadow: none; }


/* ---- menu iniziale adattivo (solo index.php, body.menu): sta tutto nello schermo, senza scorrimento verticale ---- */
html:has(body.menu) { height: 100%; overflow: hidden; }
body.menu {
	height: 100vh; height: 100dvh;
	overflow: hidden;
	background-color: #1a0f08;
	background-image: url(mainsfond2.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
body.menu .schermo.main {
	position: relative; left: auto; margin: 0 auto;
	width: 100%; max-width: 640px;
	height: 100vh; height: 100dvh; min-height: 0;
	box-sizing: border-box;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
	background-image: url(mainsfond.jpg);
	background-size: cover; background-position: center;
}
body.menu .schermo.main > br { display: none; }
body.menu .schermo.main > img {
	width: auto !important; height: auto !important;
	max-width: 78%; max-height: 26vh; max-height: 26dvh;
	flex: 0 1 auto; object-fit: contain;
}
body.menu .pannello { width: 100%; display: flex; flex-direction: column; justify-content: center; flex: 0 1 auto; min-height: 0; }
body.menu .intaglio { font-size: clamp(15px, 4.2vw, 22px); padding-left: 20px; min-height: 1.2em; }
body.menu #messaggio { min-height: 0; padding-top: 0; padding-bottom: 0; }
body.menu #loggato {
	width: 100% !important; height: auto !important; box-sizing: border-box;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
	padding: 6px 16px;
}
body.menu #loggato > div { float: none !important; width: auto !important; padding: 4px 8px !important; font-size: clamp(18px, 5vw, 26px) !important; line-height: 1.25 !important; }
body.menu #loggato .icona { font-size: 16px; padding: 8px 18px; margin: 0; }
body.menu #gSignInWrap { display: flex; justify-content: center; min-height: 44px; }
body.menu .elenco { width: 100%; height: auto; }
body.menu .elenco ul { padding: 10px 20px 20px; }
body.menu .elenco li {
	width: clamp(110px, 30vw, 150px); height: clamp(150px, 26vh, 220px); height: clamp(150px, 26dvh, 220px);
	font-size: clamp(16px, 4.4vw, 22px); padding: 12px;
}

/* schermi larghi (desktop): pannello piu' largo, sfondo di legno ruotato di 90 gradi, logo a sinistra e partite a destra */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu { background-image: url(mainsfond2-h.jpg); }
	body.menu .schermo.main {
		max-width: 1180px; height: min(100dvh, 720px);
		flex-direction: row; align-items: center; justify-content: center; gap: 12px;
		background-image: url(mainsfond-h.jpg);
		border-radius: 18px; box-shadow: 0 12px 50px rgba(0,0,0,.6);
	}
	body.menu { display: flex; align-items: center; justify-content: center; }
	body.menu .schermo.main > img { max-width: 36%; max-height: 80%; flex: 0 0 auto; }
	body.menu .pannello { width: auto; flex: 1 1 0; max-width: 700px; min-width: 0; }
	body.menu .elenco li { width: 150px; height: 220px; font-size: 22px; padding: 15px; }
}
@media (max-height: 560px) and (orientation: landscape) and (max-width: 899px) {
	body.menu .schermo.main { flex-direction: row; max-width: none; gap: 10px; }
	body.menu .schermo.main > img { max-width: 34%; max-height: 90%; }
	body.menu .pannello { flex: 1 1 0; min-width: 0; }
	body.menu .elenco li { height: 150px; }
}


/* correzioni al menu adattivo + lingua e logo Quoz in basso */
body.menu #loggato > div { max-width: 100%; box-sizing: border-box; text-align: center; }
body.menu .pannello { padding-bottom: 36px; box-sizing: border-box; }
.lang-footer {
	position: fixed; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right));
	bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20;
	display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.lang-footer > * { pointer-events: auto; }
.lang-buttons { display: flex; gap: 4px; }
.lang-buttons a {
	min-width: 28px; padding: 4px 8px; text-align: center; font: bold 12px/16px Verdana, Geneva, sans-serif;
	color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.7); border-radius: 3px;
	opacity: .8; text-decoration: none; transition: background .2s, color .2s;
}
.lang-buttons a:hover, .lang-buttons a.on { color: #000; background: #fff; opacity: 1; }
.lang-footer .quoz-home { display: block; line-height: 0; }
.lang-footer .quoz-home img { display: block; width: 56px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

body.menu #loggato > div { min-width: 0; overflow-wrap: anywhere; }
body.menu #loggato > div:first-child:last-of-type { flex: 1 1 100%; }
body.menu .pannello { min-width: 0; max-width: 100%; }
body.menu .elenco li { position: relative; }
body.menu .elenco li > i { position: absolute; left: 0; right: 0; bottom: 14px; }


/* sfondo unico (cover) e riquadro di benvenuto */
body.menu .schermo.main { background: none; box-shadow: none; border-radius: 0; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .schermo.main { background: none; box-shadow: none; border-radius: 0; }
}
body.menu #loggato { gap: 6px 22px; }
body.menu #loggato > div.benv {
	display: block; float: none !important; width: auto !important;
	background: #FFF; color: #666 !important; padding: 10px 16px !important;
	font-size: clamp(15px, 4.2vw, 19px) !important; line-height: 20px !important; font-weight: normal;
	text-align: center;
	transform: rotate(-1deg);
	box-shadow: black 2px 4px 6px;
}
body.menu #loggato > div.benv b { color: #333; }
/* le carte delle partite centrate (se sono poche); se sono tante scorrono da sinistra */
body.menu .elenco ul { margin-left: auto; margin-right: auto; }
body.menu .pannello { align-items: stretch; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .schermo.main { flex-direction: column; max-width: 1180px; height: 100dvh; gap: 8px; }
	body.menu .schermo.main > img { max-width: 420px; max-height: 32dvh; flex: 0 1 auto; }
	body.menu .pannello { width: 100%; max-width: 900px; flex: 0 0 auto; }
}


/* ---- gioco: griglia adattata all'altezza dello schermo (variabili impostate da layoutGioco in ruxon.js) ---- */
.schermo.gioco {
	height: var(--H, 960px);
	background-size: cover; background-position: center;
}
.gioco .riquadro { height: calc(var(--H, 960px) - 70px); }
.gioco .anticlick { height: calc(var(--H, 960px) - 280px); }
.gioco .finepartita, .gioco .scuro { height: var(--H, 960px); }
.gioco .finepartita { top: calc(var(--H, 960px) + 40px); }
.gioco .finepartita.finebase { top: 0; }
.gioco .regole { top: calc((var(--H, 960px) - 330px) / 2 - 30px); }
.gioco .box, .gioco .boz {
	height: var(--th, 110px);
	line-height: var(--th, 110px);
	font-size: min(85px, calc(var(--th, 110px) * .78));
	vertical-align: middle;
}
.gioco .r1 { top: var(--top, 155px); }
.gioco .r2 { top: calc(var(--top, 155px) + var(--pitch, 120px)); }
.gioco .r3 { top: calc(var(--top, 155px) + var(--pitch, 120px) * 2); }
.gioco .r4 { top: calc(var(--top, 155px) + var(--pitch, 120px) * 3); }
.gioco .r5 { top: calc(var(--top, 155px) + var(--pitch, 120px) * 4); }
/* punteggio in basso a sinistra, tempo in basso a destra */
.pt, .tm {
	position: absolute; bottom: 8px; z-index: 5;
	font-family: Verdana, Geneva, sans-serif; font-size: 13px; color: #FFF;
	text-shadow: black 1px 2px 4px; line-height: 40px;
}
.pt { left: 6px; }
.tm { right: 6px; text-align: right; }
.pt b, .tm b { font-size: 38px; }
.gioco .xy { height: auto; line-height: 20px; }
/* posizione di partenza delle caselle (fuori schermo) proporzionata all'altezza */
.gioco .box:not(.base) { transform: translate3d(0px, calc(-1 * var(--H, 960px) - 400px), 3000px); }
.gioco .via { transform: translate3d(-6px, var(--H, 960px), 200px) !important; }

/* logo piu' piccolo, centrato tra "torna al menu" e il nome della modalita'; sfondo senza logo; punteggio e tempo piu' grandi */
.schermo.gioco { background-image: url(mainsfond.jpg); }
.gioco .logo-gioco { position: absolute; left: 50%; top: -6px; width: 190px; height: auto; margin-left: -95px; z-index: 1; pointer-events: none; }
.pt, .tm { font-size: 18px; line-height: 52px; bottom: 14px; }
.pt b, .tm b { font-size: 52px; }
.pt { left: 10px; }
.tm { right: 10px; }

/* regole grandi: occupano tutta la larghezza dello schermo e buona parte dell'altezza (niente prospettiva che le ingrandisce o le spinge fuori) */
.gioco .regole {
	left: 0; width: 100%; box-sizing: border-box;
	top: 30px; height: calc(var(--H, 960px) - 60px - 200px);
	padding: 30px 30px 60px;
	font-size: 25px; line-height: 1.32;
	transform: rotate(-2deg);
	overflow: hidden;
}
.gioco .regolea { transform: rotate(1deg); }
.gioco .regole b { font-size: 44px; line-height: 1.2; }
.gioco .regole img { width: 190px; height: auto; margin: 0 0 10px 14px; }
.gioco .regole #caricamento { font-size: 34px; bottom: 18px; right: 24px; }
.gioco .regole #caricamento img { width: 140px; margin: 0; }
.gioco .regole {
	top: 80px; height: calc(var(--H, 960px) - 60px - 80px - 110px);
	font-size: calc(25px + (var(--H, 960px) - 960px) * .012);
}
.gioco .regole b { font-size: calc(44px + (var(--H, 960px) - 960px) * .012); }
.gioco .regole img { width: calc(190px + (var(--H, 960px) - 960px) * .1); }
.gioco .regole { top: 100px; height: calc(var(--H, 960px) - 60px - 100px - 100px); font-size: calc(25px + (var(--H, 960px) - 960px) * .02); }
.gioco .regole b { font-size: calc(44px + (var(--H, 960px) - 960px) * .02); }
.gioco .regole img { width: calc(190px + (var(--H, 960px) - 960px) * .14); }
.gioco .regole { font-size: calc(25px + (var(--H, 960px) - 960px) * .015); padding-bottom: 90px; }
.gioco .regole b { font-size: calc(44px + (var(--H, 960px) - 960px) * .015); }
.gioco .regole { height: calc(var(--H, 960px) - 60px - 100px - 60px); }


/* ---- gioco in orizzontale su desktop (html.land, impostata da layoutGioco): schermo a tutta finestra, sfondo ruotato ---- */
html.land body { background-image: url(mainsfond2-h.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
html.land .schermo.gioco {
	left: 0; margin-left: 0; top: 0;
	width: var(--W); height: var(--H);
	background-image: url(mainsfond-h.jpg); background-size: cover; background-position: center;
}
html.land .gioco .riquadro { left: 0; top: 0; width: 100%; height: 100%; }
html.land .gioco .anticlick { display: none; }
html.land .gioco .box, html.land .gioco .boz {
	width: var(--tw);
	font-size: min(85px, calc(var(--th) * .72));
}
html.land .gioco .c1 { left: var(--left); }
html.land .gioco .c2 { left: calc(var(--left) + var(--pitchx)); }
html.land .gioco .c3 { left: calc(var(--left) + var(--pitchx) * 2); }
html.land .gioco .c4 { left: calc(var(--left) + var(--pitchx) * 3); }
html.land .gioco .c5 { left: calc(var(--left) + var(--pitchx) * 4); }
html.land .gioco .boz:not(.base) { transform: translate3d(calc(-1 * var(--W) - 400px), 0px, 2000px); }
html.land .gioco .box:not(.base) { transform: translate3d(0px, calc(-1 * var(--H) - 400px), 3000px); }
html.land .gioco .xy { left: auto; right: 14px; width: auto; }
html.land .gioco .casella { left: 14px; top: 62px; }
html.land .gioco .pulback { left: 14px; top: 14px; }
html.land .gioco .logo-gioco { top: 0; }
html.land .gioco .xy { top: 14px; }
html.land .gioco .pt { left: 24px; }
html.land .gioco .tm { right: 24px; }
html.land .gioco .regole {
	left: 50%; width: min(1000px, 86%); margin-left: calc(min(1000px, 86%) / -2);
	top: 130px; height: calc(var(--H) - 130px - 90px);
	font-size: calc(24px + (var(--H) - 700px) * .02);
	padding: 30px 40px 80px;
}
html.land .gioco .regole b { font-size: calc(40px + (var(--H) - 700px) * .02); }
html.land .gioco .regole img { width: calc(190px + (var(--H) - 700px) * .25); }
html.land .gioco .finepartita, html.land .gioco .scuro { width: var(--W); height: var(--H); }
html.land .gioco .finebox { left: 8%; width: 40%; }
html.land .gioco .finebox2 { left: 52%; width: 40%; }
html.land .gioco .pulsante { right: 6%; }
html.land .gioco .pulsante2 { right: 6%; }
html.land .gioco .pronto { right: 6%; }

/* desktop: regole in un box al massimo di 800px e con testo non piu' grande di quello del pulsante "torna al menu" (14px) */
html.desk .gioco .regole {
	width: min(800px, 92%); max-width: 800px;
	left: 50%; margin-left: calc(min(800px, 92%) / -2);
	top: 120px; height: auto; min-height: 0;
	font-size: 14px; line-height: 1.45;
	padding: 28px 34px 64px;
}
html.desk .gioco .regole b { font-size: 22px; }
html.desk .gioco .regole img { width: 150px; margin: 0 0 8px 16px; }
html.desk .gioco .regole #caricamento { font-size: 18px; bottom: 16px; right: 22px; }
html.desk .gioco .regole #caricamento img { width: 100px; margin: 0; }

/* il foglio delle regole sta sempre al centro dello schermo, in orizzontale e in verticale */
html .gioco .regole { left: 50% !important; margin-left: 0 !important; top: calc(var(--H, 960px) / 2 - 60px) !important; }
html.land .gioco .regole { top: 50% !important; }
html .gioco .regole:not(.via) { transform: translate(-50%, -50%) rotate(-2deg) !important; }
html .gioco .regolea:not(.via) { transform: translate(-50%, -50%) rotate(1deg) !important; }
html .gioco .regole.via { transform: translate(-50%, var(--H, 960px)) !important; }
html:not(.desk) .gioco .regole { height: calc(var(--H, 960px) - 330px) !important; }

/* animazione d'ingresso delle regole: parte ingrandita al 150% e inclinata, ruota e si assesta in 1 secondo */
html .gioco .regole { transition: transform 1s ease-out !important; }
html .gioco .regole:not(.via):not(.regolea) { transform: translate(-50%, -50%) scale(1.5) rotate(-10deg) !important; }
html .gioco .regolea:not(.via) { transform: translate(-50%, -50%) scale(1) rotate(1deg) !important; }

/* sfondi: mainsfond.jpg su mobile (verticale), mainsfond-h.jpg su desktop (orizzontale) - menu e gioco */
body.menu, body.pagina-gioco {
	background-color: #1a0f08;
	background-image: url(mainsfond.jpg);
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu { background-image: url(mainsfond-h.jpg); }
}
html.land body.pagina-gioco { background-image: url(mainsfond-h.jpg); }
.schermo.gioco, html.land .schermo.gioco { background-image: none; background-color: transparent; }
body.pagina-gioco { min-height: var(--H, 100vh); }
html:not(.desk) .gioco .regole { font-size: calc(24px + (var(--H, 960px) - 960px) * .011); }
html:not(.desk) .gioco .regole b { font-size: calc(42px + (var(--H, 960px) - 960px) * .011); }

/* mobile: regole centrate sullo schermo (orizzontale e verticale), larghe al massimo il 90% */
html:not(.desk) .gioco .regole { width: calc(var(--W, 640px) * .9) !important; height: auto !important; min-height: 0; }

/* etichette di punteggio e tempo: "Punti" piu' grande, clessidra al posto di "tempo rimanente" */
.pt { font-size: 32px; font-weight: bold; }
.tm { font-size: 44px; line-height: 52px; }
.tm b, .pt b { margin-left: 6px; }

/* menu: riquadri delle partite a 2/3 dell'altezza dello schermo, senza angoli arrotondati; logo piu' grande */
body.menu .schermo.main { justify-content: flex-start; padding-bottom: 33.33vh; padding-bottom: 33.33dvh; padding-top: 0; }
body.menu .schermo.main > img { max-width: 92%; max-height: 40vh; max-height: 40dvh; margin-top: auto; }
body.menu .pannello { margin-bottom: auto; flex: 0 0 auto; }
body.menu .elenco {
	position: absolute; left: 0; right: 0; top: 66.67%; transform: translateY(-50%);
	-webkit-mask-image: none; mask-image: none;
}
body.menu .elenco li { border-radius: 0 !important; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .schermo.main > img { max-width: 560px; max-height: 40dvh; }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .schermo.main > img { max-height: 31vh; max-height: 31dvh; max-width: 600px; }
	body.menu .elenco li { height: 190px; font-size: 20px; }
	body.menu .elenco li > i { bottom: 12px; }
}

/* contenitore delle schede + pulsante classifica sotto; popup della classifica */
body.menu .partite { position: absolute; left: 0; right: 0; top: 66.67%; transform: translateY(-50%); }
body.menu .partite .elenco { position: static; transform: none; }
.btn-class { position: absolute; top: 100%; left: 50%; margin: 0 0 0 -70px; width: 140px; padding: 10px 0; box-sizing: border-box; font-size: 17px; z-index: 5; }
.btn-class::before { content: "\1F3C6\00a0"; }
.pop-class { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; }
.pop-class[hidden] { display: none; }
.pop-box { width: min(520px, 100%); max-height: 80vh; max-height: 80dvh; display: flex; flex-direction: column; background: #fff; color: #333; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.pop-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #4a2a11; color: #FFE; font-size: 18px; }
.pop-head span { cursor: pointer; font-size: 30px; line-height: 20px; padding: 0 4px; }
.pop-body { padding: 8px 18px 18px; overflow: auto; font-size: 16px; font-weight: normal; }
.pop-body table { width: 100%; border-collapse: collapse; }
.pop-body th { text-align: left; font-size: 13px; color: #888; padding: 8px 6px; border-bottom: 2px solid #ddd; }
.pop-body td { padding: 8px 6px; border-bottom: 1px solid #eee; }
.pop-body td:first-child { color: #888; width: 28px; }
.pop-body td:nth-child(3), .pop-body th:nth-child(3), .pop-body td:nth-child(4), .pop-body th:nth-child(4) { text-align: right; }
.pop-body tr:nth-child(2) td b { color: #c9a000; }

/* logo del menu: larghezza massima 100% */
body.menu .schermo.main > img { max-width: 100%; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .schermo.main > img { max-width: 100%; }
}

/* mobile: con l'inclinazione il foglio delle regole non supera mai il 90% della larghezza dello schermo */
html:not(.desk) .gioco .regole { width: calc(var(--W, 640px) * .85) !important; max-width: 90%; }

/* parola in costruzione piu' in basso (non sopra al logo) */
.gioco .casella { top: 100px; }
html.land .gioco .casella { top: 62px; }

/* bollino del punteggio: nasce sulla casella dove si completa la parola, poi vola (ease) sui punti */
.bollino {
	position: fixed; z-index: 150; width: 64px; height: 64px; box-sizing: border-box;
	background: #E01010; color: #FFF; font: bold 32px/64px Verdana, Geneva, sans-serif; text-align: center;
	box-shadow: 0 3px 8px rgba(0,0,0,.55); pointer-events: none;
	animation: bollino-in .25s ease-out;
}
.bollino.vola { transition: left .8s ease, top .8s ease, transform .8s ease; transform: scale(.7); }
@keyframes bollino-in { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* schermata di fine partita: "punti" e "parole trovate" piu' grandi */
.gioco .finebox, .gioco .finebox2 { font-size: 26px; line-height: 1.3; overflow: auto; }
.gioco .finebox b, .gioco .finebox2 b { font-size: 52px; }

/* sfondo unico sfondo.jpg (cover) su mobile e desktop, con il drago sopra in color-burn alto 2/3 dello schermo */
body.menu, body.pagina-gioco, html.land body.pagina-gioco {
	background-color: #1a0f08;
	background-image: url(sfondo.jpg);
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.menu::before, body.pagina-gioco::before {
	content: ""; position: fixed; z-index: 0; pointer-events: none;
	height: 66.67vh; height: 66.67dvh; aspect-ratio: 683 / 1024;
	left: 50%; top: 0; transform: translateX(-50%);
	background: url(drago.png) center / contain no-repeat;
	mix-blend-mode: color-burn;
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu { background-image: url(sfondo.jpg); }
	body.menu::before { left: 33.33%; top: 50%; transform: translate(-50%, -50%); }
}
html.land body.pagina-gioco::before { left: 33.33%; top: 50%; transform: translate(-50%, -50%); }

/* drago: opacita' 80%; su desktop piu' in alto e a sinistra */
body.menu::before, body.pagina-gioco::before { opacity: .8; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu::before { left: 22%; top: 40%; transform: translate(-50%, -50%); }
}
html.land body.pagina-gioco::before { left: 22%; top: 40%; transform: translate(-50%, -50%); }

/* introduzione del menu: il drago si disegna dal basso verso l'alto, prima in bianco, poi diventa nero e si fonde (color-burn) */
@property --rev { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
body.menu::after {
	content: ""; position: fixed; z-index: 0; pointer-events: none;
	height: 66.67vh; height: 66.67dvh; aspect-ratio: 683 / 1024;
	left: 50%; top: 0; transform: translateX(-50%);
	background: url(drago.png) center / contain no-repeat;
	filter: invert(1); opacity: 0; --rev: 0%;
	-webkit-mask-image: linear-gradient(to top, #000 calc(var(--rev) - 45%), transparent var(--rev));
	mask-image: linear-gradient(to top, #000 calc(var(--rev) - 45%), transparent var(--rev));
	animation: drago-disegna 2.4s ease-out forwards, drago-colore 1.1s ease-in-out 2.2s forwards, drago-sparisci .8s ease 3.4s forwards;
}
body.menu::before { animation: drago-finale .8s ease 3.4s both; }
@keyframes drago-disegna { 0% { --rev: 0%; opacity: 0; } 12% { opacity: 1; } 100% { --rev: 145%; opacity: 1; } }
@keyframes drago-colore { from { filter: invert(1); } to { filter: invert(0); } }
@keyframes drago-sparisci { from { opacity: 1; } to { opacity: 0; } }
@keyframes drago-finale { from { opacity: 0; } to { opacity: .8; } }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu::after { left: 22%; top: 40%; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
	body.menu::after { display: none; }
	body.menu::before { animation: none; }
}

/* il drago sta dietro ai contenuti; dopo il drago arriva il logo da zoom 200% / opacita' 0 a zoom 100% / opacita' 1, poi il resto */
body.menu .schermo.main { z-index: 1; }
body.menu .schermo.main > img { animation: logo-arriva 1.3s cubic-bezier(.2,.7,.2,1) 3s both; }
body.menu .pannello, body.menu .partite { animation: menu-appare .7s ease 4.1s both; }
@keyframes logo-arriva { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes menu-appare { from { opacity: 0; } to { opacity: 1; } }
/* un tocco o un click salta l'introduzione */
body.menu.salta::after { display: none; }
body.menu.salta::before { animation: none; }
body.menu.salta .schermo.main > img, body.menu.salta .pannello, body.menu.salta .partite { animation: none; }
@media (prefers-reduced-motion: reduce) {
	body.menu .schermo.main > img, body.menu .pannello, body.menu .partite { animation: none; }
}

/* il resto della pagina arriva un blocco alla volta, da zoom 200% / opacita' 0 a zoom 100% / opacita' 1 */
body.menu .pannello, body.menu .partite { animation: none; }
@keyframes blocco-arriva { from { transform: scale(2); opacity: 0; } to { opacity: 1; } }
body.menu #loggato > div, body.menu .elenco li, body.menu .btn-class { animation: blocco-arriva .6s cubic-bezier(.2,.7,.2,1) backwards; }
body.menu #loggato > div:nth-child(1) { animation-delay: 4.1s; }
body.menu #loggato > div:nth-child(2) { animation-delay: 4.4s; }
body.menu .elenco li:nth-child(1) { animation-delay: 4.7s; }
body.menu .elenco li:nth-child(2) { animation-delay: 5.0s; }
body.menu .elenco li:nth-child(3) { animation-delay: 5.3s; }
body.menu .elenco li:nth-child(n+4) { animation-delay: 5.6s; }
body.menu .btn-class { animation-delay: 5.9s; }
body.menu .intaglio { animation: blocco-arriva .6s cubic-bezier(.2,.7,.2,1) 4.1s backwards; }
body.menu.salta #loggato > div, body.menu.salta .elenco li, body.menu.salta .btn-class, body.menu.salta .intaglio { animation: none; }
@media (prefers-reduced-motion: reduce) {
	body.menu #loggato > div, body.menu .elenco li, body.menu .btn-class, body.menu .intaglio { animation: none; }
}

/* disegno piu' rapido: prima il drago bianco (1.4s) dal basso, subito dopo il drago nero che si disegna dal basso (1.4s) */
body.menu::after {
	animation: drago-disegna 1.4s ease-out forwards, drago-sparisci .9s ease 1.8s forwards;
}
body.menu::before {
	opacity: 0; --rev: 0%;
	-webkit-mask-image: linear-gradient(to top, #000 calc(var(--rev) - 45%), transparent var(--rev));
	mask-image: linear-gradient(to top, #000 calc(var(--rev) - 45%), transparent var(--rev));
	animation: drago-nero 1.4s ease-out 1.4s forwards;
}
@keyframes drago-nero { 0% { --rev: 0%; opacity: 0; } 12% { opacity: .8; } 100% { --rev: 145%; opacity: .8; } }
body.menu .schermo.main > img { animation-delay: 2.6s; }
body.menu #loggato > div:nth-child(1), body.menu .intaglio { animation-delay: 3.5s; }
body.menu #loggato > div:nth-child(2) { animation-delay: 3.8s; }
body.menu .elenco li:nth-child(1) { animation-delay: 4.1s; }
body.menu .elenco li:nth-child(2) { animation-delay: 4.4s; }
body.menu .elenco li:nth-child(3) { animation-delay: 4.7s; }
body.menu .elenco li:nth-child(n+4) { animation-delay: 5.0s; }
body.menu .btn-class { animation-delay: 5.3s; }
body.menu.salta::before { animation: none; opacity: .8; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
	body.menu::before { animation: none; opacity: .8; -webkit-mask-image: none; mask-image: none; }
}

/* lo zoom dei blocchi usa la proprieta' "scale" (indipendente da transform), cosi' vale anche per le schede con transform:none !important */
@keyframes blocco-arriva { from { scale: 2; opacity: 0; } to { scale: 1; opacity: 1; } }

/* intervallo tra un blocco e l'altro dimezzato (0.3s -> 0.15s) */
body.menu #loggato > div:nth-child(1), body.menu .intaglio { animation-delay: 3.5s; }
body.menu #loggato > div:nth-child(2) { animation-delay: 3.65s; }
body.menu .elenco li:nth-child(1) { animation-delay: 3.8s; }
body.menu .elenco li:nth-child(2) { animation-delay: 3.95s; }
body.menu .elenco li:nth-child(3) { animation-delay: 4.1s; }
body.menu .elenco li:nth-child(n+4) { animation-delay: 4.25s; }
body.menu .btn-class { animation-delay: 4.4s; }

/* il logo arriva appena il drago bianco e' completo (1.4s), mentre sta per salire il nero; il resto lo segue subito */
body.menu .schermo.main > img { animation-delay: 1.4s; }
body.menu #loggato > div:nth-child(1), body.menu .intaglio { animation-delay: 2.3s; }
body.menu #loggato > div:nth-child(2) { animation-delay: 2.45s; }
body.menu .elenco li:nth-child(1) { animation-delay: 2.6s; }
body.menu .elenco li:nth-child(2) { animation-delay: 2.75s; }
body.menu .elenco li:nth-child(3) { animation-delay: 2.9s; }
body.menu .elenco li:nth-child(n+4) { animation-delay: 3.05s; }
body.menu .btn-class { animation-delay: 3.2s; }

/* testata: logo + benvenuto/Esci. Su mobile uno sotto l'altro; su desktop benvenuto e Esci stanno a destra del logo */
body.menu .testata { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: auto; flex: 0 1 auto; }
body.menu .testata > img { margin-top: 0; }
body.menu .testata #loggato { width: 100% !important; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .testata { flex-direction: row; justify-content: center; align-items: center; gap: 28px; width: auto; }
	body.menu .testata > img { max-width: 600px; }
	body.menu .testata #loggato { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; width: auto !important; padding: 0; gap: 14px; }
	body.menu .testata #loggato > div { padding: 0 !important; }
	body.menu .testata #loggato > div:not(.benv) { max-width: 360px; }
}
body.menu .schermo.main > .testata > img { max-height: 28vh; max-height: 28dvh; margin-top: 0; }
body.menu .testata { margin-bottom: auto; padding-bottom: 14px; box-sizing: border-box; }
body.menu .testata #loggato { padding-top: 0; padding-bottom: 0; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .schermo.main > .testata > img { max-height: 31dvh; max-width: 600px; }
	body.menu .testata { margin-bottom: 0; padding-bottom: 0; }
	body.menu .testata #loggato > div.benv { padding: 10px 16px !important; }
	body.menu .testata #loggato > div:not(.benv) { padding: 0 !important; }
}
body.menu .testata #loggato > div:not(.benv) { font-size: clamp(14px, 3.8vw, 20px) !important; line-height: 1.3 !important; }
body.menu .testata #loggato #esci { font-size: 16px; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .testata #loggato > div:not(.benv) { font-size: 18px !important; }
}

/* il logo ora e' dentro .testata: ripristino proporzioni e animazione d'arrivo (zoom 200% -> 100%) */
body.menu .testata > img {
	width: auto !important; height: auto !important;
	object-fit: contain; flex: 0 1 auto;
	animation: logo-arriva 1.3s cubic-bezier(.2,.7,.2,1) 1.4s both;
}
body.menu.salta .testata > img { animation: none; }
@media (prefers-reduced-motion: reduce) {
	body.menu .testata > img { animation: none; }
}

/* desktop (con accesso fatto): logo a sinistra, benvenuto e Esci a destra uno sopra l'altro; su mobile resta il layout verticale */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu .testata:has(.benv) { gap: 28px; padding: 0; }
	body.menu .testata:has(.benv) > img { flex: 0 1 auto; max-width: 600px; max-height: 31dvh; }
	body.menu .testata:has(.benv) #loggato > div.benv { font-size: 19px !important; padding: 10px 16px !important; }
}

/* desktop: drago al centro in alto (2/3 dell'altezza), tra il logo a sinistra e il benvenuto/Esci a destra */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
	body.menu::before, body.menu::after { left: 50%; top: 0; transform: translateX(-50%); }
	body.menu .testata {
		display: grid; width: 100%; max-width: 1180px; margin-bottom: 0; align-items: center; gap: 0; padding: 0 20px;
		grid-template-columns: 1fr calc(66.67dvh * 683 / 1024 + 30px) 1fr;
	}
	body.menu .testata > img { grid-column: 1; justify-self: end; max-width: 100%; }
	body.menu .testata #loggato { grid-column: 3; justify-self: start; }
	body.menu .testata:has(.benv) { gap: 0; padding: 0 20px; }
	body.menu .testata:has(.benv) > img { max-width: 100%; }
}

/* contatore "ruxers" (Contalo) in basso al centro, tra i pulsanti della lingua e il logo Quoz */
.lang-footer .ruxers { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: block; line-height: 0; opacity: .9; }
.lang-footer .ruxers img { display: block; width: 70px; height: 13px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }