/* =========================================================
   Beerba v2 — Menu TV
   Tutte le misure sono in vh: la pagina deve riempire uno
   schermo da 40" letto a tre metri, non una finestra.
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #07070a;
  --brick: #140e14;
  --neon: #ff2e93;
  --neon-core: #ffe4f2;
  --cream: #efe7ea;
  --smoke: #8a8188;
  --line: rgba(255, 46, 147, 0.18);
}

html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

body {
  background-color: var(--brick);
  background-image:
    radial-gradient(ellipse 60% 45% at 22% 12%, rgba(255, 46, 147, 0.14) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 82% 88%, rgba(255, 46, 147, 0.1) 0%, transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='38' viewBox='0 0 88 38'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.02' stroke-width='1'%3E%3Cpath d='M0 .5h88M0 19.5h88M0 37.5h88'/%3E%3Cpath d='M22 .5v19M66 .5v19M44 19.5v18M0 19.5v18M88 19.5v18'/%3E%3C/g%3E%3C/svg%3E");
}

.screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.em { color: var(--neon); font-style: italic; }

/* ---------- Testata ---------- */
.tv-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3vw;
  padding: 2.4vh 3.5vw;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 7, 10, 0.55);
}

.tv-brand { display: flex; align-items: center; gap: 1.6vh; text-decoration: none; color: inherit; }
.tv-b {
  width: 6.4vh; height: 6.4vh;
  border: 0.28vh solid var(--neon);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 3.1vh;
  color: var(--neon-core);
  text-shadow: 0 0 1.2vh var(--neon);
  box-shadow: 0 0 2.4vh rgba(255, 46, 147, 0.4), inset 0 0 1.4vh rgba(255, 46, 147, 0.2);
}
.tv-name { font-weight: 800; font-size: 3.4vh; letter-spacing: 0.1em; display: block; line-height: 1.1; }
.tv-sub {
  display: block;
  font-size: 1.5vh;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--neon);
}

.tv-claim {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 2.5vh;
  color: rgba(239, 231, 234, 0.9);
  text-align: center;
}

.tv-right { display: flex; align-items: center; gap: 2vh; flex-shrink: 0; }
.tv-clock { text-align: right; }

.tv-fs {
  width: 5vh; height: 5vh;
  min-width: 36px; min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--neon);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.tv-fs svg { width: 52%; height: 52%; }
.tv-fs:hover, .tv-fs:focus-visible { background: var(--neon); color: var(--ink); outline: none; }
.tv-fs:focus-visible { box-shadow: 0 0 0 3px rgba(255, 46, 147, 0.45); }
.tv-fs .ic-exit { display: none; }
.tv-fs.is-fs .ic-enter { display: none; }
.tv-fs.is-fs .ic-exit { display: block; }

/* Il cursore resta visibile: dal computer si può scorrere con la rotella */
.tv-brand, .tv-brand *, .tv-fs, .tv-fs * { cursor: pointer; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.tv-time {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 5vh;
  line-height: 1;
  color: var(--neon-core);
  text-shadow: 0 0 0.6vh #fff, 0 0 2vh var(--neon), 0 0 5vh rgba(255, 46, 147, 0.7);
  font-variant-numeric: tabular-nums;
}
.tv-day {
  display: block;
  font-size: 1.5vh;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 0.4vh;
}

/* ---------- Area di scorrimento ---------- */
.tv-stage { flex: 1; position: relative; overflow: hidden; }

/* Lo scorrimento lo governa il JavaScript, non un'animazione CSS:
   serviva poter intervenire con la rotella e poi riprendere. */
.tv-track { will-change: transform; }

/* Il contenuto non deve "apparire" di netto ai bordi dello schermo */
.tv-fade {
  position: absolute;
  left: 0; right: 0;
  height: 9vh;
  pointer-events: none;
  z-index: 3;
}
.tv-fade-top { top: 0; background: linear-gradient(var(--brick), transparent); }
.tv-fade-bottom { bottom: 0; background: linear-gradient(transparent, var(--brick)); }

.tv-copy { padding: 4vh 0; }

/* ---------- Sezioni del menu ---------- */
.tv-section { padding: 3.4vh 3.5vw; }

.tv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2vw;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.4vh;
  margin-bottom: 2.6vh;
}
.tv-section-title {
  font-family: "Playfair Display", Georgia, serif;
  /* ingrandito: sulla TV del bancone, da tre metri, prima non si leggeva */
  font-size: 5.4vh;
  line-height: 1;
  font-weight: 400;
}
.tv-section-count {
  font-size: 1.8vh;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--neon);
  font-weight: 700;
  white-space: nowrap;
}

.tv-drinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4vh 5vw;
}

.tv-drink { display: grid; gap: 0.5vh; }
.tv-drink-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2vw;
}
.tv-drink-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 3.45vh;
  line-height: 1.1;
}
.tv-drink-name .star { color: var(--neon); margin-right: 0.5vh; }
.tv-drink-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.14);
  transform: translateY(-0.6vh);
}
.tv-drink-price {
  font-weight: 800;
  font-size: 3.45vh;
  color: var(--neon-core);
  text-shadow: 0 0 1.4vh var(--neon);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tv-drink-ing { font-size: 2.2vh; color: var(--smoke); line-height: 1.45; }
.tv-drink-quote {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 2.25vh;
  color: rgba(239, 231, 234, 0.72);
}

/* ---------- Chiusura del giro ---------- */
.tv-outro {
  padding: 9vh 3.5vw;
  text-align: center;
  display: grid;
  gap: 1.6vh;
  justify-items: center;
}
.tv-outro-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 6.5vh;
  line-height: 1.05;
}
.tv-outro-text { font-size: 2.6vh; color: var(--smoke); }
.tv-outro-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 5vw;
  margin-top: 2vh;
  font-size: 2vh;
}
.tv-outro-grid dt {
  font-size: 1.4vh;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.6vh;
}

/* ---------- Ticker ---------- */
.ticker {
  flex-shrink: 0;
  background: var(--neon);
  color: #12000a;
  overflow: hidden;
  white-space: nowrap;
  padding: 1.1vh 0;
}
.ticker-track {
  display: inline-block;
  animation: tickerScroll 42s linear infinite;
  font-weight: 800;
  font-size: 1.9vh;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.ticker-track span { padding: 0 3vw; }
@keyframes tickerScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Schermi stretti (anteprima da telefono) ---------- */
@media (max-width: 900px) {
  .tv-claim { display: none; }
  .tv-drinks { grid-template-columns: 1fr; }
  .tv-outro-grid { grid-template-columns: 1fr; gap: 2vh; }
}

@media (prefers-reduced-motion: reduce) {
  /* Il menu continua a scorrere, ma più piano: fermarlo renderebbe
     irraggiungibile il resto della carta. Rallentare lo decide il JS.
     Qui si ferma solo il ticker, che è puramente decorativo. */
  .ticker-track { animation: none; }
}

/* ---------- La Ruota sulla TV ---------- */
.tv-wheel-intro {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 2.2vh;
  color: rgba(239, 231, 234, 0.75);
  margin-bottom: 2.6vh;
}
.tv-wheel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6vh 1.4vw;
}
.tv-slice {
  border: 1px solid rgba(255, 46, 147, 0.28);
  border-radius: 1vh;
  padding: 2vh 1.4vh;
  text-align: center;
  display: grid;
  gap: 0.5vh;
  align-content: center;
  min-height: 11vh;
}
.tv-slice-shot {
  background: linear-gradient(160deg, #ff4da2, #d1067f);
  border-color: transparent;
  color: #12000a;
}
.tv-slice-prize { background: rgba(255, 46, 147, 0.09); }
.tv-slice-malus { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.1); }

.tv-slice-label { font-weight: 900; font-size: 2.4vh; letter-spacing: 0.06em; }
.tv-slice-sub { font-weight: 700; font-size: 1.6vh; letter-spacing: 0.16em; opacity: 0.8; }
.tv-slice-prize .tv-slice-sub, .tv-slice-malus .tv-slice-sub { color: var(--neon); opacity: 1; }

@media (max-width: 900px) {
  .tv-wheel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lo spicchio speciale e la riga della Ruota d'Oro */
.tv-slice-super {
  background: linear-gradient(160deg, #ffe08a, #d99400);
  border-color: transparent;
  color: #1a0f00;
}
.tv-slice-super .tv-slice-sub { color: rgba(26, 15, 0, 0.75); opacity: 1; }

.tv-gold {
  margin-top: 2vh;
  padding: 1.8vh 2vh;
  border: 1px solid rgba(255, 196, 61, 0.45);
  border-radius: 1vh;
  background: rgba(255, 196, 61, 0.07);
  display: flex;
  align-items: baseline;
  gap: 1.6vw;
}
.tv-gold-tag {
  flex-shrink: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 2.6vh;
  color: #ffdf8a;
  text-shadow: 0 0 1.6vh rgba(255, 196, 61, 0.6);
}
.tv-gold-text { font-size: 1.9vh; color: rgba(239, 231, 234, 0.8); line-height: 1.45; }

.tv-wheel-note {
  margin-top: 1.6vh;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 2vh;
  color: var(--smoke);
}

/* ---------- Il muro delle foto sulla TV ---------- */
.tv-muro-intro {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 2.2vh;
  color: rgba(239, 231, 234, 0.75);
  margin-bottom: 2.8vh;
}
.tv-muro-riga {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.4vw;
}
/* stessa cornice al neon del sito */
.tv-foto {
  padding: 0.8vh;
  border-radius: 1vh;
  background: linear-gradient(160deg, rgba(255, 46, 147, 0.35), rgba(255, 46, 147, 0.08));
  box-shadow:
    0 0 0 1px rgba(255, 46, 147, 0.55),
    0 0 2.5vh rgba(255, 46, 147, 0.25),
    0 1.5vh 3vh rgba(0, 0, 0, 0.5);
}
.tv-foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.6vh;
  display: block;
}
.tv-foto figcaption {
  padding-top: 0.9vh;
  text-align: center;
  font-size: 1.5vh;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon);
}

@media (max-width: 900px) {
  .tv-muro-riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Più di cinque foto: la riga diventa un nastro che scorre */
.tv-muro-scorre {
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tv-muro-pista {
  /* La larghezza di una foto e lo spazio fra le foto stanno qui una volta
     sola, così il passo del giro si calcola da soli: una serie vale
     --n foto, ciascuna col suo spazio. Il JS deve dire solo quante sono. */
  --foto: calc((100vw - 7vw - 5.6vw) / 5);
  --spazio: 1.4vw;
  --passo: calc(var(--n, 6) * (var(--foto) + var(--spazio)));

  display: flex;
  flex-wrap: nowrap;
  gap: var(--spazio);
  width: max-content;
  animation: muroScorre var(--giro, 30s) linear infinite;
  will-change: transform;
}
@keyframes muroScorre {
  /* come sulla home: si trasla del passo esatto di una serie, non del 50%
     della pista — il 50% cade mezzo spazio più in là e a ogni giro scatta */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--passo)), 0, 0); }
}
/* la larghezza di una foto resta quella di cinque in riga */
.tv-muro-pista .tv-foto { flex: 0 0 var(--foto); }

@media (prefers-reduced-motion: reduce) {
  .tv-muro-pista { animation-duration: calc(var(--giro, 30s) * 3); }
}