* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background-image: url("background2.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #4b2f46;
}

.page {
  width: 1200px;
  min-height: 900px;
  margin: 25px auto;
  padding: 70px 55px 55px 55px;

  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 25px;

  border-radius: 25px;
}

.sidebar,
.content {
  background: rgba(255, 250, 252, 0.58);
  border: 1px solid rgba(217, 169, 191, 0.65);
  box-shadow: 0 0 18px rgba(109, 68, 99, 0.12);
  backdrop-filter: blur(2px);
}

.sidebar {
  padding: 18px;
  border-radius: 20px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.sidebar h2,
.widget h3 {
  text-align: center;
  color: #8b4f75;
  font-weight: normal;
  letter-spacing: 2px;
}

nav a {
  display: block;
  text-decoration: none;
  color: #5a3652;
  background: #fffafd;
  border: 1px solid #d9a9bf;
  margin: 8px 0;
  padding: 10px;
  border-radius: 12px;
  transition: 0.3s;
}

nav a:hover,
nav a.active {
  background: #8b4f75;
  color: #fff7fb;
  transform: translateX(5px);
}

.widget {
  margin-top: 20px;
  padding: 12px;
  background: #fffafd;
  border: 1px dashed #c989aa;
  border-radius: 15px;
  text-align: center;
}

.album-art {
  width: 90px;
  height: 90px;
  margin: auto;
  border-radius: 12px;
  background:
    linear-gradient(rgba(22, 20, 45, 0.3), rgba(22, 20, 45, 0.3)),
    radial-gradient(circle at 30% 20%, #fff7c7 0 8%, transparent 9%),
    linear-gradient(135deg, #1d2344, #a46a9f);
  border: 2px solid #d9a9bf;
}

button {
  background: #8b4f75;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.counter {
  background: #1d1b2f;
  color: #fff;
  display: inline-block;
  padding: 6px 10px;
  letter-spacing: 3px;
  border-radius: 5px;
}

.content {
  padding: 30px;
  border-radius: 25px;
}

.site-header {
  text-align: center;
  padding: 25px;
  border-bottom: 1px solid #d9a9bf;
}

.moon {
  font-size: 45px;
  color: #8b4f75;
}

.site-header h1 {
  font-size: 64px;
  margin: 0;
  font-family: "Brush Script MT", cursive;
  color: #7f416e;
  font-weight: normal;
}

.site-header p {
  margin: 8px 0;
}

.tags {
  color: #a25c83;
  font-size: 14px;
  letter-spacing: 1px;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  margin: 30px 0;
  padding: 20px;
  border: 1px solid rgba(217, 169, 191, 0.8);
  border-radius: 20px;
  background: rgba(255, 250, 252, 0.55);
}

.hero-text h2 {
  font-weight: normal;
  color: #7f416e;
}

.signature {
  font-family: "Brush Script MT", cursive;
  font-size: 28px;
  color: #8b4f75;
}

.hero-image {
  min-height: 230px;
  border-radius: 18px;
  border: 1px solid #d9a9bf;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-image {
  background-image: url("Images/banner.png");
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.card,
.diary-preview {
  background: rgba(255, 250, 252, 0.85);
  border: 1px solid #d9a9bf;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 5px 15px rgba(139, 79, 117, 0.12);
}

.card h3,
.diary-preview h2 {
  color: #7f416e;
  font-weight: normal;
}

.card a {
  color: #8b4f75;
  text-decoration: none;
  font-weight: bold;
}

.private {
  background: linear-gradient(135deg, #fffafd, #f3d8e6);
}

.diary-preview {
  margin-top: 25px;
  text-align: center;
  font-style: italic;
}

footer {
  text-align: center;
  margin-top: 30px;
  color: #8b6b7f;
  font-size: 14px;
}

/* phone view */
@media (max-width: 900px) {
  .page {
    width: 95%;
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .site-header h1 {
    font-size: 42px;
  }
  
  .bottom-grid,
.bottom-buttons {
  grid-template-columns: 1fr;
}
}

/* ===== PRIVATE LETTER PASSWORD PAGE ===== */

.locked-box {
  max-width: 650px;
  margin: 50px auto;
  padding: 50px;
  text-align: center;
  background: #fffafd;
  border: 1px solid #d9a9bf;
  border-radius: 25px;
  box-shadow: 0 0 30px rgba(139, 79, 117, 0.2);
}

.locked-box h2 {
  font-size: 36px;
  font-weight: normal;
  color: #7f416e;
}

.locked-box input {
  width: 80%;
  padding: 14px;
  margin: 20px 0;
  border: 1px solid #d9a9bf;
  border-radius: 15px;
  background: #fff7fb;
  color: #4b2f46;
  font-size: 16px;
}

#error-message {
  color: #9b3f65;
}

.album-cover {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #d9a9bf;
  display: block;
  margin: 0 auto 10px auto;
}

.card-icon {
  width: 85px;
  height: 85px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #d9a9bf;
  display: block;
  margin: 0 auto 12px auto;
  box-shadow: 0 0 12px rgba(139, 79, 117, 0.18);
}

/* ===== SMALL ICONS INSIDE CARDS ===== */

.card img.card-icon {
  width: 75px !important;
  height: 75px !important;
  max-width: 75px !important;
  max-height: 75px !important;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #d9a9bf;
  display: block;
  margin: 0 auto 10px auto;
}

.main-banner {
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  display: block;
}

.card {
  display: grid;
  grid-template-columns: 75px 1fr;
  column-gap: 12px;
  align-items: center;
}

.card img.card-icon {
  width: 65px !important;
  height: 65px !important;
  max-width: 65px !important;
  max-height: 65px !important;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d9a9bf;
  margin: 0;
}

.card h3 {
  margin: 0 0 5px 0;
}

.card p {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.3;
}

.card a {
  font-size: 14px;
}

/* ===== EVEN HOMEPAGE CARDS ===== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card {
  min-height: 150px;
  background: rgba(255, 250, 252, 0.88);
  border: 1px solid #d9a9bf;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 5px 15px rgba(139, 79, 117, 0.12);
}

.card h3 {
  color: #7f416e;
  font-weight: normal;
  text-align: center;
  margin: 0 0 12px 0;
  font-size: 20px;
}

.card-body {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 12px;
  align-items: start;
}

.card img.card-icon {
  width: 75px !important;
  height: 75px !important;
  max-width: 75px !important;
  max-height: 75px !important;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d9a9bf;
  display: block;
}

.card-text {
  min-height: 75px;
  display: flex;
  flex-direction: column;
}

.card-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.card-text a {
  margin-top: auto;
  align-self: flex-end;
  color: #8b4f75;
  text-decoration: none;
  font-weight: bold;
}

/* ===== BOTTOM SECTIONS ===== */

.bottom-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  margin-top: 25px;
}

.site-updates {
  background: #fffafd;
  border: 1px solid #d9a9bf;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 5px 15px rgba(139, 79, 117, 0.12);
}

.site-updates h2 {
  color: #7f416e;
  font-weight: normal;
  text-align: center;
  margin-top: 0;
}

.site-updates p {
  border-bottom: 1px dashed #d9a9bf;
  padding-bottom: 8px;
  font-size: 14px;
}

.site-updates span {
  color: #9b5d83;
  font-weight: bold;
  margin-right: 8px;
}

.site-updates a {
  color: #8b4f75;
  text-decoration: none;
  font-weight: bold;
}

.bottom-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 25px;
  text-align: center;
}

.bottom-buttons a {
  background: #fffafd;
  border: 1px solid #d9a9bf;
  border-radius: 14px;
  padding: 12px;
  color: #7f416e;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(139, 79, 117, 0.12);
  transition: 0.3s;
}

.bottom-buttons a:hover {
  background: #8b4f75;
  color: #fff7fb;
  transform: translateY(-3px);
}

/* ===== FIX CARD TITLE ON TOP ===== */

.card {
  min-height: 145px;
  padding: 14px;
}

.card h3 {
  display: block;
  text-align: center;
  width: 100%;
  margin: 0 0 12px 0;
  color: #7f416e;
  font-weight: normal;
  font-size: 19px;
}

.card-body {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 12px;
  align-items: start;
}

.card img.card-icon {
  width: 75px !important;
  height: 75px !important;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d9a9bf;
}

.card-text {
  min-height: 75px;
  display: flex;
  flex-direction: column;
}

.card-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.card-text a {
  margin-top: auto;
  align-self: flex-end;
  color: #8b4f75;
  text-decoration: none;
  font-weight: bold;
}

/* ===== FORCE CARD LAYOUT FIX ===== */

.card {
  display: block !important;
  min-height: 145px !important;
  padding: 14px !important;
  background: rgba(255, 250, 252, 0.88) !important;
  border: 1px solid #d9a9bf !important;
  border-radius: 18px !important;
}

.card h3 {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
  color: #7f416e !important;
  font-weight: normal !important;
  font-size: 19px !important;
}

.card-body {
  display: grid !important;
  grid-template-columns: 75px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

.card img.card-icon {
  width: 75px !important;
  height: 75px !important;
  max-width: 75px !important;
  max-height: 75px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #d9a9bf !important;
  display: block !important;
}

.card-text {
  min-height: 75px !important;
  display: flex !important;
  flex-direction: column !important;
}

.card-text p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.card-text a {
  margin-top: auto !important;
  align-self: flex-end !important;
  color: #8b4f75 !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

/* ===== MUSIC ROOM ===== */

.music-hero {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 16px;
  margin: 25px 0;
}

.music-box {
  background: rgba(255, 250, 252, 0.9);
  border: 1px solid #d9a9bf;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(139, 79, 117, 0.08);
}

.music-intro h2,
.album-section h3,
.music-box h3 {
  margin-top: 0;
  color: #7f416e;
  font-weight: normal;
}

.music-intro p,
.featured-track p,
.music-box p,
.song-list li {
  font-size: 14px;
  line-height: 1.6;
}

.tiny-decor {
  text-align: center;
  margin-top: 20px;
  color: #b67d98;
}

.music-cover img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d9a9bf;
  display: block;
}

.small-label {
  font-size: 12px;
  color: #b67d98;
  margin-bottom: 8px;
}

.featured-track h3 {
  margin: 0 0 8px 0;
  color: #7f416e;
  font-weight: normal;
}

.fake-player-bar {
  width: 100%;
  height: 10px;
  background: #f1d7e2;
  border-radius: 999px;
  overflow: hidden;
  margin: 15px 0 8px 0;
  border: 1px solid #d9a9bf;
}

.fake-progress {
  width: 45%;
  height: 100%;
  background: #b97b99;
  border-radius: 999px;
}

.time-text {
  font-size: 12px;
  text-align: right;
  color: #8b6b7f;
}

.player-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  color: #8b4f75;
  margin-top: 14px;
}

.album-section {
  margin-bottom: 18px;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.album-item {
  text-align: center;
}

.album-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d9a9bf;
  display: block;
  margin-bottom: 8px;
}

.album-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.music-panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

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

.song-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed #d9a9bf;
  padding: 7px 0;
}

.song-list span {
  color: #8b6b7f;
  white-space: nowrap;
}

.song-diary-box .tiny-button {
  display: inline-block;
  background: #fffafd;
  border: 1px solid #d9a9bf;
  border-radius: 12px;
  padding: 8px 12px;
  text-decoration: none;
  color: #8b4f75;
  margin: 10px 0 14px 0;
}

.recent-list p {
  margin: 7px 0;
}

.music-box a,
.album-section a {
  color: #8b4f75;
  text-decoration: none;
  font-weight: bold;
}

.music-footer-note {
  text-align: center;
  margin: 25px 0 10px 0;
  color: #8b6b7f;
  font-size: 15px;
}

/* phone view for music room */
@media (max-width: 900px) {
  .music-hero {
    grid-template-columns: 1fr;
  }

  .album-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .music-panels {
    grid-template-columns: 1fr;
  }
}

/* ===== MINI YOUTUBE PLAYER IN SIDEBAR ===== */

.mini-youtube-player {
  width: 100%;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d9a9bf;
  box-shadow: 0 0 10px rgba(139, 79, 117, 0.15);
}

.mini-youtube-player iframe {
  width: 100%;
  height: 120px;
  display: block;
}

.tiny-note {
  font-size: 12px;
  color: #8b6b7f;
  margin-top: 8px;
}

.album-item {
  cursor: pointer;
  transition: 0.3s;
}

.album-item:hover {
  transform: translateY(-5px);
  filter: brightness(1.06);
}

.youtube-player {
  width: 100%;
  margin-top: 15px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #d9a9bf;
  box-shadow: 0 0 14px rgba(139, 79, 117, 0.15);
}

.youtube-player iframe {
  width: 100%;
  height: 190px;
  display: block;
}

.tiny-note {
  font-size: 12px;
  color: #8b6b7f;
  margin-top: 8px;
}

/* ===== CUSTOM STAR CURSOR ===== */

body {
  cursor: url("Images/cursor.png") 32 32, auto !important;
}

a,
button,
.album-item,
.card,
.bottom-buttons a {
  cursor: url("Images/cursor.png") 16 16, pointer;
}

/* ===== SHOOTING STAR TRAIL ===== */

.shooting-star {
  position: absolute;
  pointer-events: none;
  width: 7px;
  height: 7px;
  background: #fff7fb;
  border-radius: 50%;
  z-index: 9999;
  box-shadow:
    0 0 6px #ffffff,
    0 0 12px #ffb6d9,
    0 0 20px #d88bb8;
  animation: shootingTrail 0.6s ease-out forwards;
}

.shooting-star::after {
  content: "";
  position: absolute;
  top: 3px;
  left: -35px;
  width: 35px;
  height: 2px;
  background: linear-gradient(to left, #ffb6d9, transparent);
  border-radius: 999px;
}

@keyframes shootingTrail {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-35px, 20px) scale(0.4);
  }
}

/* ===== CUSTOM STAR CURSOR ===== */

html,
body,
* {
  cursor: url("Images/cursor.png") 24 24, auto !important;
}

a,
button,
input,
textarea,
.album-item,
.card,
.bottom-buttons a {
  cursor: url("Images/cursor.png") 24 24, pointer !important;
}

/* ===== DYNAMIC MUSIC ROOM ===== */

.music-room-dynamic {
  min-height: 1100px;
  padding: 0 45px 40px 45px;
  border-radius: 25px;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: #fff7fb;
  position: relative;
  box-shadow: 0 0 30px rgba(80, 40, 80, 0.3);
  transition: background-image 0.8s ease, background-color 0.8s ease;
}

.music-room-dynamic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 12, 35, 0.25),
    rgba(45, 25, 60, 0.15),
    rgba(255, 210, 230, 0.65)
  );
  pointer-events: none;
}

.music-room-dynamic > * {
  position: relative;
  z-index: 1;
}

/* scene backgrounds */
.celestial-theme {
  background-image: url("Images/scene-celestial.png");
}

.arcade-theme {
  background-image: url("Images/scene-arcade.png");
}

.morning-theme {
  background-image: url("Images/scene-morning.png");
}

.heartbeats-theme {
  background-image: url("Images/scene-heartbeats.png");
}

.rain-theme {
  background-image: url("Images/scene-rain.png");
}

.pop-theme {
  background-image: url("Images/scene-pop.png");
}

.waltz-theme {
  background-image: url("Images/scene-waltz.png");
}

.velvet-theme {
  background-image: url("Images/scene-velvet.png");
}

.music-top-nav {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 18px;
  background: rgba(35, 20, 50, 0.45);
  border-bottom: 1px solid rgba(255, 220, 240, 0.35);
  backdrop-filter: blur(6px);
}

.music-top-nav a {
  color: #fff7fb;
  text-decoration: none;
  font-size: 15px;
  text-shadow: 0 0 10px rgba(255, 200, 230, 0.8);
}

.music-top-nav a.active {
  color: #ffd4ea;
  border-bottom: 1px solid #ffd4ea;
}

.music-title-area {
  text-align: center;
  padding: 70px 20px 25px 20px;
}

.welcome-line {
  font-style: italic;
  font-size: 22px;
  margin: 0;
}

.music-title-area h1 {
  font-size: 72px;
  line-height: 0.95;
  font-weight: normal;
  margin: 12px 0;
  color: #fff7fb;
  text-shadow:
    0 0 10px rgba(255, 200, 230, 0.9),
    0 0 25px rgba(255, 170, 220, 0.7);
}

.music-title-area p {
  font-size: 18px;
  max-width: 520px;
  margin: 12px auto;
  line-height: 1.6;
}

.main-music-button {
  margin-top: 12px;
  padding: 12px 35px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 240, 0.7);
  background: rgba(120, 70, 100, 0.45);
  color: #fff7fb;
  font-family: Georgia, serif;
  font-size: 16px;
  box-shadow: 0 0 18px rgba(255, 180, 220, 0.4);
}

.big-player {
  width: 560px;
  margin: 10px auto 28px auto;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  background: rgba(90, 55, 90, 0.48);
  border: 1px solid rgba(255, 220, 240, 0.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 25px rgba(255, 170, 220, 0.2);
}

.big-player img {
  width: 95px;
  height: 95px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 240, 0.6);
}

.player-info h3 {
  margin: 0;
  font-weight: normal;
  font-size: 20px;
}

.player-info p {
  margin: 4px 0 12px 0;
  font-size: 13px;
}

.player-line {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.player-bar {
  height: 4px;
  background: rgba(255, 230, 245, 0.35);
  border-radius: 999px;
}

.player-progress {
  width: 45%;
  height: 100%;
  background: #ffd4ea;
  border-radius: 999px;
}

.player-controls {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 12px;
  font-size: 18px;
}

.play-circle {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 230, 245, 0.8);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 20px 0;
}

.music-action-card,
.genre-panel,
.feature-card {
  background: rgba(255, 245, 250, 0.88);
  color: #68415f;
  border: 1px solid rgba(217, 169, 191, 0.85);
  border-radius: 20px;
  box-shadow: 0 0 18px rgba(255, 180, 220, 0.18);
}

.music-action-card {
  min-height: 130px;
  padding: 18px;
  display: grid;
  grid-template-columns: 70px 1fr 30px;
  align-items: center;
  gap: 12px;
}

.action-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(150, 90, 125, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.music-action-card h3 {
  margin: 0;
  font-size: 25px;
  font-weight: normal;
}

.music-action-card p {
  margin: 6px 0 0 0;
  font-size: 13px;
}

.genre-control-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 25px 0;
}

.genre-panel {
  padding: 20px;
  text-align: center;
}

.genre-panel h2 {
  margin: 0 0 15px 0;
  font-weight: normal;
  font-size: 28px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.pill-row button,
.pill-row span {
  border: 1px solid rgba(190, 140, 165, 0.65);
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(255, 250, 252, 0.45);
  color: #68415f;
  font-family: Georgia, serif;
  cursor: pointer;
}

.pill-row button:hover {
  background: #8b4f75;
  color: #fff7fb;
}

.featured-section {
  background: rgba(255, 245, 250, 0.35);
  border: 1px solid rgba(255, 220, 240, 0.35);
  border-radius: 24px;
  padding: 22px;
  margin-top: 20px;
}

.featured-section h2 {
  text-align: center;
  font-weight: normal;
  color: #4d2d47;
  font-size: 28px;
  margin-top: 0;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-card {
  overflow: hidden;
  text-align: center;
  padding-bottom: 15px;
}

.feature-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.feature-card h3 {
  font-weight: normal;
  margin: 14px 10px 4px 10px;
  font-size: 22px;
}

.feature-card p {
  margin: 0 10px 12px 10px;
  font-size: 14px;
}

.feature-card button {
  border: 1px solid #d9a9bf;
  background: #fffafd;
  color: #68415f;
  border-radius: 999px;
  padding: 8px 28px;
  font-family: Georgia, serif;
}

.music-room-footer {
  text-align: center;
  color: #5b3653;
  margin: 24px 0 0 0;
  font-style: italic;
}

/* mood color changes */
.morning-theme::before {
  background: linear-gradient(to bottom, rgba(255, 190, 130, 0.25), rgba(255, 230, 210, 0.72));
}

.heartbeats-theme::before {
  background: linear-gradient(to bottom, rgba(80, 10, 25, 0.25), rgba(255, 180, 200, 0.65));
}

.rain-theme::before {
  background: linear-gradient(to bottom, rgba(15, 25, 60, 0.35), rgba(190, 185, 220, 0.72));
}

.velvet-theme::before {
  background: linear-gradient(to bottom, rgba(5, 0, 15, 0.45), rgba(55, 25, 60, 0.75));
}

.velvet-theme .music-action-card,
.velvet-theme .genre-panel,
.velvet-theme .feature-card {
  background: rgba(45, 25, 55, 0.78);
  color: #ffe6f3;
  border-color: rgba(255, 160, 210, 0.35);
}

.velvet-theme .featured-section h2,
.velvet-theme .music-room-footer {
  color: #ffe6f3;
}

/* phone view */
@media (max-width: 900px) {
  .music-top-nav {
    flex-wrap: wrap;
    gap: 16px;
  }

  .music-title-area h1 {
    font-size: 44px;
  }

  .big-player {
    width: 95%;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .big-player img {
    margin: auto;
  }

  .quick-actions,
  .genre-control-row,
  .featured-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== EXTRA MUSIC SCENES ===== */

.milkyway-theme {
  background-image: url("Images/scene-milkyway.png");
}

.diary-theme {
  background-image: url("Images/scene-diary.png");
}

.gcrush-theme {
  background-image: url("Images/scene-gcrush.png");
}

.nasheed-theme {
  background-image: url("Images/scene-Nasheed.png");
}

.epic-theme {
  background-image: url("Images/scene-epic.png");
}

.instrumental-theme {
  background-image: url("Images/scene-Instrumental.png");
}

/* special mood overlays */
.milkyway-theme::before {
  background: linear-gradient(to bottom, rgba(80, 40, 130, 0.22), rgba(255, 190, 230, 0.65));
}

.diary-theme::before {
  background: linear-gradient(to bottom, rgba(35, 25, 70, 0.25), rgba(220, 200, 255, 0.68));
}

.gcrush-theme::before {
  background: linear-gradient(to bottom, rgba(90, 20, 70, 0.28), rgba(255, 180, 220, 0.62));
}

.nasheed-theme::before {
  background: linear-gradient(to bottom, rgba(35, 45, 70, 0.22), rgba(230, 220, 190, 0.68));
}

.instrumental-theme::before {
  background: linear-gradient(to bottom, rgba(40, 30, 65, 0.24), rgba(245, 220, 240, 0.68));
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <title>Erryanna Astria | Celestial Diary</title>

  <link rel="stylesheet" href="style.css">
</head>

<body id="top">

  <div class="music-page">

  <section class="music-room-dynamic celestial-theme" id="musicRoom">

  <nav class="music-top-nav">
    <a href="index.html">⌂ Home</a>
    <a href="about.html">★ About</a>
    <a href="music.html" class="active">♥ Music</a>
    <a href="diary.html">☾ Diary</a>
    <a href="library.html">📚 Library</a>
    <a href="gaming.html">🎮 Games</a>
    <a href="letters.html">✉ Letters</a>
  </nav>

  <header class="music-title-area">
    <p class="welcome-line">Welcome to my</p>
    <h1 id="roomTitle">Celestial Music Room</h1>
    <p id="roomSubtitle">A sanctuary of sounds, stories, and starlit melodies.</p>
    <button class="main-music-button" id="roomButton">Let the music guide you. ✦</button>
  </header>

  <section class="big-player">
    <img src="Images/album1.png" id="playerCover" alt="Album cover">

    <div class="player-info">
      <h3 id="playerSong">Stardust Lullaby</h3>
      <p id="playerArtist">Erryanna Astria</p>

      <div class="player-line">
        <span id="playerStart">01:28</span>
        <div class="player-bar">
          <div class="player-progress"></div>
        </div>
        <span id="playerEnd">04:37</span>
      </div>

      <div class="player-controls">
        <span>⏮</span>
        <span class="play-circle">▶</span>
        <span>⏭</span>
      </div>
    </div>
  </section>

  <section class="quick-actions">
    <div class="music-action-card">
      <div class="action-icon">♫</div>
      <h3>Open Playlist</h3>
      <p>Explore my curated playlists</p>
      <span>→</span>
    </div>

    <div class="music-action-card">
      <div class="action-icon">✧</div>
      <h3>Enter Genre</h3>
      <p>Browse by music genre</p>
      <span>→</span>
    </div>

    <div class="music-action-card">
      <div class="action-icon">▻</div>
      <h3>Watch Content</h3>
      <p>Music videos, live sessions & more</p>
      <span>→</span>
    </div>

    <div class="music-action-card">
      <div class="action-icon">🎧</div>
      <h3>Listen Here</h3>
      <p>Press play and stay awhile</p>
      <span>→</span>
    </div>
  </section>

  <section class="genre-control-row">

    <div class="genre-panel">
      <h2>Genres</h2>
      <div class="pill-row">
        <button onclick="changeMusicScene('celestial')">Celestial</button>
        <button onclick="changeMusicScene('arcade')">Game OST</button>
        <button onclick="changeMusicScene('morning')">Soft Morning</button>
        <button onclick="changeMusicScene('heartbeats')">Romance</button>
        <button onclick="changeMusicScene('rain')">Rainy Lo-fi</button>
        <button onclick="changeMusicScene('pop')">Starlight Pop</button>
        <button onclick="changeMusicScene('waltz')">Rose Waltz</button>
        <button onclick="changeMusicScene('velvet')">Velvet Eclipse</button>
        <button onclick="changeMusicScene('milkyway')">Milkyway</button>
        <button onclick="changeMusicScene('diary')">Diary Songs</button>
        <button onclick="changeMusicScene('gcrush')">Girl Crush</button>
        <button onclick="changeMusicScene('nasheed')">Nasheed</button>
        <button onclick="changeMusicScene('instrumental')">Instrumental</button>
         <button onclick="changeMusicScene('epic')">Epic</button>
      </div>
      <p>Click a genre to change the room →</p>
    </div>

    <div class="genre-panel">
      <h2>Life</h2>
      <div class="pill-row" id="lifeTags">
        <span>Late Nights</span>
        <span>Study Days</span>
        <span>Quiet Mornings</span>
        <span>Solo Moments</span>
      </div>
      <p>Explore by life →</p>
    </div>

    <div class="genre-panel">
      <h2>Feelings</h2>
      <div class="pill-row" id="feelingTags">
        <span>Dreamy</span>
        <span>Healing</span>
        <span>Midnight</span>
        <span>Hopeful</span>
      </div>
      <p>Explore by feeling →</p>
    </div>

  </section>

  <section class="featured-section">
    <h2>Featured For You</h2>

    <div class="featured-grid" id="featuredGrid">

      <div class="feature-card">
        <img src="Images/album1.png" alt="Featured 1">
        <h3>Moonlit Reverie</h3>
        <p>A dreamy escape</p>
        <button>Listen Now ▶</button>
      </div>

      <div class="feature-card">
        <img src="Images/album2.png" alt="Featured 2">
        <h3>Starlight Acoustic</h3>
        <p>Soft songs, raw feelings</p>
        <button>Listen Now ▶</button>
      </div>

      <div class="feature-card">
        <img src="Images/album3.png" alt="Featured 3">
        <h3>Midnight Whispers</h3>
        <p>For the quiet hours</p>
        <button>Listen Now ▶</button>
      </div>

      <div class="feature-card">
        <img src="Images/album4.png" alt="Featured 4">
        <h3>Hopeful Horizons</h3>
        <p>Lift your spirit</p>
        <button>Listen Now ▶</button>
      </div>

    </div>
  </section>

  <footer class="music-room-footer">
    <p id="roomQuote">“Music is the moonlight of the soul.” — Erryanna Astria</p>
  </footer>

</section>

<section class="music-panels">

  <div class="music-box">
    <h3>playlists</h3>
    <ul class="song-list">
      <li>♫ late night thoughts <span>23 songs</span></li>
      <li>🎮 gaming vibes <span>18 songs</span></li>
      <li>✍ writing hours <span>31 songs</span></li>
      <li>☁ soft & sleepy <span>27 songs</span></li>
      <li>☔ rainy day nostalgia <span>22 songs</span></li>
    </ul>
    <a href="#">view all playlists →</a>
  </div>

  <div class="music-box">
    <h3>favorite songs</h3>
    <ul class="song-list">
      <li>Stargazer <span>03:48</span></li>
      <li>Paper Moons <span>04:22</span></li>
      <li>Velvet Shadows <span>03:57</span></li>
      <li>Little Ghost <span>04:05</span></li>
      <li>Bloom in the Dark <span>04:41</span></li>
    </ul>
    <a href="#">view all favorites →</a>
  </div>

  <div class="music-box">
    <h3>mood playlists</h3>
    <ul class="song-list">
      <li>☾ for dreamy nights <span>20 songs</span></li>
      <li>☀ for quiet mornings <span>18 songs</span></li>
      <li>♡ for soft hearts <span>25 songs</span></li>
      <li>☔ for rainy days <span>19 songs</span></li>
      <li>✧ for starry skies <span>22 songs</span></li>
    </ul>
    <a href="#">view all moods →</a>
  </div>

  <div class="music-box song-diary-box">
    <h3>song diary</h3>
    <p>
      a little journal of the songs that find me
      when I need them most.
    </p>

    <a href="#" class="tiny-button">write a new entry</a>

    <div class="recent-list">
      <p><b>recent entries</b></p>
      <p>✧ 05/18 - Rain in My Room</p>
      <p>✧ 05/16 - Songs for Overthinking</p>
      <p>✧ 05/13 - Late Night Drive</p>
      <a href="#">view all entries →</a>
    </div>
  </div>

</section>

<footer class="music-footer-note">
  <p>♫ music is the moonlight of the soul. ✧ thank you for listening ♡ ✧ stay magical, always.</p>
</footer>

<section class="bottom-buttons">
  <a href="#">♥ add to favorites</a>
  <a href="message.html">✉ send message</a>
  <a href="#">✧ thank you for visiting!</a>
  <a href="updates.html">☆ what's new?</a>
  <a href="#top">☾ back to top ↑</a>
</section>

      <footer>
        <p>✧ written in moonlight. built with love. forever a work in progress. ✧</p>
        <p>© 2026 Erryanna Astria | Hosted on Neocities</p>
      </footer>

    </main>

  </div>

<script>
  function changeSong(videoId, title, artist, album) {
    const player = document.getElementById("music-player");
    const songTitle = document.getElementById("song-title");
    const songArtist = document.getElementById("song-artist");
    const songAlbum = document.getElementById("song-album");

    player.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";

    songTitle.textContent = title;
    songArtist.textContent = artist;
    songAlbum.textContent = album;
  }
</script>

<script src="script.js"></script>

</body>
</html>

/* ===== FIX MUSIC TOP NAV ===== */

.music-top-nav a {
  background: transparent !important;
  border: none !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: #fff7fb !important;
  transform: none !important;
}

.music-top-nav a:hover,
.music-top-nav a.active {
  background: transparent !important;
  color: #ffd4ea !important;
  border-bottom: 1px solid #ffd4ea !important;
}

.celestial-theme {
  background-image: url("Images/scene-celestial.png");
}

.arcade-theme {
  background-image: url("Images/scene-arcade.png");
}

.milkyway-theme {
  background-image: url("Images/scene-milkyway.png");
}

.diary-theme {
  background-image: url("Images/scene-diary.png");
}

.gcrush-theme {
  background-image: url("Images/scene-gcrush.png");
}

.nasheed-theme {
  background-image: url("Images/scene-Nasheed.png");
}

.instrumental-theme {
  background-image: url("Images/scene-Instrumental.png");
}

/* ==============================
   GLOWING MUSIC HEADER
============================== */

.music-glow-header {
  position: relative;
  width: 100%;
  padding: 18px 40px 14px;
  text-align: center;
  background:
    linear-gradient(to bottom, rgba(18, 10, 35, 0.78), rgba(35, 20, 55, 0.45)),
    rgba(20, 12, 38, 0.35);
  border-bottom: 1px solid rgba(255, 213, 235, 0.35);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(255, 225, 240, 0.15);
  backdrop-filter: blur(8px);
  z-index: 20;
  overflow: hidden;
}

.music-glow-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 236, 245, 0.22), transparent 42%),
    radial-gradient(circle at 35% 0%, rgba(255, 210, 235, 0.15), transparent 25%),
    radial-gradient(circle at 70% 0%, rgba(255, 210, 240, 0.10), transparent 25%);
  pointer-events: none;
}

.music-glow-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 47px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 220, 238, 0.25),
    rgba(255, 230, 245, 0.75),
    rgba(255, 220, 238, 0.25),
    transparent
  );
}

/* logo */
.music-logo {
  margin: 0 0 10px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #fff6fb;
  position: relative;
  z-index: 2;
  text-shadow:
    0 0 2px rgba(255,255,255,0.95),
    0 0 8px rgba(255, 235, 245, 0.95),
    0 0 18px rgba(255, 203, 229, 0.80),
    0 0 32px rgba(235, 180, 220, 0.55),
    0 0 55px rgba(205, 150, 210, 0.28);
}

/* nav */
.music-top-nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.music-top-nav a {
  position: relative;
  text-decoration: none;
  color: #fff7fc;
  font-size: 15px;
  letter-spacing: 0.2px;
  padding: 4px 2px 8px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-shadow:
    0 0 4px rgba(255, 230, 242, 0.9),
    0 0 10px rgba(255, 196, 225, 0.35);
  transition: 0.25s ease;
}

.music-top-nav a:hover,
.music-top-nav a.active {
  color: #ffe8f3 !important;
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 14px rgba(255, 218, 238, 0.95),
    0 0 24px rgba(255, 189, 222, 0.55);
}

.music-top-nav a.active::after,
.music-top-nav a:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, #ffe8f4, transparent);
  box-shadow: 0 0 10px rgba(255, 215, 235, 0.85);
}

/* top right icons */
.music-top-icons {
  position: absolute;
  top: 22px;
  right: 28px;
  display: flex;
  gap: 10px;
  z-index: 3;
}

.music-top-icons span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff7fb;
  border: 1px solid rgba(255, 218, 236, 0.45);
  background: rgba(75, 47, 92, 0.22);
  box-shadow:
    0 0 10px rgba(255, 210, 233, 0.18),
    inset 0 0 8px rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  text-shadow: 0 0 10px rgba(255, 225, 240, 0.85);
}

/* moon emblem */
.moon-emblem {
  position: absolute;
  top: 6px;
  left: 18px;
  width: 120px;
  height: 120px;
  z-index: 3;
  pointer-events: none;
}

.moon-ring {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 219, 238, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 204, 227, 0.14);
}

.moon-main {
  position: absolute;
  left: 30px;
  top: 22px;
  font-size: 54px;
  color: #fff1f7;
  text-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 20px rgba(255, 214, 236, 0.85),
    0 0 35px rgba(218, 168, 214, 0.5);
}

.moon-star {
  position: absolute;
  color: #ffeaf5;
  text-shadow:
    0 0 8px rgba(255,255,255,0.95),
    0 0 16px rgba(255, 214, 236, 0.65);
  font-size: 18px;
}

.star1 {
  left: 18px;
  bottom: 18px;
}

.star2 {
  left: 72px;
  bottom: 10px;
  font-size: 14px;
}

/* mobile */
@media (max-width: 900px) {
  .music-logo {
    font-size: 42px;
  }

  .music-top-nav {
    gap: 16px;
  }

  .music-top-icons {
    top: 12px;
    right: 14px;
    gap: 6px;
  }

  .music-top-icons span {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .moon-emblem {
    transform: scale(0.72);
    transform-origin: top left;
    left: 0;
    top: 2px;
  }

  .music-glow-header::after {
    bottom: 58px;
  }
}

.music-page .sidebar {
  display: none;
}

.music-page .page {
  width: 100%;
  max-width: 100%;
  display: block;
  padding: 0;
  background: none;
}


/* =====================================================
   CLEAN FULL MUSIC ROOM PAGE
===================================================== */

.music-page-body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #170f2b;
}

.music-page {
  width: 100%;
  margin: 0;
  padding: 0;
}

.music-room-dynamic {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 45px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: #fff7fb;
  transition:
    background-image 0.8s ease,
    background-color 0.8s ease;
}

.music-room-dynamic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 220, 245, 0.12), transparent 35%),
    linear-gradient(
      to bottom,
      rgba(18, 10, 35, 0.28),
      rgba(70, 38, 85, 0.18),
      rgba(255, 205, 230, 0.72)
    );
  pointer-events: none;
  z-index: 0;
}

.music-room-dynamic > * {
  position: relative;
  z-index: 1;
}

/* =====================================================
   SCENE BACKGROUNDS
===================================================== */

.celestial-theme {
  background-image: url("Images/scene-celestial.png");
}

.arcade-theme {
  background-image: url("Images/scene-arcade.png");
}

.morning-theme {
  background-image: url("Images/scene-morning.png");
}

.heartbeats-theme {
  background-image: url("Images/scene-heartbeats.png");
}

.rain-theme {
  background-image: url("Images/scene-rain.png");
}

.pop-theme {
  background-image: url("Images/scene-pop.png");
}

.waltz-theme {
  background-image: url("Images/scene-waltz.png");
}

.velvet-theme {
  background-image: url("Images/scene-velvet.png");
}

.milkyway-theme {
  background-image: url("Images/scene-milkyway.png");
}

.diary-theme {
  background-image: url("Images/scene-diary.png");
}

.gcrush-theme {
  background-image: url("Images/scene-gcrush.png");
}

.nasheed-theme {
  background-image: url("Images/scene-nasheed.png");
}

.epic-theme {
  background-image: url("Images/scene-epic.png");
}

.instrumental-theme {
  background-image: url("Images/scene-instrumental.png");
}

/* overlays for different moods */

.morning-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 245, 220, 0.2), transparent 35%),
    linear-gradient(to bottom, rgba(255, 180, 115, 0.25), rgba(255, 225, 205, 0.78));
}

.heartbeats-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 150, 190, 0.18), transparent 35%),
    linear-gradient(to bottom, rgba(80, 10, 30, 0.32), rgba(255, 170, 200, 0.72));
}

.rain-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(190, 205, 255, 0.12), transparent 35%),
    linear-gradient(to bottom, rgba(15, 25, 60, 0.38), rgba(200, 190, 225, 0.74));
}

.velvet-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(130, 60, 150, 0.13), transparent 35%),
    linear-gradient(to bottom, rgba(5, 0, 18, 0.52), rgba(45, 20, 55, 0.82));
}

.gcrush-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 130, 210, 0.18), transparent 35%),
    linear-gradient(to bottom, rgba(90, 20, 70, 0.32), rgba(255, 180, 220, 0.68));
}

.nasheed-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 245, 220, 0.14), transparent 35%),
    linear-gradient(to bottom, rgba(35, 45, 70, 0.25), rgba(232, 220, 190, 0.72));
}

.instrumental-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 235, 250, 0.14), transparent 35%),
    linear-gradient(to bottom, rgba(45, 30, 70, 0.25), rgba(245, 220, 240, 0.74));
}

/* =====================================================
   GLOWING HEADER
===================================================== */

.music-glow-header {
  position: relative;
  width: 100%;
  padding: 18px 40px 14px;
  text-align: center;
  background:
    linear-gradient(to bottom, rgba(18, 10, 35, 0.78), rgba(35, 20, 55, 0.45)),
    rgba(20, 12, 38, 0.35);
  border-bottom: 1px solid rgba(255, 213, 235, 0.35);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(255, 225, 240, 0.15);
  backdrop-filter: blur(8px);
  z-index: 20;
  overflow: hidden;
}

.music-glow-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 236, 245, 0.22), transparent 42%),
    radial-gradient(circle at 35% 0%, rgba(255, 210, 235, 0.15), transparent 25%),
    radial-gradient(circle at 70% 0%, rgba(255, 210, 240, 0.10), transparent 25%);
  pointer-events: none;
}

.music-glow-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 47px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 220, 238, 0.25),
    rgba(255, 230, 245, 0.75),
    rgba(255, 220, 238, 0.25),
    transparent
  );
}

.music-logo {
  margin: 0 0 10px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #fff6fb;
  position: relative;
  z-index: 2;
  text-shadow:
    0 0 2px rgba(255,255,255,0.95),
    0 0 8px rgba(255, 235, 245, 0.95),
    0 0 18px rgba(255, 203, 229, 0.80),
    0 0 32px rgba(235, 180, 220, 0.55),
    0 0 55px rgba(205, 150, 210, 0.28);
}

.music-top-nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  padding-top: 10px;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}

.music-top-nav a {
  position: relative;
  text-decoration: none;
  color: #fff7fc !important;
  font-size: 15px;
  letter-spacing: 0.2px;
  padding: 4px 2px 8px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
  text-shadow:
    0 0 4px rgba(255, 230, 242, 0.9),
    0 0 10px rgba(255, 196, 225, 0.35);
  transition: 0.25s ease;
}

.music-top-nav a:hover,
.music-top-nav a.active {
  color: #ffe8f3 !important;
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 14px rgba(255, 218, 238, 0.95),
    0 0 24px rgba(255, 189, 222, 0.55);
}

.music-top-nav a.active::after,
.music-top-nav a:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, #ffe8f4, transparent);
  box-shadow: 0 0 10px rgba(255, 215, 235, 0.85);
}

.music-top-icons {
  position: absolute;
  top: 22px;
  right: 28px;
  display: flex;
  gap: 10px;
  z-index: 3;
}

.music-top-icons span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff7fb;
  border: 1px solid rgba(255, 218, 236, 0.45);
  background: rgba(75, 47, 92, 0.22);
  box-shadow:
    0 0 10px rgba(255, 210, 233, 0.18),
    inset 0 0 8px rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  text-shadow: 0 0 10px rgba(255, 225, 240, 0.85);
}

.moon-emblem {
  position: absolute;
  top: 6px;
  left: 18px;
  width: 120px;
  height: 120px;
  z-index: 3;
  pointer-events: none;
}

.moon-ring {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 219, 238, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255, 204, 227, 0.14);
}

.moon-main {
  position: absolute;
  left: 30px;
  top: 22px;
  font-size: 54px;
  color: #fff1f7;
  text-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 20px rgba(255, 214, 236, 0.85),
    0 0 35px rgba(218, 168, 214, 0.5);
}

.moon-star {
  position: absolute;
  color: #ffeaf5;
  text-shadow:
    0 0 8px rgba(255,255,255,0.95),
    0 0 16px rgba(255, 214, 236, 0.65);
  font-size: 18px;
}

.star1 {
  left: 18px;
  bottom: 18px;
}

.star2 {
  left: 72px;
  bottom: 10px;
  font-size: 14px;
}

/* =====================================================
   HERO TITLE AREA
===================================================== */

.music-title-area {
  text-align: center;
  padding: 60px 20px 25px;
}

.welcome-line {
  font-style: italic;
  font-size: 23px;
  margin: 0;
  color: #fff7fb;
  text-shadow: 0 0 12px rgba(255, 220, 240, 0.85);
}

.music-title-area h1 {
  font-size: 74px;
  line-height: 0.95;
  font-weight: normal;
  margin: 12px 0;
  color: #fff7fb;
  text-shadow:
    0 0 8px rgba(255, 240, 250, 0.9),
    0 0 25px rgba(255, 180, 220, 0.8),
    0 0 48px rgba(255, 160, 220, 0.45);
}

.music-title-area p {
  font-size: 18px;
  max-width: 560px;
  margin: 12px auto;
  line-height: 1.6;
  color: #fff7fb;
  text-shadow: 0 0 8px rgba(40, 20, 45, 0.4);
}

.main-music-button {
  margin-top: 12px;
  padding: 12px 35px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 240, 0.7);
  background: rgba(120, 70, 100, 0.45);
  color: #fff7fb;
  font-family: Georgia, serif;
  font-size: 16px;
  box-shadow: 0 0 18px rgba(255, 180, 220, 0.4);
}

/* =====================================================
   PLAYER
===================================================== */

.big-player {
  width: 560px;
  margin: 10px auto 28px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  background: rgba(90, 55, 90, 0.48);
  border: 1px solid rgba(255, 220, 240, 0.4);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 25px rgba(255, 170, 220, 0.2);
}

.big-player img {
  width: 95px;
  height: 95px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 240, 0.6);
}

.player-info h3 {
  margin: 0;
  font-weight: normal;
  font-size: 20px;
  color: #fff7fb;
}

.player-info p {
  margin: 4px 0 12px;
  font-size: 13px;
  color: #fff7fb;
}

.player-line {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.player-bar {
  height: 4px;
  background: rgba(255, 230, 245, 0.35);
  border-radius: 999px;
}

.player-progress {
  width: 45%;
  height: 100%;
  background: #ffd4ea;
  border-radius: 999px;
}

.player-controls {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 12px;
  font-size: 18px;
}

.play-circle {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 230, 245, 0.8);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================
   CARDS AND PANELS
===================================================== */

.quick-actions {
  max-width: 1120px;
  margin: 22px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.music-action-card,
.genre-panel,
.feature-card {
  background: rgba(255, 245, 250, 0.88);
  color: #68415f;
  border: 1px solid rgba(217, 169, 191, 0.85);
  border-radius: 20px;
  box-shadow: 0 0 18px rgba(255, 180, 220, 0.18);
}

.music-action-card {
  min-height: 130px;
  padding: 18px;
  display: grid;
  grid-template-columns: 70px 1fr 30px;
  align-items: center;
  gap: 12px;
}

.action-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(150, 90, 125, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.music-action-card h3 {
  margin: 0;
  font-size: 25px;
  font-weight: normal;
}

.music-action-card p {
  margin: 6px 0 0;
  font-size: 13px;
}

.genre-control-row {
  max-width: 1120px;
  margin: 25px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.genre-panel {
  padding: 20px;
  text-align: center;
}

.genre-panel h2 {
  margin: 0 0 15px;
  font-weight: normal;
  font-size: 28px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.pill-row button,
.pill-row span {
  border: 1px solid rgba(190, 140, 165, 0.65);
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(255, 250, 252, 0.45);
  color: #68415f;
  font-family: Georgia, serif;
  cursor: pointer;
}

.pill-row button:hover {
  background: #8b4f75;
  color: #fff7fb;
}

/* =====================================================
   FEATURED SECTION
===================================================== */

.featured-section {
  max-width: 1120px;
  margin: 22px auto;
  padding: 22px;
  background: rgba(255, 245, 250, 0.35);
  border: 1px solid rgba(255, 220, 240, 0.35);
  border-radius: 24px;
}

.featured-section h2 {
  text-align: center;
  font-weight: normal;
  color: #4d2d47;
  font-size: 28px;
  margin-top: 0;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-card {
  overflow: hidden;
  text-align: center;
  padding-bottom: 15px;
}

.feature-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.feature-card h3 {
  font-weight: normal;
  margin: 14px 10px 4px;
  font-size: 22px;
}

.feature-card p {
  margin: 0 10px 12px;
  font-size: 14px;
}

.feature-card button {
  border: 1px solid #d9a9bf;
  background: #fffafd;
  color: #68415f;
  border-radius: 999px;
  padding: 8px 28px;
  font-family: Georgia, serif;
}

/* =====================================================
   FOOTER BUTTONS
===================================================== */

.music-room-footer {
  text-align: center;
  color: #5b3653;
  margin: 24px 0 0;
  font-style: italic;
}

.music-bottom-buttons {
  max-width: 850px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 0 24px;
}

.music-bottom-buttons a {
  text-align: center;
  background: rgba(255, 245, 250, 0.88);
  border: 1px solid rgba(217, 169, 191, 0.85);
  border-radius: 14px;
  color: #68415f;
  text-decoration: none;
  padding: 12px;
}

/* dark velvet special */

.velvet-theme .music-action-card,
.velvet-theme .genre-panel,
.velvet-theme .feature-card {
  background: rgba(45, 25, 55, 0.78);
  color: #ffe6f3;
  border-color: rgba(255, 160, 210, 0.35);
}

.velvet-theme .featured-section h2,
.velvet-theme .music-room-footer {
  color: #ffe6f3;
}

/* =====================================================
   PHONE VIEW
===================================================== */

@media (max-width: 900px) {
  .music-logo {
    font-size: 42px;
  }

  .music-top-nav {
    gap: 14px;
  }

  .music-top-icons {
    display: none;
  }

  .moon-emblem {
    transform: scale(0.72);
    transform-origin: top left;
    left: 0;
    top: 2px;
  }

  .music-title-area h1 {
    font-size: 44px;
  }

  .big-player {
    width: 90%;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .big-player img {
    margin: auto;
  }

  .quick-actions,
  .genre-control-row,
  .featured-grid,
  .music-bottom-buttons {
    grid-template-columns: 1fr;
  }
}

/* =========================
   SCENE COLOR VARIABLES
========================= */
:root {
  --accent: #e6c9f7;
  --accent-strong: #c98edb;
  --border: rgba(255, 228, 245, 0.45);
  --border-strong: rgba(255, 214, 240, 0.75);
  --panel-bg: rgba(255, 245, 250, 0.10);
  --panel-bg-strong: rgba(255, 245, 250, 0.16);
  --text-main: #fff6fb;
  --text-soft: #f3ddea;
  --glow: 0 0 18px rgba(255, 210, 240, 0.28);
}

/* =========================
   MAIN CONTAINER
========================= */
.music-room-page {
  color: var(--text-main);
}

/* all big cards / boxes */
.music-hero,
.music-player,
.music-action-card,
.genre-panel,
.feature-card,
.song-diary-box,
.playlist-box,
.favorite-box,
.mood-box,
.music-topbar,
.music-nav,
.music-section-box {
  background: var(--panel-bg);
  border: 1.5px solid var(--border);
  box-shadow: var(--glow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: 
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    color 0.4s ease;
}

/* stronger special boxes if needed */
.music-player,
.music-hero {
  background: var(--panel-bg-strong);
  border: 1.5px solid var(--border-strong);
}

/* buttons / pills */
.music-action-card span,
.genre-panel button,
.feature-card button,
.tiny-button,
.pill-row span,
.pill-row button {
  border: 1px solid var(--border-strong);
  color: var(--text-main);
  background: rgba(255,255,255,0.05);
  transition: all 0.35s ease;
}

.genre-panel button:hover,
.feature-card button:hover,
.music-action-card:hover,
.tiny-button:hover {
  border-color: var(--accent-strong);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-strong) 45%, transparent);
}

/* headings */
.music-room-page h1,
.music-room-page h2,
.music-room-page h3,
.music-room-page .section-title,
.music-room-page .hero-title {
  color: var(--text-main);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* soft text */
.music-room-page p,
.music-room-page .soft-text,
.music-room-page .meta-text {
  color: var(--text-soft);
}

/* player progress */
.player-bar {
  background: rgba(255,255,255,0.16);
  border: 1px solid var(--border);
}

.player-progress {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-strong) 45%, transparent);
}

/* optional scene glow around page */
.music-room-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top center, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%);
  z-index: 0;
}

/* make sure content stays above */
.music-room-page > * {
  position: relative;
  z-index: 1;
}

/* =========================
   SCENE THEMES
========================= */

/* 1. Celestial Music Room */
body.scene-celestial {
  --accent: #efd8ff;
  --accent-strong: #d9a8f3;
  --border: rgba(240, 225, 255, 0.38);
  --border-strong: rgba(238, 208, 255, 0.72);
  --panel-bg: rgba(255, 245, 252, 0.10);
  --panel-bg-strong: rgba(255, 245, 252, 0.17);
  --text-main: #fff7ff;
  --text-soft: #f0e1f2;
  --glow: 0 0 18px rgba(226, 188, 255, 0.25);
}

/* 2. Aurora Arcade */
body.scene-arcade {
  --accent: #efccff;
  --accent-strong: #bf8cff;
  --border: rgba(233, 206, 255, 0.42);
  --border-strong: rgba(218, 176, 255, 0.82);
  --panel-bg: rgba(255, 243, 255, 0.09);
  --panel-bg-strong: rgba(255, 243, 255, 0.15);
  --text-main: #fff7ff;
  --text-soft: #ead7f3;
  --glow: 0 0 20px rgba(193, 141, 255, 0.28);
}

/* 3. Golden Morning Sonata */
body.scene-morning {
  --accent: #ffe6b7;
  --accent-strong: #f1c982;
  --border: rgba(255, 235, 197, 0.42);
  --border-strong: rgba(255, 224, 168, 0.82);
  --panel-bg: rgba(255, 250, 240, 0.13);
  --panel-bg-strong: rgba(255, 248, 235, 0.18);
  --text-main: #fffaf2;
  --text-soft: #f5e6cf;
  --glow: 0 0 20px rgba(255, 223, 154, 0.28);
}

/* 4. Cosmic Heartbeats */
body.scene-heartbeats {
  --accent: #ffcadf;
  --accent-strong: #f48ab2;
  --border: rgba(255, 210, 226, 0.42);
  --border-strong: rgba(255, 177, 204, 0.82);
  --panel-bg: rgba(255, 241, 246, 0.10);
  --panel-bg-strong: rgba(255, 241, 246, 0.16);
  --text-main: #fff6f8;
  --text-soft: #f6dce5;
  --glow: 0 0 22px rgba(248, 144, 185, 0.28);
}

/* 5. Silver Rain Letters */
body.scene-rain {
  --accent: #dad8ff;
  --accent-strong: #a9a4f1;
  --border: rgba(225, 223, 255, 0.40);
  --border-strong: rgba(192, 188, 255, 0.78);
  --panel-bg: rgba(245, 243, 255, 0.10);
  --panel-bg-strong: rgba(245, 243, 255, 0.16);
  --text-main: #f8f7ff;
  --text-soft: #dddaf3;
  --glow: 0 0 20px rgba(180, 174, 255, 0.26);
}

/* 6. Starlight Pop */
body.scene-pop {
  --accent: #ffd5f4;
  --accent-strong: #f2a0d9;
  --border: rgba(255, 218, 244, 0.42);
  --border-strong: rgba(255, 187, 232, 0.78);
  --panel-bg: rgba(255, 244, 251, 0.10);
  --panel-bg-strong: rgba(255, 244, 251, 0.16);
  --text-main: #fff8fc;
  --text-soft: #f3dcec;
  --glow: 0 0 20px rgba(249, 166, 220, 0.28);
}

/* 7. Rose Waltz Hall */
body.scene-waltz {
  --accent: #f7d7e5;
  --accent-strong: #d9a3bb;
  --border: rgba(248, 221, 233, 0.44);
  --border-strong: rgba(236, 190, 212, 0.80);
  --panel-bg: rgba(255, 246, 250, 0.10);
  --panel-bg-strong: rgba(255, 246, 250, 0.16);
  --text-main: #fff7fb;
  --text-soft: #f3dde6;
  --glow: 0 0 18px rgba(225, 171, 199, 0.28);
}

/* 8. Velvet Eclipse */
body.scene-velvet {
  --accent: #d7c5ff;
  --accent-strong: #9f83d8;
  --border: rgba(189, 167, 240, 0.34);
  --border-strong: rgba(172, 145, 232, 0.68);
  --panel-bg: rgba(51, 35, 77, 0.34);
  --panel-bg-strong: rgba(61, 44, 92, 0.42);
  --text-main: #f8f3ff;
  --text-soft: #d5cce7;
  --glow: 0 0 18px rgba(151, 121, 215, 0.22);
}

/* 9. Milkyway Celebration */
body.scene-milkyway {
  --accent: #ffe0ff;
  --accent-strong: #e5b1ff;
  --border: rgba(245, 219, 255, 0.42);
  --border-strong: rgba(232, 185, 255, 0.82);
  --panel-bg: rgba(255, 244, 255, 0.10);
  --panel-bg-strong: rgba(255, 244, 255, 0.16);
  --text-main: #fff7ff;
  --text-soft: #f0dff1;
  --glow: 0 0 22px rgba(227, 181, 255, 0.30);
}

/* 10. Moonlit Diary */
body.scene-diary {
  --accent: #ddd0ff;
  --accent-strong: #b79fe9;
  --border: rgba(223, 211, 255, 0.40);
  --border-strong: rgba(196, 176, 245, 0.76);
  --panel-bg: rgba(248, 244, 255, 0.10);
  --panel-bg-strong: rgba(248, 244, 255, 0.16);
  --text-main: #fbf8ff;
  --text-soft: #e7ddef;
  --glow: 0 0 18px rgba(186, 162, 241, 0.28);
}

/* 11. Girl Crush */
body.scene-gcrush {
  --accent: #ffb8d8;
  --accent-strong: #ff77bc;
  --border: rgba(255, 192, 221, 0.42);
  --border-strong: rgba(255, 132, 194, 0.84);
  --panel-bg: rgba(255, 238, 246, 0.10);
  --panel-bg-strong: rgba(255, 238, 246, 0.16);
  --text-main: #fff7fb;
  --text-soft: #f6d7e5;
  --glow: 0 0 20px rgba(255, 122, 184, 0.30);
}

/* 12. Nasheed */
body.scene-nasheed {
  --accent: #e7d6bf;
  --accent-strong: #cda773;
  --border: rgba(234, 216, 189, 0.40);
  --border-strong: rgba(214, 179, 126, 0.76);
  --panel-bg: rgba(255, 249, 239, 0.10);
  --panel-bg-strong: rgba(255, 249, 239, 0.16);
  --text-main: #fffaf3;
  --text-soft: #efe2cc;
  --glow: 0 0 18px rgba(210, 177, 126, 0.24);
}

/* 13. Instrumental */
body.scene-instrumental {
  --accent: #f3d6ff;
  --accent-strong: #c89de5;
  --border: rgba(241, 219, 255, 0.40);
  --border-strong: rgba(215, 173, 242, 0.78);
  --panel-bg: rgba(253, 246, 255, 0.10);
  --panel-bg-strong: rgba(253, 246, 255, 0.16);
  --text-main: #fff9ff;
  --text-soft: #efddf2;
  --glow: 0 0 18px rgba(210, 164, 236, 0.26);
}

/* =========================================
   TEXT COLOR FIX FOR ALL MUSIC SCENES
========================================= */

.music-page-body {
  --hero-text: #fff8fc;
  --hero-soft: rgba(255, 245, 250, 0.92);

  --card-text: #68415f;
  --card-soft: #8a6d84;
  --button-text: #7b4f72;
}

/* HERO / TOP AREA TEXT */
.music-page-body #roomTitle,
.music-page-body #roomDesc,
.music-page-body #roomQuote,
.music-page-body .music-hero h1,
.music-page-body .music-hero h2,
.music-page-body .music-hero h3,
.music-page-body .music-hero p,
.music-page-body .music-header h1,
.music-page-body .music-header h2,
.music-page-body .music-header p {
  color: var(--hero-text) !important;
  text-shadow: 0 0 12px rgba(255,255,255,0.18);
}

/* BIG PLAYER TEXT */
.music-page-body .big-player,
.music-page-body .big-player h3,
.music-page-body .big-player p,
.music-page-body .big-player span,
.music-page-body .player-info h3,
.music-page-body .player-info p,
.music-page-body .player-line span,
.music-page-body .player-controls span {
  color: var(--hero-text) !important;
}

/* CARD / BOX TEXT */
.music-page-body .music-action-card,
.music-page-body .music-action-card h3,
.music-page-body .music-action-card p,
.music-page-body .music-action-card span,
.music-page-body .genre-panel,
.music-page-body .genre-panel h2,
.music-page-body .genre-panel p,
.music-page-body .genre-panel button,
.music-page-body .genre-panel span,
.music-page-body .feature-card,
.music-page-body .feature-card h3,
.music-page-body .feature-card p,
.music-page-body .feature-card button,
.music-page-body .tiny-button,
.music-page-body .recent-list,
.music-page-body .recent-list p,
.music-page-body .recent-list a,
.music-page-body footer,
.music-page-body footer p {
  color: var(--card-text) !important;
}

/* SOFTER SMALL TEXT */
.music-page-body .music-action-card p,
.music-page-body .genre-panel p,
.music-page-body .feature-card p,
.music-page-body .recent-list p,
.music-page-body footer p {
  color: var(--card-soft) !important;
}

/* BUTTONS */
.music-page-body .feature-card button,
.music-page-body .tiny-button,
.music-page-body .music-action-card span,
.music-page-body .genre-panel button {
  color: var(--button-text) !important;
}

/* =========================================
   PER SCENE TEXT COLORS
========================================= */

body.scene-celestial {
  --hero-text: #fff8fc;
  --card-text: #68415f;
  --card-soft: #8a6d84;
  --button-text: #7b4f72;
}

body.scene-arcade {
  --hero-text: #fff7ff;
  --card-text: #5d3b70;
  --card-soft: #816295;
  --button-text: #7a55a0;
}

body.scene-morning {
  --hero-text: #fffaf2;
  --card-text: #7a5740;
  --card-soft: #9a7a63;
  --button-text: #8e6546;
}

body.scene-heartbeats {
  --hero-text: #fff7fa;
  --card-text: #7a4057;
  --card-soft: #9a6477;
  --button-text: #a24f74;
}

body.scene-rain {
  --hero-text: #f7f5ff;
  --card-text: #514c78;
  --card-soft: #746f97;
  --button-text: #6762a0;
}

body.scene-pop {
  --hero-text: #fff8fc;
  --card-text: #77415f;
  --card-soft: #9b6a84;
  --button-text: #b25b91;
}

body.scene-waltz {
  --hero-text: #fff8fb;
  --card-text: #72485c;
  --card-soft: #946b7f;
  --button-text: #a56782;
}

body.scene-velvet {
  --hero-text: #fff0fb;
  --card-text: #fff0fb;
  --card-soft: #e1c9e8;
  --button-text: #ffd8f3;
}

body.scene-milkyway {
  --hero-text: #fff8ff;
  --card-text: #69476f;
  --card-soft: #8d6f96;
  --button-text: #9e71b8;
}

body.scene-diary {
  --hero-text: #faf7ff;
  --card-text: #5b4a76;
  --card-soft: #7d6f96;
  --button-text: #7860a5;
}

body.scene-gcrush {
  --hero-text: #fff5fa;
  --card-text: #7a3159;
  --card-soft: #9b5478;
  --button-text: #c24a86;
}

body.scene-nasheed {
  --hero-text: #fffaf2;
  --card-text: #69533b;
  --card-soft: #8a745c;
  --button-text: #9c7a4a;
}

body.scene-instrumental {
  --hero-text: #fff8fd;
  --card-text: #68415f;
  --card-soft: #8a6884;
  --button-text: #9b6ab1;
}

.music-page-body h1,
.music-page-body h2,
.music-page-body h3,
.music-page-body p,
.music-page-body a,
.music-page-body span,
.music-page-body button {
  transition: color 0.4s ease;
}

/* =========================================================
   SOFT TEXT GLOW + SCENE-BASED FONT COLOR
   keeps the old pretty glass look, only improves readability
========================================================= */

/* default */
body {
  --scene-title: #fff4fb;
  --scene-text: #fff0fa;
  --scene-soft: #f4dff0;
  --scene-pill: #fff2fb;
  --scene-arrow: #fff6fd;
  --scene-glow: rgba(255, 210, 240, 0.45);
}

/* 1. celestial */
body.scene-celestial {
  --scene-title: #fff4fd;
  --scene-text: #fff0fb;
  --scene-soft: #f1ddf3;
  --scene-pill: #fff3fc;
  --scene-arrow: #fff4fc;
  --scene-glow: rgba(255, 210, 245, 0.48);
}

/* 2. arcade */
body.scene-arcade {
  --scene-title: #ffeefe;
  --scene-text: #fbe8ff;
  --scene-soft: #edd7f6;
  --scene-pill: #fcecff;
  --scene-arrow: #fff0ff;
  --scene-glow: rgba(200, 150, 255, 0.45);
}

/* 3. morning */
body.scene-morning {
  --scene-title: #7b5868;
  --scene-text: #7b5c68;
  --scene-soft: #8f6f7b;
  --scene-pill: #7f6270;
  --scene-arrow: #7f6270;
  --scene-glow: rgba(255, 245, 225, 0.65);
}

/* 4. heartbeats */
body.scene-heartbeats {
  --scene-title: #fff2f7;
  --scene-text: #ffe9f2;
  --scene-soft: #f8d8e5;
  --scene-pill: #fff0f6;
  --scene-arrow: #fff1f7;
  --scene-glow: rgba(255, 160, 195, 0.42);
}

/* 5. rain */
body.scene-rain {
  --scene-title: #f7f1ff;
  --scene-text: #f1eaff;
  --scene-soft: #ddd2f0;
  --scene-pill: #f7f1ff;
  --scene-arrow: #f8f2ff;
  --scene-glow: rgba(195, 185, 255, 0.42);
}

/* 6. pop */
body.scene-pop {
  --scene-title: #fff3fd;
  --scene-text: #ffeefb;
  --scene-soft: #f5dff3;
  --scene-pill: #fff0fc;
  --scene-arrow: #fff2fc;
  --scene-glow: rgba(255, 175, 225, 0.45);
}

/* 7. waltz */
body.scene-waltz {
  --scene-title: #fff4f8;
  --scene-text: #fff0f5;
  --scene-soft: #f1d9e3;
  --scene-pill: #fff2f7;
  --scene-arrow: #fff3f8;
  --scene-glow: rgba(255, 220, 235, 0.35);
}

/* 8. velvet */
body.scene-velvet {
  --scene-title: #ffeefe;
  --scene-text: #f9e9ff;
  --scene-soft: #decbea;
  --scene-pill: #fbeeff;
  --scene-arrow: #fff0ff;
  --scene-glow: rgba(205, 165, 255, 0.42);
}

/* 9. milkyway */
body.scene-milkyway {
  --scene-title: #fff7fd;
  --scene-text: #fff2fb;
  --scene-soft: #f4e2f6;
  --scene-pill: #fff4fc;
  --scene-arrow: #fff5fd;
  --scene-glow: rgba(255, 220, 170, 0.38);
}

/* 10. diary */
body.scene-diary {
  --scene-title: #fff3fb;
  --scene-text: #fceefd;
  --scene-soft: #eadcf0;
  --scene-pill: #fff1fc;
  --scene-arrow: #fff2fc;
  --scene-glow: rgba(220, 190, 255, 0.40);
}

/* 11. girl crush */
body.scene-gcrush {
  --scene-title: #fff2fb;
  --scene-text: #ffe8f7;
  --scene-soft: #f2d2e9;
  --scene-pill: #fff0fa;
  --scene-arrow: #fff1fb;
  --scene-glow: rgba(255, 120, 180, 0.42);
}

/* 12. nasheed */
body.scene-nasheed {
  --scene-title: #fff8ef;
  --scene-text: #fff2df;
  --scene-soft: #eddcc4;
  --scene-pill: #fff4e8;
  --scene-arrow: #fff6ed;
  --scene-glow: rgba(255, 225, 170, 0.42);
}

/* 13. instrumental */
body.scene-instrumental {
  --scene-title: #f7f3ff;
  --scene-text: #f0ebff;
  --scene-soft: #ddd8f2;
  --scene-pill: #f7f2ff;
  --scene-arrow: #f8f4ff;
  --scene-glow: rgba(210, 195, 255, 0.40);
}

/* ===== main readable text ===== */
.music-hero h1,
.music-hero h2,
.music-hero .hero-title,
.music-title,
.player-info h3,
.music-action-card h3,
.genre-panel h2,
.feature-card h3,
.featured-title,
.song-diary h2 {
  color: var(--scene-title) !important;
  text-shadow:
    0 0 10px var(--scene-glow),
    0 0 22px var(--scene-glow),
    0 1px 2px rgba(20, 10, 25, 0.30),
    0 0 1px rgba(255,255,255,0.35);
}

/* ===== paragraph / small text ===== */
.music-hero p,
.music-subtext,
.player-info p,
.music-action-card p,
.genre-panel p,
.feature-card p,
.song-diary p,
.recent-list p,
.recent-list a,
footer p {
  color: var(--scene-text) !important;
  text-shadow:
    0 0 8px var(--scene-glow),
    0 1px 2px rgba(20, 10, 25, 0.22);
}

/* ===== buttons / pills ===== */
.pill-row button,
.pill-row span,
.music-action-card > span,
.feature-card button,
.tiny-button,
.recent-list a {
  color: var(--scene-pill) !important;
  text-shadow:
    0 0 8px var(--scene-glow),
    0 1px 2px rgba(20, 10, 25, 0.22);
}

/* ===== icons ===== */
.action-icon,
.music-action-card .action-icon,
.player-controls span,
.music-nav a,
.top-icons a {
  color: var(--scene-arrow) !important;
  text-shadow:
    0 0 10px var(--scene-glow),
    0 0 18px var(--scene-glow);
}

/* ===== make transition smooth when scene changes ===== */
.music-hero h1,
.music-hero h2,
.music-hero p,
.player-info h3,
.player-info p,
.music-action-card h3,
.music-action-card p,
.genre-panel h2,
.genre-panel p,
.feature-card h3,
.feature-card p,
.pill-row button,
.pill-row span,
.music-action-card > span,
.feature-card button,
.action-icon,
footer p {
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* =====================================================
   RAIN SCENE — NATURAL SOFT BACKGROUND RAIN ONLY
   Fewer lines + smoother movement + readable glass panels
   Paste at the VERY BOTTOM of style.css
===================================================== */

body.scene-rain {
  --rain-title: #fffaff;
  --rain-text: #f6f0ff;
  --rain-soft: #e8e2fb;
  --rain-shadow: rgba(14, 12, 36, 0.88);
}

/* darker rainy atmosphere behind everything */
body.scene-rain .music-room-dynamic::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(210, 220, 255, 0.13), transparent 35%),
    linear-gradient(
      to bottom,
      rgba(8, 10, 30, 0.50),
      rgba(34, 36, 75, 0.34),
      rgba(88, 82, 135, 0.34)
    ) !important;
}

/* natural soft rain — background only */
body.scene-rain .music-room-dynamic::after {
  content: "";
  position: absolute;
  inset: -140px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.13;

  background-image:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 48.8%,
      rgba(255,255,255,0.16) 49.2%,
      rgba(255,255,255,0.16) 49.6%,
      transparent 50%,
      transparent 100%
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 58.8%,
      rgba(220,230,255,0.10) 59.2%,
      rgba(220,230,255,0.10) 59.5%,
      transparent 60%,
      transparent 100%
    );

  background-size: 230px 340px, 330px 460px;
  background-position: 0 0, 70px 0;
  filter: blur(0.7px);
  animation: naturalRain 3.4s linear infinite;
}

/* smoother rain movement */
@keyframes naturalRain {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-34px, 150px, 0);
  }
}

/* keep all content above rain */
body.scene-rain .music-room-dynamic > * {
  position: relative;
  z-index: 3;
}

/* clean rainy glass panels — no raindrops on cards */
body.scene-rain .music-action-card,
body.scene-rain .genre-panel,
body.scene-rain .feature-card,
body.scene-rain .featured-section,
body.scene-rain .music-bottom-buttons a {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.15),
      rgba(180,175,220,0.13),
      rgba(80,78,130,0.20)
    ) !important;

  border: 1.4px solid rgba(240, 238, 255, 0.42) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-left: 1.5px solid rgba(255, 255, 255, 0.38) !important;

  box-shadow:
    0 10px 28px rgba(14, 12, 36, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 16px rgba(190,200,255,0.10) !important;

  backdrop-filter: blur(8px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
}

/* remove old ugly raindrop/dot textures from previous CSS */
body.scene-rain .music-action-card::after,
body.scene-rain .genre-panel::after,
body.scene-rain .feature-card::after,
body.scene-rain .featured-section::after,
body.scene-rain .music-bottom-buttons a::after {
  display: none !important;
}

/* soft glass shine only */
body.scene-rain .music-action-card::before,
body.scene-rain .genre-panel::before,
body.scene-rain .feature-card::before,
body.scene-rain .featured-section::before,
body.scene-rain .music-bottom-buttons a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.05) 36%,
      transparent 72%
    );
}

/* keep card content above the glass shine */
body.scene-rain .music-action-card > *,
body.scene-rain .genre-panel > *,
body.scene-rain .feature-card > *,
body.scene-rain .featured-section > *,
body.scene-rain .music-bottom-buttons a > * {
  position: relative;
  z-index: 2;
}

/* readable headings */
body.scene-rain h1,
body.scene-rain h2,
body.scene-rain h3,
body.scene-rain #roomTitle,
body.scene-rain .music-action-card h3,
body.scene-rain .genre-panel h2,
body.scene-rain .feature-card h3,
body.scene-rain .featured-section h2 {
  color: var(--rain-title) !important;
  text-shadow:
    0 0 8px rgba(235,235,255,0.28),
    0 1px 3px var(--rain-shadow) !important;
}

/* readable normal text */
body.scene-rain p,
body.scene-rain span,
body.scene-rain a,
body.scene-rain li,
body.scene-rain #roomSubtitle,
body.scene-rain #roomQuote,
body.scene-rain .music-action-card p,
body.scene-rain .genre-panel p,
body.scene-rain .feature-card p,
body.scene-rain .music-bottom-buttons a {
  color: var(--rain-text) !important;
  text-shadow: 0 1px 3px var(--rain-shadow) !important;
}

/* pills and buttons */
body.scene-rain .pill-row button,
body.scene-rain .pill-row span,
body.scene-rain .feature-card button {
  color: #fffaff !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(245,242,255,0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 8px rgba(210,220,255,0.10) !important;
  text-shadow: 0 1px 3px var(--rain-shadow) !important;
}

body.scene-rain .pill-row button:hover,
body.scene-rain .feature-card button:hover,
body.scene-rain .music-action-card:hover {
  background: rgba(220,220,255,0.18) !important;
  box-shadow:
    0 0 16px rgba(220,225,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* icons and arrows */
body.scene-rain .action-icon,
body.scene-rain .music-action-card > span,
body.scene-rain .player-controls span {
  color: #fffaff !important;
  text-shadow: 0 0 10px rgba(225,230,255,0.42) !important;
}

/* player bar */
body.scene-rain .player-bar {
  background: rgba(255,255,255,0.22) !important;
}

body.scene-rain .player-progress {
  background: linear-gradient(to right, #dbe0ff, #f4e8ff) !important;
  box-shadow: 0 0 10px rgba(225,230,255,0.32) !important;
}

/* =====================================================
   CELESTIAL SCENE — BRIGHTER, READABLE, MORE CELESTIAL
   Paste this at the VERY BOTTOM of style.css
===================================================== */

body.scene-celestial {
  --cel-title: #fff8ff;
  --cel-text: #f7f2ff;
  --cel-soft: #efe7ff;
  --cel-accent: #f3d8ff;
  --cel-shadow: rgba(28, 20, 55, 0.78);
}

/* dreamy overlay */
body.scene-celestial .music-room-dynamic::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 240, 255, 0.18), transparent 30%),
    radial-gradient(circle at 18% 28%, rgba(210, 220, 255, 0.12), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(255, 220, 245, 0.10), transparent 22%),
    linear-gradient(
      to bottom,
      rgba(35, 20, 70, 0.18),
      rgba(90, 70, 140, 0.12),
      rgba(235, 210, 255, 0.08)
    );
}

/* soft celestial sparkles */
body.scene-celestial .music-room-dynamic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 8% 15%, rgba(255,255,255,0.85) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 22% 8%, rgba(255,240,255,0.75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 38% 18%, rgba(255,255,255,0.8) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 62% 12%, rgba(255,235,250,0.75) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 74% 20%, rgba(255,255,255,0.78) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 88% 14%, rgba(255,245,255,0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 14% 64%, rgba(255,255,255,0.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 70%, rgba(255,245,255,0.58) 0 1px, transparent 1.8px);
  animation: celestialTwinkle 5s ease-in-out infinite alternate;
}

@keyframes celestialTwinkle {
  from {
    opacity: 0.38;
    transform: translateY(0px);
  }
  to {
    opacity: 0.6;
    transform: translateY(-3px);
  }
}

/* keep content above overlays */
body.scene-celestial .music-room-dynamic > * {
  position: relative;
  z-index: 3;
}

/* glass cards */
body.scene-celestial .music-action-card,
body.scene-celestial .genre-panel,
body.scene-celestial .feature-card,
body.scene-celestial .featured-section,
body.scene-celestial .music-bottom-buttons a,
body.scene-celestial .big-player {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.20),
      rgba(245,230,255,0.14),
      rgba(188,160,220,0.14)
    ) !important;
  border: 1.5px solid rgba(255, 245, 255, 0.42) !important;
  border-top: 1.6px solid rgba(255,255,255,0.55) !important;
  border-left: 1.4px solid rgba(255,255,255,0.34) !important;
  box-shadow:
    0 8px 28px rgba(70, 40, 110, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 0 18px rgba(255, 220, 255, 0.10) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}

/* soft inner glow */
body.scene-celestial .music-action-card::before,
body.scene-celestial .genre-panel::before,
body.scene-celestial .feature-card::before,
body.scene-celestial .featured-section::before,
body.scene-celestial .music-bottom-buttons a::before,
body.scene-celestial .big-player::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.06) 38%,
      transparent 72%
    );
}

/* keep text above glass shine */
body.scene-celestial .music-action-card > *,
body.scene-celestial .genre-panel > *,
body.scene-celestial .feature-card > *,
body.scene-celestial .featured-section > *,
body.scene-celestial .music-bottom-buttons a > *,
body.scene-celestial .big-player > * {
  position: relative;
  z-index: 2;
}

/* main headings */
body.scene-celestial h1,
body.scene-celestial h2,
body.scene-celestial h3,
body.scene-celestial #roomTitle,
body.scene-celestial .featured-section h2 {
  color: var(--cel-title) !important;
  text-shadow:
    0 0 10px rgba(255, 240, 255, 0.35),
    0 2px 5px var(--cel-shadow) !important;
}

/* normal text */
body.scene-celestial p,
body.scene-celestial span,
body.scene-celestial a,
body.scene-celestial li,
body.scene-celestial #roomSubtitle,
body.scene-celestial #roomQuote,
body.scene-celestial .music-action-card p,
body.scene-celestial .genre-panel p,
body.scene-celestial .feature-card p {
  color: var(--cel-text) !important;
  text-shadow: 0 1px 3px var(--cel-shadow) !important;
}

/* stronger panel headings */
body.scene-celestial .music-action-card h3,
body.scene-celestial .genre-panel h2,
body.scene-celestial .feature-card h3 {
  color: #fffaff !important;
  text-shadow:
    0 0 8px rgba(255,245,255,0.32),
    0 1px 3px rgba(40, 25, 70, 0.8) !important;
}

/* buttons / genre pills */
body.scene-celestial .pill-row button,
body.scene-celestial .pill-row span,
body.scene-celestial .feature-card button {
  background: rgba(255,255,255,0.12) !important;
  color: #fffaff !important;
  border: 1px solid rgba(250,245,255,0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 0 8px rgba(255,230,255,0.08) !important;
  text-shadow: 0 1px 3px rgba(35, 20, 60, 0.75) !important;
}

body.scene-celestial .pill-row button:hover,
body.scene-celestial .feature-card button:hover {
  background: rgba(255,255,255,0.20) !important;
  box-shadow:
    0 0 14px rgba(255,230,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-1px);
}

/* action icons */
body.scene-celestial .action-icon,
body.scene-celestial .music-action-card > span,
body.scene-celestial .player-controls span {
  color: #fffaff !important;
  text-shadow:
    0 0 10px rgba(255,235,255,0.48),
    0 1px 2px rgba(35, 20, 60, 0.7) !important;
}

/* progress bar */
body.scene-celestial .player-bar {
  background: rgba(255,255,255,0.20) !important;
}

body.scene-celestial .player-progress {
  background: linear-gradient(to right, #f8eaff, #ffffff) !important;
  box-shadow: 0 0 10px rgba(255,240,255,0.35) !important;
}

/* optional: make title area extra glowing */
body.scene-celestial .music-title-area,
body.scene-celestial .music-glow-header {
  text-shadow:
    0 0 12px rgba(255,240,255,0.18),
    0 2px 6px rgba(40, 20, 70, 0.75) !important;
}

/* =========================================
   CLICK SPARKLE EFFECT
   paste at VERY BOTTOM of style.css
========================================= */

.sparkle-burst {
  position: fixed;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 9999;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.sparkle-burst span {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,230,255,0.95) 35%, rgba(255,200,240,0.65) 70%, transparent 100%);
  box-shadow:
    0 0 8px rgba(255,255,255,0.95),
    0 0 16px rgba(255,210,255,0.7),
    0 0 22px rgba(255,180,240,0.45);
  animation: sparkleBurstMove 700ms ease-out forwards;
}

.sparkle-burst span::before,
.sparkle-burst span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255,255,255,0.95);
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
}

.sparkle-burst span::before {
  width: 2px;
  height: 12px;
}

.sparkle-burst span::after {
  width: 12px;
  height: 2px;
}

@keyframes sparkleBurstMove {
  0% {
    opacity: 1;
    transform: rotate(var(--rot)) translateX(0) scale(0.6);
    filter: blur(0px);
  }
  60% {
    opacity: 1;
    transform: rotate(var(--rot)) translateX(var(--dist)) scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--rot)) translateX(calc(var(--dist) + 8px)) scale(0.2);
    filter: blur(1px);
  }
}

/* tiny glow press effect */
.music-action-card,
.pill-row button,
.feature-card button,
.music-bottom-buttons a,
.tiny-button {
  transition:
    transform 0.18s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.music-action-card:active,
.pill-row button:active,
.feature-card button:active,
.music-bottom-buttons a:active,
.tiny-button:active {
  transform: scale(0.97);
}

/* optional hover glow */
.music-action-card:hover,
.pill-row button:hover,
.feature-card button:hover,
.music-bottom-buttons a:hover,
.tiny-button:hover {
  box-shadow:
    0 0 10px rgba(255,255,255,0.22),
    0 0 20px rgba(255,210,245,0.16);
}

/* =====================================================
   GENRE-BASED CLICK SPARKLES
   celestial / rain / romance / dark
===================================================== */

.sparkle-burst {
  position: fixed;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 99999;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.sparkle-burst span {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      var(--sparkle-core, #ffffff) 0%,
      var(--sparkle-mid, #ffd9f4) 38%,
      var(--sparkle-edge, rgba(255, 190, 240, 0.35)) 70%,
      transparent 100%
    );
  box-shadow:
    0 0 8px var(--sparkle-core, #ffffff),
    0 0 16px var(--sparkle-mid, #ffd9f4),
    0 0 26px var(--sparkle-edge, rgba(255, 190, 240, 0.55));
  animation: sparkleBurstMove 780ms ease-out forwards;
}

.sparkle-burst span::before,
.sparkle-burst span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--sparkle-core, #ffffff);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  box-shadow:
    0 0 6px var(--sparkle-core, #ffffff),
    0 0 12px var(--sparkle-mid, #ffd9f4);
}

.sparkle-burst span::before {
  width: 2px;
  height: 14px;
}

.sparkle-burst span::after {
  width: 14px;
  height: 2px;
}

@keyframes sparkleBurstMove {
  0% {
    opacity: 1;
    transform: rotate(var(--rot)) translateX(0) scale(0.45);
    filter: blur(0);
  }

  60% {
    opacity: 1;
    transform: rotate(var(--rot)) translateX(var(--dist)) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: rotate(var(--rot)) translateX(calc(var(--dist) + 12px)) scale(0.15);
    filter: blur(1.2px);
  }
}

/* click press glow */
.music-action-card,
.pill-row button,
.feature-card button,
.music-bottom-buttons a,
.tiny-button {
  transition:
    transform 0.18s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.music-action-card:active,
.pill-row button:active,
.feature-card button:active,
.music-bottom-buttons a:active,
.tiny-button:active {
  transform: scale(0.97);
}

/* scene sparkle colors */

/* celestial = white / pink / lilac */
body.scene-celestial {
  --sparkle-core: #ffffff;
  --sparkle-mid: #ffd9f6;
  --sparkle-edge: rgba(212, 170, 255, 0.75);
}

/* rain = white / blue */
body.scene-rain {
  --sparkle-core: #ffffff;
  --sparkle-mid: #dbe9ff;
  --sparkle-edge: rgba(150, 190, 255, 0.75);
}

/* romance / heartbeats = pink / rose */
body.scene-heartbeats {
  --sparkle-core: #fff4fa;
  --sparkle-mid: #ff9fc7;
  --sparkle-edge: rgba(255, 70, 135, 0.72);
}

/* dark = purple / silver */
body.scene-velvet {
  --sparkle-core: #f9f3ff;
  --sparkle-mid: #c7b5ff;
  --sparkle-edge: rgba(145, 105, 220, 0.78);
}

/* extra matching scenes */
body.scene-waltz {
  --sparkle-core: #fff7fb;
  --sparkle-mid: #ffc8dc;
  --sparkle-edge: rgba(215, 145, 175, 0.72);
}

body.scene-morning {
  --sparkle-core: #fffaf0;
  --sparkle-mid: #ffe2a8;
  --sparkle-edge: rgba(255, 190, 110, 0.70);
}

body.scene-pop,
body.scene-gcrush {
  --sparkle-core: #ffffff;
  --sparkle-mid: #ffb6ea;
  --sparkle-edge: rgba(255, 100, 190, 0.72);
}

body.scene-arcade,
body.scene-milkyway,
body.scene-diary,
body.scene-instrumental {
  --sparkle-core: #ffffff;
  --sparkle-mid: #e9d7ff;
  --sparkle-edge: rgba(190, 150, 255, 0.72);
}

body.scene-nasheed {
  --sparkle-core: #fffaf0;
  --sparkle-mid: #f5d7a8;
  --sparkle-edge: rgba(210, 170, 100, 0.70);
}

/* =====================================================
   EPIC CINEMATIC SCENE
   For war / battle / empowerment / victory
===================================================== */

.epic-theme {
  background-image: url("Images/scene-epic.png");
}

.epic-theme::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 220, 150, 0.18), transparent 35%),
    radial-gradient(circle at 20% 25%, rgba(255, 120, 80, 0.14), transparent 30%),
    linear-gradient(
      to bottom,
      rgba(25, 8, 18, 0.58),
      rgba(90, 38, 42, 0.42),
      rgba(255, 155, 90, 0.45)
    ) !important;
}

/* epic text + sparkle colors */
body.scene-epic {
  --accent: #ffd3a3;
  --accent-strong: #ff965c;
  --border: rgba(255, 205, 150, 0.45);
  --border-strong: rgba(255, 170, 95, 0.85);
  --panel-bg: rgba(55, 25, 38, 0.34);
  --panel-bg-strong: rgba(80, 35, 45, 0.44);
  --text-main: #fff5e8;
  --text-soft: #f8d8bd;
  --glow: 0 0 22px rgba(255, 145, 80, 0.34);

  --scene-title: #fff3df;
  --scene-text: #ffe9cf;
  --scene-soft: #f4c7a4;
  --scene-pill: #fff0dc;
  --scene-arrow: #fff5e8;
  --scene-glow: rgba(255, 155, 90, 0.55);

  --sparkle-core: #fff7e8;
  --sparkle-mid: #ffc276;
  --sparkle-edge: rgba(255, 80, 45, 0.78);
}

/* epic panels */
body.scene-epic .music-action-card,
body.scene-epic .genre-panel,
body.scene-epic .feature-card,
body.scene-epic .featured-section,
body.scene-epic .big-player,
body.scene-epic .music-bottom-buttons a {
  background:
    linear-gradient(
      135deg,
      rgba(255, 240, 220, 0.18),
      rgba(120, 45, 55, 0.32),
      rgba(40, 18, 35, 0.45)
    ) !important;
  border: 1.5px solid rgba(255, 205, 150, 0.52) !important;
  box-shadow:
    0 0 24px rgba(255, 125, 70, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(9px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
}

/* epic readable text */
body.scene-epic h1,
body.scene-epic h2,
body.scene-epic h3,
body.scene-epic #roomTitle,
body.scene-epic .music-action-card h3,
body.scene-epic .genre-panel h2,
body.scene-epic .feature-card h3,
body.scene-epic .featured-section h2 {
  color: #fff3df !important;
  text-shadow:
    0 0 10px rgba(255, 190, 120, 0.55),
    0 2px 4px rgba(30, 10, 18, 0.9) !important;
}

body.scene-epic p,
body.scene-epic span,
body.scene-epic a,
body.scene-epic li,
body.scene-epic #roomSubtitle,
body.scene-epic #roomQuote,
body.scene-epic .music-action-card p,
body.scene-epic .genre-panel p,
body.scene-epic .feature-card p {
  color: #ffe9cf !important;
  text-shadow: 0 1px 3px rgba(30, 10, 18, 0.85) !important;
}

/* epic buttons */
body.scene-epic .pill-row button,
body.scene-epic .pill-row span,
body.scene-epic .feature-card button {
  color: #fff4e5 !important;
  background: rgba(255, 180, 115, 0.14) !important;
  border: 1px solid rgba(255, 210, 160, 0.55) !important;
  text-shadow: 0 1px 3px rgba(30, 10, 18, 0.85) !important;
}

body.scene-epic .pill-row button:hover,
body.scene-epic .feature-card button:hover,
body.scene-epic .music-action-card:hover {
  background: rgba(255, 150, 90, 0.24) !important;
  box-shadow:
    0 0 18px rgba(255, 145, 80, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

/* =========================================
   GAME ROOM / ARCADE SCENE READABILITY FIX
   ========================================= */

body.scene-arcade .music-action-card,
body.scene-arcade .genre-panel,
body.scene-arcade .feature-card,
body.scene-arcade .featured-section,
body.scene-arcade .music-bottom-buttons a {
  background: rgba(88, 64, 128, 0.42) !important;
  border: 1.3px solid rgba(255, 230, 255, 0.45) !important;
  box-shadow:
    0 10px 28px rgba(38, 18, 64, 0.18),
    0 0 18px rgba(255, 170, 255, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
}

/* titles */
body.scene-arcade .music-action-card h3,
body.scene-arcade .genre-panel h2,
body.scene-arcade .feature-card h3,
body.scene-arcade .featured-section h2 {
  color: #fff9ff !important;
  text-shadow:
    0 0 10px rgba(255, 210, 255, 0.38),
    0 1px 2px rgba(18, 10, 38, 0.85) !important;
}

/* normal text */
body.scene-arcade .music-action-card p,
body.scene-arcade .genre-panel p,
body.scene-arcade .feature-card p,
body.scene-arcade .music-bottom-buttons a,
body.scene-arcade .featured-section p {
  color: #fdf7ff !important;
  text-shadow:
    0 1px 2px rgba(18, 10, 38, 0.85),
    0 0 6px rgba(255, 220, 255, 0.18) !important;
}

/* arrows and little icons */
body.scene-arcade .music-action-card > span,
body.scene-arcade .action-icon,
body.scene-arcade .player-controls span {
  color: #fffaff !important;
  text-shadow:
    0 0 10px rgba(255, 210, 255, 0.35),
    0 1px 2px rgba(18, 10, 38, 0.85) !important;
}

/* genre / life / feelings buttons */
body.scene-arcade .pill-row button,
body.scene-arcade .pill-row span,
body.scene-arcade .feature-card button {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 235, 255, 0.55) !important;
  color: #fff9ff !important;
  text-shadow:
    0 1px 2px rgba(18, 10, 38, 0.85),
    0 0 6px rgba(255, 220, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 10px rgba(255, 185, 255, 0.08) !important;
}

/* hover glow */
body.scene-arcade .pill-row button:hover,
body.scene-arcade .feature-card button:hover,
body.scene-arcade .music-action-card:hover,
body.scene-arcade .music-bottom-buttons a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(40, 18, 66, 0.20),
    0 0 18px rgba(255, 180, 255, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* player text */
body.scene-arcade .big-player,
body.scene-arcade .player-info,
body.scene-arcade #playerSong,
body.scene-arcade #playerArtist,
body.scene-arcade #playerStart,
body.scene-arcade #playerEnd {
  color: #fff9ff !important;
  text-shadow:
    0 1px 2px rgba(18, 10, 38, 0.85),
    0 0 8px rgba(255, 210, 255, 0.22) !important;
}

/* make top cards less washed out */
body.scene-arcade .quick-actions .music-action-card {
  min-height: 135px;
}

/* active selected genre button */
body.scene-arcade .pill-row button.active-genre {
  background: rgba(255, 190, 245, 0.24) !important;
  border: 1px solid rgba(255, 235, 255, 0.78) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 16px rgba(255, 180, 255, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* =========================================
   WALTZ / ROSE WALTZ READABILITY FIX
   ========================================= */

body.scene-waltz .music-action-card,
body.scene-waltz .genre-panel,
body.scene-waltz .feature-card,
body.scene-waltz .featured-section,
body.scene-waltz .music-bottom-buttons a {
  background: rgba(120, 88, 120, 0.28) !important;
  border: 1.4px solid rgba(255, 240, 250, 0.55) !important;
  box-shadow:
    0 10px 28px rgba(70, 40, 70, 0.14),
    0 0 20px rgba(255, 220, 235, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
}

/* headings */
body.scene-waltz .music-action-card h3,
body.scene-waltz .genre-panel h2,
body.scene-waltz .feature-card h3,
body.scene-waltz .featured-section h2 {
  color: #fffafc !important;
  text-shadow:
    0 0 10px rgba(255, 245, 250, 0.45),
    0 1px 3px rgba(45, 20, 45, 0.85) !important;
}

/* normal text */
body.scene-waltz .music-action-card p,
body.scene-waltz .genre-panel p,
body.scene-waltz .feature-card p,
body.scene-waltz .music-bottom-buttons a,
body.scene-waltz .featured-section p {
  color: #fff5fa !important;
  text-shadow:
    0 1px 3px rgba(45, 20, 45, 0.82),
    0 0 6px rgba(255, 235, 245, 0.18) !important;
}

/* icon + arrows */
body.scene-waltz .music-action-card > span,
body.scene-waltz .action-icon,
body.scene-waltz .player-controls span {
  color: #fff8fb !important;
  text-shadow:
    0 0 10px rgba(255, 235, 245, 0.40),
    0 1px 3px rgba(45, 20, 45, 0.82) !important;
}

/* buttons / pills */
body.scene-waltz .pill-row button,
body.scene-waltz .pill-row span,
body.scene-waltz .feature-card button {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fffafc !important;
  border: 1px solid rgba(255, 240, 248, 0.65) !important;
  text-shadow:
    0 1px 2px rgba(45, 20, 45, 0.78),
    0 0 6px rgba(255, 225, 238, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 10px rgba(255, 220, 235, 0.10) !important;
}

/* hover glow */
body.scene-waltz .pill-row button:hover,
body.scene-waltz .feature-card button:hover,
body.scene-waltz .music-action-card:hover,
body.scene-waltz .music-bottom-buttons a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px rgba(80, 45, 75, 0.16),
    0 0 16px rgba(255, 220, 235, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* player area text */
body.scene-waltz .big-player,
body.scene-waltz .player-info,
body.scene-waltz #playerSong,
body.scene-waltz #playerArtist,
body.scene-waltz #playerStart,
body.scene-waltz #playerEnd {
  color: #fffafc !important;
  text-shadow:
    0 1px 3px rgba(45, 20, 45, 0.85),
    0 0 8px rgba(255, 230, 240, 0.20) !important;
}

/* active selected genre */
body.scene-waltz .pill-row button.active-genre {
  background: rgba(255, 220, 235, 0.22) !important;
  border: 1px solid rgba(255, 245, 250, 0.82) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 16px rgba(255, 220, 235, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* =========================================
   HEARTBEATS / ROMANCE READABILITY FIX
   ========================================= */

body.scene-heartbeats .music-action-card,
body.scene-heartbeats .genre-panel,
body.scene-heartbeats .feature-card,
body.scene-heartbeats .featured-section,
body.scene-heartbeats .music-bottom-buttons a {
  background: rgba(110, 55, 85, 0.32) !important;
  border: 1.5px solid rgba(255, 220, 235, 0.60) !important;
  box-shadow:
    0 10px 26px rgba(80, 25, 55, 0.20),
    0 0 18px rgba(255, 180, 210, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
}

/* titles */
body.scene-heartbeats .music-action-card h3,
body.scene-heartbeats .genre-panel h2,
body.scene-heartbeats .feature-card h3,
body.scene-heartbeats .featured-section h2 {
  color: #fff7fb !important;
  text-shadow:
    0 0 8px rgba(255, 230, 240, 0.35),
    0 1px 3px rgba(45, 10, 30, 0.90) !important;
}

/* normal text */
body.scene-heartbeats .music-action-card p,
body.scene-heartbeats .genre-panel p,
body.scene-heartbeats .feature-card p,
body.scene-heartbeats .featured-section p,
body.scene-heartbeats .music-bottom-buttons a {
  color: #fff2f8 !important;
  text-shadow:
    0 1px 3px rgba(45, 10, 30, 0.90),
    0 0 4px rgba(255, 220, 235, 0.15) !important;
}

/* arrows + icons */
body.scene-heartbeats .music-action-card > span,
body.scene-heartbeats .action-icon,
body.scene-heartbeats .player-controls span {
  color: #fff6fb !important;
  text-shadow:
    0 0 8px rgba(255, 220, 235, 0.35),
    0 1px 3px rgba(45, 10, 30, 0.90) !important;
}

/* pill buttons */
body.scene-heartbeats .pill-row button,
body.scene-heartbeats .pill-row span,
body.scene-heartbeats .feature-card button {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff8fc !important;
  border: 1px solid rgba(255, 225, 238, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 10px rgba(255, 190, 220, 0.10) !important;
  text-shadow:
    0 1px 2px rgba(45, 10, 30, 0.88),
    0 0 4px rgba(255, 220, 235, 0.15) !important;
}

/* hover glow */
body.scene-heartbeats .pill-row button:hover,
body.scene-heartbeats .feature-card button:hover,
body.scene-heartbeats .music-action-card:hover,
body.scene-heartbeats .music-bottom-buttons a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(90, 25, 60, 0.22),
    0 0 16px rgba(255, 180, 210, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* player text */
body.scene-heartbeats .big-player,
body.scene-heartbeats .player-info,
body.scene-heartbeats #playerSong,
body.scene-heartbeats #playerArtist,
body.scene-heartbeats #playerStart,
body.scene-heartbeats #playerEnd {
  color: #fff8fc !important;
  text-shadow:
    0 1px 3px rgba(45, 10, 30, 0.90),
    0 0 6px rgba(255, 220, 235, 0.18) !important;
}

/* selected genre button */
body.scene-heartbeats .pill-row button.active-genre {
  background: rgba(255, 195, 220, 0.22) !important;
  border: 1px solid rgba(255, 235, 245, 0.85) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 16px rgba(255, 180, 210, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* =========================================
   INSTRUMENTAL READABILITY FIX
   soft elegant glass + clearer text
   ========================================= */

body.scene-instrumental .music-action-card,
body.scene-instrumental .genre-panel,
body.scene-instrumental .feature-card,
body.scene-instrumental .featured-section,
body.scene-instrumental .music-bottom-buttons a {
  background: rgba(120, 90, 125, 0.28) !important;
  border: 1.5px solid rgba(255, 240, 250, 0.52) !important;
  box-shadow:
    0 10px 28px rgba(90, 60, 100, 0.18),
    0 0 18px rgba(255, 235, 245, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
}

/* headings */
body.scene-instrumental .music-action-card h3,
body.scene-instrumental .genre-panel h2,
body.scene-instrumental .feature-card h3,
body.scene-instrumental .featured-section h2 {
  color: #fffafc !important;
  text-shadow:
    0 0 10px rgba(255, 245, 250, 0.35),
    0 1px 4px rgba(45, 28, 55, 0.88) !important;
}

/* normal text */
body.scene-instrumental .music-action-card p,
body.scene-instrumental .genre-panel p,
body.scene-instrumental .feature-card p,
body.scene-instrumental .featured-section p,
body.scene-instrumental .music-bottom-buttons a {
  color: #fff5fa !important;
  text-shadow:
    0 1px 3px rgba(45, 28, 55, 0.88),
    0 0 4px rgba(255, 240, 248, 0.14) !important;
}

/* icons and arrows */
body.scene-instrumental .music-action-card > span,
body.scene-instrumental .action-icon,
body.scene-instrumental .player-controls span {
  color: #fff9fc !important;
  text-shadow:
    0 0 10px rgba(255, 245, 250, 0.30),
    0 1px 3px rgba(45, 28, 55, 0.88) !important;
}

/* buttons / pills */
body.scene-instrumental .pill-row button,
body.scene-instrumental .pill-row span,
body.scene-instrumental .feature-card button {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fffafd !important;
  border: 1px solid rgba(255, 240, 248, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 10px rgba(255, 235, 245, 0.10) !important;
  text-shadow:
    0 1px 2px rgba(45, 28, 55, 0.88),
    0 0 4px rgba(255, 245, 250, 0.12) !important;
}

/* hover */
body.scene-instrumental .pill-row button:hover,
body.scene-instrumental .feature-card button:hover,
body.scene-instrumental .music-action-card:hover,
body.scene-instrumental .music-bottom-buttons a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(100, 70, 110, 0.18),
    0 0 18px rgba(255, 235, 245, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* player text */
body.scene-instrumental .big-player,
body.scene-instrumental .player-info,
body.scene-instrumental #playerSong,
body.scene-instrumental #playerArtist,
body.scene-instrumental #playerStart,
body.scene-instrumental #playerEnd {
  color: #fffafd !important;
  text-shadow:
    0 1px 3px rgba(45, 28, 55, 0.88),
    0 0 6px rgba(255, 245, 250, 0.14) !important;
}

/* active genre button */
body.scene-instrumental .pill-row button.active-genre {
  background: rgba(255, 230, 242, 0.20) !important;
  border: 1px solid rgba(255, 245, 250, 0.82) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 16px rgba(255, 235, 245, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* =========================================
   CELESTIAL SCENE — GLOSSY GLASS VERSION
   dreamy + readable + not flat
========================================= */

body.scene-celestial .music-action-card,
body.scene-celestial .genre-panel,
body.scene-celestial .feature-card,
body.scene-celestial .featured-section,
body.scene-celestial .music-bottom-buttons a,
body.scene-celestial .big-player {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,245,252,0.20) 18%,
      rgba(242,223,245,0.26) 55%,
      rgba(231,206,240,0.30) 100%) !important;
  border: 1.4px solid rgba(255,255,255,0.62) !important;
  box-shadow:
    0 10px 30px rgba(120, 85, 155, 0.18),
    0 0 24px rgba(255, 228, 246, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.68),
    inset 0 -1px 0 rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(10px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(145%) !important;
}

/* glossy top shine */
body.scene-celestial .music-action-card::before,
body.scene-celestial .genre-panel::before,
body.scene-celestial .feature-card::before,
body.scene-celestial .featured-section::before,
body.scene-celestial .music-bottom-buttons a::before,
body.scene-celestial .big-player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.16) 18%,
      rgba(255,255,255,0.05) 35%,
      transparent 48%);
  opacity: 0.95;
}

/* soft celestial glow patches */
body.scene-celestial .music-action-card::after,
body.scene-celestial .genre-panel::after,
body.scene-celestial .feature-card::after,
body.scene-celestial .featured-section::after,
body.scene-celestial .music-bottom-buttons a::after,
body.scene-celestial .big-player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.22), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(255,235,255,0.18), transparent 20%),
    radial-gradient(circle at 72% 80%, rgba(255,245,255,0.10), transparent 22%);
  opacity: 0.75;
}

/* keep text above shine layers */
body.scene-celestial .music-action-card > *,
body.scene-celestial .genre-panel > *,
body.scene-celestial .feature-card > *,
body.scene-celestial .featured-section > *,
body.scene-celestial .music-bottom-buttons a > *,
body.scene-celestial .big-player > * {
  position: relative;
  z-index: 2;
}

/* headings */
body.scene-celestial .music-action-card h3,
body.scene-celestial .genre-panel h2,
body.scene-celestial .feature-card h3,
body.scene-celestial .featured-section h2,
body.scene-celestial .big-player h3,
body.scene-celestial #playerSong {
  color: #5f3566 !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 6px rgba(255,255,255,0.92),
    0 1px 2px rgba(255,255,255,0.75),
    0 0 12px rgba(255,230,250,0.42) !important;
}

/* normal text */
body.scene-celestial .music-action-card p,
body.scene-celestial .genre-panel p,
body.scene-celestial .feature-card p,
body.scene-celestial .featured-section p,
body.scene-celestial .music-bottom-buttons a,
body.scene-celestial .big-player,
body.scene-celestial #playerArtist,
body.scene-celestial #playerStart,
body.scene-celestial #playerEnd {
  color: #744b79 !important;
  font-weight: 600 !important;
  text-shadow:
    0 0 5px rgba(255,255,255,0.90),
    0 1px 1px rgba(255,255,255,0.70) !important;
}

/* pills and small buttons */
body.scene-celestial .pill-row button,
body.scene-celestial .pill-row span,
body.scene-celestial .feature-card button {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.34) 0%,
      rgba(255,240,250,0.22) 100%) !important;
  color: #6a3d70 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
  box-shadow:
    0 3px 10px rgba(195, 155, 215, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 1px 1px rgba(255,255,255,0.75) !important;
}

/* icons */
body.scene-celestial .action-icon,
body.scene-celestial .music-action-card > span,
body.scene-celestial .player-controls span {
  color: #7b4f83 !important;
  text-shadow:
    0 0 8px rgba(255,255,255,0.90),
    0 0 14px rgba(255,225,245,0.55) !important;
}

/* icon bubble */
body.scene-celestial .action-icon {
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.42),
      rgba(255,240,250,0.18) 45%,
      rgba(235,210,245,0.16) 100%) !important;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 0 14px rgba(255,225,245,0.28) !important;
}

/* featured buttons */
body.scene-celestial .feature-card button {
  border-radius: 999px;
  padding: 10px 18px;
}

/* hover = more glossy */
body.scene-celestial .music-action-card:hover,
body.scene-celestial .genre-panel:hover,
body.scene-celestial .feature-card:hover,
body.scene-celestial .music-bottom-buttons a:hover,
body.scene-celestial .pill-row button:hover,
body.scene-celestial .feature-card button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(125, 95, 170, 0.20),
    0 0 26px rgba(255,225,245,0.30),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

/* =========================================
   MORNING / GOLDEN SONATA READABILITY FIX
   glossy warm glass + readable brown text
========================================= */

body.scene-morning .music-action-card,
body.scene-morning .genre-panel,
body.scene-morning .feature-card,
body.scene-morning .featured-section,
body.scene-morning .music-bottom-buttons a,
body.scene-morning .big-player {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 238, 210, 0.28) 35%,
      rgba(245, 190, 145, 0.24) 100%
    ) !important;
  border: 1.5px solid rgba(255, 248, 235, 0.68) !important;
  border-top: 1.6px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 10px 28px rgba(150, 90, 45, 0.16),
    0 0 22px rgba(255, 210, 150, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.58),
    inset 0 -1px 0 rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(9px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(130%) !important;
}

/* glossy shine */
body.scene-morning .music-action-card::before,
body.scene-morning .genre-panel::before,
body.scene-morning .feature-card::before,
body.scene-morning .featured-section::before,
body.scene-morning .music-bottom-buttons a::before,
body.scene-morning .big-player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.36) 0%,
      rgba(255,255,255,0.14) 24%,
      rgba(255,255,255,0.04) 42%,
      transparent 68%
    );
}

/* soft golden glow patches */
body.scene-morning .music-action-card::after,
body.scene-morning .genre-panel::after,
body.scene-morning .feature-card::after,
body.scene-morning .featured-section::after,
body.scene-morning .music-bottom-buttons a::after,
body.scene-morning .big-player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.20), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(255,230,180,0.18), transparent 22%),
    radial-gradient(circle at 70% 82%, rgba(255,245,220,0.12), transparent 24%);
}

/* keep text above gloss */
body.scene-morning .music-action-card > *,
body.scene-morning .genre-panel > *,
body.scene-morning .feature-card > *,
body.scene-morning .featured-section > *,
body.scene-morning .music-bottom-buttons a > *,
body.scene-morning .big-player > * {
  position: relative;
  z-index: 2;
}

/* headings */
body.scene-morning .music-action-card h3,
body.scene-morning .genre-panel h2,
body.scene-morning .feature-card h3,
body.scene-morning .featured-section h2,
body.scene-morning .big-player h3,
body.scene-morning #playerSong {
  color: #5f3b2d !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 6px rgba(255,255,255,0.90),
    0 1px 1px rgba(255,245,230,0.85) !important;
}

/* normal text */
body.scene-morning .music-action-card p,
body.scene-morning .genre-panel p,
body.scene-morning .feature-card p,
body.scene-morning .featured-section p,
body.scene-morning .music-bottom-buttons a,
body.scene-morning .big-player,
body.scene-morning #playerArtist,
body.scene-morning #playerStart,
body.scene-morning #playerEnd {
  color: #6e4938 !important;
  font-weight: 600 !important;
  text-shadow:
    0 0 5px rgba(255,255,255,0.85),
    0 1px 1px rgba(255,245,230,0.75) !important;
}

/* pills/buttons */
body.scene-morning .pill-row button,
body.scene-morning .pill-row span,
body.scene-morning .feature-card button {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.34),
      rgba(255,225,185,0.22)
    ) !important;
  color: #65402f !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 250, 235, 0.70) !important;
  box-shadow:
    0 3px 10px rgba(175, 105, 55, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  text-shadow:
    0 0 4px rgba(255,255,255,0.90),
    0 1px 1px rgba(255,245,230,0.75) !important;
}

/* icons/arrows */
body.scene-morning .action-icon,
body.scene-morning .music-action-card > span,
body.scene-morning .player-controls span {
  color: #7a4b34 !important;
  text-shadow:
    0 0 8px rgba(255,255,255,0.80),
    0 0 12px rgba(255,220,160,0.45) !important;
}

/* hover shine */
body.scene-morning .music-action-card:hover,
body.scene-morning .genre-panel:hover,
body.scene-morning .feature-card:hover,
body.scene-morning .pill-row button:hover,
body.scene-morning .feature-card button:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.40),
      rgba(255,225,185,0.30)
    ) !important;
  box-shadow:
    0 12px 30px rgba(160, 95, 45, 0.18),
    0 0 24px rgba(255, 210, 150, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* =========================================
   MILKYWAY READABILITY FIX
   glossy celebration glass + readable text
========================================= */

body.scene-milkyway .music-action-card,
body.scene-milkyway .genre-panel,
body.scene-milkyway .feature-card,
body.scene-milkyway .featured-section,
body.scene-milkyway .music-bottom-buttons a,
body.scene-milkyway .big-player {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,230,250,0.24) 35%,
      rgba(230,190,245,0.26) 100%
    ) !important;
  border: 1.5px solid rgba(255,245,255,0.68) !important;
  border-top: 1.6px solid rgba(255,255,255,0.78) !important;
  box-shadow:
    0 10px 30px rgba(110, 65, 135, 0.18),
    0 0 24px rgba(255, 210, 255, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.58),
    inset 0 -1px 0 rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(9px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(135%) !important;
}

/* glossy shine */
body.scene-milkyway .music-action-card::before,
body.scene-milkyway .genre-panel::before,
body.scene-milkyway .feature-card::before,
body.scene-milkyway .featured-section::before,
body.scene-milkyway .music-bottom-buttons a::before,
body.scene-milkyway .big-player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.38) 0%,
      rgba(255,255,255,0.14) 24%,
      rgba(255,255,255,0.04) 42%,
      transparent 68%
    );
}

/* soft starry glow patches */
body.scene-milkyway .music-action-card::after,
body.scene-milkyway .genre-panel::after,
body.scene-milkyway .feature-card::after,
body.scene-milkyway .featured-section::after,
body.scene-milkyway .music-bottom-buttons a::after,
body.scene-milkyway .big-player::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.24), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(255,220,255,0.20), transparent 22%),
    radial-gradient(circle at 72% 82%, rgba(255,245,255,0.14), transparent 24%);
}

/* keep text above gloss */
body.scene-milkyway .music-action-card > *,
body.scene-milkyway .genre-panel > *,
body.scene-milkyway .feature-card > *,
body.scene-milkyway .featured-section > *,
body.scene-milkyway .music-bottom-buttons a > *,
body.scene-milkyway .big-player > * {
  position: relative;
  z-index: 2;
}

/* headings */
body.scene-milkyway .music-action-card h3,
body.scene-milkyway .genre-panel h2,
body.scene-milkyway .feature-card h3,
body.scene-milkyway .featured-section h2,
body.scene-milkyway .big-player h3,
body.scene-milkyway #playerSong {
  color: #5d3568 !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 6px rgba(255,255,255,0.95),
    0 1px 1px rgba(255,245,255,0.85),
    0 0 12px rgba(255,220,255,0.40) !important;
}

/* normal text */
body.scene-milkyway .music-action-card p,
body.scene-milkyway .genre-panel p,
body.scene-milkyway .feature-card p,
body.scene-milkyway .featured-section p,
body.scene-milkyway .music-bottom-buttons a,
body.scene-milkyway .big-player,
body.scene-milkyway #playerArtist,
body.scene-milkyway #playerStart,
body.scene-milkyway #playerEnd {
  color: #6f4278 !important;
  font-weight: 600 !important;
  text-shadow:
    0 0 5px rgba(255,255,255,0.92),
    0 1px 1px rgba(255,245,255,0.75) !important;
}

/* pills/buttons */
body.scene-milkyway .pill-row button,
body.scene-milkyway .pill-row span,
body.scene-milkyway .feature-card button {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.36),
      rgba(255,230,250,0.24)
    ) !important;
  color: #673772 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,250,255,0.72) !important;
  box-shadow:
    0 3px 10px rgba(180, 130, 210, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.68) !important;
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 1px 1px rgba(255,245,255,0.80) !important;
}

/* icons/arrows */
body.scene-milkyway .action-icon,
body.scene-milkyway .music-action-card > span,
body.scene-milkyway .player-controls span {
  color: #7b4b86 !important;
  text-shadow:
    0 0 8px rgba(255,255,255,0.85),
    0 0 14px rgba(255,220,255,0.50) !important;
}

/* hover shine */
body.scene-milkyway .music-action-card:hover,
body.scene-milkyway .genre-panel:hover,
body.scene-milkyway .feature-card:hover,
body.scene-milkyway .pill-row button:hover,
body.scene-milkyway .feature-card button:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.42),
      rgba(255,225,250,0.32)
    ) !important;
  box-shadow:
    0 12px 30px rgba(120, 75, 145, 0.20),
    0 0 26px rgba(255, 210, 255, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
}