/* La sala virtuale (prototipo): tela a tutto schermo e pochi controlli sopra. */
html, body.sl-body { margin: 0; height: 100%; background: #111; color: #eee; overflow: hidden; overscroll-behavior: none; }
#sl-app { position: fixed; inset: 0; }
#sl-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#sl-canvas:active { cursor: grabbing; }

.sl-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .25); border-radius: 20px; background: rgba(17, 17, 17, .72);
	color: #fff; font: inherit; font-size: 15px; text-decoration: none; cursor: pointer;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* In fila in alto a sinistra (VG-342): la freccia (o «Album» arrivando da fuori, piu' larga), la casetta che
   riporta all'ingresso, l'altoparlante della musica (VG-327: acceso mostra le onde, spento la x). */
.sl-top {
	position: absolute; top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left));
	display: flex; gap: 8px;
}
.sl-back, .sl-home, .sl-music { width: 40px; padding: 0; }
.sl-back { font-size: 20px; }
.sl-music .sl-music-on, .sl-music[aria-pressed="true"] .sl-music-off { display: none; }
.sl-music[aria-pressed="true"] .sl-music-on { display: inline; }

#sl-status {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5em;
	background: #111; font-size: 15px; color: #bbb; text-align: center; padding: 0 24px;
}
#sl-status[hidden], #sl-hint[hidden], #sl-info[hidden], #sl-tour[hidden] { display: none; }

/* la barra del percorso in basso; suggerimento e scheda le stanno sopra */
#sl-tour {
	position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
	display: flex; align-items: center; gap: 10px;
}
#sl-tour .sl-btn { width: 44px; padding: 0; }
#sl-tour-count {
	min-width: 64px; text-align: center; font-size: 14px; color: #ddd;
	padding: 6px 10px; border-radius: 14px; background: rgba(17, 17, 17, .72); font-variant-numeric: tabular-nums;
}

#sl-hint {
	position: absolute; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%);
	width: min(92vw, 520px); box-sizing: border-box; padding: 12px 16px; border-radius: 12px;
	background: rgba(17, 17, 17, .78); font-size: 14px; line-height: 1.45; text-align: center; text-wrap: balance; pointer-events: none;
}

#sl-info {
	position: absolute; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%);
	width: min(92vw, 440px); box-sizing: border-box; padding: 14px 44px 14px 16px; border-radius: 12px;
	background: rgba(17, 17, 17, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#sl-info-title { margin: 0 0 10px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.sl-info-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* il pollice dell'album (VG-239/240): contorno, acceso solo il contorno in blu */
.sl-like { gap: 6px; }
.sl-like-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sl-like[aria-pressed="true"] { color: #2d88ff; border-color: #2d88ff; }
.sl-x {
	position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border: 0; background: none;
	color: #bbb; font-size: 24px; line-height: 1; cursor: pointer;
}

/* Telefono in orizzontale (poca altezza): scheda in basso a sinistra e percorso in basso a destra, sulla
   stessa riga, cosi' la fascia occupata in basso resta bassa (uiReserve in sala.js). */
@media (orientation: landscape) and (max-height: 500px) {
	#sl-tour { left: auto; right: calc(12px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); transform: none; }
	#sl-info {
		left: calc(12px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom)); transform: none;
		width: min(48vw, 380px); padding: 8px 40px 8px 12px; display: flex; align-items: center; gap: 10px;
	}
	#sl-info-title { margin: 0; font-size: 13px; flex: 1; }
	#sl-info .sl-btn { min-height: 34px; font-size: 13px; padding: 0 10px; white-space: nowrap; }
	.sl-info-actions { flex-wrap: nowrap; }
	#sl-hint { bottom: calc(64px + env(safe-area-inset-bottom)); font-size: 13px; }
}