/* =============================================================
   Vote / Leaderboard section (replaces the countdown section)
   Dark theme, purple accents — matches style.css tokens.
   ============================================================= */

.vote-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  z-index: 10;
  color: var(--text-white);
}

/* --- Intro: title + the two ways to vote --- */
.vote-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

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

.vote-subtitle {
  margin-top: clamp(0.5rem, 1.5vw, 0.85rem);
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1rem, 2.8vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-white);
}

.vote-methods {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  max-width: min(46rem, 92vw);
}

.vote-methods__divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.35) 20%,
    rgba(255, 255, 255, 0.35) 80%,
    transparent
  );
}

.vote-method {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 20rem;
}

.vote-method__title {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 700;
  color: var(--text-white);
}

.vote-method__desc {
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.vote-method__btn {
  margin-top: 0.35rem;
  display: inline-block;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: var(--text-white);
  color: var(--text-black);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

/* --- Board frame that holds search + table + pagination --- */
.vote-board {
  position: relative;
  width: 100%;
  scroll-margin-top: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(16px, 2.5vw, 26px);
  background: rgba(255, 255, 255, 0.02);
  padding: clamp(1rem, 3vw, 2rem);
  overflow: hidden;
}

/* Magenta/purple glow bleeding from the lower-left, echoing the mockup */
.vote-board__glow {
  position: absolute;
  left: -12%;
  bottom: -25%;
  width: 65%;
  height: 90%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(178, 68, 120, 0.42), transparent 60%),
    radial-gradient(circle at 55% 60%, rgba(123, 91, 161, 0.35), transparent 65%);
  filter: blur(10px);
}

.vote-board > *:not(.vote-board__glow) {
  position: relative;
  z-index: 1;
}

.vote-board__heading {
  text-align: center;
  font-family: "GC EPICPRO", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: clamp(1.15rem, 3.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-white);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* --- Search --- */
.vote-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.vote-search__icon {
  position: absolute;
  left: 1.1rem;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.vote-search__input {
  width: 100%;
  padding: 0.85rem 1.25rem 0.85rem 3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vote-search__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.vote-search__input:focus {
  border-color: rgba(157, 113, 246, 0.7);
  background: rgba(255, 255, 255, 0.09);
}

/* search clear button (webkit) */
.vote-search__input::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

/* --- Table --- */
.vote-table {
  /* Artist (image + name) | Genre | Discover | Copy Hashtag | Vote */
  --vote-grid: minmax(0, 2.2fr) minmax(0, 1.05fr) minmax(0, 1fr)
    minmax(0, 1.3fr) minmax(0, 0.85fr);
  width: 100%;
}

.vote-table__head {
  display: grid;
  grid-template-columns: var(--vote-grid);
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem clamp(1rem, 2vw, 1.5rem);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 0.75rem;
}

.vote-col {
  min-width: 0;
}

.vote-table__head .vote-col {
  font-size: clamp(0.85rem, 1.9vw, 1.05rem);
  font-weight: 700;
  color: var(--text-white);
}

.vote-table__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vote-row {
  display: grid;
  grid-template-columns: var(--vote-grid);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem clamp(1rem, 2vw, 1.5rem);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.055);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.vote-row:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(157, 113, 246, 0.45);
}

/* --- Deep-link highlight ---------------------------------------------------
   A shared link  <site>/index.html#<artist-hashtag>  scrolls to that artist
   and plays a slow purple "wave" glow so they know where they landed.

   The whole effect is drawn INSIDE the row — a bright ring + an inset glow +
   a band of light that sweeps across (backgrounds and inset shadows both clip
   to the row's own box). Nothing spills past the row, so it can never be cut
   off by the board's rounded, overflow-hidden frame: it looks identical
   whether the artist is the first, a middle, or the last row, on any screen.
   The .is-linked class is toggled by vote.js. */
.vote-row.is-linked {
  position: relative;
  z-index: 1;
  border-color: rgba(157, 113, 246, 0.85);
  background-color: rgba(157, 113, 246, 0.08);
  /* The travelling wave — a wide, soft band of light, parked off to the
     right at rest so nothing lingers between passes. */
  background-image: linear-gradient(
    100deg,
    rgba(190, 165, 255, 0) 40%,
    rgba(190, 165, 255, 0.55) 50%,
    rgba(190, 165, 255, 0) 60%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 160% 0;
  box-shadow: inset 0 0 0 1px rgba(157, 113, 246, 0.4);
  /* Slow and unhurried, and it keeps going the whole time the visitor is here
     from the link — each cycle is one gentle pass then a short rest. vote.js
     removes the class once they interact with the row. */
  animation: voteLinkedWave 3.2s ease-in-out infinite;
}

@keyframes voteLinkedWave {
  0% {
    background-position: 160% 0;
    box-shadow: inset 0 0 0 1px rgba(157, 113, 246, 0.35),
      inset 0 0 0 0 rgba(157, 113, 246, 0);
  }
  /* Peak glow as the band crosses the middle of the row. */
  35% {
    box-shadow: inset 0 0 0 1.5px rgba(183, 155, 255, 0.9),
      inset 0 0 42px 4px rgba(157, 113, 246, 0.5);
  }
  /* Band has passed; hold quietly through the rest of each cycle. */
  60%,
  100% {
    background-position: -60% 0;
    box-shadow: inset 0 0 0 1px rgba(157, 113, 246, 0.35),
      inset 0 0 0 0 rgba(157, 113, 246, 0);
  }
}

/* Respect users who prefer no motion — hold one soft, steady glow instead. */
@media (prefers-reduced-motion: reduce) {
  .vote-row.is-linked {
    background-image: none;
    animation: none;
    box-shadow: inset 0 0 0 1.5px rgba(183, 155, 255, 0.85),
      inset 0 0 34px rgba(157, 113, 246, 0.4);
  }
}

/* Track cell: thumbnail + title */
.vote-col--track {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.vote-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #3a3a42;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* When the thumbnail is a real artist image */
img.vote-thumb {
  object-fit: cover;
  display: block;
}

/* Deterministic gradient covers so each thumbnail feels distinct */
.vote-thumb--0 { background: linear-gradient(135deg, #f0a8b8, #7b5ba1); }
.vote-thumb--1 { background: linear-gradient(135deg, #6ee7b7, #3b82f6); }
.vote-thumb--2 { background: linear-gradient(135deg, #fbbf6e, #ef476f); }
.vote-thumb--3 { background: linear-gradient(135deg, #a78bfa, #ec4899); }
.vote-thumb--4 { background: linear-gradient(135deg, #38bdf8, #7b5ba1); }
.vote-thumb--5 { background: linear-gradient(135deg, #f9d371, #f2708b); }
.vote-thumb--6 { background: linear-gradient(135deg, #34d399, #9d71f6); }
.vote-thumb--7 { background: linear-gradient(135deg, #fca5a5, #6d5bd0); }

.vote-track-title {
  min-width: 0;
  font-size: clamp(0.85rem, 1.9vw, 1rem);
  font-weight: 600;
  color: var(--text-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-col--artist {
  font-size: clamp(0.85rem, 1.9vw, 1rem);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-col--genre {
  font-size: clamp(0.85rem, 1.9vw, 1rem);
  color: rgba(255, 255, 255, 0.9);
}

/* Discover streaming icons */
.vote-col--discover {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vote-discover-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.vote-discover-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.vote-discover-link:hover {
  background: rgba(157, 113, 246, 0.3);
  color: var(--text-white);
  transform: translateY(-1px);
}

.vote-discover-link svg {
  width: 17px;
  height: 17px;
}

/* Copy-hashtag pill + tooltip */
.vote-col--hashtag {
  display: flex;
  align-items: center;
}

.vote-hashtag {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: rgba(223, 223, 228, 0.92);
  color: #1a1a1a;
  font-family: inherit;
  font-size: clamp(0.78rem, 1.7vw, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

/* Inner label carries the ellipsis clipping so the pill itself can keep
   overflow visible — otherwise the tooltip bubble above gets clipped. */
.vote-hashtag__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-hashtag:hover {
  background: #ffffff;
}

.vote-hashtag:active {
  transform: scale(0.97);
}

.vote-hashtag.is-copied {
  background: #9d71f6;
  color: #ffffff;
}

/* Tooltip bubble driven by data-tip */
.vote-hashtag::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: #111015;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.vote-hashtag::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: #111015;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.vote-hashtag:hover::after,
.vote-hashtag:focus-visible::after,
.vote-hashtag.is-copied::after,
.vote-hashtag:hover::before,
.vote-hashtag:focus-visible::before,
.vote-hashtag.is-copied::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Vote button */
.vote-col--vote {
  display: flex;
  justify-content: flex-start;
}

.vote-vote-btn {
  min-width: 5rem;
  padding: 0.45rem 1.3rem;
  border: 1px solid var(--text-white);
  border-radius: 999px;
  background: var(--text-white);
  color: var(--text-black);
  font-family: inherit;
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.vote-vote-btn:hover {
  transform: translateY(-1px);
  background: #ececec;
}

.vote-vote-btn.is-voted {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(157, 113, 246, 0.7);
  cursor: default;
  transform: none;
}

/* Empty state */
.vote-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
}

/* --- Genre dropdown --- */
.vote-genre {
  position: relative;
}

.vote-genre__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-white);
  font-family: inherit;
  font-size: clamp(0.85rem, 1.9vw, 1.05rem);
  font-weight: 700;
  cursor: pointer;
}

.vote-genre__chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.vote-genre__toggle[aria-expanded="true"] .vote-genre__chevron {
  transform: rotate(180deg);
}

.vote-genre__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #17141f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 30;
}

.vote-genre__menu[hidden] {
  display: none;
}

.vote-genre__option {
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.vote-genre__option:hover {
  background: rgba(157, 113, 246, 0.2);
  color: var(--text-white);
}

.vote-genre__option[aria-selected="true"] {
  color: #b79bff;
  font-weight: 700;
}

/* --- Pagination --- */
.vote-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.vote-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.vote-page-btn svg {
  width: 18px;
  height: 18px;
}

.vote-page-btn:hover:not(:disabled) {
  background: rgba(157, 113, 246, 0.35);
  border-color: rgba(157, 113, 246, 0.7);
  transform: translateY(-1px);
}

.vote-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.vote-page-status {
  min-width: 3.2rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   Responsive — tablet / mobile card reflow
   ============================================================= */
@media (max-width: 768px) {
  .vote-methods {
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 5vw, 1.75rem);
  }

  .vote-methods__divider {
    align-self: center;
    width: 60%;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent
    );
  }

  /* Hide the column header row; each row becomes a self-labelled card */
  .vote-table__head {
    display: none;
  }

  .vote-table__body {
    gap: 0.85rem;
  }

  .vote-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
  }

  .vote-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .vote-col[data-label]::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    flex: 0 0 auto;
  }

  /* Track becomes the card header — full width, no label */
  .vote-col--track {
    justify-content: flex-start;
    padding-bottom: 0.65rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .vote-track-title {
    white-space: normal;
    font-size: 1rem;
  }

  .vote-col--artist,
  .vote-col--genre {
    white-space: normal;
  }

  .vote-col--discover {
    justify-content: space-between;
  }

  .vote-discover-group {
    display: inline-flex;
    gap: 0.5rem;
  }

  .vote-col--vote {
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .vote-board {
    padding: 1rem 0.85rem;
  }

  .vote-method {
    max-width: 100%;
  }

  .vote-thumb {
    width: 40px;
    height: 40px;
  }

  .vote-page-btn {
    width: 34px;
    height: 34px;
  }

  .vote-page-btn svg {
    width: 16px;
    height: 16px;
  }
}