/* Film — tema cinema scuro, mobile-first. */
:root {
  --sfondo: #0e1016;
  --pannello: #171b26;
  --pannello-alto: #1e2330;
  --bordo: #262c3b;
  --testo: #eceef2;
  --sommesso: #8f96a8;
  --accento: #e94560;
  --accento-scuro: #c2304a;
  --ok: #3ecf8e;
  --raggio: 14px;
  --raggio-s: 9px;
}

* { box-sizing: border-box; }
/* Nessuno scorrimento orizzontale: la locandina trascinata non deve allargare la pagina. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }

body {
  margin: 0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  line-height: 1.5;
  padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.4rem 0 0.8rem; }
h2 {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--sommesso); margin: 1.8rem 0 0.7rem;
}
a { color: var(--testo); text-decoration: none; }
p a, .testo a { color: var(--accento); }

.sommesso { color: var(--sommesso); font-size: 0.86rem; }
.errore, .messaggio { padding: 0.7rem 1rem; border-radius: var(--raggio-s); margin: 0.6rem 0; }
.errore { background: #46202b; border: 1px solid #6e2c3c; }
.messaggio { background: #1b3a2d; border: 1px solid #2c5c46; }

/* ---------- barra di navigazione ---------- */
.barra {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-around; align-items: stretch;
  background: color-mix(in srgb, var(--pannello) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--bordo);
  padding: 0.45rem 0 calc(0.45rem + env(safe-area-inset-bottom));
}
.barra a {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  font-size: 0.62rem; font-weight: 600; color: var(--sommesso);
  min-width: 2.9rem; padding: 0.15rem 0; border-radius: var(--raggio-s);
}
.barra a svg { width: 1.45rem; height: 1.45rem; }
.barra a.attiva { color: var(--accento); }

/* ---------- card e sezioni ---------- */
.card {
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem;
  margin: 0.8rem 0;
}

/* ---------- griglie di locandine ---------- */
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.8rem 0.65rem;
  list-style: none; padding: 0; margin: 0;
}
.manifesto { display: block; }
.manifesto .cornice {
  aspect-ratio: 2 / 3; border-radius: var(--raggio-s); overflow: hidden;
  background: var(--pannello-alto); border: 1px solid var(--bordo);
  display: grid; place-items: center; position: relative;
}
.manifesto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.manifesto .niente { font-size: 1.6rem; opacity: 0.45; }
.manifesto .nome {
  margin-top: 0.35rem; font-size: 0.74rem; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.manifesto .sotto { font-size: 0.68rem; color: var(--sommesso); }
/* filtri della libreria */
.filtri { display: flex !important; flex-wrap: wrap; gap: 0.45rem; margin: 0.4rem 0 1rem; }
.filtri select {
  width: auto; flex: 0 1 auto; font-size: 0.82rem;
  padding: 0.38rem 0.6rem; border-radius: 999px;
}

.manifesto .bollo {
  position: absolute; top: 0.3rem; right: 0.3rem;
  background: rgba(10, 12, 18, 0.82); border: 1px solid var(--bordo);
  color: var(--testo); font-size: 0.72rem; font-weight: 800;
  padding: 0.05rem 0.42rem; border-radius: 999px;
}
.manifesto.mancante .cornice img { filter: grayscale(0.85); opacity: 0.6; }
.manifesto .bollo-sx { left: 0.3rem; right: auto; font-size: 0.62rem; padding: 0.12rem 0.3rem; }
.voti-profili {
  display: flex; flex-wrap: wrap; gap: 0.1rem 0.45rem;
  font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--testo);
}
.voti-profili b { color: var(--accento); font-weight: 800; }

/* ---------- elenchi ---------- */
.elenco { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.elenco li {
  background: var(--pannello); border: 1px solid var(--bordo);
  padding: 0.65rem 0.85rem; border-radius: var(--raggio-s);
}
ol.elenco { counter-reset: n; }
ol.elenco li { counter-increment: n; display: flex; gap: 0.7rem; align-items: baseline; }
ol.elenco li::before {
  content: counter(n); font-weight: 800; color: var(--accento);
  min-width: 1.3rem; text-align: right; font-variant-numeric: tabular-nums;
}

/* righe con miniatura */
.riga-film { display: flex; gap: 0.75rem; align-items: center; }
.riga-film .mini {
  width: 2.9rem; aspect-ratio: 2/3; border-radius: 6px; object-fit: cover;
  background: var(--pannello-alto); flex-shrink: 0;
}
.riga-film .vuota { display: grid; place-items: center; font-size: 1.1rem; opacity: 0.4; }
.riga-film .info { min-width: 0; }
.riga-film .titolo-riga { font-weight: 650; font-size: 0.92rem; line-height: 1.3; }
/* Tutta la riga apre il titolo (anche la miniatura, che viene istintivo toccare):
   il link del nome si allarga sull'intera riga; pulsanti, moduli e altri link
   restano sopra e funzionano come prima. */
.riga-film { position: relative; isolation: isolate; }  /* il link allargato resta qui */
.riga-film:has(> .info a.titolo-riga) { cursor: pointer; border-radius: var(--raggio-s);
  -webkit-tap-highlight-color: transparent; }
.riga-film > .info a.titolo-riga::after { content: ""; position: absolute; inset: 0; }
.riga-film :is(a, button, form, input, select, label, summary):not(.titolo-riga) {
  position: relative; z-index: 1; }
.riga-film:has(> .info a.titolo-riga):active { background: var(--pannello-alto); }

/* ---------- moduli ---------- */
form:not(.in-linea) { display: grid; gap: 0.7rem; margin: 0.8rem 0; }
form.in-linea { display: inline; }
label { display: grid; gap: 0.3rem; font-size: 0.84rem; color: var(--sommesso); font-weight: 600; }
label.in-linea { display: flex; align-items: center; gap: 0.55rem; color: var(--testo); font-weight: 500; }
input, select, textarea {
  font: inherit; color: var(--testo);
  background: var(--pannello-alto);
  border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: 0.6rem 0.75rem; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accento); outline-offset: 1px; border-color: transparent; }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--accento); }
input[type="number"][name^="voto_"] { width: 5.2rem; }
::placeholder { color: #5b6170; }

button {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--accento); color: #fff;
  border: none; border-radius: 999px;
  padding: 0.6rem 1.1rem;
}
button:active { background: var(--accento-scuro); }
button.secondario, form.in-linea button {
  background: var(--pannello-alto); color: var(--testo);
  border: 1px solid var(--bordo); font-weight: 600;
  padding: 0.42rem 0.85rem; font-size: 0.85rem;
}
.azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.azioni button.scelto { border-color: var(--accento); color: var(--accento); }

fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio-s); display: grid; gap: 0.55rem; padding: 0.8rem; margin: 0; }
legend { font-size: 0.8rem; color: var(--sommesso); font-weight: 700; padding: 0 0.3rem; }

details { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 0.75rem 1rem; margin: 0.8rem 0; }
details summary { cursor: pointer; font-weight: 650; }
details[open] summary { margin-bottom: 0.6rem; }

/* ---------- ricerca ---------- */
.ricerca { display: flex !important; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.ricerca input { flex: 1; border-radius: 999px; padding-left: 1rem; }
.ricerca button { flex-shrink: 0; }

/* ---------- scheda titolo ---------- */
.scheda-testata { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.8rem; }
.scheda-testata h1 { margin: 0 0 0.3rem; }
.locandina {
  width: 7.2rem; aspect-ratio: 2/3; object-fit: cover;
  border-radius: var(--raggio-s); border: 1px solid var(--bordo); flex-shrink: 0;
}
.voto-medio {
  display: inline-block; margin-top: 0.4rem;
  background: var(--pannello); border: 1px solid var(--accento);
  color: var(--accento); font-weight: 800; font-size: 1.05rem;
  padding: 0.15rem 0.7rem; border-radius: 999px;
}
.trama { color: #c6cad4; font-size: 0.92rem; }

/* ---------- riquadri numerici ---------- */
.riquadri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.riquadro {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 0.85rem 0.5rem;
  display: grid; gap: 0.1rem; text-align: center;
}
.riquadro strong { font-size: 1.55rem; font-weight: 800; color: var(--accento); }
.riquadro span { color: var(--sommesso); font-size: 0.78rem; }

/* ---------- tag e voti ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--pannello-alto); border: 1px solid var(--bordo);
  border-radius: 999px; padding: 0.18rem 0.7rem; margin: 0.12rem;
  font-size: 0.8rem; font-weight: 600;
}
.tag form.in-linea button { border: none; background: none; padding: 0 0.1rem; color: var(--sommesso); }
.tag-genere { border-style: dashed; color: var(--sommesso); }
.voto-chip {
  display: inline-block; min-width: 1.9rem; text-align: center;
  background: var(--pannello-alto); border: 1px solid var(--bordo);
  border-radius: 7px; padding: 0.02rem 0.3rem;
  font-weight: 800; font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
.voto-chip.alto { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--bordo)); }
.voto-chip.basso { color: #f0a35e; }

/* ---------- sfoglia ---------- */
.chips { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 0.4rem; scrollbar-width: none; }
.chip {
  flex-shrink: 0; padding: 0.38rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: var(--pannello); border: 1px solid var(--bordo); color: var(--sommesso);
}
.chip.piccola { padding: 0.25rem 0.65rem; font-size: 0.76rem; }
.chip.scelta { background: var(--accento); border-color: var(--accento); color: #fff; }
.sfoglia-scheda { display: grid; gap: 0.8rem; margin-top: 0.6rem; }
.sfoglia-locandina {
  width: min(70vw, 17rem); aspect-ratio: 2/3; object-fit: cover; justify-self: center;
  border-radius: var(--raggio); border: 1px solid var(--bordo);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.sfoglia-info { text-align: center; }
.sfoglia-titolo { font-size: 1.3rem; text-transform: none; letter-spacing: -0.01em; color: var(--testo); margin: 0.2rem 0; }
.motivo { margin: 0; color: var(--accento); font-weight: 600; }
.sfoglia-trama { text-align: left; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sfoglia-visto { display: flex !important; gap: 0.5rem; margin: 0 !important; }
.sfoglia-visto select { width: 6.5rem; flex-shrink: 0; }
.sfoglia-visto button { flex: 1; padding: 0.75rem; font-size: 1rem; }
.sfoglia-carta {
  position: relative; justify-self: center; touch-action: none; user-select: none;
  cursor: grab; will-change: transform; border-radius: var(--raggio);
  --velatura: transparent;
}
.sfoglia-carta.trascinata { cursor: grabbing; }
/* Velatura colorata dell'azione, sopra la locandina e sotto le etichette */
.sfoglia-carta::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--raggio);
  background: var(--velatura); pointer-events: none;
}
.sfoglia-carta .sfoglia-locandina { display: block; pointer-events: none; }
.etichetta-gesto {
  z-index: 1; position: absolute; top: 1rem; padding: 0.3rem 0.8rem; border-radius: 10px;
  font-weight: 800; font-size: 1.1rem; opacity: 0; transition: opacity 0.1s;
  background: rgba(10, 12, 18, 0.85); border: 2px solid currentColor; pointer-events: none;
}
/* Ogni etichetta sta dal lato opposto al movimento, così resta visibile. */
.etichetta-gesto.sinistra { right: 1rem; color: var(--sommesso); transform: rotate(8deg); }
.etichetta-gesto.destra { left: 1rem; color: var(--ok); transform: rotate(-8deg); }
.etichetta-gesto.alto { left: 50%; top: auto; bottom: 1.2rem; transform: translateX(-50%); color: var(--accento); }
.etichetta-gesto.basso { left: 50%; top: 1.2rem; transform: translateX(-50%); color: #7cc4ff; }
.suggerimento-gesti { text-align: center; margin: -0.3rem 0 0; font-size: 0.78rem; min-height: 1.2em; transition: color 0.15s; }
.suggerimento-gesti.pronto { color: var(--testo); font-weight: 700; }
.sfoglia-riga { margin: 0; text-align: center; }
.sfoglia-dettagli { display: grid; gap: 0.4rem; font-size: 0.88rem; margin: 0; }
.sfoglia-azioni.quattro { grid-template-columns: 1fr 1fr; }
.sfoglia-azioni.quattro form { display: none; }
.dialogo {
  border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--pannello);
  color: var(--testo); width: min(92vw, 26rem); padding: 1.1rem;
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90dvh; overflow-y: auto;
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialogo form { margin: 0; }
.riga-voto select { width: 5.5rem; }
.sfoglia-azioni { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.45rem; }
.sfoglia-azioni form { margin: 0 !important; }
.sfoglia-azioni button { width: 100%; padding: 0.6rem 0.3rem; font-size: 0.8rem; }

.invito-sfoglia { display: flex; align-items: center; gap: 0.8rem; }

/* ---------- streaming ---------- */
.offerte { display: grid; gap: 0.6rem; }
.offerta-riga { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; align-items: center; }
.loghi { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.logo-piattaforma img { width: 2.3rem; height: 2.3rem; border-radius: 9px; display: block; opacity: 0.55; }
.logo-piattaforma.abbonati img { opacity: 1; outline: 2px solid var(--ok); outline-offset: 2px; }
.attribuzione { margin: 0; font-size: 0.72rem; }
.scelta-piattaforme { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.4rem; }
.scelta-piattaforme label { display: flex; align-items: center; gap: 0.5rem; color: var(--testo); font-weight: 500; font-size: 0.82rem; }
.scelta-piattaforme img { width: 1.6rem; height: 1.6rem; border-radius: 6px; }

/* ---------- serie ---------- */
.stato { font-size: 0.72rem; font-weight: 700; padding: 0.08rem 0.5rem; border-radius: 999px;
         background: var(--pannello-alto); border: 1px solid var(--bordo); }
.stato-in_corso { color: #7cc4ff; }
.stato-in_pari { color: #f0c27a; }
.stato-completata { color: var(--ok); }
.stato-abbandonata { color: var(--sommesso); }
details.stagione summary { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.episodi { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.2rem; }
.episodi li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--bordo); font-size: 0.86rem; }
.episodi .numero { width: 1.6rem; text-align: right; color: var(--sommesso); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.episodi .nome-ep { flex: 1; min-width: 0; }
.episodi .nome-ep .sommesso { display: block; font-size: 0.72rem; }
.episodi li.visto .nome-ep { color: var(--sommesso); }
.episodi li.futuro { opacity: 0.5; }
.episodi .spunta { color: var(--ok); font-weight: 800; padding: 0 0.6rem; }
.episodi form.in-linea button { padding: 0.25rem 0.55rem; font-size: 0.78rem; }
.progresso-serie { margin: 0; }
.prossimo-serie { display: flex; gap: 0.7rem; align-items: center; }

/* ---------- collezione ---------- */
.prestito { margin-top: 0.4rem; font-size: 0.85rem; color: #f0c27a; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
details.dentro { background: none; border: none; padding: 0; margin: 0.3rem 0 0; }
details.dentro summary { font-weight: 500; font-size: 0.82rem; }

/* ---------- heatmap ---------- */
.heatmap {
  display: grid; grid-template-columns: 2.6rem repeat(12, 1fr); gap: 3px;
  font-size: 0.66rem; font-variant-numeric: tabular-nums;
}
.heatmap .mese { text-align: center; color: var(--sommesso); }
.heatmap .anno { color: var(--sommesso); align-self: center; }
.heatmap .cella {
  aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accento) calc(var(--l) * 85%), var(--pannello-alto));
  color: var(--testo); font-weight: 700;
}

/* ---------- traguardi ---------- */
.traguardi { margin-top: 1rem; }
.traguardi li { display: grid; gap: 0.45rem; }
.traguardi li.preso { border-color: color-mix(in srgb, var(--accento) 45%, var(--bordo)); }
.traguardo-testa { display: flex; gap: 0.7rem; align-items: center; }
.trofeo { font-size: 1.5rem; }
.traguardi li:not(.preso) .trofeo { opacity: 0.45; }
.progresso { display: grid; grid-template-columns: 4.5rem 1fr 4.6rem; gap: 0.5rem; align-items: center; font-size: 0.78rem; }
.progresso .chi { color: var(--sommesso); font-weight: 600; }
.progresso .quanto { text-align: right; font-variant-numeric: tabular-nums; }
.barra-prog { height: 0.42rem; background: var(--pannello-alto); border-radius: 999px; overflow: hidden; }
.barra-prog span { display: block; height: 100%; background: var(--accento); border-radius: 999px; }

/* ---------- login ---------- */
.accesso { max-width: 22rem; margin: 14vh auto 0; text-align: center; }
.accesso .logo { font-size: 2.6rem; }
.accesso h1 { font-size: 1.7rem; margin-bottom: 1.2rem; }
.accesso form { text-align: left; }

.invito code { word-break: break-all; font-size: 0.78rem; color: var(--sommesso); }

/* ---------- visioni nella scheda ---------- */
details.aggiungi-visione summary { color: var(--accento); }
.elenco details.dentro form:not(.in-linea) { margin-top: 0.6rem; }
form.preferenza { margin: 0.5rem 0 0 !important; }
form.preferenza label { font-weight: 500; }

/* ---------- stasera ---------- */
.stasera-scelte { display: grid; gap: 0.7rem; }
.stasera-chip { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.etichetta-scoperta { font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  background: rgba(233, 69, 96, 0.16); color: var(--accento); white-space: nowrap; }
.stasera-chip .chip { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.stasera-chip .chip:has(input:checked) { background: var(--accento); border-color: var(--accento); color: #fff; }
.stasera-chip .chip input { accent-color: #fff; margin: 0; }
.stasera-proposte .riga-film { transition: background 0.12s, box-shadow 0.12s; border-radius: var(--raggio-s); }
.stasera-proposte .riga-film.accesa { background: color-mix(in srgb, var(--accento) 22%, transparent); }
.stasera-proposte .riga-film.scelta { background: color-mix(in srgb, var(--accento) 30%, transparent);
  box-shadow: 0 0 0 2px var(--accento); }
.in-abbonamento { color: var(--ok); font-weight: 600; }
.azioni-stasera { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0; }

/* Sfoglia, serie: «fin dove» solo se «L'ho abbandonata» è scelto
   (senza :has resta sempre visibile, che va bene lo stesso). */
fieldset:has(input[value="abbandonata"]:not(:checked)) .campo-abbandono { display: none; }