/* ===== Twitch embed inside .block--liveontwitch =========================== */
.block--liveontwitch.bo-live-visible { display: block !important; }

.bo-twitch-embed-header {
  margin: 0 0 .5rem 0;
  font-weight: 700;
  letter-spacing: .02em;
}

.bo-twitch-embed-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

#bo-twitch-embed {
  position: absolute;
  inset: 0;
}


/* ===== BO Twitch Live badge (colorful + animated) ======================= */

:root {
  --bo-live-bg-1: #ff3864;   /* hot pink/red */
  --bo-live-bg-2: #ffb03a;   /* orange */
  --bo-live-bg-3: #ffd36e;   /* warm yellow */
  --bo-live-text: #111;      /* dark text on warm bg */
  --bo-live-glow: 42, 0, 80; /* purple-ish glow (r,g,b) */
}

/* Base badge look */
.bo-twitch-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .4ch;
  margin-left: .5rem;
  padding: .18rem .5rem;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  border-radius: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--bo-live-bg-1), var(--bo-live-bg-2) 55%, var(--bo-live-bg-3));
  color: var(--bo-live-text);
  box-shadow: 0 .25em .9em rgba(0,0,0,.18), 0 0 .25em rgba(var(--bo-live-glow), .25) inset;
  position: relative;
}

/* Little red dot */
.bo-twitch-live-badge::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #ff1e1e;
  box-shadow: 0 0 .45rem rgba(255, 30, 30, .75);
  transform: translateY(0.5px);
}

/* -------- Animations (opt-in by class) ---------------------------------- */

/* 1) Pulse + soft glow */
@keyframes bo-live-pulse {
  0%   { transform: translateY(-1px) scale(1);    box-shadow: 0 .25em .9em rgba(0,0,0,.18), 0 0 .25em rgba(var(--bo-live-glow), .25) inset; }
  50%  { transform: translateY(-1px) scale(1.04); box-shadow: 0 .35em 1.1em rgba(0,0,0,.20), 0 0 .55em rgba(var(--bo-live-glow), .45) inset; }
  100% { transform: translateY(-1px) scale(1);    box-shadow: 0 .25em .9em rgba(0,0,0,.18), 0 0 .25em rgba(var(--bo-live-glow), .25) inset; }
}

/* 2) Shimmer highlight that sweeps across */
@keyframes bo-live-shine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 3) Equalizer bars to the right (pure CSS, no JS) */
@keyframes bo-live-eq {
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1); }
}

/* Use any combo of these style classes */
.bo-twitch-live-badge.style-pulse {
  animation: bo-live-pulse 1.6s ease-in-out infinite;
}

.bo-twitch-live-badge.style-shimmer {
  background: linear-gradient(90deg,
    var(--bo-live-bg-1) 0%,
    var(--bo-live-bg-2) 25%,
    var(--bo-live-bg-3) 50%,
    var(--bo-live-bg-2) 75%,
    var(--bo-live-bg-1) 100%);
  background-size: 200% 100%;
  animation: bo-live-shine 2.75s linear infinite;
}

.bo-twitch-live-badge.style-eq {
  padding-right: .35rem; /* leave room for bars */
}
.bo-twitch-live-badge.style-eq::after {
  content: "";
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  width: .7rem;
  height: .6rem;
  margin-left: .25rem;
}
.bo-twitch-live-badge.style-eq::after,
.bo-twitch-live-badge.style-eq::after > * { align-self: end; }

.bo-twitch-live-badge.style-eq::after {
  /* three bars */
  --bar: linear-gradient(#111,#111) center/100% 100% no-repeat;
  background:
    var(--bar),
    var(--bar),
    var(--bar);
  /* place them */
  background-position:
    left   bottom,
    center bottom,
    right  bottom;
  background-size:
    2px 30%,
    2px 60%,
    2px 45%;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.2));
  animation: bo-live-eq .9s ease-in-out infinite alternate;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bo-twitch-live-badge { animation: none !important; }
  .bo-twitch-live-badge::before { box-shadow: none; }
}

/* Header now only holds the title */
.bo-twitch-embed-header {
  display: block;
  margin: 0 0 .5rem 0;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Nav sits below the player, centered */
.bo-twitch-embed-nav {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .5rem;
}

.bo-nav-btn {
  appearance: none;
  border: 0;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1.9rem;
  text-align: center;
  border-radius: .5rem;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  background: linear-gradient(90deg, var(--bo-live-bg-2), var(--bo-live-bg-3));
  color: var(--bo-live-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.bo-nav-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.bo-nav-btn:active { transform: translateY(0); }
.bo-nav-btn:disabled { opacity: .5; cursor: default; }