.diretta {
  width: min(100%, calc(var(--max-larghezza) + var(--margine) * 2));
  margin-inline: auto;
  padding-inline: var(--margine);
  padding-block: clamp(var(--passo-6), 7vh, var(--passo-12));
}

.diretta__testa {
  display: flex;
  flex-direction: column;
  gap: var(--passo-2);
  max-width: 62ch;
  margin-bottom: var(--passo-4);
}

@media (min-width: 900px) {
  .diretta__testa { margin-bottom: var(--passo-6); }
}

.diretta__scena {
  --pollo-larghezza: clamp(112px, 11vw, 176px);

  position: relative;
  isolation: isolate;
}

@media (min-width: 1100px) {
  .diretta__scena {
    padding-right: calc(var(--pollo-larghezza) + var(--passo-3));
  }

  .diretta__scena:has(> .pollo[hidden]),
  .diretta__scena:not(:has(> .pollo)) {
    padding-right: 0;
  }
}

.monitor {
  position: relative;
  min-width: 0;
}

.monitor::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5% -4% -9%;
  border-radius: 50%;
  background-image: radial-gradient(
    62% 62% at 50% 46%,
    color-mix(in srgb, var(--viola) 30%, transparent),
    color-mix(in srgb, var(--viola) 0%, transparent) 72%
  );
  filter: blur(48px);
  pointer-events: none;
}

.monitor__telaio {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio-g);
  background-color: var(--pannello);
  background-image: var(--grad-pannello);
  box-shadow: var(--ombra);
  overflow: hidden;
}

.monitor__telaio::before,
.monitor__telaio::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--ciano) 55%, transparent);
  pointer-events: none;
}

.monitor__telaio::before {
  top: 9px;
  left: 9px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-start-start-radius: 6px;
}

.monitor__telaio::after {
  bottom: 9px;
  right: 9px;
  border-left-width: 0;
  border-top-width: 0;
  border-end-end-radius: 6px;
}

.monitor__barra {
  display: flex;
  align-items: center;
  gap: var(--passo-2);
  padding: calc(var(--passo) * 1.25) var(--passo-2);
  border-bottom: 1px solid var(--linea);
  background-color: color-mix(in srgb, var(--fondo-2) 72%, transparent);
}

.monitor__punti {
  display: flex;
  flex: none;
  gap: 5px;
  margin-left: var(--passo-2);
  color: var(--testo-tenue);
  opacity: 0.65;
}

.monitor__punti svg {
  width: 13px;
  height: 13px;
}

.monitor__titolo {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--testo-medio);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor__badge:not([hidden]) { display: inline-flex; }

.monitor__badge {
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px var(--passo);
  border: 1px solid color-mix(in srgb, var(--live) 55%, transparent);
  border-radius: var(--raggio-pill);
  background-color: color-mix(in srgb, var(--live) 15%, transparent);
  color: var(--live);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--spazio-etichetta);
}

.monitor__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  animation: monitor-batte 2.2s var(--curva) infinite;
}

@keyframes monitor-batte {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.monitor__schermo {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background-color: var(--fondo);
  background-image: radial-gradient(
    80% 80% at 50% 42%,
    color-mix(in srgb, var(--viola-cupo) 30%, transparent),
    color-mix(in srgb, var(--viola-cupo) 0%, transparent) 74%
  );
  overflow: hidden;
}

.monitor__video {
  position: absolute;
  inset: 0;
}

.monitor__lato:not([hidden]) { display: block; }

.monitor__lato {
  min-width: 0;
  border-top: 1px solid var(--linea);
}

.monitor__chat {
  height: 100%;
  min-height: clamp(280px, 46vh, 460px);
}

@media (min-width: 1000px) {
  .monitor__telaio:has(.monitor__lato:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) min(25%, 340px);
  }

  .monitor__telaio:has(.monitor__lato:not([hidden])) .monitor__barra,
  .monitor__telaio:has(.monitor__lato:not([hidden])) .monitor__piede {
    grid-column: 1 / -1;
  }

  .monitor__telaio:has(.monitor__lato:not([hidden])) .monitor__lato {
    border-top: 0;
    border-left: 1px solid var(--linea);
  }

  .monitor__telaio:has(.monitor__lato:not([hidden])) .monitor__chat {
    min-height: 0;
  }
}

.monitor__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--passo-2);
  padding: var(--passo-2) var(--passo-3);
  border-top: 1px solid var(--linea);
}

.monitor__piede > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--passo);
  flex: none;
  min-height: 44px;
  padding-inline: var(--passo-3);
  border: 1px solid var(--linea-comando);
  border-radius: var(--raggio-pill);
  background-color: transparent;
  color: var(--testo);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition:
    border-color     var(--durata) var(--curva),
    background-color var(--durata) var(--curva),
    color            var(--durata) var(--curva);
}

.monitor__piede > button svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.monitor__piede > button:hover {
  border-color: var(--ciano);
  background-color: var(--pannello-2);
}

.monitor__piede > button[aria-expanded="true"] {
  border-color: var(--ciano);
  color: var(--ciano);
}

.monitor__nota {
  flex: 1 1 16ch;
  min-width: 0;
  margin: 0;
  color: var(--testo-tenue);
  font-size: var(--t-micro);
  line-height: 1.45;
}

.monitor__link {
  display: inline-flex;
  align-items: center;
  gap: var(--passo);
  flex: none;
  color: var(--viola-chiaro);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--spazio-etichetta);
  transition: color var(--durata) var(--curva);
}

.monitor__link svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.monitor__link:hover { color: var(--ciano); }

.diretta__nota {
  display: flex;
  align-items: baseline;
  gap: var(--passo-2);
  margin-top: var(--passo-3);
  max-width: 78ch;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
}

.diretta__nota::before {
  content: "";
  flex: none;
  width: var(--passo-3);
  height: 1px;
  transform: translateY(-0.35em);
  background-color: color-mix(in srgb, var(--ciano) 70%, transparent);
}

.monitor__spettatori:not([hidden]) { display: inline-flex; }

.monitor__spettatori {
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 3px var(--passo);
  border: 1px solid color-mix(in srgb, var(--ciano) 45%, transparent);
  border-radius: var(--raggio-pill);
  background-color: color-mix(in srgb, var(--ciano) 12%, transparent);
  color: var(--ciano);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.monitor__spettatori svg {
  width: 14px;
  height: 14px;
}

.monitor__spettatori b { font-weight: 600; }

.monitor__spettatori.is-cambiato b { animation: spettatori-guizza 0.6s var(--curva); }

@keyframes spettatori-guizza {
  0%   { color: var(--testo); text-shadow: 0 0 10px var(--ciano); }
  100% { color: inherit; text-shadow: none; }
}