/* Shared swipeable genre selector: music-game / CD-jacket inspired. */
.genre-carousel {
  --genre-card-size: min(66vw, 280px);
  display: flex !important;
  grid-template-columns: none !important;
  gap: 14px !important;
  width: calc(100% + 40px);
  margin-inline: -20px;
  padding: 12px calc((100% - var(--genre-card-size)) / 2 + 20px) 20px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - var(--genre-card-size)) / 2);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.genre-carousel::-webkit-scrollbar { display: none; }

.genre-card {
  position: relative;
  flex: 0 0 var(--genre-card-size) !important;
  width: var(--genre-card-size) !important;
  height: var(--genre-card-size);
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  color: #fff !important;
  text-align: left;
  text-decoration: none;
  background: #64584f !important;
  border: 4px solid #ffffffc9 !important;
  border-radius: 24px !important;
  box-shadow: 0 9px 0 #00000032, 0 12px 28px #0000002b !important;
  opacity: .66;
  transform: scale(.91);
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.genre-card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.genre-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(135deg, #ffffff35 0 18%, transparent 18% 100%),
    linear-gradient(180deg, #00000000 38%, #0000001a 58%, #000000c7 100%);
}

.genre-card.selected {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
  border-color: #ffd35f !important;
  box-shadow: 0 0 0 4px #fff4bf, 0 9px 0 #d89a19, 0 16px 32px #00000038 !important;
}

.genre-card:active { transform: scale(.96); }

.genre-card-track {
  position: absolute;
  right: 15px;
  bottom: 13px;
  left: 15px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  text-shadow: 0 2px 6px #000, 0 1px 2px #000;
}

.genre-card-number {
  flex: 0 0 auto;
  padding-bottom: 2px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .85;
}

.genre-card-title {
  min-width: 0;
  font-size: clamp(23px, 7vw, 34px);
  font-weight: 1000;
  line-height: 1.05;
  text-align: right;
  text-wrap: balance;
}

.genre-card-flag {
  background: radial-gradient(circle at 50% 42%, #dff7ff 0 30%, #78cfff 31% 56%, #297ac5 57% 100%) !important;
}

.genre-card-flag-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-size: clamp(100px, 30vw, 150px);
  line-height: 1;
}

.genre-card-link { cursor: pointer; }

.genre-carousel-hint {
  margin: -5px 0 8px;
  color: #806b5d;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@media (min-width: 700px) {
  .genre-carousel { --genre-card-size: 260px; }
}

@media (max-width: 480px) {
  .genre-carousel {
    --genre-card-size: min(70vw, 245px);
    width: calc(100% + 20px);
    margin-inline: -10px;
    padding-inline: calc((100% - var(--genre-card-size)) / 2 + 10px);
  }

  .genre-card { border-radius: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .genre-card { transition: none; }
}