/* The embed player (SPEC 83, templates/embed.html): the video fills whatever box the other site gives it, black in both
   themes; the title bar and the logo show while it's paused or the pointer is over it; "Watch again" / "Watch on NoRepTV"
   when it ends. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden;
  font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.embed { position: relative; width: 100%; height: 100%; background: #000; }
.embed video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

.embed-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 10px 96px 24px 12px;
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  transition: opacity 0.2s;
}
.embed-logo { position: absolute; top: 12px; right: 12px; z-index: 3; display: block; line-height: 0; transition: opacity 0.2s; }
.embed-logo img { height: 20px; width: auto; }
.embed[data-playing]:not(:hover) .embed-top,
.embed[data-playing]:not(:hover) .embed-logo { opacity: 0; pointer-events: none; }
.embed-channel { flex: none; text-decoration: none; }
.embed-avatar {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: hsl(var(--hue, 0) 45% 40%); color: #fff; font-weight: 700; font-size: 15px;
}
.embed-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.embed-title { min-width: 0; color: #fff; text-decoration: none; display: flex; flex-direction: column; }
.embed-title-text { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-by { font-size: 12px; color: rgba(255, 255, 255, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-title:hover .embed-title-text, .embed-title:focus-visible .embed-title-text { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.embed-end, .embed-note {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px;
  background: rgba(0, 0, 0, 0.72); text-align: center;
}
.embed-end[hidden] { display: none; }
.embed-note { flex-direction: column; flex-wrap: nowrap; background: rgba(0, 0, 0, 0.8); }
.embed-note-logo { height: 24px; width: auto; }
.embed-note-text { margin: 0; max-width: 36ch; font-size: 16px; font-weight: 700; }
.embed-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px); opacity: 0.6; }
.embed-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; background: transparent; color: #fff;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.embed-btn-primary { background: #e10600; border-color: #e10600; }
.embed-btn:hover { filter: brightness(1.1); }

/* player.js's own messages ("can't play" with Try again) */
.player-error, .player-note {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.82);
}
.player-error-text { margin: 0; max-width: 36ch; font-size: 16px; font-weight: 700; }
.player-error .btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: #e10600; color: #fff;
  font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 400px), (max-height: 220px) {
  .embed-top { padding: 8px 76px 16px 8px; gap: 8px; }
  .embed-avatar { width: 26px; height: 26px; font-size: 13px; }
  .embed-title-text { font-size: 13px; }
  .embed-by { display: none; }
  .embed-logo { top: 9px; right: 8px; }
  .embed-logo img { height: 16px; }
  .embed-note-text { font-size: 14px; }
  .embed-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
}