/* Bazaar draw video under each result card (/testing only). Always 16:9. */
.bv-wrap {
  float: none;
  clear: both;
  padding: 6px 8px 12px;
  background: #fff;
  border-bottom: 1px solid #a0a0a0;
}
.bv-wrap[hidden] { display: none; }
.bv-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #1a0606;
  border-radius: 8px;
  overflow: hidden;
}
@supports not (aspect-ratio: 16 / 9) {
  .bv-stage { height: 0; padding-top: 56.25%; }
}
.bv-video, .bv-poster {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* never crop the 16:9 frame */
  background: #000;
}
/* no tap-to-pause: the player runs by itself. Two stacked videos (mixing loop + draw)
   cross-fade so the switch never shows a black frame. */
.bv-video { pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.bv-video.bv-on { opacity: 1; }
/* the board held as a still picture while the draw rewinds underneath for the replay */
.bv-freeze { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.bv-freeze[hidden] { display: none; }
.bv-poster[hidden], .bv-play[hidden], .bv-badge[hidden] { display: none; }
.bv-stage:fullscreen { max-width: none; border-radius: 0; background: #000; }
.bv-stage:-webkit-full-screen { max-width: none; border-radius: 0; background: #000; }

.bv-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.bv-play svg { width: 34px; height: 34px; margin-left: 4px; fill: #fff; }
.bv-play:hover { background: rgba(196, 22, 28, 0.85); }

.bv-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font: 700 12px/1.4 Arial, sans-serif;
  letter-spacing: 0.04em;
}
.bv-badge.bv-live { background: #d4141b; animation: bv-pulse 1.2s ease-in-out infinite; }
@keyframes bv-pulse { 50% { opacity: 0.55; } }

.bv-controls {
  position: absolute;
  right: 8px; bottom: 8px;
  display: flex;
  gap: 6px;
}
.bv-btn {
  width: 38px; height: 38px;        /* finger-sized on phones */
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.bv-btn svg { width: 24px; height: 24px; fill: #fff; display: block; }
.bv-play:focus-visible, .bv-btn:focus-visible, .bv-sound-hint:focus-visible { outline: 2px solid #ffd400; outline-offset: 2px; }

/* videos start muted: a clear "tap for sound" pill while one plays without sound */
.bv-sound-hint {
  position: absolute;
  left: 8px; bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 19px;
  background: rgba(212, 20, 27, 0.92);
  color: #fff;
  font: 700 14px/1 Arial, sans-serif;
  cursor: pointer;
  animation: bv-hint-in 0.3s ease-out;
}
.bv-sound-hint[hidden] { display: none; }
.bv-sound-hint svg { width: 22px; height: 22px; fill: #fff; }
@keyframes bv-hint-in { from { opacity: 0; transform: translateY(6px); } }