/* ------------------------------------- */
/* 1. Global & Layout Styles - JET BLACK & CHROME SILVER */
/* ------------------------------------- */
:root {
  --primary-bg: #000000;      /* JET BLACK (Deepest Background) */
  --secondary-bg: #1A1A1A;    /* Dark Charcoal for content boxes */
  --text-color: #E0E0E0;      /* Light gray text */
  --accent-color: #EBEBEB;    /* CHROME SILVER (Main color, Borders, Icons) */
  --secondary-accent: #FFFFFF; /* BRIGHT SILVER (Glow/Progress Fill/Hover) */
  --border-color: #333333;
  --radius-small: 8px;
  --padding-main: 30px;
  --shadow-offset: 4px;
}

/* style.css - around line 21 */
body {
  /* 💡 CHANGE THIS LINE TO USE EXO */
  font-family: 'Exo', sans-serif;
  
  background-color: var(--primary-bg);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

/* Main content */
.main-content {
  margin: 30px auto;
  width: 90%;
  max-width: 1000px;
  background-color: var(--primary-bg);
  border: 1px solid var(--accent-color);
  /* 💥 EXTREME: NEO-BRUTALIST OFFSET SHADOW + MAX GLOW */
  box-shadow: 6px 6px 0px var(--secondary-accent), 0 0 15px rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-small);
  padding: var(--padding-main);

  /* 💥 INTENSE REVERSED TRANSITION BASE STATE */
  opacity: 0; /* Invisible initially */
  transform: scale(1.2); /* **Aggressively zoomed in** (start big) */
  /* Intense 1 second transition with a powerful snap-back (overshoots final position) */
  transition: opacity 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Class applied by JavaScript to trigger the final animation */
.main-content.content-loaded {
  opacity: 1;
  transform: scale(1); /* **Snaps back** to normal size */
}


/* Audio Item Styles */
.audio-item {
  margin-bottom: 30px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}


/* ------------------------------------- */
/* --- NEW: Audio.com EMBED STYLES --- */
/* ------------------------------------- */
.audio-com-embed {
  margin-bottom: 40px;
  padding: 15px;
  border: 1px solid var(--accent-color);
  background-color: var(--secondary-bg);
  border-radius: var(--radius-small);
  box-shadow: 4px 4px 0px var(--accent-color);
  transition: transform 0.2s, box-shadow 0.2s;
  /* This removes the bottom line from the external embed section */
  border-bottom: none;
}
.audio-com-embed:hover {
  transform: translate(-5px, -5px);
  box-shadow: 8px 8px 0px var(--secondary-accent);
}

/* Apply player-title style to the new embed's title */
.audio-com-embed .player-title {
  padding: 0;
  margin-bottom: 15px;
}

/* Iframe specific styles: blend the background (to remove the default background image) */
.audio-com-embed .audio-com-iframe {
  display: block;
  border-radius: 1px;
  border: none;
  height: 204px;
  width: 100%;
  /* Override any internal background image/color to blend with the primary black */
  background-color: var(--primary-bg) !important;
  background-image: none !important;
}

/* Style for the link below the iframe */
.audio-com-embed .audio-com-creator-link {
  text-align: center;
  display: block;
  color: #A4ABB6;
  font-size: 0.8em;
  font-family: 'Arial', sans-serif;
  line-height: 16px;
  margin-top: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: color 0.2s;
}

.audio-com-embed .audio-com-creator-link:hover {
  color: var(--secondary-accent);
}


/* In-Player Title Style */
.custom-player .player-title {
  width: 100%;
  margin: 0;
  margin-bottom: 8px;
  color: var(--secondary-accent);
  font-size: 1.25em;
  font-weight: bold;
  padding: 0 5px;
  box-sizing: border-box;
}

/* YOUTUBE, SHARE & FAVORITE LINK STYLES (IN-PLAYER) */
.player-links {
  width: 100%;
  margin-bottom: 12px;
  padding: 0 5px;
  box-sizing: border-box;
}

/* Updated selector to include artist-link and .favorite-button */
.youtube-link, .share-button, .favorite-button, .artist-link , .buy-button {
  display: inline-flex; /* Changed to flex to align icon and text */
  align-items: center; /* Center items vertically */
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  color: var(--secondary-accent);
  border: 1px solid var(--accent-color);
  background-color: var(--primary-bg);
  padding: 3px 6px;
  margin-right: 8px;
  border-radius: var(--radius-small);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  box-shadow: 2px 2px 0px var(--secondary-accent);
}

.youtube-link:hover, .share-button:hover, .favorite-button:hover:not(.favorited), .artist-link:hover {
  background-color: var(--accent-color);
  color: var(--primary-bg);
  box-shadow: 1px 1px 0px var(--secondary-accent);
  transform: translate(1px, 1px);
}

/* Favorite button icon styling */
.favorite-button .fav-icon {
  width: 12px;
  height: 12px;
  fill: currentColor; /* Inherit text color */
  margin-right: 4px; /* Space between icon and text */
}

/* 💥 FAVORITED (ACTIVE) STATE */
.favorite-button.favorited {
  background-color: #006400; /* Dark Green */
  color: var(--secondary-accent);
  border-color: #38C738; /* Brighter Green Border */
  box-shadow: 2px 2px 0px #38C738, 0 0 10px #38C738;
}

.favorite-button.favorited .fav-icon {
  fill: #FFD700; /* Gold/Yellow for filled heart */
}

.favorite-button.favorited:hover {
  background-color: #008000; /* Slightly lighter green on hover */
  box-shadow: 4px 4px 0px #38C738, 0 0 15px #38C738;
  transform: scale(1.05);
}


audio {
  display: none;
}


/* ------------------------------------- */
/* 2. Standard Navigation */
/* ------------------------------------- */
.nav-bar {
  /* NEW LAYOUT STYLES */
  width: 90%;
  max-width: 1000px;
  margin: 15px auto; /* Centers the navigation bar */

  display: flex;
  align-items: center;
  /* KEY CHANGE: Distributes space between the three main elements (Left Group, Search, Right Group) */
  justify-content: space-between;

  padding: 15px 0;
  box-sizing: border-box;

  /* 💥 CRITICAL FIX: Ensure NAV BAR is the dominant stacking context 💥 */
  position: relative; /* Required for z-index to work */
  z-index: 999; /* Higher than player's z-index (which is 1) */

  /* 💥 INTENSE REVERSED TRANSITION BASE STATE */
  opacity: 0; /* Invisible initially */
  transform: scale(1.1); /* Moderately zoomed in */
  /* Intense 1 second transition with a powerful snap-back */
  transition: opacity 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Class applied by JavaScript to trigger the final animation */
.nav-bar.content-loaded {
  opacity: 1;
  transform: scale(1); /* Snaps back to normal size */
}

/* --- NEW GROUP STYLES: Tighter button spacing --- */
.nav-group-left, .nav-group-right {
    display: flex;
    align-items: center;
    gap: 10px; /* Reduces the space between buttons within the groups */
}


.nav-link {
  text-decoration: none;
  color: var(--text-color);
  padding: 10px 20px;
  font-weight: bold;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;

  background-color: var(--primary-bg);
  border: 1px solid var(--accent-color);
  border-radius: var(--radius-small);
  /* Removed horizontal margin here since groups handle spacing now */
  margin: 0;
  box-shadow: 2px 2px 0px var(--secondary-accent);
}

.nav-link:hover {
  background-color: var(--secondary-accent);
  color: var(--primary-bg);
  /* 💥 EXTREME: Increased lift and added glow */
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0px var(--accent-color), 0 0 8px var(--secondary-accent);
}

/* Updated to only include Beats, Contact, and Support */
.nav-link.active,
.nav-link.active-contact,
.nav-link.active-support {
  background-color: var(--accent-color);
  color: var(--primary-bg);
  /* 💥 EXTREME: Increased shadow and max glow */
  box-shadow: 6px 6px 0px var(--secondary-accent), 0 0 10px rgba(255, 255, 255, 1);
}

/* 💥 NEW STYLES for the Auth Button in the Nav Bar */
.nav-bar .auth-link {
  /* Ensure button uses nav-link styles but override specific attributes for active state */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}

.nav-bar .auth-link.logged-in {
  /* Logged In state (Log Out button) */
  background-color: #8B0000; /* Dark Red */
  color: var(--secondary-accent);
  border-color: #FF4500; /* Orange Red Border */
  box-shadow: 4px 4px 0px #FF4500, 0 0 10px #FF4500;
}

.nav-bar .auth-link.logged-in:hover {
  background-color: #A52A2A; /* Brown/Darker Red on hover */
  /* Keeps the lift effect */
  transform: translate(-3px, -3px);
}

/* --- NEW GLOBAL SEARCH BAR STYLES --- */

.nav-search-container {
    /* KEY CHANGE: Make it consume the available space */
    flex-grow: 1;
    /* Use margin to separate it from the button groups. REDUCED from 40px to 15px */
    margin: 0 15px;
    /* Removed width constraints to allow it to grow */
    width: auto;
    max-width: none;
    /* CRITICAL: Set position relative for absolute search results */
    position: relative;
}

/* Style for the actual input field, utilizing existing brutalist classes */
.nav-link.search-input {
    display: block;
    width: 100%;
    /* Keep the nav-link padding for visual consistency */
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;

    /* Inherit/override existing nav-link styles for brutalist look */
    background-color: var(--primary-bg);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-small);
    color: var(--text-color);
    box-shadow: 2px 2px 0px var(--secondary-accent);

    /* Remove hover transitions so text entry is clean and snappy */
    transition: none;
}

.nav-link.search-input:focus {
    outline: none;
    border-color: var(--secondary-accent);
    /* Subtle glow on focus for a tech feel */
    box-shadow: 0 0 5px var(--secondary-accent);
}

/* --- GLOBAL SEARCH RESULTS STYLES --- */
#global-search-results {
    position: absolute; /* Allows it to 'float' over the content */
    top: calc(100% - 1px); /* 💥 FIX: Pulls the results up 1px to cover the input's bottom border/shadow */
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--secondary-bg); /* Dark background */
    border: 1px solid var(--secondary-accent); /* Bright border */
    border-top: none; /* Blends with the input border */
    border-radius: 0 0 var(--radius-small) var(--radius-small);
    box-shadow: 4px 6px 0px var(--accent-color), 0 0 10px rgba(255, 255, 255, 0.7);
    /* High Z-INDEX to float over everything (it inherits the nav-bar's stacking context) */
    z-index: 9990;
}

.search-result-item {
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.1s, transform 0.1s;
    border-bottom: 1px dashed var(--border-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--accent-color);
    color: var(--primary-bg);
    transform: translateX(2px);
}

.search-artist-name {
    font-size: 0.8em;
    color: var(--text-color);
    display: block; /* Newline for artist name */
}
.search-result-item:hover .search-artist-name {
    color: var(--primary-bg); /* Match hover text color */
}

.search-no-results {
    padding: 10px 20px;
    font-size: 0.8em;
    color: #888;
}


/* ------------------------------------- */
/* 3. Contact Page Styles (Neo-Brutalist Buttons) */
/* ------------------------------------- */
.social-link {
  display: block;
  margin-bottom: 15px;
  padding: 15px;
  background-color: var(--accent-color);
  border-radius: var(--radius-small);
  text-decoration: none;
  color: var(--primary-bg);
  font-weight: bold;
  transition: box-shadow 0.2s, transform 0.2s;
  max-width: 400px;
  border: 1px solid var(--secondary-accent);
  text-align: center;
  box-shadow: 4px 4px 0px var(--secondary-accent);
}
.social-link:hover {
  background-color: var(--secondary-accent);
  color: var(--primary-bg);
  /* 💥 EXTREME: Increased push down and accent shadow */
  box-shadow: 4px 4px 0px var(--accent-color);
  transform: translate(4px, 4px);
}


/* ------------------------------------- */
/* 4. Aesthetic Player Styles */
/* ------------------------------------- */
.custom-player {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: var(--secondary-bg);
  border-radius: var(--radius-small);
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid var(--accent-color);
  /* Base shadow for the container */
  box-shadow: 4px 4px 0px var(--accent-color);
  /* Added transition for the hover effect */
  transition: transform 0.2s, box-shadow 0.2s;
}

/* 💥 EXTREME: Hover effect for the entire song container ("move" border) */
.custom-player:hover {
  /* Significantly increased lift/move */
  transform: translate(-5px, -5px);
  /* Thicker, brighter shadow for max impact */
  box-shadow: 8px 8px 0px var(--secondary-accent);
}

/* Row for horizontal controls (Play, Progress, Time) */
.player-controls-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

/* Row for Volume Control only (Bottom Row) */
.player-volume-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
}

/* Play/Pause Button */
.play-button {
  width: 30px;
  height: 30px;
  background-color: var(--accent-color);
  color: var(--primary-bg);
  border: 1px solid var(--secondary-accent);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  padding: 0;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: 2px 2px 0px var(--secondary-accent);
}

.play-button:hover {
  background-color: var(--secondary-accent);
  /* 💥 EXTREME: Thicker shadow and intense glow */
  box-shadow: 3px 3px 0px var(--accent-color), 0 0 10px var(--secondary-accent);
  transform: translate(0px, 0px); /* Keep it centered, focus on the glow */
}
/* Icon styling (used in script.js) */
.play-icon, .pause-icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Volume Control Container */
.volume-control {
  display: flex;
  align-items: center;
  min-width: 120px;
  position: relative;
}

/* Volume Icon Style */
.volume-icon {
  width: 16px;
  height: 16px;
  fill: var(--secondary-accent);
  margin-right: 8px;
}

/* --- UNIQUE VOLUME SLIDER STYLE --- */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 4px;
  background: #444;
  outline: none;
  cursor: pointer;
  border-radius: 2px;
}

/* Style the thumb (the square handle) */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: var(--secondary-accent);
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

/* --- VOLUME TOOLTIP STYLING --- */
.volume-tooltip {
  position: absolute;
  top: -25px;
  background-color: var(--accent-color);
  color: var(--primary-bg);
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 0.7em;
  font-weight: bold;
  min-width: 35px;
  text-align: center;
  left: 40px;
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}

/* Show the tooltip when the volume control area is hovered over (optional) */
.volume-control:hover .volume-tooltip {
  opacity: 1;
}

/* Progress Bar/Waveform */
.progress-container {
  flex-grow: 1;
  /* 🚨 FIX 1: Increase height to contain the large shadow */
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.waveform-track {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: 100%;
  background-color: #444;
  border-radius: var(--radius-small);
  /* 🚨 FIX 2: REMOVE overflow: hidden; to allow the massive shadow to be visible */
  overflow: visible;
  cursor: pointer;
  position: relative;
}

/* 🚨🚨 PROGRESS FILL - THE FINAL FIX FOR MAX GLOW 🚨🚨 */
.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  /* 🎨 Set to PURE WHITE (#FFFFFF) for maximum light generation */
  background-color: #FFFFFF;
  /* 💥 EXTREME AURA: Maxed out shadow size for visibility */
  box-shadow: 0 0 20px #FFFFFF, 0 0 40px #FFFFFF, 0 0 60px #FFFFFF;
  transition: width 0.1s linear;
}

/* The Static Visual Lines (Aesthetic Waveform Effect) */
.waveform-track::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1) 0,
                                              rgba(255, 255, 255, 0.1) 2px,
                                              transparent 2px,
                                              transparent 4px
  );
  z-index: 1;
}

/* Time Display (Keeping old class for component consistency) */
.time-display {
  font-size: 0.8em;
  color: var(--text-color);
  margin-left: 10px;
  min-width: 80px;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
  transition: text-shadow 0.2s ease-out;
}

.time-display.active-aura {
  text-shadow: 0 0 12px var(--secondary-accent), 0 0 20px rgba(255, 255, 255, 0.8);
}

/* ------------------------------------- */
/* 5. Logo NL-Text Styles (New) */
/* ------------------------------------- */
.nl-logo {
  position: fixed; /* Ensures it does NOT move on scroll */
  top: 15px;
  left: 20px;
  font-family: 'Arial Black', Gadget, sans-serif; /* Neo-Brutalist/Bold font */
  font-size: 2.5em;
  font-weight: 900;
  color: var(--secondary-accent); /* All white/Bright silver */
  z-index: 1000; /* Ensure it's on top of everything */
  padding: 5px 10px;
  border: 2px solid var(--secondary-accent);
  box-shadow: 4px 4px 0px var(--accent-color), 0 0 10px var(--secondary-accent);
  background-color: var(--primary-bg);
  text-decoration: none;
  line-height: 1; /* Keep N and L close */
  letter-spacing: -2px; /* Pull NL closer together */

  /* 💥 INTENSE REVERSED TRANSITION BASE STATE */
  opacity: 0; /* Invisible initially */
  transform: scale(1.3); /* **MOST aggressively zoomed in** */
  /* Intense 1 second transition with a powerful snap-back */
  transition: opacity 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Class applied by JavaScript to trigger the final animation */
.nl-logo.content-loaded {
  opacity: 1;
  transform: scale(1); /* Snaps back to normal size */
}


/* ------------------------------------- */
/* 6. Centered Logo Loading Screen Styles (UPDATED TRANSITION) */
/* ------------------------------------- */

/* Full-screen overlay */
#page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-bg); /* Jet Black background */
z-index: 9999; /* Ensure it's on top of everything */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
/* UPDATED TRANSITION: Now includes transform for the scale-down effect */
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
transform: scale(1); /* Start at normal size */
}

/* Copy of the original NL Logo style, centered and larger */
.loader-nl-logo {
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 5em; /* Larger than the corner logo */
  font-weight: 900;
  color: var(--secondary-accent);
  padding: 10px 20px;
  border: 3px solid var(--secondary-accent);
  /* Using your existing chrome/brutalism shadow scheme */
  box-shadow: 8px 8px 0px var(--accent-color), 0 0 20px var(--secondary-accent);
  background-color: var(--primary-bg);
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: 20px;

  /* Apply the pulse animation */
  animation: nl-pulse 1.5s infinite alternate;
}

/* Subtle loading text beneath the logo */
.loading-text {
  color: var(--accent-color);
  font-size: 0.9em;
  letter-spacing: 5px;
  font-weight: bold;
}

/* Utility class to instantly hide the loader on subsequent page loads */
.hide-loader-instantly {
  display: none !important;
}

/* Keyframes for the Pulse Animation */
@keyframes nl-pulse {
  0% {
    box-shadow: 8px 8px 0px var(--accent-color), 0 0 10px var(--secondary-accent);
    transform: scale(1);
  }
  100% {
    /* Slightly larger and much brighter shadow/glow */
    box-shadow: 12px 12px 0px var(--secondary-accent), 0 0 30px rgba(255, 255, 255, 1);
    transform: scale(1.05);
  }
}

/* ------------------------------------- */
/* 9. MASTER PLAYER STYLES (index.html)  */
/* ------------------------------------- */

/* Make .main-content the "big box" */
#master-player-container {
  position: relative; /* Context for background */
  overflow: hidden; /* Keep glow/animation inside */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px; /* Give the box some size */
  padding: var(--padding-main);
  z-index: 1; /* Sit above the bg */
}

/* 💥 The repeating background animation 💥 */
.master-player-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* A subtle scan-line effect */
  background: repeating-linear-gradient(
    var(--primary-bg),
    var(--primary-bg) 20px,
    var(--secondary-bg) 21px,
    var(--secondary-bg) 22px
  );
  animation: bg-scan 5s linear infinite;
  opacity: 0.3; /* Subtle */
  z-index: -1;
}

@keyframes bg-scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; } /* 100px is the loop distance */
}

/* --- Top Bar: Info & Search --- */
.master-player-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  z-index: 2;
}

.now-playing-info h2 {
  color: var(--secondary-accent);
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 1.8em;
  text-shadow: 0 0 8px var(--secondary-accent);
}
.now-playing-info .artist-link {
  margin: 0; /* Remove default margin */
}

/* --- Central Controls --- */
.master-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  /* 🛠️ ADJUSTMENT: Reverting to clean spacing now that progress/volume are grouped below */
  margin: 50px 0;
  z-index: 2;
}

/* --- Horizontal Progress & Volume Row --- */
.master-bottom-row {
    display: flex;
    align-items: center; /* Vertically aligns the time, progress bar and volume */
    width: 100%;
    margin-top: 20px; /* Space between the main buttons and this new bar */
    z-index: 2;
}

/* --- Time Skip Controls Group (Bottom Left) --- */
.master-time-skip-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Fixed width to keep it compact */
    min-width: 120px;
    padding: 0 5px;
    box-sizing: border-box;
    z-index: 2;
}

/* --- Skip Button Style (small and brutalist) --- */
.time-skip-btn {
    background-color: var(--primary-bg);
    color: var(--secondary-accent);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-small);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    width: 28px;
    height: 28px;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 2px 2px 0px var(--accent-color);
}
.time-skip-btn:hover {
    background-color: var(--accent-color);
    color: var(--primary-bg);
    box-shadow: 3px 3px 0px var(--secondary-accent), 0 0 8px var(--secondary-accent);
}

/* 💥 NEW STYLE for the MM:SS timer (replacing the old aggressive one) 💥 */
#master-time-display {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--secondary-accent); /* Bright Silver */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7); /* Subtle white glow */
    min-width: 45px; /* Wider to accommodate MM:SS */
    text-align: center;
    padding: 0 5px;
}


/* Base style for new Prev/Next/Loupe buttons */
.player-icon-btn {
  background-color: var(--accent-color);
  color: var(--primary-bg);
  border: 1px solid var(--secondary-accent);
  border-radius: var(--radius-small);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: 2px 2px 0px var(--secondary-accent);
}

.player-icon-btn:hover {
  background-color: var(--secondary-accent);
  box-shadow: 3px 3px 0px var(--accent-color), 0 0 10px var(--secondary-accent);
}

/* Make the Play button bigger */
.player-icon-btn.large-play-btn {
  width: 60px;
  height: 60px;
  padding: 15px;
  border-radius: 50%; /* Make it round */
  box-shadow: 4px 4px 0px var(--secondary-accent), 0 0 15px rgba(255, 255, 255, 0.7);
}
.player-icon-btn.large-play-btn:hover {
  transform: scale(1.05);
  box-shadow: 6px 6px 0px var(--secondary-accent), 0 0 25px rgba(255, 255, 255, 1);
}

/* --- Master Progress & Volume --- */
.master-progress-container {
  /* 🛠️ ADJUSTMENT: Allow this container to grow to fill space beside time controls and volume. */
  flex-grow: 1;
  display: flex;
  align-items: center;
  z-index: 2;
}
/* Re-use existing progress bar styles */
.master-progress-container .progress-container {
  flex-grow: 1;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.master-volume-container {
  display: flex;
  justify-content: flex-start;
  /* 🛠️ ADJUSTMENT: Give volume a fixed width so progress bar can grow. */
  min-width: 180px;
  padding: 10px 5px;
  box-sizing: border-box;
  z-index: 2;
}

#page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #C0C0C0;
  font-family: monospace;
  font-size: 1.1rem;
  z-index: 9999;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: scale(1); /* Ensure the scale property is defined */
}

.hide-loader-instantly {
  display: none !important;
}


/* ------------------------------------- */
/* 2. Responsive Design (Mobile-Friendly) - FINAL PLAYER & CLEAN SLATE NAV */
/* ------------------------------------- */

/* Tablet and Smaller Devices (up to 768px) */
@media (max-width: 768px) {
  /* 🔑 CRITICAL FIX: PREVENT HORIZONTAL SCROLL/ZOOM-OUT */
  body {
    overflow-x: hidden;
  }

  /* 💥 HIDE LOADER AND MAIN NL LOGO */
  .loader-nl-logo {
    display: none !important;
  }
  .nl-logo {
    display: none !important; /* Hides the main NL logo */
  }

  /* --- NAVIGATION: REMOVING HAMBURGER SYSTEM --- */

  /* DELETE: The Hamburger Toggle Button and its bars */
  .nav-toggle-btn,
  .icon-bar {
    display: none !important;
  }

  /* Nav Bar: Now a simple, horizontal header on mobile */
  .nav-bar {
    position: static; /* Let it flow normally, no more fixed overlay */
    flex-direction: row;
    justify-content: space-around; /* Space out remaining essential links */
    align-items: center;
    width: 100%;
    height: auto;
    background-color: transparent;
    transform: none; /* No more sliding animation */
    visibility: visible;
    z-index: 1; /* Drop z-index */
    padding: 10px 0;
    margin-bottom: 20px; /* Push main content down */
  }

  /* Reset link groups to a simple row layout */
  .nav-group-left,
  .nav-group-right {
    flex-direction: row;
    align-items: center;
    padding: 0;
    width: auto;
    /* You will need to make sure unwanted links (search, contact, discover)
     *        are hidden in your index.html or with specific CSS if they remain. */
  }

  /* Explicitly hiding the common elements you don't want */
  #global-search-container {
  display: none !important;
  }
  /* You may need to add specific selectors here for Contact Us/Discover if they are still showing. */


  /* --- MAIN CONTENT & LAYOUT (Narrow Screen Fix) --- */

  /* Main Content Adjustments: SLIMMER container for max side margin */
  .main-content {
    margin: 20px auto; /* Reduced top margin since nav is no longer fixed/hidden */
    /* FINAL FIX: Reduced from 85% to 80% to ensure enough margin for shadow on 360px screens */
    width: 80%;
    box-shadow: 4px 4px 0px var(--secondary-accent), 0 0 10px rgba(255, 255, 255, 0.5);
  }

  /* --- MASTER PLAYER ADJUSTMENTS (Mobile View) --- */

  #master-player-container {
  flex-direction: column;
  /* FINAL TALLER ADJUSTMENT: Significantly increased vertical padding */
  padding: 60px 15px;
  height: auto;
  }

  /* 1. Track Info (Title/Artist) - Top */
  .now-playing-info {
    text-align: center;
    /* FINAL TALLER ADJUSTMENT: Increased vertical space below text */
    margin-bottom: 60px;
    width: 100%;
  }
  #master-title {
  font-size: 1.5em;
  margin-bottom: 5px;
  margin-left: -20px;
  }
  .artist-link, .stream-text {
    font-size: 0.9em;
  }
  .master-player-top {
    width: 100%;
    justify-content: center;
  }

  /* 2. Main Control Layout */
  .master-bottom-row {
    flex-direction: column;
    align-items: center;
    /* FINAL TALLER ADJUSTMENT: Increased vertical gap */
    gap: 40px;
    width: 100%;
  }

  /* 3. Play/Pause/Next/Prev Controls - Centered Middle */
  .master-controls {
    order: 1;
    width: 100%;
    justify-content: center;
  }
  /* Ensure buttons are large and tap-friendly */
  .player-icon-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
  .player-icon-btn.large-play-btn {
    width: 70px;
    height: 70px;
    padding: 15px;
    box-shadow: 3px 3px 0px var(--secondary-accent), 0 0 10px rgba(255, 255, 255, 0.7);
  }

  /* 4. Progress Bar - Under Controls */
  .master-progress-container {
    order: 2;
    width: 100%;
    margin: 0;
    flex-grow: 0;
  }

  /* 5. Time Skip Controls (Rewind/Forward/Time) - Under Progress */
  .master-time-skip-controls {
    order: 3;
    width: 100%;
    justify-content: center;
    padding: 0;
  }

  /* 6. Volume Control - Bottom */
  .master-volume-container {
    order: 4;
    width: 100%;
    justify-content: center;
    padding: 0 5px;
  }

  /* Clean up residual displays */
  .master-time-skip-controls #master-time-display {
    display: inline;
    margin: 0 15px;
  }
  .master-bottom-row .master-time-display {
    display: none;
  }
}

/* Very Small Mobile Devices (up to 480px) */
@media (max-width: 480px) {
  /* Allow remaining nav links to stack if necessary */
  .nav-group-left, .nav-group-right {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-link {
    margin: 5px 0;
    text-align: center;
  }
}


/* SUCCESS State: Applies the 'copied-success' class temporarily via player.js */
.master-artist-link.share-btn.copied-success {
    /* Flash a contrasting color to confirm the action */
    color: var(--primary-bg) !important;      /* Text becomes JET BLACK */
    background-color: var(--secondary-accent); /* Background becomes BRIGHT SILVER */
    padding: 2px 5px;
    border-radius: var(--radius-small);
    box-shadow: 2px 2px 0px var(--secondary-accent); /* Small brutalist shadow */
}



/* --- DISCOVER PAGE STYLES --- */

/* Header Area (Mixtape Info Block) */
.mixtape-header {
    display: flex;
    align-items: flex-end; /* Align to the bottom of the cover art */
    padding: 40px;
    background-color: rgba(30, 0, 0, 0.5); /* Semi-transparent dark red background inspired by the image */
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    min-height: 250px; /* Ensure space for the title */
}

.mixtape-cover-art {
    width: 180px;
    height: 180px;
    min-width: 180px; /* Keep it square */
    background-color: #000000; /* Default black background */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    margin-right: 30px;
}

.mixtape-nl-logo {
    color: #FFFFFF;
    font-size: 50px;
    font-weight: bold;
    /* Optional: Add a subtle glow matching your brand */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7); 
}

.mixtape-info {
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to the bottom */
}

.mixtape-type {
    font-size: 14px;
    color: #fff200; /* Use your neon accent color */
    text-transform: uppercase;
    margin-bottom: 5px;
}

.mixtape-title {
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mixtape-details {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 10px 0 20px;
}

.mixtape-artist {
    color: #fff200; /* Artist link in neon yellow */
    font-weight: bold;
}

.mixtape-play-btn {
    background-color: #fff200; /* Neon yellow button */
    color: #000000;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mixtape-play-btn:hover {
    background-color: #FFE600; 
}


/* Track List (Inspired by the Spotify list) */
.track-list-container {
    padding: 0 40px 40px 40px;
}

.track-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.track-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.track-number {
    width: 30px;
    text-align: right;
    font-size: 14px;
    margin-right: 15px;
}

.track-info {
    flex-grow: 1;
}

.track-title {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
}

.track-artist {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.track-duration {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}



/* --- DISCOVER PAGE STYLES --- */

.mixtape-header { /* ... all the styles here ... */ }
.mixtape-cover-art { /* ... all the styles here ... */ }
.mixtape-title { /* ... all the styles here ... */ }
.mixtape-details { /* ... all the styles here ... */ }
.mixtape-artist { /* ... all the styles here ... */ }
.mixtape-play-btn { /* ... all the styles here ... */ }

/* Track List (Inspired by the Spotify list) */
.track-list-container { /* ... all the styles here ... */ }
.track-item { /* ... all the styles here ... */ }
.track-item:hover { /* ... all the styles here ... */ }
.track-number { /* ... all the styles here ... */ }
.track-info { /* ... all the styles here ... */ }
.track-title { /* ... all the styles here ... */ }
.track-artist { /* ... all the styles here ... */ }
.track-duration { /* ... all the styles here ... */ }


/* ------------------------------------- */
/* --- PFP Integration Styles --- */
/* ------------------------------------- */

/* 1. Use Flexbox to align PFP and Info block horizontally in the top bar */
.master-player-top {
    display: flex;
    align-items: center; /* Vertically center PFP with the text block */
    padding-left: 20px; 
    padding-right: 20px; 
    /* Added minimal vertical padding for better spacing */
    padding-top: 20px; 
    padding-bottom: 20px;
}

/* 2. PFP Style: Square, Neo-Brutalist look, appropriate size */
.master-pfp {
    width: 75px; 
    height: 75px; 
    object-fit: cover; 
    margin-right: 20px; /* Space between PFP and the track text */
    /* Maintain your Neo-Brutalist look */
    border: 2px solid var(--accent-color); 
    box-shadow: 4px 4px 0px var(--secondary-accent); 
    display: none; /* Initially hidden, script displays it only when URL is present */
}

/* 3. Ensure the info block is still the main block of text */
.now-playing-info {
    flex-grow: 1;
}