/* 3D carousel — premium prize draw styling */
a,
a:visited,
a:active {
  color: inherit;
}

.header {
  flex-shrink: 0;
  margin: 0;
  width: min(520px, 88vw);
  padding: clamp(4px, 0.8vh, 10px) clamp(12px, 3vw, 24px);
  z-index: 2;
}

.title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--gold-soft, #e8d098);
  background: linear-gradient(135deg, var(--title-grad-a, #f5e6c4) 0%, var(--title-grad-b, #c9a24a) 50%, var(--title-grad-c, #e8d098) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  margin-top: 10px;
  font-size: clamp(var(--text-base), 1.8vh, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted, rgba(244, 245, 249, 0.55));
}

.song__title,
.song__year,
.song__artist {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.song__year:empty {
  display: none;
  margin: 0;
}

.song__title {
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.song__year {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.65;
}

.song__artist {
  display: none;
}

.carousel {
  --belt-radius-scale: 3;
  --slot-h: 120px;
  --cell-gap: 12px;
  --cell-h: calc(var(--slot-h) - var(--cell-gap));
  --cell-text-gap: clamp(8px, 1.2vh, 14px);
  --control-gap: clamp(4px, 0.6vh, 6px);
  --control-w: 36px;
  --control-offset: 16px;
  flex: 0 0 auto;
  position: relative;
  width: min(520px, 88vw);
  padding: 0;
  margin: 0;
  overflow: visible;
}

.carousel__scene {
  --slot-inset: clamp(16px, 3.5vw, 28px);
  position: relative;
  width: 100%;
  height: min(680px, max(280px, 50vh));
  perspective: 160px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  overflow: visible;
}

.carousel__frame {
  position: absolute;
  left: var(--slot-inset);
  right: var(--slot-inset);
  top: 50%;
  height: var(--cell-h);
  margin-top: calc(var(--cell-h) * -0.5);
  box-sizing: border-box;
  border: 2px solid var(--carousel-frame-border);
  pointer-events: none;
  box-shadow: none;
  z-index: 20;
  transform: translateZ(calc(var(--carousel-radius, 288px) + var(--cell-h) * 0.35));
  transform-style: preserve-3d;
}

.carousel__controls {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--control-gap);
  padding: 0;
  position: absolute;
  left: calc(100% + var(--control-offset));
  top: calc(50% - var(--cell-h) / 2);
  width: var(--control-w);
  height: auto;
  z-index: 5;
}

.previous-button,
.next-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  width: var(--control-w);
  height: var(--control-w);
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  color: var(--carousel-control-idle);
  box-shadow: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.previous-button svg,
.next-button svg {
  width: 20px;
  height: 20px;
}

.previous-button:hover,
.next-button:hover {
  border-color: rgba(232, 208, 152, 0.6);
  background: rgba(201, 162, 74, 0.12);
  backdrop-filter: blur(8px);
  color: var(--gold-soft, #e8d098);
}

.previous-button:focus,
.next-button:focus {
  outline: none;
}

.previous-button:focus-visible,
.next-button:focus-visible {
  border-color: rgba(232, 208, 152, 0.6);
  background: rgba(201, 162, 74, 0.12);
  backdrop-filter: blur(8px);
  color: var(--gold-soft, #e8d098);
}

.carousel__list {
  position: absolute;
  left: var(--slot-inset);
  right: var(--slot-inset);
  top: 50%;
  height: var(--slot-h);
  margin-top: calc(var(--slot-h) * -0.5);
  margin-bottom: 0;
  padding: 0;
  transform: translateZ(calc(-1 * var(--carousel-radius, 288px)));
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: none;
  list-style: none;
}

.carousel__cell {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.carousel__cell-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cell-gap) / 2);
  height: var(--cell-h);
  box-sizing: border-box;
  border: 1px solid var(--carousel-card-border);
  font-size: 18px;
  font-weight: 600;
  color: var(--text, #f4f5f9);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--carousel-card-bg);
  box-shadow:
    var(--carousel-card-shadow),
    inset 0 1px 0 var(--carousel-card-highlight),
    inset 0 -1px 0 var(--carousel-card-rim);
  transition: opacity 0.8s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.carousel__cell-text {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cell-text-gap);
  text-align: center;
}

.carousel__cell.selected .carousel__cell-inner {
  color: #1a1408;
  border-color: rgba(184, 137, 46, 0.65);
  background: var(--carousel-card-selected-bg);
  box-shadow:
    var(--carousel-card-selected-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(90, 62, 18, 0.22);
}

html[data-theme='dark'] .carousel__cell.selected .carousel__cell-inner {
  color: #1a1408;
}

html[data-theme='dark'] .carousel__cell.selected .song__title {
  color: #1a1408;
}

.carousel__cell.selected .song__title {
  color: #1a1408;
}

.carousel__cell.depleted .carousel__cell-inner {
  opacity: 0.28;
}

.title,
.subtitle {
  cursor: text;
  outline: none;
}

.title.is-placeholder,
.subtitle.is-placeholder {
  opacity: 0.45;
}

@media (max-width: 640px) {
  .carousel {
    --belt-radius-scale: 2.35;
    --slot-h: 96px;
    --cell-gap: 10px;
  }

  .header {
    padding: 2px 16px;
  }

  .carousel__scene {
    height: min(440px, max(300px, 46vh));
  }

  .carousel__controls {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-height: 720px) and (min-width: 641px) {
  .carousel__scene {
    height: min(520px, max(240px, 46vh));
  }

  .song__title {
    font-size: clamp(14px, 2.4vh, 1.1rem);
  }
}

@media (max-height: 560px) and (min-width: 641px) {
  .header {
    padding: 6px 16px;
  }

  .carousel__scene {
    height: min(400px, max(200px, 42vh));
  }

  .carousel__cell {
    font-size: 15px;
  }
}

@media (max-height: 480px) and (min-width: 641px) {
  .carousel__scene {
    height: min(320px, max(180px, 38vh));
  }

  .carousel__cell {
    font-size: 14px;
  }

  .carousel__cell-inner {
    font-size: 15px;
  }
}