/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body { margin: 0; }

.main-container {
  max-width: 1100px; /* Or whatever width you prefer */
  margin: 0 auto;   /* Sets top/bottom margin to 0, left/right to auto */
  padding: 20px;
}

.sub-container {
  max-width: 1600px; /* Or whatever width you prefer */
  margin: 0 auto;   /* Sets top/bottom margin to 0, left/right to auto */
  padding: 20px;
}

* {
  font-family: Verdana, Geneva, sans-serif !important;
}

#enter-button {
  /* This adds a 3D "beveled" look */
  border: 5px solid gold;
  border-style: ridge; 
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: -5px 7px 10px black; /* This creates a "base" for the button */
}

/* When you hover over it, it glows slightly */
#enter-button:hover {
  filter: brightness(1);
  transform: translateY(-2px);
  box-shadow: -5px 12px 0px black;
  filter: brightness(1.2); 
  transition: all 0.3s ease;
}

/* When you actually click it, it "pushes" down */
#enter-button:active {
  transform: translateY(8px);
  box-shadow: -5px 2px 0px black;
  transform: scale(0.98);
  filter: brightness(0.9);
}

.nav-3d-button {
  border: 4px solid gold; /* The gold frame */
  border-style: outset;   /* The 3D bevel effect */
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.4); /* The 3D base */
  text-decoration: none;
}

/* When you hover, they glow slightly */
.nav-3d-button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0px 7px 0px rgba(0, 0, 0, 0.4);
}

/* When you click, they "push down" */
.nav-3d-button:active {
  border-style: inset; /* Flips the 3D effect to "pressed" */
  transform: translateY(4px);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}

nav {
  display: flex;          /* Enables flexible layout */
  flex-wrap: wrap;        /* Allows buttons to move to a second line */
  justify-content: center; /* Keeps them centered */
  gap: 10px;
  padding-top: 0;
  margin-top: -5px;
  padding: 20px 10px;     /* Adds space around the whole menu */ 
  }

.nav-3d-button {
  /* ... keep your existing 3D styles ... */
  margin: 0 !important;   /* Let the 'gap' above handle the spacing instead */
}

/* --- 1. GLOBAL & NAVIGATION (Smooth Scrolling & Site Font) --- */
html { scroll-behavior: smooth; margin: 0; padding: 0; }
body { background-color: darkgreen; margin: 0; padding: 0; text-align: center; font-family: Verdana, Geneva, sans-serif; overflow-x: hidden; }
hr { border: 0; height: 2px; background-color: white; width: 100%; margin: 40px 0; display: block; }
.main-container, .sub-container { width: 95%; max-width: 1000px; margin: 0 auto; }

body {
  background-color: darkgreen; 
  margin: 0;
  padding: 0;
  text-align: center; 
  font-family: Verdana, Geneva, sans-serif; /* Restored: Your preferred font */
  overflow-x: hidden; /* Prevents side-scrolling from full-width bars */
}

/* THE BRIGHT WHITE DIVIDERS */
hr {
  border: 0;
  height: 2px;
  background-color: white; 
  width: 100%;
  margin: 40px 0;
  display: block;
}

.main-container, .sub-container {
  width: 95%;
  max-content: 1000px;
  margin: 0 auto;
}

/* --- 2. GOLD 3D HEADERS (The Full-Width Bar Look) --- */
.gold-3d-header {
  box-sizing: border-box; 
  border: 6px gold ridge; /* Restored: The thick 3D frame */
  text-align: center;
  padding: 10px;
  
  /* THE FULL-WIDTH FIX: Forces it to hit the screen edges */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  
  font-weight: bold;
  font-size: 2rem;     
  background-color: teal; /* Default; overridden in HTML for other sections */
  z-index: 10;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.4); 
  
  /* TIGHT SPACING: Pulls it close to the buttons */
  margin-top: -2px;
  margin-bottom: -12px;
  transition: filter 0.3s ease;
}

.gold-3d-header:hover {
  filter: brightness(1.1); /* Subtle highlight we just added */
  cursor: default;
}

/* --- 3. THE MARQUEE PILL (The 1.5s Bloom) --- */
#now-playing-container {
  cursor: move;
  touch-action: none;
  position: fixed; 
  bottom: 60px;
  left: 20px;
  width: 300px;
  height: 35px;
  color: gold;
  background: rgba(0, 0, 0, 1);
  border: 2px solid black;
  border-radius: 15px;
  z-index: 99999;
  display: flex;
  align-items: center;
  overflow: visible;
  padding: 0 10px;
  opacity: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  
  /* THE BLOOM: Slow fade for the neon look */
  transition: opacity 0.5s ease-in-out, box-shadow 1.5s ease-in-out, border-color 1.5s ease-in-out;
  box-shadow: -1px 1px 7px rgba(255, 215, 0, 0.6), 
               -5px 5px 15px rgba(255, 215, 0, 0.4);
}

#now-playing-container:hover {
  border-color: gold; 
  box-shadow: -2px 2px 15px rgba(255, 215, 0, 0.8), 
              -8px 8px 30px rgba(255, 215, 0, 0.5);
  filter: brightness(1.2);
}#now-playing-container {
  cursor: move;
  touch-action: none;
  position: fixed; 
  bottom: 60px;
  left: 20px;
  width: 300px;
  height: 35px;
  color: gold;
  background: rgba(0, 0, 0, 1);
  border: 2px solid black;
  border-radius: 15px;
  z-index: 99999;
  display: flex;
  align-items: center;
  overflow: visible;
  padding: 0 10px;
  opacity: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  
  /* THE BLOOM: Slow fade for the neon look */
  transition: opacity 0.5s ease-in-out, box-shadow 1.5s ease-in-out, border-color 1.5s ease-in-out;
  box-shadow: -1px 1px 7px rgba(255, 215, 0, 0.6), 
               -5px 5px 15px rgba(255, 215, 0, 0.4);
}

#now-playing-container:hover {
  border-color: gold; 
  box-shadow: -2px 2px 15px rgba(255, 215, 0, 0.8), 
              -8px 8px 30px rgba(255, 215, 0, 0.5);
  filter: brightness(1.2);
}

.hidden-marquee {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* --- 4. UI BARS (Mirroring Top & Bottom) --- */
.marquee-ui-top, .marquee-ui-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 100005;
}

.marquee-ui-top { top: -30px; }
.marquee-ui-bottom { bottom: -30px; }

/* --- 5. ALL BUTTONS (X, Nav, Loop) --- */
#close-marquee {
  background: darkred;
  color: white;
  border: 1px solid black;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-weight: bold;
  font-size: 12px;
  margin: 0;
  box-shadow: -1px 1px 7px rgba(255, 215, 0, 0.6), 
              -5px 5px 15px rgba(255, 215, 0, 0.4);
  transition: all 0.2s ease;
}

/* 2. THE GOLD GLOW FOR THE X BUTTON */
#close-marquee:hover {
  background: #800000;
  border-color: gold;
  color: #ffcc00;
  filter: drop-shadow(0px 0px 5px #ff8800) 
          drop-shadow(0px 0px 15px rgba(255, 136, 0, 0.8)) 
          brightness(1.5);
}

.nav-btn, #loop-btn {
  background: #333;
  color: gold;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0;
  transition: all 0.2s ease;
  box-shadow: -1px 1px 7px rgba(255, 215, 0, 0.6), 
              -5px 5px 15px rgba(255, 215, 0, 0.4);
  transition: all 0.2s ease; 
}

.nav-btn:hover, #loop-btn:hover {
  background: #222;
  color: #ffcc00;
  border-color: gold;
  /* Replaces static shadow with intense 'Ignited' glow */
  filter: drop-shadow(0px 0px 4px #ff8800) 
          drop-shadow(0px 0px 12px rgba(255, 136, 0, 0.7)) 
          brightness(1.4);
}

.emoji-circle {
  /* IDENTICAL SIZE TO YOUR 'X' BUTTON */
  width: 20px;
  height: 20px;
  
  background: #222;        /* Dark background like a gauge */
  color: gold;
  border: 1px solid black;  /* Same gold rim as the X */
  border-radius: 50%;      /* Perfect circle */
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* EMOJI SIZE: Adjusted to fit perfectly inside the 20px circle */
  font-size: 10px; 
  
  cursor: pointer; /* Changed from default to pointer */
  transition: all 0.2s ease;
  
  /* Matches the button alignment */
  vertical-align: middle;
  margin: 0;
  transition: background 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
  box-shadow: -1px 1px 7px rgba(255, 215, 0, 0.6), 
              -5px 5px 15px rgba(255, 215, 0, 0.4);
  transition: all 0.2s ease; 
}

.emoji-circle:hover {
  background: #222;       /* Matches the nav-btn hover background */
  color: #ffcc00;         /* Deep Gold icon */
  border-color: gold;  /* Warm Amber border */
  
  /* THE DOUBLE AMBER BLOOM: Identical to your nav-buttons */
  filter: drop-shadow(0px 0px 4px #ff8800) 
          drop-shadow(0px 0px 12px rgba(255, 136, 0, 0.7)) 
          brightness(1.4);
}

.emoji-circle-speed {
  transition: color 0.3s ease, border-color 0.3s ease; /* Smooth color swaps */
  will-change: filter; /* Optimizes for the fast flickering */
}

/* --- 6. UNIFIED GOLD ORB SLIDERS (The Permanent Symmetrical Fix) --- */
#speed-slider, #volume-slider, #opacity-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 80px !important;
  height: 8px !important;
  background-color: #333 !important; /* Forces the dark bar back */
  border-radius: 10px !important;
  outline: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  border: 1px solid black !important; /* Black border when static */
  
  /* THE STATIC SIGNATURE GLOW */
  box-shadow: -1px 1px 7px rgba(255, 215, 0, 0.6), 
              -5px 5px 15px rgba(255, 215, 0, 0.4) !important;

  /* THE GOLD FILL */
  background-image: linear-gradient(gold, gold) !important;
  background-size: 0% 100% !important; 
  background-repeat: no-repeat !important;
  background-clip: padding-box !important;
}

/* THE HOVER (Track turns Gold) */
#speed-slider:hover, #volume-slider:hover, #opacity-slider:hover {
  border-color: gold !important;
}

/* THE THUMB (The Gold Circle) */
#speed-slider::-webkit-slider-thumb, 
#volume-slider::-webkit-slider-thumb, 
#opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  background: gold !important; 
  border-radius: 50% !important; /* FORCES THE CIRCLE */
  border: none !important;
  box-shadow: none !important; /* KILLS THE SQUARE GLOW */
  margin-top: 0px !important; /* Centers it on the 8px track */
  cursor: pointer;
}

/* THE CIRCULAR GLOW (Hovering the Circle) */
#speed-slider::-webkit-slider-thumb:hover, 
#volume-slider::-webkit-slider-thumb:hover, 
#opacity-slider::-webkit-slider-thumb:hover {
  /* This creates a circular aura specifically around the 14px circle */
  box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.8) !important;
  filter: brightness(1.3) !important;
}

/* FIREFOX FIX */
#speed-slider::-moz-range-thumb, #volume-slider::-moz-range-thumb, #opacity-slider::-moz-range-thumb {
  width: 14px !important; height: 14px !important; background: gold !important; border-radius: 50% !important; border: none !important;
}


/* --- 7. MARQUEE TEXT & SCROLLING --- */
.marquee-window {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex; 
  width: max-content;
  white-space: nowrap;
  gap: 100px;
  animation: scroll-left 13s linear infinite; 
}

@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 50px)); } }


#now-playing-text, #now-playing-text-2, #slider-tooltip {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.85rem; /* Verdana is wider, so we shrink it a tiny bit to fit */
  letter-spacing: -0.5px; /* Keeps the digital look tight */
}

/* --- 8. EXTRAS (Tooltips & Links) --- */
#slider-tooltip {
  position: absolute; /* Relative to marquee container */
  display: none;
  background: black;
  color: gold;
  border: 1px solid gold;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 100010;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  transition: opacity 0.5s ease;
}

.playing-now {
  color: DarkCyan !important;
  font-weight: bold !important;
  text-shadow: 0px 0px 10px black !important;
}

a:link {
  color: DarkCyan;
}

a:visited {
  color: Indigo;
}

a2:link {
  color: DarkCyan;
}

a2:visited {
  color: Indigo;
}

.black-link:link { 
  text-decoration: none !important;
  color: black; 
}

.black-link:visited { 
  color: black;
  text-decoration: none !important;
}

.black-link:hover, .black-link:active {
  text-decoration: none !important;
}

h1 {
  text-align: center;
  color: Yellow;
}

p {
  text-align: center;
  line-height: 1.4;
}

b {
  text-align: center;
}

ul {  
  line-height: 1.2;
  font-size:1.2rem;
  text-align: center;
  list-style-position: inside;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  text-align: center;
}

img {
  display: block;
  margin: auto;
  width: 50%;
}

h2 {
  text-align: center;
  color: Yellow;
}

.white {
  color:Cornsilk;
}
.gold {
  color:Gold;
}
.black {
  color:Black;
}
.goldenrod {
  color:GoldenRod;
}
.yellow {
  color:Yellow;
}
.darkgoldenrod {
  color:DarkGoldenRod;
}