/* /book VSL player (Jason, 2026-10-07). Injected by scripts/sync_book_page.py;
   mounted by vsl.js into Freebuff's "Video placeholder" box. The box keeps its
   own glass frame and aspect ratio; React's placeholder children are hidden,
   not removed, so a re-render can't trip over missing nodes. Scoped under
   .bb-vsl so nothing leaks into the Freebuff app. */
.bb-vsl-host { position: relative; overflow: hidden; padding: 0; gap: 0; }
.bb-vsl-host > :not(.bb-vsl) { display: none !important; }

.bb-vsl { position: absolute; inset: 0; background: #0B211F; }
.bb-vsl video { display: block; width: 100%; height: 100%; object-fit: cover;
  background: #0B211F; }
.bb-vsl video::cue { font-size: 18px; line-height: 1.35; background: rgba(11, 33, 31, .78); color: #EDF4F2; }

.bb-vsl-start { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 12px; padding: 0 16px 28px;
  border: 0; margin: 0; cursor: pointer; color: #EDF4F2; font: inherit;
  background: linear-gradient(to top, rgba(11, 33, 31, .78) 0%, rgba(11, 33, 31, .18) 42%, rgba(11, 33, 31, 0) 64%);
  transition: background-color .3s cubic-bezier(.16, 1, .3, 1); }
.bb-vsl-start:focus-visible { outline: 2px solid #A6C2BD; outline-offset: -6px; border-radius: 24px; }

.bb-vsl-play { display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 999px;
  background: rgba(237, 244, 242, .16); border: 1px solid rgba(237, 244, 242, .34);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .35s cubic-bezier(.16, 1, .3, 1); }
.bb-vsl-play svg { width: 26px; height: 26px; margin-left: 4px; fill: #EDF4F2; }
.bb-vsl-start:hover .bb-vsl-play,
.bb-vsl-start:focus-visible .bb-vsl-play { transform: scale(1.06); background: rgba(237, 244, 242, .26); }
.bb-vsl-label { font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.bb-vsl-label span { color: #C9DCD8; font-weight: 500; font-variant-numeric: tabular-nums; }

.bb-vsl.is-loading .bb-vsl-play { animation: bb-vsl-pulse 1.1s ease-in-out infinite; }
@keyframes bb-vsl-pulse { 50% { opacity: .55; } }
.bb-vsl.is-playing .bb-vsl-start { display: none; }

.bb-vsl-error { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0;
  padding: 10px 14px; border-radius: 12px; font-size: 14px; text-align: center;
  color: #EDF4F2; background: rgba(11, 33, 31, .88); }

@media (max-width: 480px) {
  .bb-vsl-start { padding-bottom: 16px; gap: 8px; }
  .bb-vsl-play { width: 60px; height: 60px; }
  .bb-vsl-play svg { width: 22px; height: 22px; }
  .bb-vsl-label { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-vsl-start, .bb-vsl-play { transition: none; }
  .bb-vsl.is-loading .bb-vsl-play { animation: none; }
}