.radio-screen {
  min-height: calc(100svh - 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2rem clamp(1.25rem, 5vw, 3.5rem) 3rem;
  text-align: center;
}

/* --- inclinometro --- */
.hero__gauge {
  position: relative;
  max-width: 540px;
  width: 100%;
  margin: 0.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: float 6.5s ease-in-out infinite;
  filter: drop-shadow(0 30px 60px rgba(255,46,63,0.14));
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.incl-instrument {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
}
.incl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* covers the baked-in needle AND car icon from the artwork so only our live rotating unit shows */
.incl-mask {
  position: absolute;
  top: 28%;
  height: 44%;
  background: #0a0a0b;
  border-radius: 50%;
  z-index: 2;
}
.incl-mask--left { left: 14.2%; width: 28.5%; }
.incl-mask--right { left: 57.5%; width: 28.5%; }

.incl-needle {
  position: absolute;
  top: 49.55%;
  width: 28.5%;
  height: 0;
  z-index: 3;
  transform-origin: 50% 50%;
  transition: transform 0.09s linear;
}
.incl-needle--left { left: 14.2%; }
.incl-needle--right { left: 57.5%; }

.incl-unit-icon {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 60%;
  height: auto;
  display: block;
  pointer-events: none;
}
.incl-unit-icon--right { width: 70%; }

/* short stubs only outside the car silhouette, not passing behind it (matches the original artwork) */
.incl-half {
  position: absolute;
  top: 50%;
  height: 0.5vw;
  max-height: 6px;
  min-height: 3px;
  transform: translateY(-50%);
}
.incl-half--red-left { left: 0; width: 24%; background: var(--red); border-radius: 999px 0 0 999px; box-shadow: 0 0 6px var(--red-dim); }
.incl-half--dim-right { left: 76%; width: 24%; background: #e7e8ea; border-radius: 0 999px 999px 0; }
.incl-half--dim-left { left: 0; width: 16%; background: #e7e8ea; border-radius: 999px 0 0 999px; }
.incl-half--red-right { left: 84%; width: 16%; background: var(--red); border-radius: 0 999px 999px 0; box-shadow: 0 0 6px var(--red-dim); }

.incl-readout {
  position: absolute;
  z-index: 4;
  bottom: 13.7%;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.3vw, 0.82rem);
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-shadow: 0 0 10px #000;
}
.incl-readout span { color: var(--red); margin-left: 0.3em; }
.incl-readout--left { left: 24.3%; }
.incl-readout--right { right: 23.3%; }

.incl-hint { color: var(--ink-faint); font-size: 0.82rem; }

/* spento (versione app, prima di premere play): quadrante grigio e fermo */
.hero__gauge--off .incl-instrument { filter: grayscale(1) opacity(0.5); transition: filter 0.4s ease; }
.hero__gauge--off { animation: none; }

@media (max-width: 500px) {
  .hero__gauge { max-width: 340px; }
}

/* --- now playing --- */
.radio-now { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

.radio-onair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.radio-onair__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background 0.3s, box-shadow 0.3s;
}
.radio-onair__dot.is-live {
  background: var(--red);
  box-shadow: 0 0 8px 2px var(--red-dim);
  animation: pulse 1.6s ease-in-out infinite;
}

.radio-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
}
.radio-track {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--ink);
  max-width: 26ch;
}

.radio-progress {
  width: 100%;
  max-width: 240px;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.3rem auto 0;
}
.radio-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--red);
  box-shadow: 0 0 8px 0 var(--red-dim);
  border-radius: 999px;
  transition: width 0.9s linear;
}

/* --- play: solo il triangolo rosso, niente cerchio pieno --- */
.radio-play {
  width: 84px;
  height: 84px;
  border: none;
  background: transparent;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.radio-play:hover { transform: scale(1.08); }
.radio-play:active { transform: scale(0.96); }
.radio-play:disabled { opacity: 0.35; cursor: not-allowed; }
.radio-play:disabled:hover { transform: none; }

.radio-play__icon {
  width: 48px;
  height: 48px;
  fill: currentColor;
  filter: drop-shadow(0 0 12px var(--red-dim));
}
.radio-play__icon--play { margin-left: 6px; }

.radio-play.is-playing .radio-play__icon--play { display: none; }
.radio-play:not(.is-playing) .radio-play__icon--pause { display: none; }

.radio-status {
  color: var(--ink-faint);
  font-size: 0.85rem;
  max-width: 40ch;
}

/* --- tracklist del set in onda --- */
.tracklist {
  width: 100%;
  max-width: 640px;
  margin-top: 1.8rem;
  text-align: left;
}
.tracklist__kicker {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.6rem;
}
.tracklist__list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.tracklist__item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--line);
}
.tracklist__time {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  flex: 0 0 4.2rem;
}
.tracklist__name {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-dim);
  min-width: 0;
}
.tracklist__name--id { color: var(--ink-faint); font-style: italic; }

/* --- intestazioni sezioni (oggi / settimana) --- */
.today,
.schedule {
  width: 100%;
  text-align: left;
}
.today { max-width: 640px; margin-top: 2.2rem; }
.schedule { max-width: 980px; margin-top: 2.6rem; }

.today__head,
.schedule__head { padding: 0.4rem 0.2rem 0; }

.today__kicker,
.schedule__kicker {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.15rem;
  display: block;
}
.today__title,
.schedule__title {
  font-family: var(--font-aggressive);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.today__empty {
  color: var(--ink-faint);
  font-size: 0.85rem;
  padding: 0 0.2rem;
  margin-top: 0.4rem;
}

/* --- linea rossa sottile "adesso": orizzontale, attraversa i nomi --- */
.slots__now {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--red);
  box-shadow: 0 0 6px 1px var(--red-dim);
  z-index: 2;
  pointer-events: none;
  transition: top 1s linear;
}

/* --- lineup di oggi: fasce da 2h in verticale, due colonne (00-12 | 12-24) --- */
.slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.8rem;
  margin-top: 0.9rem;
  padding: 0 0.2rem;
}
.slots__half {
  position: relative;
  border-top: 1px solid var(--line-strong);
}
.slots__row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 2.3rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.slots__time {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  width: 3rem;
  flex-shrink: 0;
}
.slots__dj {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-dim);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slots__dj--empty { color: var(--ink-faint); font-weight: 400; }
a.slots__dj:hover { color: var(--red); text-decoration: underline; }
.slots__row.is-now .slots__dj { color: var(--ink); }
.slots__row.is-now .slots__time { color: var(--red); }

/* --- scaletta settimanale: griglia, giorni in colonna, ore in verticale --- */
.grid {
  display: grid;
  grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr));
  gap: 0 0.5rem;
  margin-top: 0.9rem;
  padding: 0 0.2rem;
}
.grid__times,
.grid__day { display: flex; flex-direction: column; min-width: 0; }
.grid__head {
  height: 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-strong);
}
.grid__day-name {
  font-family: var(--font-aggressive);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.grid__day--today .grid__day-name { color: var(--red); }
.grid__day-date {
  font-family: var(--font-body);
  font-size: 0.64rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.grid__body { position: relative; }
.grid__time,
.grid__cell {
  height: 2.2rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.grid__time {
  font-family: var(--font-body);
  font-size: 0.66rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.grid__dj {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-dim);
  text-decoration: none;
  overflow: hidden;
  max-height: 2.2em; /* al massimo due righe: i nomi lunghi vanno a capo invece di essere tagliati */
}
.grid__day--today .grid__dj { color: var(--ink); }
.grid__cell.is-now .grid__dj { color: var(--red); }
a.grid__dj:hover { color: var(--red); text-decoration: underline; }

@media (max-width: 500px) {
  .today__title, .schedule__title { font-size: 1.5rem; }
  .slots { grid-template-columns: 1fr; gap: 0; }
  .slots__half + .slots__half { border-top: none; }
}

/* --- modellino 3D sulla pagina radio: più grande che in home --- */
.radio-screen .hero__stage { max-width: 760px; }
@media (max-width: 600px) { .radio-screen .hero__stage { max-width: 100%; } }