/* NIKOFLIX
   Due schermi molto diversi: il telefono di un amico e il browser di un
   televisore guardato da tre metri. Percio' testi grandi, un anello di fuoco
   sempre evidente, e animazioni solo su transform/opacity (le uniche che una
   TV riesce a fare senza scattare). */

:root {
	--nero:      #07070a;
	--fondo:     #0b0b10;
	--carta:     #14151c;
	--carta-alta:#1d1f29;
	--bordo:     #23252f;
	--rosso:     #e50914;
	--rosso-alto:#ff4d57;
	--testo:     #f6f7f9;
	--tenue:     #98a0ad;
	--ombra:     0 18px 40px rgba(0,0,0,.55);
	--curva:     cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

/* Indispensabile: piu' avanti diversi elementi hanno un `display` esplicito
   (#lettore e #velo sono flex, #vetrina pure). Una regola di `display` batte
   lo stile predefinito di [hidden], percio' senza questa riga il lettore a
   schermo intero resta sempre sopra tutto e sembra di essere intrappolati
   dentro un video appena entrati. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--nero);
	color: var(--testo);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.sala {
	background:
		radial-gradient(1100px 620px at 78% -12%, rgba(229,9,20,.16), transparent 62%),
		radial-gradient(900px 500px at 5% 8%, rgba(60,80,200,.09), transparent 60%),
		var(--fondo);
}

a { color: var(--rosso-alto); text-decoration: none; }

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg path[d^="M8 5v14"], .iconaPlay path, #iconaStato path { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------------ marchio */
.marchio { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }

.marchioTriangolo {
	width: 0; height: 0;
	border-left: 14px solid var(--rosso);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	filter: drop-shadow(0 0 12px rgba(229,9,20,.8));
}

.marchioNome {
	font-weight: 900;
	font-size: 21px;
	letter-spacing: .2em;
	color: #fff;
	text-shadow: 0 2px 20px rgba(229,9,20,.35);
}

.marchio.grande .marchioNome { font-size: 44px; letter-spacing: .24em; }
.marchio.grande .marchioTriangolo {
	border-left-width: 28px; border-top-width: 17px; border-bottom-width: 17px;
}

/* -------------------------------------------------------------------- barra */
#barra, .barraPannello {
	position: fixed; top: 0; left: 0; right: 0; z-index: 40;
	display: flex; align-items: center; gap: 16px;
	padding: 16px 30px;
	transition: background .3s var(--curva), backdrop-filter .3s var(--curva);
	background: linear-gradient(180deg, rgba(7,7,10,.92), rgba(7,7,10,0));
}

#barra.attaccata, .barraPannello {
	background: rgba(8,8,12,.86);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--bordo);
}

.barraPannello { position: sticky; }

#briciole {
	font-size: 15px; font-weight: 500; margin: 0; color: var(--tenue);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	flex: 1 1 auto; min-width: 0;   /* si accorcia lui, non i bottoni a destra */
}

#gestione, .barraPannello nav { margin-left: auto; }

/* ------------------------------------------------------------------ bottoni */
.tondo, .pillola, .grosso {
	font: inherit; cursor: pointer; color: var(--testo);
	border: 2px solid transparent; background: var(--carta-alta);
	transition: transform .18s var(--curva), background .18s, border-color .18s, box-shadow .18s;
}

.tondo {
	width: 42px; height: 42px; padding: 10px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; flex: none;
}

.pillola { padding: 9px 18px; border-radius: 999px; font-weight: 500; }

.tondo.chiaro, .pillola.chiaro { background: rgba(255,255,255,.12); }

.tondo:hover, .pillola:hover, .grosso:hover { background: rgba(255,255,255,.2); }

.tondo:focus-visible, .pillola:focus-visible, .grosso:focus-visible,
.tondo:focus, .pillola:focus, .grosso:focus {
	outline: none; border-color: #fff;
	box-shadow: 0 0 0 4px rgba(255,255,255,.16);
}

.grosso {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 28px; border-radius: 10px;
	font-size: 17px; font-weight: 600;
	background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
}

.grosso .iconaPlay { width: 22px; height: 22px; }

.grosso.primario {
	background: #fff; color: #0b0b10;
	box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.grosso.primario:hover { background: #fff; transform: scale(1.04); }

/* ------------------------------------------------------------------ vetrina */
#vetrina {
	position: relative;
	min-height: min(62vh, 560px);
	display: flex; align-items: flex-end;
	padding: 120px 30px 34px;
	overflow: hidden;
}

#vetrinaSfondo {
	position: absolute; inset: 0;
	background-size: cover; background-position: center 30%;
	transform: scale(1.06);
	/* Le locandine ufficiali sono spesso chiarissime (cieli azzurri, fondi
	   bianchi): senza scurirle il testo bianco sopra non si legge. */
	filter: brightness(.72) saturate(1.1);
}

.vetrinaVelo {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(11,11,16,.8) 0%, rgba(11,11,16,.35) 34%, rgba(11,11,16,.9) 76%, var(--fondo) 100%),
		linear-gradient(90deg, rgba(11,11,16,.92) 0%, rgba(11,11,16,.5) 48%, rgba(11,11,16,.15) 100%),
		radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(11,11,16,.45) 100%);
}

/* min-width: 0 e' indispensabile: #vetrina e' flex e la riga "Ep. N · titolo"
   e' su una riga sola, quindi senza questo il blocco si allarga quanto quel
   titolo (600 px) e sul telefono i testi finiscono fuori dallo schermo. */
.vetrinaTesti { position: relative; max-width: min(620px, 100%); min-width: 0; }

.occhiello {
	margin: 0 0 10px; font-size: 12px; font-weight: 700;
	letter-spacing: .26em; text-transform: uppercase; color: var(--rosso-alto);
}

#vetrinaTitolo {
	margin: 0 0 12px;
	font-size: clamp(34px, 6vw, 62px);
	font-weight: 900; letter-spacing: -.02em; line-height: 1.02;
	text-shadow: 0 4px 30px rgba(0,0,0,.6);
}

.vetrinaDati {
	margin: 0 0 24px; color: #dfe3e9; font-size: 15.5px;
	text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.vetrinaBottoni { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------------------------------------------------------------------- file */
#file { padding: 8px 0 90px; position: relative; z-index: 2; }
#sfoglia { padding-top: 0; }
body.sala:not(.conVetrina) #sfoglia { padding-top: 84px; }

.fila { margin: 34px 0; }

.filaTitolo {
	margin: 0 30px 14px;
	font-size: 17px; font-weight: 700; letter-spacing: .02em;
	display: flex; align-items: baseline; gap: 12px;
}

.filaTitolo small { font-weight: 400; font-size: 14px; color: var(--tenue); }

.pista {
	display: flex; gap: 14px;
	padding: 6px 30px 18px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.pista::-webkit-scrollbar { display: none; }

/* la griglia serve dove gli elementi sono pochi e vale la pena mostrarli tutti */
.griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px 14px;
	padding: 6px 30px 18px;
}

/* --------------------------------------------------------------------- carte */
.carta {
	flex: 0 0 260px;
	scroll-snap-align: start;
	display: flex; flex-direction: column; gap: 10px;
	padding: 0; background: none; border: none; text-align: left;
	font: inherit; color: var(--testo); cursor: pointer;
	transition: transform .22s var(--curva);
}

.griglia .carta { flex: initial; }

.cornice {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(135deg, #1a1c25, #101118);
	box-shadow: var(--ombra);
	transition: box-shadow .22s var(--curva);
}

.cornice::after {
	content: ''; position: absolute; inset: 0;
	border-radius: 12px;
	border: 3px solid transparent;
	transition: border-color .18s var(--curva);
	pointer-events: none;
}

.cornice img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .35s var(--curva), opacity .35s;
	opacity: 0;
}

.cornice img.carica { opacity: 1; }

/* Sfumatura in basso sulle immagini: rende leggibili numero e spunta
   anche sopra un fotogramma chiarissimo. */
.cornice::before {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
	background: linear-gradient(180deg, transparent, rgba(7,7,10,.72));
	pointer-events: none; z-index: 1;
}

.numero, .segnoVisto, .cuore, .avanzamento { z-index: 2; }

.cornicePiena {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 34px; font-weight: 800; color: #3b414f;
}

/* il velo scuro in basso rende leggibile il numero anche su fotogrammi chiari */
.numero {
	position: absolute; left: 12px; bottom: 10px;
	font-size: 13px; font-weight: 700; letter-spacing: .06em;
	padding: 3px 9px; border-radius: 6px;
	background: rgba(7,7,10,.72); backdrop-filter: blur(4px);
}

.durataAngolo {
	position: absolute; right: 10px; top: 10px;
	font-size: 12px; padding: 3px 8px; border-radius: 6px;
	background: rgba(7,7,10,.7); color: #e6e9ee;
}

.giocaSopra {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .22s var(--curva);
	background: linear-gradient(180deg, rgba(7,7,10,.15), rgba(7,7,10,.55));
}

.giocaSopra span {
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(255,255,255,.92); color: #0b0b10;
	display: flex; align-items: center; justify-content: center;
	transform: scale(.8); transition: transform .22s var(--curva);
}

.giocaSopra svg { width: 26px; height: 26px; margin-left: 3px; }

.carta:hover, .carta:focus { outline: none; transform: translateY(-6px) scale(1.035); z-index: 3; }
.carta:hover .cornice::after, .carta:focus .cornice::after { border-color: var(--rosso); }
.carta:hover .cornice, .carta:focus .cornice { box-shadow: 0 20px 46px rgba(229,9,20,.32), var(--ombra); }
.carta:hover .cornice img, .carta:focus .cornice img { transform: scale(1.07); }
.carta:hover .giocaSopra, .carta:focus .giocaSopra { opacity: 1; }
.carta:hover .giocaSopra span, .carta:focus .giocaSopra span { transform: scale(1); }

.avanzamento {
	position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
	background: rgba(255,255,255,.22);
}

.avanzamento i {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--rosso), var(--rosso-alto));
}

.testi { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.carteTitolo { font-size: 16px; font-weight: 600; }
.carteSotto { font-size: 13.5px; color: var(--tenue); }

/* scheletro mentre il catalogo arriva */
.scheletro .cornice {
	background: linear-gradient(100deg, #14151c 30%, #1e202a 50%, #14151c 70%);
	background-size: 250% 100%;
	animation: scorri 1.4s infinite linear;
}

@keyframes scorri { to { background-position: -250% 0; } }

/* ------------------------------------------------------------------- vuoto */
.nulla { padding: 130px 30px; text-align: center; }
.nulla h2 { font-size: 27px; margin: 0 0 10px; font-weight: 700; }
.nulla p { color: var(--tenue); font-size: 17px; margin: 0; }

/* ------------------------------------------------------------------ lettore */
#lettore {
	position: fixed; inset: 0; z-index: 100;
	background: #000;
	display: flex; align-items: center; justify-content: center;
}

#lettore video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#lettore video[hidden] { display: none; }

#scudo { position: absolute; inset: 0; }

#comandi {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 22px 26px 26px;
	background: linear-gradient(180deg, rgba(0,0,0,.72), transparent 22%, transparent 62%, rgba(0,0,0,.85));
	opacity: 1; transition: opacity .3s var(--curva);
}

#comandi.nascosti { opacity: 0; pointer-events: none; }

.comandiAlto { display: flex; align-items: center; gap: 16px; }
.comandiTitolo { display: flex; flex-direction: column; line-height: 1.25; }
.comandiTitolo span { font-size: 13px; color: #b9c0ca; letter-spacing: .04em; }
.comandiTitolo strong { font-size: 20px; font-weight: 700; }

.comandiBasso { display: flex; flex-direction: column; gap: 14px; }

/* barra del tempo: mostra anche quanto e' gia' scaricato */
#barraTempo { position: relative; height: 22px; display: flex; align-items: center; }

#barraTempo::before {
	content: ''; position: absolute; left: 0; right: 0; height: 5px;
	border-radius: 3px; background: rgba(255,255,255,.24);
}

#tempoScorta, #tempoFatto {
	position: absolute; left: 0; height: 5px; border-radius: 3px; width: 0;
	pointer-events: none;
}

#tempoScorta { background: rgba(255,255,255,.42); }
#tempoFatto { background: linear-gradient(90deg, var(--rosso), var(--rosso-alto)); }

#tempoPallino {
	position: absolute; left: 0; width: 14px; height: 14px; margin-left: -7px;
	border-radius: 50%; background: #fff; pointer-events: none;
	box-shadow: 0 0 0 5px rgba(229,9,20,.28);
	transform: scale(.85); transition: transform .16s var(--curva);
}

#barraTempo:hover #tempoPallino, #tempoInput:focus + #tempoPallino { transform: scale(1.15); }

#tempoInput {
	position: absolute; inset: 0; width: 100%; height: 22px;
	margin: 0; opacity: 0; cursor: pointer;
}

.comandiRiga { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.orologio { font-variant-numeric: tabular-nums; font-size: 14px; color: #d3d8df; }
.spiaScorta { font-size: 13px; color: #8f97a3; }
#prossimo { margin-left: auto; }

/* --------------------------------------------------------- velo di attesa */
#velo {
	position: absolute; inset: 0; z-index: 5;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; text-align: center; padding: 30px;
	background: rgba(5,5,8,.9);
	backdrop-filter: blur(8px);
}

.anello { position: relative; width: 108px; height: 108px; }
.anello svg { transform: rotate(-90deg); }
.anello circle { fill: none; stroke-width: 4; stroke: rgba(255,255,255,.14); }

#anelloAvanti {
	stroke: var(--rosso);
	stroke-dasharray: 119.4;
	stroke-dashoffset: 119.4;
	transition: stroke-dashoffset .35s var(--curva);
	filter: drop-shadow(0 0 8px rgba(229,9,20,.7));
}

#veloPerCento {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
}

#veloTesto { font-size: 21px; font-weight: 600; }
#veloNota { color: var(--tenue); font-size: 15px; max-width: 30em; }

/* ------------------------------------------------------------------ accesso */
body.accesso {
	display: flex; align-items: center; justify-content: center;
	padding: 30px 18px;
	position: relative;
}

body.accesso::before {
	content: ''; position: fixed; inset: 0; z-index: -2;
	background-image: var(--sfondo-accesso, none);
	background-size: cover; background-position: center;
	filter: blur(3px) saturate(.85); transform: scale(1.08);
}

body.accesso::after {
	content: ''; position: fixed; inset: 0; z-index: -1;
	background:
		radial-gradient(900px 520px at 50% 40%, rgba(229,9,20,.14), transparent 65%),
		linear-gradient(180deg, rgba(7,7,10,.86), rgba(7,7,10,.96));
}

.scenaAccesso { width: min(430px, 100%); text-align: center; }
.motto { color: #b8bfc9; margin: 12px 0 32px; font-size: 16px; letter-spacing: .01em; }

.scenaAccesso form {
	background: rgba(20,21,28,.82);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,.08);
	padding: 32px;
	border-radius: 18px;
	display: flex; flex-direction: column; gap: 16px;
	text-align: left;
	box-shadow: 0 30px 70px rgba(0,0,0,.6);
}

.scenaAccesso label { display: flex; flex-direction: column; gap: 7px; color: var(--tenue); font-size: 14px; }

.scenaAccesso input, .scenaAccesso textarea {
	font: inherit; padding: 14px;
	border-radius: 11px;
	border: 2px solid rgba(255,255,255,.1);
	background: rgba(8,8,12,.75);
	color: var(--testo); resize: vertical;
	transition: border-color .18s, box-shadow .18s;
}

.scenaAccesso input:focus, .scenaAccesso textarea:focus {
	border-color: var(--rosso); outline: none;
	box-shadow: 0 0 0 4px rgba(229,9,20,.18);
}

.scenaAccesso button {
	font: inherit; font-size: 17px; font-weight: 700;
	padding: 15px; margin-top: 4px;
	border: 2px solid transparent; border-radius: 11px;
	background: linear-gradient(180deg, var(--rosso-alto), var(--rosso));
	color: #fff; cursor: pointer;
	box-shadow: 0 10px 26px rgba(229,9,20,.35);
	transition: transform .18s var(--curva), box-shadow .18s;
}

.scenaAccesso button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(229,9,20,.45); }
.scenaAccesso button:focus { outline: none; border-color: #fff; }

.piede { margin-top: 22px; color: var(--tenue); font-size: 14.5px; }

.riquadro {
	background: rgba(20,21,28,.82); backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px; padding: 22px;
}

.errore {
	color: #ffb3b3; margin: 0;
	background: rgba(229,9,20,.12);
	border: 1px solid rgba(229,9,20,.4);
	border-radius: 9px; padding: 10px 13px; font-size: 14.5px;
}

.tenue { color: var(--tenue); }
.piccolo { font-size: 13.5px; }

/* ----------------------------------------------------------------- pannello */
body.pannello { background: var(--fondo); }
.pannello { max-width: 940px; margin: 0 auto; padding: 26px 24px 80px; }

.pannello h2 {
	font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--tenue); font-weight: 700;
	margin: 40px 0 16px;
	display: flex; align-items: center; gap: 12px;
}

.pallino {
	background: var(--rosso); color: #fff; border-radius: 999px;
	padding: 2px 10px; font-size: 13px; letter-spacing: 0;
}

.riga {
	display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap;
	background: var(--carta);
	border: 1px solid var(--bordo);
	border-radius: 14px;
	padding: 20px 22px;
	margin-bottom: 12px;
	transition: border-color .18s;
}

.riga:hover { border-color: #33363f; }
/* admin.php usa "scheda": stesso aspetto di .riga */
.scheda {
	display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap;
	background: var(--carta);
	border: 1px solid var(--bordo);
	border-radius: 14px;
	padding: 20px 22px;
	margin-bottom: 12px;
	transition: border-color .18s;
}
.scheda:hover { border-color: #33363f; }
.scheda p { margin: 8px 0 0; line-height: 1.5; }
.brutto { color: var(--rosso-alto); }
.buono { color: #4cc274; }
.eventi { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; font-size: 13.5px; }
.pannello details { margin-top: 8px; }
.pannello summary { cursor: pointer; }
.pannello pre {
	margin: 8px 0 0; padding: 10px 12px; border-radius: 8px;
	background: #0d0e13; color: #c3c9d2; font-size: 12px; line-height: 1.5;
	white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
}
.pannello code { background: #0d0e13; padding: 1px 6px; border-radius: 5px; }

.colonnaLarga { flex: 1 1 360px; }
.azioni { display: flex; flex-direction: column; gap: 8px; }

.pannello button {
	font: inherit; padding: 10px 16px; border-radius: 9px;
	border: 2px solid transparent; background: var(--carta-alta);
	color: var(--testo); cursor: pointer; transition: background .18s, border-color .18s;
}

.pannello button:hover { background: #272a35; }
.pannello button:focus { outline: none; border-color: var(--rosso); }
.pannello button.tenue { background: transparent; border-color: var(--bordo); color: var(--tenue); }
.pannello button.tenue:hover { border-color: var(--rosso); color: var(--testo); }

.pannello input {
	font: inherit; padding: 10px 13px; border-radius: 9px;
	border: 2px solid var(--bordo); background: #0d0e13; color: var(--testo);
}

.pannello input:focus { outline: none; border-color: var(--rosso); }

.serieScelta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

.spunta {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--tenue); background: rgba(255,255,255,.04);
	border: 1px solid var(--bordo); border-radius: 999px;
	padding: 6px 14px 6px 10px; cursor: pointer;
	transition: border-color .18s, color .18s;
}

.spunta:hover { border-color: #3a3d48; color: var(--testo); }
.spunta input { width: 17px; height: 17px; accent-color: var(--rosso); }

.inLinea { display: flex; gap: 10px; flex-wrap: wrap; }

.targhetta {
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	background: rgba(229,9,20,.15); color: var(--rosso-alto);
	border: 1px solid rgba(229,9,20,.35);
	border-radius: 999px; padding: 2px 10px; margin-left: 10px;
}

.citazione {
	margin: 10px 0; padding-left: 14px;
	border-left: 3px solid var(--rosso); color: #c3c9d2;
}

.avvisoBuono {
	background: rgba(46,160,90,.12); border: 1px solid rgba(46,160,90,.45);
	border-radius: 11px; padding: 14px 17px; margin-top: 20px;
}

.passwordNuova {
	background: linear-gradient(135deg, rgba(229,9,20,.14), rgba(229,9,20,.04));
	border: 2px dashed rgba(229,9,20,.6);
	border-radius: 14px; padding: 20px 22px; margin-top: 16px;
}

.passwordNuova code {
	display: inline-block; margin-top: 10px;
	font-size: 32px; font-weight: 800; letter-spacing: .12em; color: #fff;
}

.indirizzo {
	font-size: 22px; font-weight: 700;
	background: var(--carta); border: 1px solid var(--bordo);
	border-radius: 14px; padding: 18px 22px; word-break: break-all;
}

/* -------------------------------------------------------------- adattamenti */
@media (max-width: 700px) {
	#barra { padding: 13px 18px; gap: 12px; }
	.marchioNome { font-size: 18px; }
	/* sul telefono la barra non ha posto per tutto: la voce Gestione sta nel
	   menu dell'account, e con il tasto indietro visibile il nome del marchio
	   lascia il posto alle briciole */
	#gestione { display: none; }
	#indietro:not([hidden]) ~ .marchio .marchioNome { display: none; }
	#vetrina { padding: 100px 18px 26px; min-height: 54vh; }
	.pista, .griglia { padding-left: 18px; padding-right: 18px; }
	.filaTitolo { margin-left: 18px; margin-right: 18px; }
	.carta { flex-basis: 210px; }
	.griglia { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	#comandi { padding: 16px 16px 20px; }
	#prossimo { margin-left: 0; }
	.comandiTitolo strong { font-size: 17px; }
}

/* Su una TV il puntatore non c'e': il fuoco deve gridare dove sei. */
@media (hover: none) {
	.carta:focus { transform: translateY(-4px) scale(1.06); }
	.carta:focus .cornice::after { border-color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------- aggiunte: account */
.barraDestra { margin-left: auto; display: flex; align-items: center; gap: 12px; position: relative; flex: none; }

.gettone {
	width: 40px; height: 40px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.22);
	background: linear-gradient(140deg, var(--rosso), #8b0610);
	color: #fff; font: inherit; font-weight: 800; font-size: 16px;
	cursor: pointer; flex: none;
	transition: transform .18s var(--curva), box-shadow .18s;
}

.gettone:hover, .gettone:focus {
	outline: none; transform: scale(1.07);
	box-shadow: 0 0 0 4px rgba(229,9,20,.25);
}

.menu {
	position: absolute; right: 0; top: 52px; z-index: 60;
	min-width: 210px;
	background: rgba(20,21,28,.97);
	backdrop-filter: blur(16px);
	border: 1px solid var(--bordo);
	border-radius: 14px;
	padding: 10px;
	box-shadow: 0 24px 60px rgba(0,0,0,.65);
}

.menuNome {
	margin: 4px 10px 10px; padding-bottom: 10px;
	border-bottom: 1px solid var(--bordo);
	font-weight: 700; font-size: 15px; color: #fff;
}

.menu a {
	display: block; padding: 11px 12px; border-radius: 9px;
	color: var(--testo); font-size: 15px;
	transition: background .16s;
}

.menu a:hover, .menu a:focus { background: rgba(255,255,255,.09); outline: none; }

/* --------------------------------------------------------- aggiunte: filtri */
#filtri {
	display: flex; gap: 10px; flex-wrap: wrap;
	padding: 6px 30px 0;
	position: relative; z-index: 3;
}

.chip {
	font: inherit; font-size: 14.5px; font-weight: 500;
	padding: 9px 18px; border-radius: 999px;
	border: 2px solid var(--bordo);
	background: rgba(255,255,255,.04);
	color: var(--tenue); cursor: pointer;
	transition: color .18s, border-color .18s, background .18s, transform .18s var(--curva);
}

.chip:hover { color: var(--testo); border-color: #3a3d48; }
.chip:focus { outline: none; border-color: #fff; transform: scale(1.05); }

.chip.attivo {
	background: linear-gradient(180deg, var(--rosso-alto), var(--rosso));
	border-color: transparent; color: #fff;
	box-shadow: 0 8px 22px rgba(229,9,20,.32);
}

/* ------------------------------------------- aggiunte: cuore, visto, vetrina */
.cuore {
	position: absolute; right: 8px; top: 8px;
	width: 34px; height: 34px; padding: 7px;
	border: none; border-radius: 50%;
	background: rgba(7,7,10,.6); backdrop-filter: blur(4px);
	color: rgba(255,255,255,.75); cursor: pointer;
	opacity: 0; transform: scale(.85);
	transition: opacity .2s var(--curva), transform .2s var(--curva), color .2s;
}

.carta:hover .cuore, .carta:focus .cuore, .cuore.acceso { opacity: 1; transform: scale(1); }
.cuore:hover { color: #fff; }
.cuore.acceso { color: var(--rosso-alto); }
.cuore.acceso svg { fill: currentColor; }

#oraPreferito { margin-left: auto; }
#oraPreferito.acceso { color: var(--rosso-alto); }
#oraPreferito.acceso svg { fill: currentColor; }

.segnoVisto {
	position: absolute; left: 8px; top: 8px;
	width: 26px; height: 26px; padding: 5px;
	border-radius: 50%;
	background: rgba(46,160,90,.92); color: #fff;
}

.carta.vistoGia .cornice img { opacity: .48; }
.carta.vistoGia:hover .cornice img, .carta.vistoGia:focus .cornice img { opacity: .8; }
.carta.vistoGia .carteTitolo { color: var(--tenue); }

.vetrinaSotto {
	margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #fff;
	text-shadow: 0 2px 12px rgba(0,0,0,.85);
	max-width: 34em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.notaLunga { color: var(--tenue); text-align: center; padding: 10px 30px 40px; }

#veloAvvia { margin-top: 6px; }

/* ------------------------------------------------- il marchio: la N di casa */
.marchioEnne {
	width: 30px; height: 30px;
	border-radius: 8px;
	display: block;
	box-shadow: 0 4px 14px rgba(229,9,20,.45);
}

.marchio.grande .marchioEnne {
	width: 64px; height: 64px; border-radius: 16px;
	box-shadow: 0 10px 30px rgba(229,9,20,.5);
}

/* Il vecchio triangolo resta definito ma non si usa piu' da nessuna parte. */

/* --------------------------------------------- finestra delle impostazioni */
.finestra {
	position: fixed; inset: 0; z-index: 80;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	background: rgba(4,4,7,.78);
	backdrop-filter: blur(10px);
}

.finestraDentro {
	width: min(560px, 100%);
	max-height: 88vh; overflow-y: auto;
	background: var(--carta);
	border: 1px solid var(--bordo);
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 40px 90px rgba(0,0,0,.7);
}

.finestraDentro h2 { margin: 0 0 6px; font-size: 25px; font-weight: 800; }

.finestraDentro h3 {
	margin: 24px 0 12px; font-size: 13px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--tenue);
}

.scelte { display: flex; flex-direction: column; gap: 9px; }

.sceltaVoce {
	display: flex; flex-direction: column; gap: 3px;
	text-align: left; font: inherit; color: var(--testo);
	background: rgba(255,255,255,.04);
	border: 2px solid var(--bordo);
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color .18s, background .18s, transform .18s var(--curva);
}

.sceltaVoce strong { font-size: 16.5px; font-weight: 600; }
.sceltaVoce span { font-size: 13.5px; color: var(--tenue); }

.sceltaVoce:hover { border-color: #3a3d48; }
.sceltaVoce:focus { outline: none; border-color: #fff; transform: scale(1.01); }

.sceltaVoce.scelta {
	border-color: var(--rosso);
	background: rgba(229,9,20,.12);
}

.sceltaVoce.scelta strong::after { content: ' ✓'; color: var(--rosso-alto); }

.sceltaVoce.spenta { opacity: .45; cursor: not-allowed; }

.finestraBottoni { margin-top: 26px; display: flex; justify-content: flex-end; }

/* voci di menu che sono bottoni, non collegamenti */
.menu button {
	display: block; width: 100%; text-align: left;
	padding: 11px 12px; border: none; border-radius: 9px;
	background: none; color: var(--testo);
	font: inherit; font-size: 15px; cursor: pointer;
	transition: background .16s;
}

.menu button:hover, .menu button:focus { background: rgba(255,255,255,.09); outline: none; }

.veloBottoni { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* Avviso quando l'apparecchio non decodifica l'audio: meglio dirlo che
   lasciare qualcuno davanti a un film muto senza spiegazione. */
.avvisoAudio {
	position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%);
	z-index: 6;
	display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
	width: min(520px, calc(100% - 40px));
	background: rgba(20,21,28,.96);
	border: 2px solid var(--rosso);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 20px 50px rgba(0,0,0,.7);
}

.avvisoAudio strong { font-size: 17px; }
.avvisoAudio span { font-size: 14.5px; color: var(--tenue); }

/* ------------------------------------- copertine vere: locandine e titoli */

/* Il titolo disegnato della serie, quando esiste: sostituisce il testo e
   cambia completamente il colpo d'occhio della copertina in alto. */
.vetrinaLogo {
	display: block;
	max-width: min(440px, 74vw);
	max-height: 168px;
	width: auto; height: auto;
	margin: 0 0 14px;
	filter: drop-shadow(0 6px 24px rgba(0,0,0,.75));
}

/* Le locandine sono verticali: la scheda cambia proporzioni di conseguenza. */
.carta.ritratto { flex-basis: 190px; }
.carta.ritratto .cornice { aspect-ratio: 2 / 3; }
.griglia .carta.ritratto { flex: initial; }

@media (max-width: 700px) {
	.carta.ritratto { flex-basis: 140px; }
	.vetrinaLogo { max-height: 110px; }
}

/* Avviso a chi guarda da dentro casa passando dal nome pubblico:
   sta usando il percorso lento senza saperlo. */
.strisciaCasa {
	position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
	z-index: 70;
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	width: min(680px, calc(100% - 32px));
	background: rgba(20,21,28,.97);
	backdrop-filter: blur(14px);
	border: 2px solid var(--rosso);
	border-radius: 16px;
	padding: 16px 20px;
	box-shadow: 0 24px 60px rgba(0,0,0,.7);
}

.strisciaCasa strong { flex: 1 1 100%; font-size: 16px; }
.strisciaCasa span { flex: 1 1 100%; font-size: 14px; color: var(--tenue); }
.strisciaCasa .pillola { font-size: 14px; }

/* ------------------------------------------------- la trama nella vetrina */
.vetrinaTrama {
	margin: 0 0 14px; max-width: 34em;
	font-size: 15.5px; line-height: 1.5; color: #dfe3e9;
	text-shadow: 0 2px 10px rgba(0,0,0,.8);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------------------- elenco verticale degli episodi
   Una riga per episodio: immagine a sinistra, testi a destra. Dove le carte
   servono a scegliere con l'occhio, qui si legge: titolo, quanto dura, quando
   e' uscito, a che punto si e', e la trama se c'e'. */
.saltoStagioni {
	display: flex; gap: 8px;
	padding: 14px 30px 0;
	overflow-x: auto; scrollbar-width: none;
	position: relative; z-index: 3;
}
.saltoStagioni::-webkit-scrollbar { display: none; }
.saltoStagioni .chip { flex: none; padding: 7px 14px; font-size: 14px; }

.elenco {
	display: flex; flex-direction: column; gap: 8px;
	padding: 6px 30px 18px;
	max-width: 1400px;
}

.voceEp {
	display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px;
	align-items: center;
	padding: 10px; border-radius: 16px;
	background: none; border: 2px solid transparent;
	font: inherit; color: var(--testo); text-align: left; cursor: pointer;
	transition: background .18s, border-color .18s, transform .18s var(--curva);
}

.voceEp .cornice { width: 100%; }
.voceEp:hover { background: rgba(255,255,255,.05); }
.voceEp:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.07); }
.voceEp:hover .cornice::after, .voceEp:focus .cornice::after { border-color: var(--rosso); }
.voceEp:hover .cornice img, .voceEp:focus .cornice img { transform: scale(1.06); }
.voceEp:hover .giocaSopra, .voceEp:focus .giocaSopra { opacity: 1; }
.voceEp:hover .giocaSopra span, .voceEp:focus .giocaSopra span { transform: scale(1); }

/* il prossimo da vedere si distingue con un filo rosso a sinistra */
.voceEp.prossimoDaVedere { box-shadow: inset 4px 0 0 var(--rosso); }

.voceTesti { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.voceTitolo {
	display: flex; align-items: baseline; gap: 12px;
	font-size: 18px; font-weight: 700; line-height: 1.25;
}
.voceTitolo strong { font-weight: 700; min-width: 0; }
.voceNumero {
	flex: none; font-size: 14px; font-weight: 800; letter-spacing: .06em;
	color: var(--tenue); min-width: 2.2em;
}

.voceMeta { margin: 0; font-size: 14px; color: var(--tenue); display: flex; flex-wrap: wrap; gap: 2px 8px; }
.voceMeta span + span::before { content: '·'; margin-right: 8px; color: #4a4f5c; }
.voceMeta .ripresa { color: var(--rosso-alto); font-weight: 600; }
.voceMeta .fatto { color: #5ccb84; font-weight: 600; }

.voceTrama {
	margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: #c9cfd8;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* sotto il fuoco la trama si apre per intero: su una TV non c'e' altro modo di leggerla */
.voceEp:focus .voceTrama, .voceEp:hover .voceTrama { -webkit-line-clamp: 8; }

.voceEp .voceCuore {
	position: static; margin-left: auto; align-self: center; flex: none;
	opacity: .45; transform: none;
}
.voceEp:hover .voceCuore, .voceEp:focus .voceCuore, .voceEp .voceCuore.acceso { opacity: 1; }

.voceEp.vistoGia .cornice img { opacity: .5; }
.voceEp.vistoGia:hover .cornice img, .voceEp.vistoGia:focus .cornice img { opacity: .85; }
.voceEp.vistoGia .voceTitolo strong { color: var(--tenue); }

@media (hover: none) {
	.voceEp:focus { transform: scale(1.01); }
}

@media (max-width: 700px) {
	.saltoStagioni { padding-left: 18px; padding-right: 18px; }
	.elenco { padding-left: 12px; padding-right: 12px; gap: 4px; }
	.voceEp { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 8px; border-radius: 12px; }
	.voceTitolo { font-size: 15.5px; gap: 8px; }
	.voceNumero { font-size: 12.5px; min-width: 0; }
	.voceMeta { font-size: 12.5px; }
	.voceTrama { font-size: 13.5px; -webkit-line-clamp: 2; }
	.voceEp:focus .voceTrama, .voceEp:hover .voceTrama { -webkit-line-clamp: 6; }
	.voceEp .numero { font-size: 11px; padding: 2px 7px; left: 8px; bottom: 7px; }
	.vetrinaTrama { font-size: 14px; -webkit-line-clamp: 2; }
}