/*
  MUSIC GOLD — BURGUNDY EDITORIAL THEME
  The original blue system remains in v4.css. This file is enabled dynamically.
*/

:root {
  --v4-bg: #40152f;
  --v4-panel: #1d0916;
  --v4-panel-raised: #281020;
  --v4-line: #6b3152;
  --v4-line-soft: #3a172d;
  --v4-text: #f0e2c7;
  --v4-muted: #b7979e;
  --v4-orange: #f0e2c7;
  --v4-active: #4c1d3b;
  --burgundy-main: #40152f;
  --burgundy-deep: #2a0c20;
  --burgundy-darker: #351126;
  --burgundy-panel: #1d0916;
  --burgundy-raised: #4c1d3b;
  --burgundy-line: #6b3152;
  --burgundy-cream: #f0e2c7;
  --burgundy-cream-muted: #d3bea6;
  --burgundy-muted: #b7979e;
  --burgundy-pink: #f07493;
  --burgundy-gold: #dcae53;
  --burgundy-serif: Didot, "Bodoni 72", "Bodoni MT", "Iowan Old Style", "Times New Roman", serif;
}

html,
body,
.discovery-machine {
  color: var(--burgundy-cream);
  background: var(--burgundy-main);
  font-family: var(--burgundy-serif);
}

button,
input {
  font-family: var(--burgundy-serif);
}

::selection {
  color: var(--burgundy-main);
  background: var(--burgundy-cream);
}

/* Burgundy-only animated introduction */
.theme-splash.is-active {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  overflow: hidden;
  color: var(--burgundy-cream);
  background: var(--burgundy-main);
  isolation: isolate;
  pointer-events: all;
  animation: burgundy-splash-shell 3.4s ease both;
}

.theme-splash-word {
  position: absolute;
  top: 47%;
  left: 46%;
  z-index: -1;
  margin: 0;
  color: #280b1e;
  font-family: var(--burgundy-serif);
  font-size: clamp(220px, 43vw, 760px);
  font-style: italic;
  font-weight: 400;
  line-height: .7;
  letter-spacing: -.085em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-8deg) scale(.96);
  animation: burgundy-word-in 1.45s cubic-bezier(.22,.68,.2,1) .16s forwards;
}

.theme-splash-side,
.theme-splash-center {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--burgundy-cream);
  font-family: var(--burgundy-serif);
  font-weight: 400;
  letter-spacing: .09em;
  opacity: 0;
  animation: burgundy-meta-in .8s ease .88s forwards;
}

.theme-splash-side {
  top: 50%;
  left: 3.5vw;
  font-size: clamp(15px, 1.35vw, 24px);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}

.theme-splash-center {
  top: 7vh;
  left: 50%;
  width: min(80vw, 760px);
  font-size: clamp(17px, 1.6vw, 29px);
  line-height: 1.15;
  text-align: center;
  transform: translateX(-50%);
}

@keyframes burgundy-word-in {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(.96); }
  to { opacity: .7; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}

@keyframes burgundy-meta-in {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes burgundy-splash-shell {
  0%, 80% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-splash.is-active { animation-duration: .55s; }
  .theme-splash-word,
  .theme-splash-side,
  .theme-splash-center { animation-duration: .01s; animation-delay: 0s; }
}

/* Thin editorial typography across identity and navigation */
.machine-brand strong,
.context-tag small,
.context-tag strong,
.library-header strong,
.country-context-header strong,
.country-row strong,
.country-row em,
.playlist-row strong,
.playlist-row em,
.single-song-list .song-title,
.single-song-list .song-views,
.preview-card-copy > strong,
.preview-card-copy > small,
.preview-card-views,
.song-card:not(.grid-mode) .current-card .card-title-block h2,
.song-card:not(.grid-mode) .current-card #currentArtist,
.song-card:not(.grid-mode) .current-card .card-views-line,
.song-card-strip .card-position,
.footer-stat span,
.footer-toggle span,
.footer-stat strong,
.footer-toggle strong,
.quest-completion > span,
.quest-completion strong,
.theme-switcher > span {
  font-family: var(--burgundy-serif);
  font-weight: 400;
}

.machine-brand strong,
.context-tag strong,
.country-row strong,
.playlist-row strong,
.single-song-list .song-title,
.preview-card-copy > strong,
.song-card:not(.grid-mode) .current-card .card-title-block h2 {
  letter-spacing: .025em;
}

.context-tag small,
.footer-stat span,
.footer-toggle span,
.quest-completion > span,
.theme-switcher > span {
  letter-spacing: .11em;
}

.quest-completion > span {
  white-space: nowrap;
}

/* Header and footer belong to the same burgundy field */
.machine-header,
.site-footer {
  color: var(--burgundy-cream);
  background: var(--burgundy-darker);
  border-color: var(--burgundy-line);
  box-shadow: none;
}

.machine-brand strong,
.context-tag strong,
.quest-completion strong,
.site-footer > .footer-toggle strong {
  color: var(--burgundy-cream);
}

.context-tag,
.header-song-actions,
.site-footer > .footer-toggle,
.site-footer > .quest-completion,
.theme-switcher {
  border-color: var(--burgundy-line);
}

.context-tag small,
.context-icon,
.footer-stat span,
.footer-toggle span,
.quest-completion > span,
.theme-switcher > span,
.footer-icon {
  color: var(--burgundy-cream-muted);
}

.header-context {
  scrollbar-color: var(--burgundy-line) transparent;
}

.header-context::-webkit-scrollbar-thumb {
  background: var(--burgundy-line);
}

.machine-header .machine-brand:hover,
.machine-header .machine-brand:focus-visible,
.machine-header .context-tag:hover,
.machine-header .context-tag:focus-visible,
.machine-header #headerSongTag:hover,
.machine-header #headerSongTag:focus-visible,
#headerSongTag.copied,
.site-footer > .footer-toggle:hover,
.site-footer > .footer-toggle:focus-visible {
  color: var(--burgundy-cream);
  background: #572041;
  border-color: var(--burgundy-cream-muted);
  box-shadow: inset 0 0 0 1px rgba(240, 226, 199, .08);
}

.machine-header .context-tag:hover small,
.machine-header .context-tag:focus-visible small,
.machine-header .context-tag:hover .context-icon,
.machine-header .context-tag:focus-visible .context-icon,
.site-footer > .footer-toggle:hover span,
.site-footer > .footer-toggle:focus-visible span,
.site-footer > .footer-toggle:hover .footer-icon,
.site-footer > .footer-toggle:focus-visible .footer-icon {
  color: var(--burgundy-cream);
}

/* Main field is burgundy; only the catalog is a dark instrument panel */
.three-column-workspace,
.song-card-stage,
.song-card:not(.grid-mode),
.card-carousel,
.song-card-strip,
.song-preview-card,
.current-card,
.side-card {
  background: var(--burgundy-main);
  border-color: transparent;
  box-shadow: none;
}

.browser-panel {
  background: var(--burgundy-panel);
  border-color: var(--burgundy-line);
  box-shadow: none;
}

.browser-level,
.country-list,
.playlist-list,
.single-song-list {
  background: linear-gradient(180deg, #210b19 0%, #160711 100%);
  scrollbar-color: var(--burgundy-line) var(--burgundy-panel);
}

.browser-panel .browser-level > .library-header,
.browser-panel [data-browser-level="countries"] > .library-header,
.country-list-heading,
.playlist-list-heading,
.song-list-heading {
  color: var(--burgundy-cream);
  background: #230c1b;
  border-color: var(--burgundy-line);
  box-shadow: none;
}

.browser-panel .browser-level > .library-header strong,
.browser-panel [data-browser-level="countries"] > .library-header strong,
.library-header strong,
.country-context-header strong,
.country-globe,
.level-back,
.country-context-header .header-country-count {
  color: var(--burgundy-cream);
}

.country-row,
.playlist-row,
.single-song-list .song-row {
  color: var(--burgundy-cream);
  background: rgba(28, 8, 21, .78);
  border-bottom-color: #3a172d;
  box-shadow: none;
}

.playlist-row:hover,
.playlist-row.active,
.single-song-list .song-row:hover,
.single-song-list .song-row.active,
.country-row:hover,
.country-row.active {
  color: var(--burgundy-cream);
  background: var(--burgundy-raised);
  box-shadow: inset 0 1px 0 rgba(240, 226, 199, .11), inset 0 -1px 0 rgba(240, 226, 199, .08);
}

.country-row strong,
.country-row em,
.playlist-row strong,
.playlist-row em,
.single-song-list .song-title,
.single-song-list .song-views,
.playlist-row.active strong,
.playlist-row.active em,
.single-song-list .song-row.active .song-title,
.single-song-list .song-row.active .song-views {
  color: var(--burgundy-cream);
}

.playlist-row::before,
.playlist-row.active::before,
.single-song-list .song-row::before,
.country-row::before,
.country-row.active::before {
  background:
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) left top / 7px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) left top / 2px 7px no-repeat,
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) right top / 7px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) right top / 2px 7px no-repeat,
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) left bottom / 7px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) left bottom / 2px 7px no-repeat,
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) right bottom / 7px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) right bottom / 2px 7px no-repeat;
  filter: drop-shadow(0 0 2px rgba(240, 226, 199, .25));
}

.country-row.active::before {
  background:
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) left top / 14px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) left top / 3px 14px no-repeat,
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) right top / 14px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) right top / 3px 14px no-repeat,
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) left bottom / 3px 14px no-repeat,
    linear-gradient(var(--burgundy-cream),var(--burgundy-cream)) right bottom / 14px 2px no-repeat,
    linear-gradient(var(--burgundy-cream-muted),var(--burgundy-cream-muted)) right bottom / 3px 14px no-repeat;
}

.country-row::after {
  background:
    linear-gradient(90deg,
      var(--burgundy-cream-muted) 0,
      var(--burgundy-cream-muted) var(--country-progress, 0%),
      var(--burgundy-line) var(--country-progress, 0%),
      var(--burgundy-line) 100%);
  box-shadow: none;
}

[data-browser-level="playlists"] .playlist-led,
.single-song-list .song-led {
  background: #9d7485;
  box-shadow: none;
}

[data-browser-level="playlists"] .playlist-row.active .playlist-led,
.single-song-list .song-row.active .song-led {
  background: var(--burgundy-cream);
  box-shadow: 0 0 7px rgba(240, 226, 199, .35);
}

.single-song-list .song-row.heard .song-led {
  background: var(--burgundy-gold);
  box-shadow: 0 0 8px rgba(220, 174, 83, .35);
}

.single-song-list .song-row.saved .song-led,
.single-song-list .song-row.saved.active .song-led,
.single-song-list .song-row.saved:hover .song-led {
  background: var(--burgundy-pink);
  box-shadow: 0 0 8px rgba(240, 116, 147, .42);
}

.single-song-list .song-save-heart {
  color: var(--burgundy-pink);
}

.playlist-cover,
.single-song-list .song-row-thumbnail {
  background: var(--burgundy-deep);
  border-color: var(--burgundy-line);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .3);
}

/* Artwork and song identity float directly on the burgundy field */
.preview-artwork,
.song-card:not(.grid-mode) .current-card .song-card-artwork {
  background: var(--burgundy-deep);
  border-color: #7e4164;
  box-shadow: 0 18px 42px rgba(29, 5, 20, .32);
}

.side-card-select:hover .preview-artwork,
.side-card-select:focus-visible .preview-artwork {
  border-color: var(--burgundy-cream-muted);
  box-shadow: 0 18px 42px rgba(29, 5, 20, .32), 0 0 0 1px rgba(240, 226, 199, .08);
}

.side-card-select,
.song-card-strip .card-position b,
.song-card-strip .card-position i,
.song-card-strip .card-position em,
.preview-card-copy > strong,
.song-card:not(.grid-mode) .current-card .card-title-block h2 {
  color: var(--burgundy-cream);
}

.preview-card-copy > small,
.song-card:not(.grid-mode) .current-card #currentArtist {
  color: var(--burgundy-cream-muted);
}

.preview-card-views,
.song-card:not(.grid-mode) .current-card .card-views-line {
  color: var(--burgundy-muted);
}

.card-thumbnail-play,
.song-card:not(.grid-mode) .current-card .card-thumbnail-play,
.current-card-action,
.current-card-heart {
  color: var(--burgundy-cream);
  background: var(--burgundy-deep);
  border-color: #86506d;
  box-shadow: 0 8px 20px rgba(29, 5, 20, .32);
}

.song-preview-card:hover .card-thumbnail-play,
button.card-thumbnail-play:hover,
button.card-thumbnail-play:focus-visible,
.current-card-action:hover,
.current-card-action:focus-visible {
  color: var(--burgundy-main);
  background: var(--burgundy-cream);
  border-color: var(--burgundy-cream);
  box-shadow: none;
}

.current-card-action:disabled {
  color: #866278;
  background: #2c0d21;
  border-color: #57233f;
  opacity: .55;
}

.current-card-heart.saved,
.current-card-heart.saved:hover,
.current-card-heart.saved:focus-visible {
  color: var(--burgundy-pink);
  background: transparent;
  border-color: rgba(240, 116, 147, .65);
  box-shadow: 0 0 16px rgba(240, 116, 147, .12);
}

/* Theme switcher belongs to the footer rather than floating above it */
.theme-switcher {
  border-color: var(--burgundy-line);
}

.theme-choice.active::after,
.theme-choice:hover::after,
.theme-choice:focus-visible::after {
  border-color: var(--burgundy-cream-muted);
}

/* Completion field keeps semantic gold and pink inside the burgundy system */
.playlist-grid-cell {
  background: #2b0f21;
  border-color: #70405a;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .28);
}

.playlist-grid-cell.complete {
  background: linear-gradient(145deg, #e7bb62 0%, #a97433 54%, #67411f 100%);
  border-color: #efd08b;
}

.playlist-grid-cell.current {
  background: var(--burgundy-cream);
  border-color: #fff7e6;
  box-shadow: 0 0 0 1px #d2b795, 0 0 20px rgba(240, 226, 199, .58);
}

.playlist-grid-cell.liked:not(.current) {
  background: linear-gradient(145deg, #f17c99 0%, #c64768 54%, #75263f 100%);
  border-color: #ffb2c5;
}
