/* Cineforum — tema navy e oro, locandine in primo piano.
   Navy Pantone 19-3832 (#403F6F) per pannelli e superfici, una tonalità più
   profonda per lo sfondo pieno; oro (#E8B23A) come unico accento, usato con
   parsimonia: stelle, voti, azioni principali, link ed elementi attivi.
   Un unico foglio, nessun framework: per cambiare l'aspetto si parte da :root.
   Contrasti (WCAG): testo 15:1 su sfondo e 8,9:1 sui pannelli; testo
   secondario ≥ 5,5:1; oro ≥ 5:1; navy sui bottoni oro 8,7:1. */

:root {
  color-scheme: dark;

  /* Palette */
  --bg: #1b1a33;            /* navy profondo: sfondo pieno */
  --bg-glow: #2a2950;       /* alone in alto, effetto "sala" */
  --surface: #403f6f;       /* navy Pantone 19-3832: pannelli e card */
  --surface-2: #2b2a52;     /* campi e riquadri interni, più scuri del pannello */
  --border: #56558a;        /* bordi decorativi */
  --border-strong: #8f8ec2; /* bordi dei controlli (≥ 3:1 sul pannello) */
  --text: #f5f4fb;
  --text-soft: #e4e3f2;     /* trame e note lunghe */
  --muted: #c3c2dc;         /* testo secondario */
  --placeholder: #9d9cc4;
  --gold: #e8b23a;          /* unico accento */
  --gold-hover: #f2c45e;
  --gold-soft: rgba(232, 178, 58, 0.16);
  --on-gold: #1b1a33;       /* testo sui bottoni oro */
  --star-empty: #9a99cb;    /* contorno delle stelle vuote */
  --danger: #ff9b9b;
  --danger-soft: rgba(255, 155, 155, 0.14);

  /* Tipografia */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Titoli con grazie, da locandina; solo font di sistema */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", "DejaVu Serif", serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-2xl: 2.2rem;

  /* Spaziatura */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 12px 32px rgba(8, 7, 24, 0.55);
  --container: 1120px;
  --gutter: 1rem;
  /* Altezza della barra "Salva voto" fissa in basso (pulsante + imbottitura) */
  --submit-bar: calc(52px + 2 * var(--s3) + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
  :root { --gutter: 1.5rem; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 120% 60% at 50% -10%, var(--bg-glow), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s4); font-weight: 700; letter-spacing: -0.005em; }
h1, h2 { font-family: var(--font-display); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--s4); }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
small, .small { font-size: var(--text-sm); }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); text-decoration: underline; }

::selection { background: var(--gold); color: var(--on-gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.muted { color: var(--muted); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header e navigazione ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(27, 26, 51, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.brand span { color: var(--gold); font-style: italic; }
.brand:hover { color: var(--text); }
.brand:hover { text-decoration: none; }

.nav-links { display: flex; gap: var(--s1); }
.nav-links a {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); background: transparent; box-shadow: inset 0 -2px 0 var(--gold); }

.nav-user { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.nav-name { color: var(--muted); font-size: var(--text-sm); }

/* Sul telefono i link vanno su una seconda riga, scorrevole */
@media (max-width: 719px) {
  .nav-links { order: 3; width: 100%; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
}

/* ---------- Layout pagina ---------- */

main.container { flex: 1; padding-top: var(--s6); padding-bottom: var(--s7); }

.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.page-head h1, .page-head h2 { margin: 0; }

.section + .section { margin-top: var(--s7); }

.site-footer { border-top: 1px solid var(--border); padding: var(--s5) 0; color: var(--muted); font-size: var(--text-sm); }

/* ---------- Bottoni ---------- */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s5);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--on-gold);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
button:hover, .btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--on-gold); text-decoration: none; }

.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--gold); color: var(--gold); }

.btn-sm { min-height: 36px; padding: var(--s1) var(--s3); font-size: var(--text-sm); }
.btn-block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
form.inline { display: inline; margin: 0; }

/* ---------- Form ---------- */

.form { display: grid; gap: var(--s5); max-width: 40rem; }
.field { display: grid; gap: var(--s2); margin: 0; }
.field label, .field-label, legend { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.hint, .field label.hint { color: var(--muted); font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}
textarea { min-height: 4.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input[type="number"] { max-width: 8rem; font-size: var(--text-lg); font-weight: 700; }
input[type="date"] { max-width: 14rem; }
select { max-width: 22rem; }

.checkbox { display: flex; align-items: center; gap: var(--s2); font-weight: 400; }
.checkbox input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--s2); }

/* Scelte a "chip": radio nascosti ma accessibili, l'etichetta fa da bottone */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.chip:hover span { border-color: var(--gold); color: var(--text); }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.form-card {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-card h2 { font-size: var(--text-lg); margin: 0; }

/* Pagine con un solo form stretto (login, registrazione, invito) */
.narrow { max-width: 26rem; margin: var(--s5) auto 0; }
.narrow .form { max-width: none; }
.card-panel {
  padding: var(--s6) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-panel > :last-child { margin-bottom: 0; }

/* ---------- Messaggi flash ---------- */

.flashes { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.flash {
  margin: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
}
.flash-error { border-color: rgba(248, 113, 113, 0.4); border-left-color: var(--danger); background: var(--danger-soft); }
.flash-info { border-left-color: var(--muted); background: var(--surface); }

/* ---------- Griglia di locandine ---------- */

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s5) var(--s4);
}
@media (min-width: 720px) {
  .poster-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s6) var(--s5); }
}

.card { display: flex; flex-direction: column; min-width: 0; }
.card-link { display: flex; flex-direction: column; color: inherit; }
.card-link:hover { text-decoration: none; }

.poster {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.card-link:hover .poster img { transform: scale(1.04); }
.card-link:hover .poster { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
.card-link:hover .card-title { color: var(--gold); }

.card-body { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s3); flex: 1; }
.card-title { margin: 0; font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.card-meta { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.card-overview {
  margin: var(--s1) 0 var(--s3);
  color: var(--muted);
  font-size: var(--text-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card form { margin-top: auto; }

/* Punteggio: numero grande in oro + scala */
.score { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1); margin: 0; }
.score-value { font-size: var(--text-lg); font-weight: 800; color: var(--gold); }
.score-scale { color: var(--muted); font-size: var(--text-sm); }
.score-lg .score-value { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; }
.score-lg .score-scale { font-size: var(--text-lg); }

/* ---------- Ricerca ---------- */

.search-bar { display: flex; gap: var(--s2); max-width: 40rem; margin-bottom: var(--s6); }
.search-bar input { flex: 1; }

/* ---------- Scheda film ---------- */

.film-hero {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--s6);
}
/* Sul telefono la locandina è centrata e più piccola, così il voto arriva presto */
.film-hero .poster { width: min(60%, 220px); justify-self: center; }
.film-hero h1 { margin-bottom: var(--s3); }
.film-year { color: var(--muted); font-weight: 400; }
.overview { color: var(--text-soft); max-width: 46rem; font-size: 1.05rem; line-height: 1.65; }
.propose-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; }
.propose-form select { width: auto; }
.original-title { color: var(--muted); margin: calc(-1 * var(--s2)) 0 var(--s4); font-family: var(--font-display); }

/* Metadati TMDB: etichetta a sinistra, valore a destra (in colonna su mobile) */
.film-facts {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: var(--s2) var(--s4);
  max-width: 46rem;
  margin: var(--s5) 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
}
.film-facts dt { color: var(--muted); font-size: var(--text-sm); letter-spacing: 0.02em; padding-top: 0.1em; }
.film-facts dd { margin: 0; }
@media (max-width: 480px) {
  .film-facts { grid-template-columns: 1fr; gap: 0; }
  .film-facts dd { margin-bottom: var(--s2); }
}
.general-comment {
  white-space: pre-line;
  margin: var(--s4) 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--gold);
  color: var(--text-soft);
  font-family: var(--font-display);
  font-style: italic;
}

@media (min-width: 720px) {
  .film-hero { grid-template-columns: 300px 1fr; gap: var(--s6); align-items: start; margin-bottom: var(--s7); }
  .film-hero .poster { width: 100%; justify-self: stretch; }
}

.panels {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.panel {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel > :last-child { margin-bottom: 0; }
.panel-title {
  margin-bottom: var(--s4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.panel { box-shadow: var(--shadow); }

.panel-group + .panel-group { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border); }
.panel h3 { font-size: var(--text-base); margin-bottom: var(--s2); }

/* Barre dei sotto-voti */
.bars { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.bar-row { display: grid; grid-template-columns: 8.5rem 1fr 3.2rem; align-items: center; gap: var(--s3); font-size: var(--text-sm); }
.bar-label { color: var(--muted); }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.bar::before { content: ""; display: block; height: 100%; width: var(--pct, 0%); background: var(--gold); border-radius: inherit; }
.bar-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-note { grid-column: 1 / -1; margin-top: calc(var(--s2) * -1); color: var(--text-soft); font-style: italic; }

/* Voti esterni: tre riquadri */
.ext-ratings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: 0 0 var(--s4); }
.ext-ratings div { padding: var(--s3) var(--s2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; }
.ext-ratings dt { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ext-ratings dd { margin: var(--s1) 0 0; font-size: var(--text-lg); font-weight: 700; }

.meta-line { color: var(--muted); font-size: var(--text-sm); }

/* ---------- Liste (profilo, gruppi) ---------- */

.vote-list { display: grid; gap: var(--s3); }
.vote-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--s4);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.vote-item .poster { box-shadow: none; border-radius: var(--radius-sm); }
.vote-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.vote-item-head h2 { margin: 0; font-size: var(--text-base); }
.vote-item-head a { color: var(--text); }
.subscore-chips { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: var(--s2) 0; font-size: var(--text-sm); }
.subscore-chips li { padding: 2px var(--s2); border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.subscore-chips strong { color: var(--text); }
@media (min-width: 720px) {
  .vote-item { grid-template-columns: 92px 1fr; gap: var(--s5); padding: var(--s4); }
}

.list-rows { display: grid; gap: var(--s2); max-width: 40rem; }
.list-rows > li > a, .list-rows > li > .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.list-rows > li > a:hover { border-color: var(--gold); text-decoration: none; }

.badge { padding: 2px var(--s2); border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-size: 0.75rem; font-weight: 600; }

/* Profilo: email e password, una colonna sul telefono, due affiancate dove c'è spazio */
.account .form { max-width: none; }
.account-forms { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 720px) {
  .account-forms { grid-template-columns: 1fr 1fr; }
}
.account > .form { max-width: 40rem; }

.invite-box { display: grid; gap: var(--s3); }
.invite-box input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }

/* ---------- Stati vuoti e home pubblica ---------- */

.empty {
  padding: var(--s6) var(--s5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
.empty p:last-child { margin-bottom: 0; }
.empty .actions { justify-content: center; }

.hero { max-width: 40rem; margin: var(--s7) auto; text-align: center; }
.hero h1 { font-size: clamp(2.4rem, 8vw, 3.8rem); }
.hero p { color: var(--muted); font-size: var(--text-lg); }
.hero .actions { justify-content: center; margin-top: var(--s5); }

/* hidden deve vincere sui display impostati sopra (es. campo "Come l'hai visto") */
[hidden] { display: none !important; }

.below-card { margin-top: var(--s4); text-align: center; }
.flush { margin: 0; }
.text-center { text-align: center; }
input.input-short { max-width: 10rem; }

/* Nascosto alla vista ma letto dagli screen reader e raggiungibile da tastiera */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Form di voto: voto complessivo ---------- */

.overall-controls { display: flex; align-items: center; gap: var(--s4); }
.overall-controls input[type="range"][hidden] { display: none; }

/* Slider disegnato a mano: binario spesso e cursore grande, comodo col pollice */
.overall-controls input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.overall-controls input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.overall-controls input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.overall-controls input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--gold); }
.overall-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -12px;
  border: 3px solid var(--on-gold);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 2px 6px rgba(8, 7, 24, 0.6);
}
.overall-controls input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid var(--on-gold);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 2px 6px rgba(8, 7, 24, 0.6);
}
.overall-controls input[type="range"]:focus { outline: none; box-shadow: none; }
.overall-controls input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.overall-controls input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
input.overall-value {
  width: 5rem;
  min-height: 48px;
  flex: none;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gold);
}

/* ---------- Form di voto: stelline ----------
   Ogni stella è un radio 1–5. Sono piene la stella scelta e quelle prima;
   al passaggio del mouse si vede l'anteprima. Le regole partono dal
   contenitore (.stars:has(...)) e non dalle stelle vicine (label:has(~ ...)):
   Chrome non ricalcola sempre queste ultime quando cambia la selezione. */

.subscore { gap: var(--s1); }
.subscore legend { margin-bottom: var(--s1); }
.stars { display: inline-flex; gap: var(--s1); }
/* Ogni stella è un bersaglio di ~48px per il dito */
.stars label { position: relative; display: block; cursor: pointer; line-height: 0; padding: 4px; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.star { width: 2.5rem; height: 2.5rem; fill: transparent; stroke: var(--star-empty); stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.1s, stroke 0.1s, transform 0.1s; }
.stars:not(:hover):has(input[value="1"]:checked) label:nth-child(-n+1) .star,
.stars:not(:hover):has(input[value="2"]:checked) label:nth-child(-n+2) .star,
.stars:not(:hover):has(input[value="3"]:checked) label:nth-child(-n+3) .star,
.stars:not(:hover):has(input[value="4"]:checked) label:nth-child(-n+4) .star,
.stars:not(:hover):has(input[value="5"]:checked) label:nth-child(-n+5) .star { fill: var(--gold); stroke: var(--gold); }
.stars:has(label:nth-child(1):hover) label:nth-child(-n+1) .star,
.stars:has(label:nth-child(2):hover) label:nth-child(-n+2) .star,
.stars:has(label:nth-child(3):hover) label:nth-child(-n+3) .star,
.stars:has(label:nth-child(4):hover) label:nth-child(-n+4) .star,
.stars:has(label:nth-child(5):hover) label:nth-child(-n+5) .star { fill: var(--gold); stroke: var(--gold); }
.stars label:hover .star { transform: scale(1.1); }
.stars label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- Form di voto: note facoltative ---------- */

.note summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  cursor: pointer;
  color: var(--gold);
  font-size: var(--text-sm);
  list-style: none;
}
.note summary::-webkit-details-marker { display: none; }
.note summary::before { content: "+"; }
.note[open] summary::before { content: "−"; }
.note textarea { margin-top: var(--s1); min-height: 3.5rem; }

/* ---------- Scheda film: form di voto incorporato ---------- */

/* La barra "Salva" fissa non deve toccare "Media del gruppo" né coprire
   il fondo della pagina o i campi messi a fuoco */
.vote-form { margin: 0 0 var(--s7); gap: var(--s4); }
html:has(.vote-form) { scroll-padding-bottom: calc(var(--submit-bar) + var(--s4)); }
main.container:has(.vote-form) { padding-bottom: calc(var(--s7) + var(--submit-bar)); }
.vote-form .subscore + .subscore { padding-top: var(--s3); border-top: 1px solid var(--border); }
.form-card-mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft), var(--shadow); }
.form-card-mine h2 { color: var(--gold); }

/* "Dettagli visione": riquadro ripiegabile, il titolo è tutto toccabile */
.visione { padding: 0; gap: 0; }
.visione summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--s3) 3rem var(--s3) var(--s5);
  position: relative;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.visione summary::-webkit-details-marker { display: none; }
.visione summary::after {
  content: "";
  position: absolute;
  right: var(--s5);
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s;
}
.visione[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.visione-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.visione-title .hint { font-family: var(--font); font-size: var(--text-sm); }
.visione-summary { color: var(--muted); font-size: var(--text-sm); }
.visione-summary:empty { display: none; }
.visione-body { display: grid; gap: var(--s4); padding: 0 var(--s5) var(--s5); }

/* Pulsante Salva fisso in basso mentre il form è sullo schermo */
.vote-submit {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(27, 26, 51, 0), rgba(27, 26, 51, 0.94) 30%);
}
.vote-submit button { min-height: 52px; font-size: 1.05rem; box-shadow: var(--shadow); }
@media (min-width: 720px) {
  .vote-submit { margin: 0; padding-left: 0; padding-right: 0; }
}

/* Sul telefono i pannelli hanno un po' meno imbottitura */
@media (max-width: 479px) {
  .form-card, .panel { padding: var(--s4); }
  .visione { padding: 0; }
  .visione summary { padding-left: var(--s4); }
  .visione summary::after { right: var(--s4); }
  .visione-body { padding: 0 var(--s4) var(--s4); }
  .bar-row { grid-template-columns: 7rem 1fr 3rem; }
}

/* ---------- Movimento ridotto ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .card-link:hover .poster img, .stars label:hover .star { transform: none; }
  .visione summary::after { transition: none; }
}