/* =============================================================
   Daily Spotlight hero
   -------------------------------------------------------------
   Replaces the old .hero-section: an announcement header, a
   cover-flow artist carousel, a STATIC in-flow player bar
   (scrolls with the page — never a fixed overlay) and an
   inline-expandable "vote" panel that pushes content down.
   Dark theme + purple accents — matches style.css / vote.css.
   ============================================================= */

.spotlight-section {
  /* These two drive both the section padding AND the vote-panel overlay's
     top/bottom, so the panel spans exactly title-top -> player-bar-bottom. */
  --sp-pad-top: clamp(0.5rem, 2vw, 1.5rem);
  --sp-pad-bottom: clamp(1.5rem, 4vw, 2.5rem);
  /* Full-bleed: break out of the 70% <main> column for a roomy stage */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--sp-pad-top) 0 var(--sp-pad-bottom);
  position: relative;
  z-index: 10;
  color: var(--text-white);
}

/* While the vote panel is open, lift the whole hero above the sibling sections
   below it. The next section (".vote-section" — "Ready to cast your votes") also
   uses z-index:10 and comes later in the DOM, so without this it wins the paint
   order and covers the panel + backdrop wherever they overlap. */
.spotlight-section:has(.sp-vote-panel.is-open) {
  z-index: 60;
}

.spotlight-inner {
  width: min(1180px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Intro copy --- */
.spotlight-intro {
  text-align: center;
}

.spotlight-title {
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.85rem, 5.2vw, 3.4rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-white);
}

.spotlight-subtitle {
  margin: clamp(0.75rem, 2vw, 1.15rem) auto 0;
  max-width: 42rem;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.spotlight-label {
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(0.25rem, 1.5vw, 0.75rem);
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-white);
}

/* Small-print disclaimer under the carousel */
.spotlight-note {
  margin: clamp(0.85rem, 2.2vw, 1.3rem) 0 0;
  max-width: 44rem;
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Cover-flow carousel --- */
.spotlight-carousel {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlight-stage {
  --sp-gap1: clamp(135px, 19vw, 232px);
  --sp-gap2: clamp(220px, 31vw, 388px);
  --sp-gap3: clamp(300px, 42vw, 520px);
  position: relative;
  width: 100%;
  height: clamp(300px, 42vw, 400px);
}

.spotlight-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(190px, 22vw, 262px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  transform: translate(-50%, -50%) scale(0.42);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.55s ease;
}

.spotlight-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  background: #1a1a22;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

.spotlight-card__img,
.spotlight-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlight-card__initial {
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.spotlight-card__name {
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-white);
  white-space: nowrap;
}

/* Position modifiers set by spotlight.js relative to the centred card */
.spotlight-card.is-center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 6;
  pointer-events: auto;
}

.spotlight-card.is-center .spotlight-card__frame {
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 6px rgba(255, 255, 255, 0.92);
}

.spotlight-card.is-center .spotlight-card__name {
  font-size: clamp(1.05rem, 2vw, 1.5rem);
}

.spotlight-card.is-l1 {
  transform: translate(calc(-50% - var(--sp-gap1)), -50%) scale(0.7);
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
}

.spotlight-card.is-r1 {
  transform: translate(calc(-50% + var(--sp-gap1)), -50%) scale(0.7);
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
}

.spotlight-card.is-l2 {
  transform: translate(calc(-50% - var(--sp-gap2)), -50%) scale(0.48);
  opacity: 0.72;
  z-index: 4;
  pointer-events: auto;
}

.spotlight-card.is-r2 {
  transform: translate(calc(-50% + var(--sp-gap2)), -50%) scale(0.48);
  opacity: 0.72;
  z-index: 4;
  pointer-events: auto;
}

/* Off-screen staging just past the visible edges. Cards leaving the carousel
   fade out here as they continue outward (and entering cards fade in from
   here) instead of snapping back toward the centre. */
.spotlight-card.is-l3 {
  transform: translate(calc(-50% - var(--sp-gap3)), -50%) scale(0.4);
  opacity: 0;
  z-index: 3;
}

.spotlight-card.is-r3 {
  transform: translate(calc(-50% + var(--sp-gap3)), -50%) scale(0.4);
  opacity: 0;
  z-index: 3;
}

/* Nav arrows */
.spotlight-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: clamp(38px, 4vw, 48px);
  height: clamp(38px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.spotlight-arrow:hover {
  background: rgba(157, 113, 246, 0.35);
  color: #fff;
}

.spotlight-arrow--prev {
  left: clamp(0px, 1vw, 12px);
}

.spotlight-arrow--next {
  right: clamp(0px, 1vw, 12px);
}

.spotlight-arrow svg {
  width: 52%;
  height: 52%;
}

/* =============================================================
   Static player bar — normal flow, scrolls with the page
   ============================================================= */
.spotlight-player {
  width: min(880px, 100%);
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
}

.sp-player-bar {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(0.6rem, 1.4vw, 0.9rem) clamp(0.9rem, 2vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(16px, 2vw, 22px);
  background: rgba(20, 18, 28, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  cursor: pointer; /* the bar itself opens the vote overlay */
}

.sp-player-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 0 1 auto;
}

.sp-player-thumb {
  flex: 0 0 auto;
  width: clamp(40px, 5vw, 52px);
  height: clamp(40px, 5vw, 52px);
  border-radius: 10px;
  background: #3a3a42 center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sp-player-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

.sp-player-title {
  font-weight: 700;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-player-artist {
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.sp-player-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.sp-player-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s ease;
}

.sp-player-expand:hover {
  color: #fff;
}

.sp-player-expand svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.sp-player-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.sp-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.sp-progress-time {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 2.4rem;
}

.sp-progress-time--current {
  text-align: right;
}

.sp-progress-time--total {
  text-align: left;
}

.sp-progress-track {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  touch-action: none;
}

.sp-progress-track:focus-visible {
  outline: 2px solid rgba(157, 113, 246, 0.8);
  outline-offset: 6px;
}

.sp-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #fff;
}

.sp-progress-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sp-progress-track:hover .sp-progress-knob,
.sp-progress-track:focus-visible .sp-progress-knob {
  opacity: 1;
}

.sp-player-controls {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.8rem);
  flex: 0 0 auto;
}

.sp-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}

.sp-ctrl:hover {
  transform: scale(1.08);
}

.sp-ctrl--prev svg,
.sp-ctrl--next svg {
  width: clamp(20px, 2.4vw, 26px);
  height: clamp(20px, 2.4vw, 26px);
}

.sp-ctrl--play {
  position: relative;
  width: clamp(42px, 5vw, 52px);
  height: clamp(42px, 5vw, 52px);
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.sp-ctrl--play svg {
  width: 46%;
  height: 46%;
}

.sp-ctrl--play .sp-icon-play,
.sp-ctrl--play .sp-icon-pause {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sp-ctrl--play .sp-icon-play {
  display: inline-flex;
  margin-left: 2px; /* optically centre the triangle */
}

.sp-ctrl--play.is-playing .sp-icon-play {
  display: none;
}

.sp-ctrl--play.is-playing .sp-icon-pause {
  display: inline-flex;
  margin-left: 0;
}

/* =============================================================
   Vote panel — opens as an OVERLAY bounded to the hero section.
   Its top edge sits at the "ANNOUNCING…" title and its bottom edge
   at the player bar's bottom (via the shared --sp-pad-* vars), so
   it is NOT a full-height blade. It unfurls upward from the player
   bar via a clip-path reveal (the expand button lives on that bar).
   The player bar itself stays in normal flow underneath.
   ============================================================= */
.sp-vote-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  /* No dimming/blur — just an invisible catcher so clicking outside closes. */
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.sp-vote-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.sp-vote-panel {
  position: absolute;
  top: var(--sp-pad-top); /* top edge lands on the "ANNOUNCING…" title */
  bottom: var(--sp-pad-bottom); /* bottom edge lands on the player bar's bottom */
  left: 50%;
  z-index: 50;
  width: min(1180px, 94vw);
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(16px, 2.5vw, 26px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(43, 42, 84, 0.55), transparent 60%),
    rgba(12, 12, 20, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* Collapsed to a sliver at the bottom (the player bar), then unfurls up. */
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  visibility: hidden;
  transition:
    clip-path 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.28s ease,
    visibility 0s linear 0.42s;
}

.sp-vote-panel.is-open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  visibility: visible;
  transition:
    clip-path 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.28s ease,
    visibility 0s;
}

.sp-vote-panel-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
}

.sp-vote-collapse {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.sp-vote-collapse:hover {
  color: #fff;
}

.sp-vote-collapse svg {
  width: 22px;
  height: 22px;
}

.sp-vote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(1rem, 2.5vw, 1.5rem);
}

.sp-vote-title {
  flex: 1 1 auto;
  text-align: center;
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.35rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.sp-browse-all {
  flex: 0 0 auto;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sp-browse-all:hover {
  background: #fff;
  color: #111;
}

/* Video only (comments removed). The video takes the leftover column space
   and derives its width from its height, so the panel's contents always fit
   between the title and the player bar — no inner scrollbar. */
.sp-vote-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.sp-vote-video {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-video-frame {
  position: relative;
  height: 100%; /* fill the available height... */
  max-width: 100%; /* ...and derive width from the 16:9 ratio (capped to the row) */
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.sp-video-frame iframe,
.sp-yt-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback (no embeddable video) sits above the iframe and covers it. */
.sp-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.sp-video-fallback[hidden] {
  display: none;
}

.sp-video-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

/* Fallback when the artist has no embeddable video — their cover image with a
   "Watch on YouTube" overlay linking out to whatever channel/profile we have. */
.sp-video-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
  background-color: #000;
}

.sp-video-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 55%);
}

.sp-video-link__label {
  position: relative;
  margin-bottom: 0.9rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.sp-video-link:hover .sp-video-link__label,
.sp-video-link:focus-visible .sp-video-link__label {
  background: #e50914;
}

/* (comments column removed — the panel now shows just the video) */

/* CTA heading + the two how-to-vote steps */
.sp-vote-cta-heading {
  text-align: center;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}

.sp-vote-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.sp-step {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.4rem);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.15rem, 2.5vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.sp-step-num {
  flex: 0 0 auto;
  min-width: 1.1em;
  text-align: center;
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.sp-step-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-step-title {
  font-size: clamp(0.9rem, 1.9vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

/* Actions sit at the right edge of the card, vertically centred */
.sp-step-action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}

.sp-copyblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.sp-copy-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* The step hashtag reuses .vote-hashtag (see vote.css) for the
   pill + copy tooltip; this only tweaks placement. */
.sp-hashtag {
  min-width: 7rem;
  justify-content: center;
}

.sp-cta-btn {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: var(--text-white);
  color: var(--text-black);
  font-family: inherit;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sp-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 720px) {
  .sp-vote-steps {
    grid-template-columns: 1fr;
  }

  .spotlight-stage {
    --sp-gap1: clamp(112px, 27vw, 170px);
    height: clamp(260px, 62vw, 320px);
  }

  /* Drop the far cards so the three central ones fit cleanly */
  .spotlight-card.is-l2,
  .spotlight-card.is-r2 {
    opacity: 0;
    pointer-events: none;
  }

  .sp-step {
    flex-wrap: wrap;
  }

  .sp-step-action {
    width: 100%;
    justify-content: space-between;
  }

  /* On phones the stacked steps make the vote content taller than the hero
     region. Left absolutely-positioned inside the section it spilled downward
     and overlapped the "Ready to cast your votes" section below. Promote it to a
     viewport-anchored modal (matching its role="dialog" aria-modal semantics)
     that centres and scrolls internally, over a dimmed backdrop — so it can
     never overlap sibling sections regardless of content height. */
  .sp-vote-backdrop {
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
  }

  .sp-vote-panel {
    position: fixed;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(560px, 92vw);
    max-height: 90vh;
    max-height: 90dvh;
    transform: translate(-50%, -50%);
  }

  .sp-vote-panel-inner {
    height: auto;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }

  .sp-vote-body {
    display: block;
    flex: none;
  }

  .sp-vote-video {
    display: block;
    height: auto;
    margin: 0 auto;
  }

  .sp-video-frame {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 560px) {
  .sp-player-bar {
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
  }

  .sp-player-meta {
    order: 1;
    flex: 1 1 auto;
  }

  .sp-player-controls {
    order: 2;
    margin-left: auto;
  }

  .sp-player-center {
    order: 3;
    flex-basis: 100%;
  }

  .sp-vote-head {
    flex-wrap: wrap;
    justify-content: center;
  }

  .sp-vote-title {
    flex-basis: 100%;
    order: 2;
  }
}