/* One-click minimal YouTube player - pairs with /yt-player.js */
.yt-card { position: relative; overflow: hidden; cursor: pointer; isolation: isolate; }
.yt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the YouTube iframe sits at the bottom of the stack */
.yt-frame { position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 0; }
.yt-frame iframe { position: absolute; left: 0; width: 100%; border: 0; pointer-events: none; }
/* 16:9 in a 16:9 card: the iframe is taller than the card, so YouTube letterboxes the video into
   exactly the visible area and its title bar (top) and logo / "more videos" strip (bottom) are cut off */
.yt-fit-contain iframe { top: -90px; height: calc(100% + 180px); }
/* vertical Shorts (9:16) filling a shorter card: crop top and bottom, like object-fit: cover */
.yt-fit-cover iframe { top: 50%; height: auto; aspect-ratio: 9 / 16; transform: translateY(-50%); }

/* transparent shield: YouTube's own buttons and overlays can never be clicked or hovered */
.yt-shield { position: absolute; inset: 0; z-index: 1; }

/* our poster + caption sit on top until the video plays */
.yt-poster { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; transition: opacity 0.25s ease; }
.yt-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-poster::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%),
    rgba(8, 8, 8, 0.42);
}
.yt-play {
  position: relative; z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent);
  transition: transform 0.2s ease;
}
.yt-play svg { width: 24px; height: 24px; margin-left: 3px; }
.yt-card:hover .yt-play { transform: scale(1.08); }
.yt-caption { z-index: 3; pointer-events: none; transition: opacity 0.25s ease; }

/* loading: the play button breathes while the first frame arrives */
.yt-card[data-state="loading"] .yt-play { animation: yt-pulse 0.9s ease-in-out infinite; }
@keyframes yt-pulse { 50% { transform: scale(0.9); opacity: 0.75; } }

/* playing: only the video is visible */
.yt-card[data-state="playing"] .yt-poster,
.yt-card[data-state="playing"] .yt-caption { opacity: 0; pointer-events: none; }

/* paused: our poster comes back over YouTube's pause screen ("More videos" etc.) */
.yt-card[data-state="paused"] .yt-caption { opacity: 0; }

/* muted fallback (Safari / iOS): one tap on this turns the sound on */
.yt-sound {
  position: absolute; right: 14px; top: 14px; z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-ink);
  display: none; place-items: center; cursor: pointer;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: yt-pulse 1.4s ease-in-out infinite;
}
.yt-sound svg { width: 20px; height: 20px; }
.yt-card[data-muted="1"] .yt-sound { display: grid; }

@media (prefers-reduced-motion: reduce) {
  .yt-card[data-state="loading"] .yt-play, .yt-sound { animation: none; }
}

/* minimal controls: time + seek bar, shown once the video has started */
.yt-controls {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  display: none; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: color-mix(in srgb, #000 60%, transparent);
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #fff;
}
.yt-card[data-state="playing"] .yt-controls,
.yt-card[data-state="paused"] .yt-controls { display: flex; }
.yt-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.yt-track { position: relative; flex: 1; height: 16px; cursor: pointer; touch-action: none; }
.yt-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); }
.yt-fill { position: absolute; left: 0; top: 7px; height: 3px; width: 0; border-radius: 2px; background: var(--accent); }
.yt-fill::after { content: ""; position: absolute; right: -6px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.yt-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* total length on the poster */
.yt-dur-chip {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #fff;
  padding: 4px 8px; border-radius: 4px; background: color-mix(in srgb, #000 55%, transparent);
  pointer-events: none;
}
.yt-dur-chip:empty { display: none; }
.yt-card[data-state="playing"] .yt-dur-chip { display: none; }