/* PAD – Due umani, un'AI · home
   Foglio di stile del nuovo sito. Non sostituisce /style.css,
   che resta in uso dalle pagine /producer/. */

@font-face {
  font-family: "Patrick Hand SC";
  src: url("/assets/fonts/patrick-hand-sc-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Lo studio: parete scura, legno del tavolo, luce di tungsteno */
  --wall: #140e0a;
  --wall-2: #1b130e;
  --wood: #2b1b11;
  --table: #2c1407;  /* il legno del tavolo, campionato dalla foto */
  --line: rgb(244 231 212 / 0.14);

  --ink: #f4e7d4;        /* le scritte delle tazze */
  --ink-2: #cdbba2;
  --ink-3: #a08b73;

  /* Il tubo al neon: usato solo per il marchio e i comandi di ascolto */
  --neon: #ffb54d;
  --neon-hot: #ffc977;
  --neon-core: #ffe7c2;
  --neon-dim: #6a4826;
  --on-neon: #1c1006;

  --onair: #db3b2b;
  --onair-off: #2a1410;

    --font-mug: "Patrick Hand SC", "Barlow Condensed", sans-serif;
  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --section: clamp(5rem, 10vw, 9rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  background: var(--wall);
  color: var(--ink);
  scrollbar-color: #5b3e23 var(--wall);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--wall);
  font: 400 clamp(1rem, 0.95rem + 0.2vw, 1.0625rem)/1.6 var(--font-text);
  caret-color: var(--neon);
  accent-color: var(--neon);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgb(255 181 77 / 0.55);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: var(--neon-hot); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.sprite { position: absolute; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--neon);
  color: var(--on-neon);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.skip:focus { top: 12px; }
.skip:hover { color: var(--on-neon); }

/* ── Barra ─────────────────────────────────────────────── */

.bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
}
.bar__brand {
  font: 700 1.05rem/1 var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.bar__brand span[aria-hidden] { color: var(--ink-3); }
.bar__sub { color: var(--ink-2); }
.bar__nav { display: flex; gap: clamp(16px, 2.4vw, 32px); }
.bar__nav a {
  font: 600 0.95rem/1 var(--font-text);
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 0;
}
.bar__nav a:hover { color: var(--ink); }

/* ── Lo studio (primo schermo) ─────────────────────────── */

.studio { position: relative; }

.studio__wall {
  position: relative;
  padding: clamp(64px, 9vh, 96px) var(--gutter) 0;
  text-align: center;
}

.onair {
  position: absolute;
  left: var(--gutter);
  top: clamp(72px, 9vh, 104px);
}
.onair span {
  display: inline-block;
  padding: 7px 13px 6px;
  font: 700 0.95rem/1 var(--font-head);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9705e;
  background: var(--onair-off);
  border: 2px solid #4b2219;
  border-radius: 3px;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 400ms var(--ease-out);
}
.studio[data-onair="true"] .onair span {
  color: #fff3e8;
  background: var(--onair);
  border-color: #ff8e72;
  box-shadow: 0 0 18px 2px rgb(219 59 43 / 0.55), 0 6px 30px rgb(219 59 43 / 0.35);
}

.sign { font-weight: 400; }
/* L'insegna al neon è quella vera della copertina: fondo nero, fusa sulla parete in "screen" */
.sign__neon { display: block; }
.sign__neon img {
  width: auto;
  height: min(clamp(6.5rem, 14vw, 10.5rem), 16vh);
  margin: 0 auto;
  mix-blend-mode: screen;
  animation: power-on 1.3s steps(1, end) 0.25s both;
}
.sign__sub {
  display: block;
  margin-top: 0.35em;
  font: 600 clamp(1.05rem, 2vw, 1.5rem)/1 var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: 0.2em;
}

/* Il neon si accende una volta, con due sfarfallii, come un'insegna vera. */
@keyframes power-on {
  0%   { filter: brightness(0.25) saturate(0.6); }
  12%  { filter: none; }
  18%  { filter: brightness(0.25) saturate(0.6); }
  34%  { filter: brightness(0.9); }
  40%  { filter: brightness(0.3) saturate(0.6); }
  100% { filter: none; }
}

.studio__lead {
  max-width: 62ch;
  margin: clamp(0.75rem, 1.8vh, 1.25rem) auto 0;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink-2);
}

/* Il tavolo: lettore dell'ultima puntata e canali, sul legno sotto la foto */
.tableband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px clamp(24px, 4vw, 48px);
  margin-top: clamp(1.25rem, 3vh, 2rem);
  padding: 0 var(--gutter);
}
/* Il lettore sta sulla parete, subito sotto l'insegna: è la prima cosa che si può fare */
.tableband .now {
  padding: 10px 22px 10px 10px;
  background: rgb(255 214 170 / 0.045);
  border: 1px solid rgb(255 200 150 / 0.14);
  border-radius: 40px;
}
.tableband .now:has(.scrub:not([hidden])) { border-radius: 28px; }
.now {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 10px;
  width: min(100%, 640px);
  text-align: left;
}
.now__text { min-width: 0; }
.now__title {
  font: 600 clamp(1.1rem, 1rem + 0.5vw, 1.35rem)/1.2 var(--font-head);
  color: var(--ink);
}
.now__num { color: var(--neon); margin-right: 0.15em; }
.now__meta {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.now__error {
  grid-column: 1 / -1;
  padding: 0 0 6px 10px;
  font-size: 0.9rem;
  color: #ffb4a3;
}

/* La voce di PAD: barre ferme a riposo, si muovono quando lo studio è in onda.
   È un indicatore di "in onda", non legge l'audio (il file arriva da un altro dominio). */
.wave {
  width: clamp(84px, 8vw, 116px);
  height: 40px;
  fill: var(--neon);
  opacity: 0.4;
  transition: opacity 300ms ease;
}
/* A riposo: il profilo di un'onda. In onda: ogni barra a un ritmo diverso. */
.wave rect {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(calc(0.12 + 0.5 * sin(var(--i) * 0.55) * sin(var(--i) * 0.55)));
}
[data-onair="true"] .wave { opacity: 1; }
[data-onair="true"] .wave rect {
  animation: talk 0.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.37s);
}
[data-onair="true"] .wave rect:nth-child(odd)  { animation-name: talk-low; animation-duration: 0.38s; }
[data-onair="true"] .wave rect:nth-child(3n)   { animation-name: talk-high; animation-duration: 0.61s; }
[data-onair="true"] .wave rect:nth-child(5n+2) { animation-duration: 0.83s; }
@keyframes talk      { 0% { transform: scaleY(0.12); } 100% { transform: scaleY(0.7); } }
@keyframes talk-low  { 0% { transform: scaleY(0.08); } 100% { transform: scaleY(0.45); } }
@keyframes talk-high { 0% { transform: scaleY(0.2); }  100% { transform: scaleY(1); } }

.tableband__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(16px, 2vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tableband__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}
.tableband__links a:hover { color: var(--neon-hot); }
.mark { width: 20px; height: 20px; fill: currentColor; flex: none; }
.mark--spotify { color: #1ed760; }
.mark--youtube { color: #ff3b3b; }
.mark--apple { color: #b56cf0; }

/* Pulsante play: la luce che manda lo studio in onda */
.play {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--neon);
  color: var(--on-neon);
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.8);
  transition: background 160ms ease, transform 160ms var(--ease-out), box-shadow 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.play:hover { background: var(--neon-hot); }
.play:active { transform: scale(0.96); }
.play__icon { grid-area: 1 / 1; width: 26px; height: 26px; fill: currentColor; }
.play__icon--play { transform: translateX(1px); }
.play__icon--pause,
.play[data-state="playing"] .play__icon--play { display: none; }
.play[data-state="playing"] .play__icon--pause { display: block; }
.play[data-state="loading"] .play__icon { animation: breathe 0.9s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: 0.35; } }

.play__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.play--small {
  width: auto;
  height: 48px;
  grid-auto-flow: column;
  gap: 10px;
  padding: 0 22px 0 16px;
  border-radius: 24px;
  font: 600 1rem/1 var(--font-text);
}
.play--small .play__icon { grid-area: auto; width: 20px; height: 20px; }
.play--small .play__label { position: static; width: auto; height: auto; clip-path: none; }

/* Barra di avanzamento */
.scrub {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 6px 10px;
}
.scrub[hidden] { display: none; }
.scrub__time {
  min-width: 3.4em;
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.scrub__time[data-time="total"] { text-align: right; }
.scrub__range {
  --p: 0%;
  flex: 1;
  height: 20px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.scrub__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--neon) var(--p), rgb(244 231 212 / 0.18) var(--p));
}
.scrub__range::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(244 231 212 / 0.18); }
.scrub__range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--neon); }
.scrub__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--neon-core);
  box-shadow: 0 0 0 3px rgb(255 181 77 / 0.35);
}
.scrub__range::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--neon-core);
  box-shadow: 0 0 0 3px rgb(255 181 77 / 0.35);
}

/* La foto dei tre a tutta larghezza: la parete sfuma in alto, il legno del tavolo continua in basso */
.studio__table {
  position: relative;
  margin: clamp(1rem, 3vh, 2rem) 0 0;
  /* sotto la foto il legno del tavolo continua nella sezione successiva */
  background: linear-gradient(to bottom, var(--wall) 50%, var(--table));
}
.studio__table img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* ── L'ultima puntata ──────────────────────────────────── */

.episode {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) var(--section);
  background: linear-gradient(to bottom, var(--table), var(--wall) clamp(80px, 10vw, 160px));
}
.episode__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(32px, 6vw, 96px);
  max-width: 1200px;
  margin: 0 auto;
}
.episode__q {
  grid-column: 1;
  grid-row: 1 / span 3;
  font: 700 clamp(2.1rem, 1.4rem + 3vw, 4.1rem)/1.02 var(--font-head);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.episode__q::before { content: "«"; color: var(--neon); margin-right: 0.04em; }
.episode__q::after { content: "»"; color: var(--neon); margin-left: 0.04em; }
.episode__meta {
  grid-column: 2;
  font: 600 0.95rem/1.3 var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  padding-top: 0.6rem;
}
.episode__body {
  grid-column: 2;
  max-width: 62ch;
  margin-top: 1.1rem;
  color: var(--ink-2);
}
.episode__body p + p { margin-top: 0.9em; }
.episode__actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 2rem;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
}
.textlink svg { width: 16px; height: 16px; color: var(--neon); transition: translate 200ms var(--ease-out); }
.textlink:hover svg { translate: 2px -2px; }

/* ── Chi siamo: i tre al tavolo ────────────────────────── */

.crew {
  padding: var(--section) var(--gutter);
  background: var(--wall-2);
  border-top: 1px solid var(--line);
}
.crew__intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.crew__intro h2 {
  font: 700 clamp(2rem, 1.4rem + 2.6vw, 3.5rem)/1.04 var(--font-head);
}
.crew__intro p {
  max-width: 60ch;
  margin: 1.25rem auto 0;
  color: var(--ink-2);
}

.crew__table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  max-width: 1200px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0;
  list-style: none;
}
.seat__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / 0.9);
}
.seat__name {
  margin-top: 1.2rem;
  font: 400 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1 var(--font-mug);
  letter-spacing: 0.03em;
  color: var(--ink);
}
.seat__role {
  margin: 0.35rem 0 0.9rem;
  font-style: italic;
  color: var(--neon);
}
.seat p:not(.seat__role) { color: var(--ink-2); }
.seat p + p:not(.seat__role) { margin-top: 0.75em; }

.seat--pad .seat__photo {
  outline: 1px solid rgb(255 181 77 / 0.45);
  outline-offset: -1px;
}
.seat--pad .seat__name {
  color: var(--neon-core);
  text-shadow: 0 0 6px rgb(255 160 60 / 0.8), 0 0 18px rgb(255 140 40 / 0.45);
}
.seat .seat__quote { font-style: italic; color: var(--ink); }

/* ── Dove ascoltarci ───────────────────────────────────── */

.listen {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--section) var(--gutter);
}
.listen h2 {
  font: 700 clamp(2.1rem, 1.3rem + 3.4vw, 4.4rem)/1.02 var(--font-head);
}
.listen h2 span { display: block; color: var(--ink-3); }
.listen__list {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.platform {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 24px);
  padding: clamp(18px, 2.6vw, 26px) 4px;
  border-top: 1px solid var(--line);
  font: 600 clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem)/1.1 var(--font-head);
  text-decoration: none;
  color: var(--ink);
}
.platform__mark { flex: none; width: clamp(26px, 3vw, 34px); height: clamp(26px, 3vw, 34px); fill: currentColor; }
.listen__list li:nth-child(1) .platform__mark { color: #1ed760; }
.listen__list li:nth-child(2) .platform__mark { color: #ff3b3b; }
.listen__list li:nth-child(3) .platform__mark { color: #b56cf0; }
.listen__list li:nth-child(4) .platform__mark { color: #25d1da; }
.mark--instagram { color: #ff4f8b; }
.mark--substack { color: #ff6719; }
.follow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.follow a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.follow a:hover { color: var(--neon-hot); }
.platform__name { flex: 1; }
.platform__arrow {
  width: 28px; height: 28px;
  color: var(--ink-3);
  transition: translate 240ms var(--ease-out), color 160ms ease;
}
.platform:hover { color: var(--neon-hot); }
.platform:hover .platform__arrow { color: var(--neon); translate: 4px -4px; }

.listen__mail {
  margin-top: 2rem;
  color: var(--ink-2);
}
.listen__mail a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* ── Piede ─────────────────────────────────────────────── */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-3);
}
.foot a { color: var(--ink-2); }

/* ── Schermi stretti ───────────────────────────────────── */

@media (max-width: 899px) {
  .episode__inner { grid-template-columns: 1fr; }
  .episode__q, .episode__meta, .episode__body, .episode__actions { grid-column: 1; grid-row: auto; }
  .episode__meta { padding-top: 1.25rem; }

  .crew__table { grid-template-columns: 1fr; max-width: 560px; }
  .seat {
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: 20px;
    align-items: end;
  }
  .seat__photo { grid-row: 1 / span 2; }
  .seat__name { margin-top: 0; }
  .seat__role { margin-bottom: 0.2rem; }
  .seat p:not(.seat__role) { grid-column: 1 / -1; margin-top: 1rem; }
  .seat p + p:not(.seat__role) { margin-top: 0.5em; }
}

@media (max-width: 699px) {
  .bar__nav a:not(:first-child) { display: none; }
  .onair { position: static; margin-bottom: 1.4rem; }
  .now { column-gap: 14px; }
  .wave { width: 64px; height: 32px; }
  .tableband .now { padding-right: 16px; }
  .play:not(.play--small) { width: 56px; height: 56px; }
  .studio__table img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sign__neon img { animation: none; }
  [data-onair="true"] .wave rect { animation: none; transform: scaleY(0.6); }
  .play, .platform__arrow, .textlink svg { transition: none; }
}

/* ── Pagine interne: elenco puntate e pagina della puntata ── */

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.now__title a { color: inherit; text-decoration: none; }
.now__title a:hover { color: var(--neon-hot); }

.episodes,
.ep {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(104px, 13vw, 150px) var(--gutter) var(--section);
}

/* Elenco */
.episodes__head h1 {
  font: 700 clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem)/0.98 var(--font-head);
}
.episodes__head p {
  max-width: 52ch;
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  color: var(--ink-2);
}
.eplist {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.eprow {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.2rem, 7vw, 6rem) minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) 0;
  border-top: 1px solid var(--line);
}
.eprow__num {
  font: 700 clamp(2rem, 1.4rem + 2.6vw, 3.6rem)/0.9 var(--font-head);
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}
.eprow__title {
  font: 600 clamp(1.35rem, 1.1rem + 1.1vw, 2rem)/1.12 var(--font-head);
}
.eprow__title a { color: var(--ink); text-decoration: none; }
.eprow__title a::after { content: ""; position: absolute; inset: 0; }
.eprow:hover .eprow__title a { color: var(--neon-hot); }
.eprow__title a:focus-visible { outline: none; }
.eprow:has(a:focus-visible) { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 4px; }
.eprow__meta {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.eprow__quote { max-width: 62ch; margin: 1rem 0 0; }
.eprow__quote p {
  font-style: italic;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: var(--ink-2);
}
.eprow__quote p::before { content: "«"; color: var(--neon); margin-right: 0.1em; font-style: normal; }
.eprow__quote p::after { content: "»"; color: var(--neon); margin-left: 0.1em; font-style: normal; }
.eprow__quote footer {
  margin-top: 0.4rem;
  font: 600 0.8125rem/1.3 var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eprow__quote.quote--pad p { color: var(--neon-core); }

/* Pagina della puntata */
.ep__head { max-width: 900px; }
.ep__title { font: 700 clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem)/1.02 var(--font-head); }
.ep__num { color: var(--neon); margin-right: 0.12em; font-variant-numeric: tabular-nums; }
.ep__question {
  max-width: 46ch;
  margin-top: 1.25rem;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-2);
}
.ep__player {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: 10px 22px 10px 10px;
  background: rgb(255 214 170 / 0.045);
  border: 1px solid rgb(255 200 150 / 0.14);
  border-radius: 40px;
}
.ep__player:has(.scrub:not([hidden])) { border-radius: 28px; }
.ep__links { justify-content: flex-start; margin-top: 0.9rem; }

.ep__quotes,
.ep__body { margin-top: clamp(4rem, 8vw, 7rem); }
.ep__quotes h2,
.ep__body h2 {
  max-width: 30ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.08 var(--font-head);
}

.quotes { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
.quote { margin: 0; }
.quote:nth-child(even) { padding-left: clamp(0px, 10vw, 12rem); }
.quote blockquote { margin: 0; }
.quote p {
  max-width: 36ch;
  font: 600 clamp(1.45rem, 1.1rem + 1.6vw, 2.4rem)/1.18 var(--font-head);
  color: var(--ink);
}
.quote p::before { content: "«"; color: var(--neon); margin-right: 0.06em; }
.quote p::after { content: "»"; color: var(--neon); margin-left: 0.06em; }
.quote--pad p { color: var(--neon-core); }
.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 0.9rem;
}
.quote__who { font-style: italic; color: var(--ink-2); }
.quote--pad .quote__who { color: var(--neon); }
.quote__seek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px 5px 9px;
  border: 1px solid rgb(255 200 150 / 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 0.8125rem/1 var(--font-text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.quote__seek svg { width: 12px; height: 12px; fill: var(--neon); }
.quote__seek:hover { border-color: var(--neon); color: var(--neon-hot); }

.ep__body { max-width: 68ch; }
.prose p {
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--ink-2);
}
.prose p + p { margin-top: 1em; }
.ep__note { font-style: italic; color: var(--ink-3); }
.ep__source { margin-top: 1.5rem; font-size: 0.875rem; color: var(--ink-3); }

.epnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 20px;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.epnav__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--ink);
  text-decoration: none;
}
.epnav__link--next { align-items: flex-end; text-align: right; }
.epnav__link:hover .epnav__title { color: var(--neon-hot); }
.epnav__dir {
  font: 600 0.8125rem/1 var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.epnav__title { font: 600 1.15rem/1.2 var(--font-head); transition: color 160ms ease; }
.epnav__all { align-self: center; padding: 8px 0; font-weight: 600; }

@media (max-width: 699px) {
  .ep__player { padding-right: 16px; }
  .quote:nth-child(even) { padding-left: 0; }
  .epnav { grid-template-columns: 1fr; }
  .epnav__link--next { align-items: flex-start; text-align: left; }
  .epnav__all { order: 3; }
}

/* ── Oltre la puntata: clip e articoli ── */

.oltre__sec,
.ep__clips { margin-top: clamp(4rem, 8vw, 6.5rem); }
.oltre__sec h2,
.ep__clips h2 {
  margin-bottom: 0.75rem;
  font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.08 var(--font-head);
}
.ep__clips h2 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.oltre__intro { max-width: 56ch; margin-bottom: 2rem; color: var(--ink-2); }
.oltre__more { margin-top: 2rem; }

.clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.clips--row { grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 280px)); }
/* Ogni clip è un riquadro verticale come un reel: la frase è il contenuto */
.clip__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  aspect-ratio: 4 / 5;
  padding: clamp(18px, 2vw, 24px);
  color: var(--ink);
  text-decoration: none;
  background: var(--wall-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 200ms ease, translate 260ms var(--ease-out);
}
.clip__link:hover { border-color: rgb(255 181 77 / 0.6); translate: 0 -3px; }
.clip__title {
  font: 600 clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem)/1.14 var(--font-head);
  text-wrap: balance;
}
.clip__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--neon);
}
.clip__cta svg { width: 14px; height: 14px; fill: currentColor; }
.clip__link:hover .clip__cta { color: var(--neon-hot); }
.clip__ep {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 4px 0;
  font-size: 0.875rem;
  color: var(--ink-3);
  text-decoration: none;
}
.clip__ep:hover { color: var(--neon-hot); }

.arts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.arts--inline { margin-top: 2.5rem; }
.art { padding: clamp(18px, 2.4vw, 26px) 0; border-top: 1px solid var(--line); }
.art__title { font: 600 clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem)/1.15 var(--font-head); }
.art__title a { color: var(--ink); text-decoration: none; }
.art__title svg {
  width: 18px; height: 18px;
  margin-left: 0.3em;
  vertical-align: -0.1em;
  color: var(--neon);
  transition: translate 200ms var(--ease-out);
}
.art__title a:hover { color: var(--neon-hot); }
.art__title a:hover svg { translate: 2px -2px; }
.art__sub { margin-top: 0.35rem; font-style: italic; color: var(--ink-2); }
.art__meta { margin-top: 0.4rem; font-size: 0.875rem; color: var(--ink-3); }
.art__meta a { color: var(--ink-2); }

@media (max-width: 699px) {
  .clip__link { aspect-ratio: 3 / 4; padding: 14px; gap: 1rem; }
  .clip__title { font-size: 1.08rem; }
  .clip__cta { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .clip__link, .art__title svg { transition: none; }
}

/* ── Home: puntate precedenti e Oltre la puntata ── */

.more {
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--line);
}
.episode + .more { border-top: 0; padding-top: 0; }
.more__inner { max-width: 1100px; margin: 0 auto; }
.more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
.more__head h2 { font: 700 clamp(2rem, 1.4rem + 2.6vw, 3.4rem)/1.04 var(--font-head); }
.more__intro { max-width: 56ch; margin-top: 0.9rem; color: var(--ink-2); }
.eplist--home { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.clips--home { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 900px) {
  .clips--home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.arts--home { margin-top: clamp(2rem, 4vw, 3rem); }

/* ── Officina PAD: la fabbrica di graffette ── */

@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.arcade { display: grid; justify-items: center; gap: 14px; }
/* Il cabinato: marquee con l'insegna accesa, cornice scura, schermo a tubo catodico */
.arcade__cabinet {
  padding: 10px 12px 14px;
  background: linear-gradient(to bottom, #241810, #120c08);
  border: 1px solid rgb(255 200 150 / 0.2);
  border-radius: 10px 10px 6px 6px;
  box-shadow: 0 34px 70px -34px rgb(0 0 0 / 0.95), inset 0 1px 0 rgb(255 205 160 / 0.08);
}
.arcade__marquee {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: -2px -4px 10px;
  padding: 8px 10px 9px;
  background: #090605;
  border: 1px solid rgb(255 181 77 / 0.28);
  border-radius: 6px 6px 3px 3px;
}
.arcade__marquee img {
  width: auto;
  height: 34px;
  mix-blend-mode: screen;
}
.arcade__marquee span {
  font: 400 0.5625rem/1.4 "Press Start 2P", var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.arcade__screen {
  position: relative;
  padding: 8px;
  background: #050302;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #2a1d14, inset 0 0 24px rgb(0 0 0 / 0.9);
}
.arcade__screen::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / 0.45) 100%);
  box-shadow: inset 0 0 18px rgb(255 160 60 / 0.06);
}
.arcade__canvas {
  display: block;
  width: min(84vw, calc((100svh - 330px) * 9 / 16), 360px);
  height: auto;
  aspect-ratio: 9 / 16;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  border-radius: 10px;
}
.arcade__canvas:focus-visible { outline: 2px solid rgb(255 181 77 / 0.4); outline-offset: 2px; }
.arcade__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.arcade__btn {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--neon);
  color: var(--on-neon);
  font: 400 0.6875rem/1 "Press Start 2P", var(--font-head);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease;
}
.arcade__btn:hover { background: var(--neon-hot); }
.arcade__btn--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgb(255 200 150 / 0.24);
}
.arcade__btn--quiet:hover { background: transparent; border-color: var(--neon); color: var(--neon-hot); }
.arcade__help { max-width: 40ch; text-align: center; font-size: 0.875rem; color: var(--ink-3); }

/* Pulsante "Gioca mentre ascolti" accanto ai canali */
.gameopen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--neon);
  font: 600 0.95rem/1.2 var(--font-text);
  cursor: pointer;
}
.gameopen:hover { color: var(--neon-hot); }
.gameopen svg { width: 20px; height: 20px; fill: currentColor; }

/* La finestra di gioco: la pagina (e la puntata) restano sotto */
.gamebox {
  width: min(100vw - 24px, 460px);
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--wall-2);
  border: 1px solid rgb(255 200 150 / 0.24);
  border-radius: 8px;
}
.gamebox::backdrop { background: rgb(10 6 4 / 0.82); }
.gamebox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--line);
}
.gamebox__head h2 { font: 700 1.25rem/1.1 var(--font-head); }
.gamebox__tools { display: flex; align-items: center; gap: 6px; }
.gamebox__audio,
.gamebox__close {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgb(255 200 150 / 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 0.8125rem/1 var(--font-text);
  cursor: pointer;
}
.gamebox__audio { grid-auto-flow: column; gap: 6px; }
.gamebox__audio svg { width: 12px; height: 12px; fill: var(--neon); }
.gamebox__close { padding: 0; }
.gamebox__close svg { width: 16px; height: 16px; }
.gamebox__audio:hover,
.gamebox__close:hover { border-color: var(--neon); color: var(--neon-hot); }
.gamebox__game { padding: 18px 12px 20px; }
.gamebox .arcade__canvas { width: min(76vw, calc((100svh - 360px) * 9 / 16), 330px); }
.gamebox .arcade__help { display: none; }

/* Pagina Officina */
.officina__game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.officina__story h2 { font: 700 clamp(1.8rem, 1.3rem + 2vw, 2.8rem)/1.05 var(--font-head); }
.officina__story .prose { margin-top: 1.25rem; }
.officina__story .ep__player { max-width: 520px; }
.officina__rules { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.officina__rules li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; color: var(--ink-2); }
.officina__rules b { font-family: var(--font-head); font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.soon { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.soon li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 8px 32px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--line);
}
.soon h3 { font: 600 clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem)/1.15 var(--font-head); }
.soon p { color: var(--ink-2); max-width: 62ch; }
.soon .soon__state {
  display: block;
  margin-top: 0.4rem;
  font: 600 0.8125rem/1.3 var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 899px) {
  .officina__game { grid-template-columns: 1fr; }
  .officina__arcade { order: -1; }
  .soon li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade__btn { transition: none; }
}
.officina__arcade:empty { display: none; }

/* PAD Arcade: la mappa della sala */
.arcade-sign { display: flex; align-items: flex-end; gap: 0.35em; flex-wrap: wrap; }
.arcade-sign img { width: clamp(150px, 22vw, 260px); height: auto; mix-blend-mode: screen; }
.arcade-sign span {
  font: 400 clamp(1.1rem, 0.8rem + 1.6vw, 2rem)/1 "Press Start 2P", var(--font-head);
  color: var(--neon-core);
  text-shadow: 0 0 6px var(--neon), 0 0 18px rgb(255 154 46 / 0.55);
  padding-bottom: 0.6em;
}
.arcade-hall__count {
  font: 400 0.6875rem/1.6 "Press Start 2P", var(--font-head);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.arcade-hall__count b { color: var(--neon); font-weight: 400; }
.arcade-hall__count a { color: var(--neon); }
.jukebox { margin-top: clamp(2rem, 4vw, 3rem); max-width: 560px; }
.jukebox h2 { font: 600 1.25rem/1.1 var(--font-head); color: var(--ink-2); margin-bottom: 0.75rem; }
.hall { margin-top: clamp(2.5rem, 5vw, 4rem); }
.map {
  list-style: none; margin: 0; padding: clamp(14px, 2vw, 22px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
  border: 1px solid var(--line); border-radius: 6px;
  /* moquette cosmica da sala giochi */
  background-color: #120b16;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 181 77 / 0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgb(219 59 43 / 0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 45% 85%, rgb(74 163 223 / 0.3) 0 1.5px, transparent 2px),
    radial-gradient(circle at 85% 15%, rgb(244 231 212 / 0.25) 0 1px, transparent 1.5px);
  background-size: 46px 46px, 58px 58px, 38px 38px, 30px 30px;
}
.room > a, .room > div {
  display: grid; justify-items: start; gap: 4px; height: 100%;
  padding: 14px 12px 12px; border-radius: 4px;
  background: rgb(20 14 10 / 0.88); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.room__cab { width: 32px; height: 48px; margin-bottom: 6px; image-rendering: pixelated; }
.room__n { font: 400 0.5625rem/1.4 "Press Start 2P", var(--font-head); color: var(--ink-3); }
.room__t { font: 600 1.125rem/1.1 var(--font-head); color: var(--ink); }
.room__m { font-size: 0.875rem; color: var(--ink-3); }
.room--open > a { border-color: rgb(255 181 77 / 0.45); box-shadow: inset 0 0 24px rgb(255 154 46 / 0.08); transition: border-color 200ms var(--ease-out), translate 200ms var(--ease-out); }
.room--open .room__n { color: var(--neon); }
.room--open .room__m { color: var(--ink-2); }
.room--open .room__cab { filter: drop-shadow(0 0 6px rgb(255 154 46 / 0.6)); }
.room--open > a:hover { border-color: var(--neon); translate: 0 -2px; }
.room--open > a:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.room--closed > div { opacity: 0.55; }
.room--closed .room__t { color: var(--ink-2); }
.room--door > div { border-style: dashed; justify-content: center; align-content: center; }
.room--door .room__t { font-family: "Press Start 2P", var(--font-head); font-size: 0.75rem; color: var(--neon-core); }
.sala__title { font: 700 clamp(2rem, 1.4rem + 2.6vw, 3.4rem)/1.02 var(--font-head); margin-top: 0.75rem; }
.ep__arcade { margin-top: 1.25rem; color: var(--ink-2); }
.ep__arcade a:not(.textlink) { color: var(--neon); }
@media (prefers-reduced-motion: reduce) { .room--open > a:hover { translate: none; } }
.episodes__head .arcade-hall__count { font-size: 0.8125rem; margin-top: 1.25rem; }
.map--home { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 1.5rem; }
.more__intro .arcade-hall__count { font-size: 0.75rem; white-space: nowrap; }

/* PAD Arcade: la sala in 3D */
.sala3d { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sala3d__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #050302; border: 1px solid rgb(255 181 77 / 0.35); border-radius: 6px;
  box-shadow: 0 0 0 6px #120c08, 0 0 40px rgb(255 154 46 / 0.12);
}
.sala3d__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.sala3d__canvas:active { cursor: grabbing; }
.sala3d__canvas:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; }
.sala3d__stage:fullscreen { border: 0; border-radius: 0; display: grid; place-items: center; }
.sala3d__stage:fullscreen .sala3d__canvas { width: min(100vw, 100vh * 16 / 9); height: auto; aspect-ratio: 16 / 9; }
.sala3d__intro {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 16px; text-align: center; background: rgb(8 5 3 / 0.55);
}
.sala3d__intro[hidden] { display: none; }
.sala3d__intro p { color: var(--ink-2); max-width: 36ch; font-size: 0.9375rem; }
.sala3d__enter, .sala3d__go {
  font: 400 0.75rem/1 "Press Start 2P", var(--font-head);
  padding: 14px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--neon); color: var(--on-neon);
  box-shadow: 0 0 18px rgb(255 154 46 / 0.5);
  transition: background 200ms var(--ease-out);
}
.sala3d__enter:hover, .sala3d__go:hover { background: var(--neon-hot); }
.sala3d__enter:focus-visible, .sala3d__go:focus-visible { outline: 2px solid var(--neon-core); outline-offset: 3px; }
.sala3d__go { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; font-size: 0.625rem; max-width: calc(100% - 24px); }
.sala3d__go[hidden], .sala3d__pad[hidden], .sala3d__full[hidden] { display: none; }
.sala3d__pad { position: absolute; left: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(2, 40px); gap: 4px; }
.sala3d__pad button {
  display: grid; place-items: center; border: 1px solid rgb(255 181 77 / 0.4); border-radius: 8px;
  background: rgb(8 5 3 / 0.6); color: var(--neon); touch-action: none; padding: 0;
}
.sala3d__pad button:active { background: rgb(255 181 77 / 0.25); }
.sala3d__pad svg { width: 14px; height: 14px; fill: currentColor; }
.sala3d__pad [data-move="f"] { grid-column: 2; grid-row: 1; }
.sala3d__pad [data-move="l"] { grid-column: 1; grid-row: 2; }
.sala3d__pad [data-move="b"] { grid-column: 2; grid-row: 2; }
.sala3d__pad [data-move="r"] { grid-column: 3; grid-row: 2; }
.sala3d__full {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: rgb(8 5 3 / 0.6); color: var(--ink-2); cursor: pointer;
}
.sala3d__full:hover { color: var(--neon); border-color: var(--neon); }
.sala3d__full svg { width: 16px; height: 16px; }
.sala3d__help { margin-top: 0.875rem; color: var(--ink-3); font-size: 0.9375rem; max-width: 70ch; }
.sala3d__help a { color: var(--neon); }
.hall h2 { font: 600 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.1 var(--font-head); margin-bottom: 1rem; }
@media (max-width: 699px) {
  .sala3d__stage { aspect-ratio: 4 / 3; }
  .sala3d__go { bottom: auto; top: 26px; }
  .sala3d__pad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 34px); left: 8px; bottom: 8px; }
  .sala3d__pad button { background: rgb(8 5 3 / 0.45); }
}

/* La galleria di Flynn: la targa di ottone */
.targa {
  width: min(92vw, 560px); padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: #2a1a08;
}
.targa::backdrop { background: rgb(6 3 10 / 0.72); }
.targa__plate {
  padding: clamp(22px, 4vw, 34px);
  border-radius: 10px;
  background: linear-gradient(160deg, #e6c578 0%, #c9a24a 45%, #a9822f 100%);
  box-shadow: inset 0 0 0 2px #f3dc9c, inset 0 0 0 6px #8c6a26, 0 20px 60px rgb(0 0 0 / 0.6);
}
.targa__kicker { font: 600 0.8125rem/1.3 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: #5a3d12; }
.targa__title { margin-top: 0.4rem; font: 700 clamp(1.6rem, 1.2rem + 2vw, 2.2rem)/1.05 var(--font-head); color: #1e1204; }
.targa__object { margin-top: 0.6rem; font-size: 1.0625rem; color: #2a1a08; }
.targa__ref { margin-top: 0.5rem; font: 600 1rem/1.3 var(--font-head); color: #3e2a0c; }
.targa__ref span { margin-left: 0.35em; padding: 1px 8px; border-radius: 999px; background: #2a1a08; color: #f3dc9c; font-size: 0.875rem; }
.targa__sub { margin-top: 1.25rem; font: 600 0.8125rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: #5a3d12; }
.targa__list { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.55rem; }
.targa__list li { font-size: 1rem; line-height: 1.45; color: #24160a; }
.targa__list li::marker { color: #6a4a18; }
.targa__note { margin-top: 1rem; font-size: 0.875rem; font-style: italic; color: #5a3d12; }
.targa__close {
  margin-top: 1.25rem; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #2a1a08; color: #f3dc9c; font: 600 1rem/1 var(--font-head); letter-spacing: 0.02em;
}
.targa__close:hover { background: #3e2a0c; }
.targa__close:focus-visible { outline: 2px solid #2a1a08; outline-offset: 3px; }
.sala3d__canvas { filter: brightness(1.12) saturate(1.05); }