/* Livestream: show the complete 16:9 picture on phones instead of cropping it. */
@media (max-width: 639px) {
  main section.container > div.grid > div.relative > div.relative.flex.aspect-video {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  main section.container > div.grid > div.relative > div.relative.flex.aspect-video > video {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  .mtd-watch-chat-grid {
    gap: 0.5rem !important;
  }

  .mtd-sticky-player {
    position: sticky !important;
    top: 0.5rem !important;
    z-index: 30 !important;
    box-shadow: 0 10px 28px rgb(0 0 0 / 55%);
  }

  .mtd-mobile-chat iframe {
    height: clamp(360px, calc(100dvh - 19rem), 560px) !important;
  }

  .mtd-live-title-overlay {
    top: 0.45rem;
    max-width: calc(100% - 6rem);
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    line-height: 1.1;
  }

  .mtd-stream-description-card {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
  }
}

.mtd-live-title-overlay {
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 20;
  max-width: min(72%, 620px);
  translate: -50% -8px;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 0.35rem;
  background: rgb(0 0 0 / 78%);
  color: #fff;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(0.78rem, 1.35vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, translate 220ms ease;
}

.mtd-player-live-badge {
  transition: opacity 220ms ease, translate 220ms ease;
}

.mtd-player-live-badge.is-ui-hidden {
  translate: 0 -4px;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mtd-chat-header .mtd-chat-live-label {
  margin-left: auto;
  white-space: nowrap;
  font-size: 1.05rem;
}

.mtd-stream-description-card {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
}

.mtd-stream-description-card[hidden] {
  display: none !important;
}

.mtd-stream-description-card h2 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.mtd-stream-description-content {
  color: hsl(var(--foreground));
  font-size: 0.93rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.mtd-stream-description-content p {
  margin: 0 0 0.8rem;
  white-space: pre-wrap;
}

.mtd-stream-description-content p:last-child {
  margin-bottom: 0;
}

.mtd-stream-description-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mtd-nav-live-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  font-size: 0.72rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgb(255 0 0 / 55%));
  animation: mtd-live-pulse 1.6s ease-in-out infinite;
}

.mtd-nav-live-indicator[hidden] {
  display: none !important;
}

@keyframes mtd-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.48; }
}

.mtd-live-title-overlay.is-visible {
  translate: -50% 0;
  opacity: 1;
}

.mtd-broadcast-title-card {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
}

.mtd-broadcast-title-card label {
  font-family: Rajdhani, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mtd-broadcast-title-card input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: 0.375rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.mtd-broadcast-title-card textarea {
  width: 100%;
  min-height: 10rem;
  resize: vertical;
  padding: 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: 0.375rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: inherit;
  line-height: 1.5;
}

.mtd-broadcast-title-card p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
}