/* =============================================================
   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);
  /* Drag horizontally to scrub the carousel; vertical scroll still passes through. */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

/* While a drag or momentum fling is driving the cards, JS sets their transforms
   every frame — the 0.55s CSS transition would fight it, so switch it off. */
.spotlight-stage.is-dragging,
.spotlight-stage.is-dragging .spotlight-card {
  cursor: grabbing;
}

.spotlight-stage.is-dragging .spotlight-card {
  transition: none;
}

.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);
}

/* Explicit close (×). Pinned to the panel itself — NOT the scrolling inner —
   so it stays reachable while the vote content scrolls, and it sits in the
   corner clear of the head. */
.sp-vote-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sp-vote-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.sp-vote-close:focus-visible {
  outline: 2px solid rgba(157, 113, 246, 0.9);
  outline-offset: 2px;
}

.sp-vote-close svg {
  width: 20px;
  height: 20px;
}

.sp-vote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Reserve room on the right so "Browse all artists" never tucks under the
     corner × close button. */
  padding-right: 2.75rem;
  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;
  }

  /* Compact step cards: number (left) | copy (middle) | CTA (right). Card 1 has
     two CTAs so they stack — hashtag pill on top, "Go to post" below; card 2's
     single CTA just sits in the same right-hand column. */
  .sp-vote-steps {
    gap: 0.75rem;
  }

  .sp-step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 0.65rem;
    padding: 0.8rem 0.9rem;
  }

  .sp-step-num {
    grid-column: 1;
    font-size: 1.9rem;
  }

  .sp-step-copy {
    grid-column: 2;
    text-align: center;
  }

  .sp-step-action {
    grid-column: 3;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .sp-hashtag {
    min-width: 5.5rem;
  }

  .sp-vote-cta-heading {
    margin: 1.25rem 0 1rem;
  }

  /* On phones the panel becomes a centred viewport modal (see its aria-modal
     dialog role) over a dimmed backdrop — so it can't overlap the sections
     below it. Centring (rather than top-anchoring) keeps short content in the
     middle instead of leaving dead space beneath it, and the capped height
     keeps ~5.5rem clear top & bottom so the top always clears the site header. */
  .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: calc(100vh - 11rem);
    max-height: calc(100dvh - 11rem);
    transform: translate(-50%, -50%);
  }

  .sp-vote-panel-inner {
    /* Shrink to content so a short panel centres with no empty space, and scroll
       internally only when the content exceeds the capped height. */
    height: auto;
    max-height: calc(100vh - 11rem);
    max-height: calc(100dvh - 11rem);
  }

  .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;
    /* Wrapped + centred here, so drop the corner-× reservation to stay centred. */
    padding-right: 0;
  }

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