/* ============================================================
   GLOBAL RESET + BASE TYPOGRAPHY
   (Applies to all pages — Stage, Catalog, Experience, Song, Origins)
   ============================================================ */

body {
  background: linear-gradient(to bottom, #000 0%, #0a0a0a 100%);
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: normal;
  margin: 0;
  padding: 0;
}

/* ============================================================
   GLOBAL LAYOUT + UTILITIES
   ============================================================ */

.section-header {
  font-size: 1.6rem;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  font-weight: 600;
  animation: fadeInUp 0.4s ease both; /* premium header animation */
}

.btn-primary {
  display: inline-block;
  background: #1a73e8;
  padding: 12px 24px;
  border-radius: 6px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
}

.btn-primary:hover {
  background: #2a82f0;
}

nav a.active {
  opacity: 1;
  font-weight: 600;
  border-bottom: 2px solid #fff;
}

/* Scroll fade (global aesthetic) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
  pointer-events: none;
  z-index: 5;
}

/* Header animation keyframes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GLOBAL HEADER
   (Used on all pages — internal name: .global-header)
   ============================================================ */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25)
  );
  backdrop-filter: blur(10px);
  color: white;
  padding: 20px 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* NEW */
  flex-direction: column;   /* stack rows vertically */
  gap: 12px;
}

.site-header-top {
  display: flex;
  justify-content: space-between;   /* branding left, speaker right */
  align-items: center;
  width: 100%;
}

.site-header > .branding,
.site-header > .autoplay-toggle {
  width: auto;
}

.branding {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  width: 70px;
  height: auto;
}

.branding h1 {
  margin: 0;
  font-size: 2.24rem;
  font-weight: 700;
}

.main-nav {
  margin-top: 20px;
  border-top: 1px solid #333;
  padding-top: 16px;
  width: 100%;
  display: flex;
  justify-content: flex-start;   /* left-align the menu */
  font-size: 1.125rem;   /* 18px — clean, readable */
  font-weight: 500;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  justify-content: flex-start;   /* left-align items */
  padding-left: 0;               /* remove browser default indent */
}

.main-nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* ============================================================
   GLOBAL HERO
   (Used on Stage Page, Experience Page, Song Page)
   ============================================================ */

.hero-banner {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}

.hero-banner img.hero-image {
  width: 100%;
  height: 380px; /* premium override */
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  will-change: transform;
}

.hero-banner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}

/* ============================================================
   GLOBAL FOOTER
   ============================================================ */

footer {
  text-align: center;
  padding: 32px;
  background-color: transparent;
  margin-top: 40px;
  font-size: 0.9rem;
}

/* ============================================================
   COMPONENTS — TILE SYSTEM
   (Used across Stage, Catalog, Experience, Song, Origins)
   ============================================================ */

.tile {
  width: 260px;
  display: block;
  background: #111;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; /* for vignette overlay */
}

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

.tile img {
  width: 260px;
  height: 180px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.tile.no-title .tile-title {
  display: none;
}

.tile-grid {
  display: grid;
  gap: 12px;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  justify-content: start;
}

/* Tile title (shared with carousel tiles) */
.tile .tile-title,
.tile .tile-title {
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 8px 10px;
  margin: 0;
  border-radius: 0 0 8px 8px;
  backdrop-filter: blur(4px);
  box-sizing: border-box;
  font-weight: 500;
  text-align: center;
  height: 70px; /* fixed visual height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cinematic vignette overlay */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Premium hover enhancement */
.tile:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}

/* Coming Soon tiles */
.tile.coming-soon,
.tile.coming-soon {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

.tile.coming-soon .tile-overlay,
.tile.coming-soon .tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  color: white;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.tile.coming-soon {
  border: 1px solid rgba(255,255,255,0.12);
}

/* ============================================================
   COMPONENTS — CAROUSEL
   (Used in Player Frame, Playlist Page, Song Page)
   ============================================================ */

.horizontal-strip {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  padding: 12px 0;
  width: 100%;
  box-sizing: border-box;
}

.horizontal-strip::-webkit-scrollbar {
  height: 10px;
}

.carousel {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.carousel::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.8), transparent);
}

.carousel::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);
}

/* Carousel tiles */
.carousel-tile {
  transition: transform 0.2s ease;
  border: 3px solid transparent;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  width: 180px; /* or whatever your tile width is */
  min-width: 180px;
  max-width: 180px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.carousel-tile img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.carousel-tile.active,
.playlist-tile.active {
  border: 3px solid rgba(180, 120, 220, 0.65);
  box-shadow: 0 0 12px rgba(180, 120, 220, 0.45);
}

/* Arrows */
.carousel-arrow {
  background: #ffffff;
  border: none;
  color: #333;
  width: 40px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.carousel-arrow:hover {
  background: #f0f0f0;
}

.carousel-arrow.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.left-arrow { margin-right: 12px; }
.right-arrow { margin-left: 12px; }

/* ============================================================
   COMPONENTS — PLAYER FRAME
   (Embed + Carousel + Themes)
   ============================================================ */

/* Global smoothing */
.player-frame,
.player-frame * {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Player title */
.player-title {
  margin: 0;
  padding: 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: left;
  color: #ffffff;
}

/* Player subtitle */
.player-subtitle {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.85;
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Header spacing */
.player-header {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
}

/* Base frame */
.player-frame {
  padding: 20px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  margin: 32px 40px;
  background: rgba(0,0,0,0.35);
  margin: 0 auto;
  overflow: visible !important;
  max-width: none !important;
  width: 100% !important;
}

/* Dark theme */
.player-frame--dark {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}

.player-frame--dark .tile-title {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  padding: 8px 10px;
  border-radius: 0 0 8px 8px;
  color: #fff;
  height: 70px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  font-weight: 500;
}

/* Purple theme (Playlist aesthetic) */
.player-frame--purple {
  background: rgba(47, 18, 61, 0.35);
}

.player-frame .carousel {
  margin-top: 16px;
}

.player-frame .carousel-arrow {
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(4px);
}

.player-frame .carousel-arrow:hover {
  background: rgba(255,255,255,0.25);
}

.player-frame .tile-title {
  background: rgba(180, 120, 220, 0.28);
  backdrop-filter: blur(6px);
  border-radius: 0 0 10px 10px;
}

.player-frame .video-wrapper {
  border-radius: 10px;
}

.player-frame .horizontal-strip {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  display: flex !important;
}

/* ============================================================
   COMPONENTS — CENTERED COLUMN LAYOUT
   ============================================================ */

.centered-column {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 900px) 1fr;
  column-gap: 20px;
  width: 100%;
  margin: 0 auto;
}

.centered-column > * {
  grid-column: 2;
}

/* ============================================================
   COMPONENTS — ABOUT BLOCK
   ============================================================ */

.about-block {
  margin: 32px 0;
  padding: 0 40px;
}

.about-block .section-header {
  margin-bottom: 12px;
}

.about-text {
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   COMPONENTS — LYRICS BLOCK
   ============================================================ */

.lyrics-block {
  margin: 32px 0;
  padding: 0 40px;
  white-space: pre-wrap;
  font-size: 0.95rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1 !important; /* final override */
}

.lyrics-block p {
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
  padding: 0 !important;
  white-space: pre-wrap !important;
}

.playlist-lyrics-text {
  margin: 32px 0;
  padding: 0 40px;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 0.95rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.playlist-lyrics-text p {
  margin-bottom: 10px;
  line-height: 1.45;
}

.lyrics-box {
  max-width: 600px;
  margin: 0 auto;
}

.lyrics-pre {
  margin-top: 12px;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.55;
}

.lyrics-box pre {
  font-size: 0.95rem;
}

.lyrics-box .lyrics-header {
  margin-bottom: 12px;
  text-align: left;
}

/* ============================================================
   COMPONENTS — BADGES
   ============================================================ */

.badge-new {
  background: rgba(255,255,255,0.15);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-left: 8px;
  backdrop-filter: blur(4px);
}

/* ============================================================
   PAGE: HOMEPAGE  (Internal name: Stage Page)
   ============================================================ */

.homepage-wrapper {
  padding: 0 40px;
  box-sizing: border-box;
}

.homepage-section {
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0;
  margin-bottom: 32px;
}

.homepage-section + .homepage-section {
  margin-top: 32px;
}

.homepage-section .section-header {
  margin-top: 0;
  margin-bottom: 12px;
}

.homepage-section .tile-grid {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  justify-items: start;
  justify-content: start;
}

.homepage-title {
  text-align: center;
  margin: 16px 0;
  font-size: 2rem;
  opacity: 0.9;
}

.homepage-teaser {
  position: relative;
  z-index: 20;
  margin-top: -140px;
  padding: 32px 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  line-height: 1.55;
  font-weight: 500;
  text-align: center;
}

.homepage-teaser p {
  position: relative;
  margin: 0 0 16px;
  text-align: left;
  padding-left: 28px;
}

.homepage-teaser p::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.homepage-collections {
  background: rgba(47, 18, 61, 0.35);
  backdrop-filter: blur(8px);
  border-radius: 12px;
}

.homepage-collections .tile-title {
  background: rgba(180, 120, 220, 0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 0 0 10px 10px;
}

/* ============================================================
   PAGE: MUSIC INDEX PAGE  (Internal name: Catalog Page)
   ============================================================ */

.music-page {
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 30px;
}


.music-page .page-title {
  text-align: center;
  margin: 32px 0;
}

.view-toggle {
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 20px;
}

.view-toggle-buttons {
  display: flex;
  gap: 12px;
}

.view-toggle-button {
  padding: 10px 20px;
  background: #222;
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.view-toggle-button:hover {
  background: #333;
  border-color: #555;
}

.view-toggle-button.active {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}

.view-toggle .page-title {
  flex: 1;
  text-align: center;
  margin: 0;
}

.view-toggle-spacer {
  width: 1px;
}

.music-page .section-header {
  margin-top: 0;
  margin-bottom: 12px;
}

.music-list {
  margin: 32px 0;
}

.music-song-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.music-song-list-item {
  margin: 8px 0;
}

.music-song-list-item a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}

.music-song-list-item a:hover {
  text-decoration: underline;
}

.music-page .playlist-section {
  margin: 32px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.music-page .playlist-section .tile-grid {
  background: rgba(255, 255, 255, 0.035);
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  align-content: start;
  justify-content: center;
  padding: 12px 20px;
  gap: 12px;
  box-sizing: border-box;
}

.music-page .playlist-section.music-collections {
  background: rgba(47, 18, 61, 0.35);
  backdrop-filter: blur(8px);
  border-radius: 12px;
}

.music-section {
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0;
  margin-bottom: 32px;
}

.music-collections .tile-title {
  background: rgba(180, 120, 220, 0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 0 0 10px 10px;
}

.page-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.view-toggle-button {
  background: rgba(255,255,255,0.08);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 1rem;
}

.view-toggle-button.active {
  background: rgba(255,255,255,0.18);
}














/* ============================================================
   PAGE: PLAYLIST PAGE  (Internal name: Experience Page)
   ============================================================ */

.playlist-list {
  padding: 0 40px;
  margin: 32px 0;
}

.playlist-items {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.playlist-item {
  margin: 8px 0;
}

.playlist-item a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}

.playlist-item a:hover {
  text-decoration: underline;
}

.playlist-section .tile-grid {
  justify-items: start;
  justify-content: start;
}

.playlist-tile.active {
  border: 3px solid rgba(180, 120, 220, 0.65);
  box-shadow: 0 0 12px rgba(180, 120, 220, 0.45);
}

.playlist-about .section-header,
.playlist-lyrics .section-header {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.playlist-description {
  font-size: 2rem !important;
  line-height: 1.5 !important;
  max-width: 2000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 12px !important;
  margin-bottom: 24px !important;
  color: #e8e8e8 !important;
  white-space: pre-line !important;
  text-align: left !important;
}

.playlist-description {
  text-align: center !important;
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   PAGE: SONG PAGE  (Internal name: Song Page)
   ============================================================ */

/* Title block */
.song-header {
  position: relative;
  z-index: 20;
  margin-top: -140px;
  padding: 0 40px;
  text-align: center;
}

.song-header .section-header {
  font-size: 2.4rem;
  margin-bottom: 8px;
}

.song-header .song-subtitle {
  font-size: 1.2rem;
  opacity: 0.85;
  margin-top: 4px;
}

/* About + Lyrics typography */
.song-description,
.lyrics-block {
  font-size: 1.15rem !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1 !important;
  color: #e8e8e8;
}

.song-description {
  white-space: pre-line !important;
}

.song-description p {
  margin-bottom: 14px !important;
}

.playlist-about-text {
  white-space: pre-line !important;
}

.playlist-about-text p {
  margin-bottom: 14px !important;
}

/* Section header spacing */
.song-about .section-header,
.song-lyrics .section-header {
  margin-bottom: 12px !important;
  text-align: center !important;
  font-size: 1.8rem !important;
}

.song-about {
  margin-bottom: 20px !important;
}

.song-lyrics .section-header {
  margin-top: 20px !important;
}

/* Vibe list spacing */
.song-description .vibe-line {
  margin-bottom: 6px !important;
}

/* Stanza spacing */
.lyrics-block p {
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
  white-space: pre-wrap !important;
}

.lyrics-block p:first-of-type {
  margin-top: 0 !important;
}

/* ============================================================
   PAGE: ABOUT PAGE  (Internal name: Origins Page)
   ============================================================ */

.about-page {
  margin-top: -120px;
  position: relative;
  z-index: 20;
  padding: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.about-page h1 {
  margin-bottom: 24px;
}

.about-page h2 {
  margin-top: 40px;
}

/* ============================================================
   OVERRIDES — SONG PAGE FINAL TYPOGRAPHY
   (Placed intentionally late in cascade)
   ============================================================ */

/* Tighten spacing between About → Lyrics */
.song-about {
  margin-bottom: 12px !important;
}

.song-lyrics .section-header {
  margin-top: 12px !important;
  margin-bottom: 6px !important;
}

/* Vibe list spacing */
.song-description .vibe-line {
  margin-bottom: 6px !important;
}

/* Stanza spacing */
.lyrics-block p {
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
  white-space: pre-wrap !important;
}

.lyrics-block p:first-of-type {
  margin-top: 0 !important;
}

/* Improve About + Lyrics readability */
.song-description,
.lyrics-block {
  font-size: 1.15rem !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1 !important;
  color: #e8e8e8;
}

/* Section headers spacing */
.song-about .section-header,
.song-lyrics .section-header {
  margin-bottom: 12px !important;
  text-align: center !important;
  font-size: 1.8rem !important;
}

/* Reduce space between About and Lyrics */
.song-about {
  margin-bottom: 20px !important;
}

.song-lyrics .section-header {
  margin-top: 20px !important;
}

/* Restore vibe list line breaks */
.song-description {
  white-space: pre-line !important;
}

.song-description p {
  margin-bottom: 14px !important;
}

.playlist-about-text {
  white-space: pre-line !important;
}

.playlist-about-text p {
  margin-bottom: 14px !important;
}

/* ============================================================
   OVERRIDES — PLAYER FRAME BREAKOUT
   (Full-width cinematic sizing)
   ============================================================ */

#player-container {
  width: 100% !important;
  height: 60vh !important;
  max-width: none !important;
}

#selected-song-player {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

#page-root {
  display: block;
  width: 100%;
}

/* ============================================================
   OVERRIDES — CAROUSEL TILE DIMENSIONS
   (Playlist + Song Page)
   ============================================================ */

.player-frame .carousel-tile {
  flex: 0 0 180px !important;
  width: 180px !important;
  height: auto !important;
}

.tile img,
.carousel-tile img,
.playlist-tile img {
  width: 100%;
  object-fit: cover;
}

.tile img {
  height: 180px;
}

.carousel-tile img,
.playlist-tile img {
  height: 180px;
}

.carousel-tile {
  flex: 0 0 auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.carousel-tile .tile-title {
  flex-shrink: 0 !important;
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  margin-top: 6px;
}

.horizontal-strip[data-strip] {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.carousel-tile,
.playlist-tile {
  flex: 0 0 180px !important;
  width: 180px !important;
  height: auto !important;
}

/* Music page carousel tiles match grid tile width */
.music-page .carousel-tile {
  flex: 0 0 240px !important;
  width: 240px !important;
}

/* ============================================================
   OVERRIDES — MOBILE CAROUSEL TILE RESIZE
   ============================================================ */

@media (max-width: 450px) {
  .player-frame .carousel-tile {
    flex: 0 0 32vw !important;
  }

  .player-frame .carousel-tile img {
    height: 22vw !important;
  }

  .player-frame .carousel-tile .tile-title {
    height: 42px !important;
    font-size: 0.8rem !important;
  }

  .player-frame .carousel-arrow {
    height: 100px !important;
  }
}

/* ============================================================
   PREMIUM — CINEMATIC HERO UPGRADE
   (Used globally where hero banners appear)
   ============================================================ */

.hero-banner img.hero-image {
  height: 380px;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
}

.hero-banner::after {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.92) 100%
  );
}

/* ============================================================
   PREMIUM — GLASS TEASER PANEL
   (Homepage hero text block)
   ============================================================ */

.homepage-teaser {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 32px 48px;
}

/* ============================================================
   PREMIUM — GLASS SECTION CARDS
   (Homepage sections)
   ============================================================ */

.homepage-section {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ============================================================
   PREMIUM — COLLECTIONS SHELF
   (Homepage + Playlist Page aesthetic)
   ============================================================ */

.homepage-collections {
  background: rgba(47,18,61,0.45);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 40px rgba(180,120,220,0.15);
}

/* ============================================================
   PREMIUM — TILE ENHANCEMENTS
   (Cinematic vignette, hover, frosted coming soon)
   ============================================================ */

/* Cinematic vignette already defined in Components section:
   .tile::after { radial-gradient vignette } */

/* Premium hover already defined in Components section:
   .tile:hover { scale + shadow } */

/* Frosted Coming Soon tiles already defined in Components section:
   .tile.coming-soon { border + opacity } */

/* ============================================================
   PREMIUM — HEADER GLASS UPGRADE
   (Overrides base header background)
   ============================================================ */

.site-header {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25)
  );
  backdrop-filter: blur(10px);
}

.autoplay-toggle {
  margin-left: auto;        /* pushes it all the way right */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}

.autoplay-toggle .icon {
  font-size: 2.5rem;          /* increase from ~1.2rem */
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.tile {
  position: relative;
  width: 260px;
  height: 180px;
  overflow: hidden;
}

.tile-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: rgba(0,0,0,0.5);
  color: white;
  z-index: 10;
}

.carousel-tile h3.tile-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  flex: 0 0 auto !important;
  margin-top: 6px !important;
  text-align: left !important;
}

.hero-title-overlay {
  position: absolute;
  z-index: 2;        /* <-- this is the missing piece */
  bottom: 4rem;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.hero-banner .hero-image {
  z-index: 1;        /* <-- ensures the image stays behind the title */
}