/* --- Body & animated background --- */
body {
    font-family: 'Impact', Gadget, sans-serif;
    color: #ffffff;
    animation: backgroundShift 15s ease infinite;
    overflow-x: hidden;   /* ⛔️ Prevent horizontal scroll */
    overflow-y: auto;     /* ✅ Allow vertical scroll */
    font-size: 100%;
    position: relative;
    background-color: #111;
    align-items: center;
      margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
box-sizing: border-box;
   border: 8px thin #ff00ff;
}


/* --- Container --- */
#karaoke-app {
    z-index: 1;
    /* --- max-width: 900px; --- */
    margin: auto;
    padding: 0.5rem;
    text-shadow: 2px 2px 8px #000;
    position: relative;
    align-items: center;

}

/* --- Neon 3D Title --- */
h2 {
  font-size: clamp(10vw, 16vw, 10rem);
  font-weight: bold;
  font-variant-caps: all-petite-caps;
  color: #ffffff;
  text-align: center;
  text-shadow:
      2px 2px 0 #ff99ff,
      4px 4px 0 #ff66ff,
      6px 6px 0 #ff33ff,
      2px 2px 10px #000;
  animation: glowPulse 0.3s infinite alternate;
  transform-origin: center;font-weight: bold;
    font-variant-caps: all-petite-caps;
    color: #ffffff;
    margin-bottom: 1rem;
    margin-top: 1rem;
    align-items: center;
    animation: glowPulse 0.3s infinite alternate;
    display: inline-block;
    transform: scale(1,0.4);
}


@keyframes glowPulse {
    0% { text-shadow: 2px 2px 5px #ff99ff, 4px 4px 10px #ff66ff, 6px 6px 15px #ff33ff; }
    100% { text-shadow: 2px 2px 10px #ff00ff, 4px 4px 20px #ff00ff, 6px 6px 30px #ff00ff; }
}

/* --- Layout --- */
#topSection {
  display: inline;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* stretched title (keeps visual stretch but centers correctly) */
#topSection h2 {
  display: block;            /* use block so width:100% works */
  width: 100%;               /* occupy full row so text-align:center centers it */
  text-align: center;
  margin: -20px auto;
  font-weight: bold;
  font-variant-caps: all-petite-caps;
  color: #ffffff;
  animation: glowPulse 0.3s infinite alternate;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.popup-box {
  font-weight: bold;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1rem;
  font-weight: normal;
  background: #222;
  color: white;
  padding: 2rem;
  border-radius: 5px;
  text-align: left;
  max-width: 300px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.popup-box button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background: #05eecf;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.popup-box button:hover {
  background: #119999;
}


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


/* --- Controls Grid (tighter layout) --- */
#controlsGrid {
    display: grid;
border-color: #00ffff;    
border-width: 10px;
border-style: solid;
border-radius: 10px;
box-shadow: #0fdceb;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem 0.2rem; /* smaller vertical + horizontal gaps */
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-items: center; /* vertically align content in each cell */
}

/* Each control block */
.controlItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    animation: glowFloat 4s infinite alternate;
    transform: scale(0.95); /* slightly smaller but uniform */
    margin: 0; /* remove spacing */
    padding: 0.3rem 0; /* reduce inner space */
    box-sizing: border-box;
}


/* Floating glow animation */
@keyframes glowFloat {
    0% { filter: drop-shadow(0 0 5px #ff00ff); }
    50% { filter: drop-shadow(0 0 15px #ff00ff); }
    100% { filter: drop-shadow(0 0 10px #ff00ff); }
}

/* --- Inputs & Dropdown --- */
input[type="text"],
#languageSelect,
button,
input[type="range"] {
    width: 100%;
    box-sizing: border-box;
}

input[type="text"], #languageSelect {
    padding: 0.6rem;
    font-size: 1.2rem;
    border-radius: 5px;
    border: 1px solid #ffffff;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    transition: all 0.3s;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

input[type="text"]:focus, #languageSelect:focus {
    border-color: #ff00ff;
    box-shadow: 0 0 2px #ff00ff, 0 0 20px #ff00ff;
    outline: none;
}

/* --- Sliders --- */
input[type="range"] {
     -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  border-radius: 10px;
  outline: none; /* Remove outline */
  opacity: 0.3; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
    accent-color: #ff00ff;
    height: 2rem;
}

input[type="range"]:hover {
  opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 40px; /* Slider handle height */
  background: #97096d; /* Green background */
  cursor: poinrgb(126, 0, 138)
}

input[type="range"]::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/* --- Buttons Neon --- */
button {
    padding: 0.7rem;
    margin: 0.5rem 0;
    font-size: 1.5rem;
    font-weight: lighter;
    border: none;
    border-radius: 4px;
    background-color: #ff00ff;
    color: #fff;
    cursor: pointer;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 0 3px #ff00ff, 0 0 3px #ff00ff;
    transition: all 0.2s;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}

button:hover {
    box-shadow: 0 0 10px #ff66ff, 0 0 10px #ff66ff;
    transform: translateY(-0px);
}

button:disabled {
    background-color: #555;
    box-shadow: none;
    cursor: not-allowed;
}

/* Pseudo-disabled style for buttons without actually disabling them */
.pseudoDisabled {
    background-color: #555 !important;
    box-shadow: none !important;
    color: #aaa !important;
    cursor: default !important;
}

/* --- YouTube Video Container --- */
.karaokeVideoWrapper {
    position: relative;
    width: 100%;         /* full width of container */
    min-height: 360px;
    margin-top: 15px;
}

#karaokeVideo, 
.karaokeVideoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 8px solid #ff00ff;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #111; /* dark frame when no video */
}

#karaokeVideo {
    position: sticky;
    width: 100%;
    height: 360px;
    border: 8px solid #ff00ff;
    border-radius: 10px;
    background-color: #111;
    box-shadow: 0 0 25px #ff00ff;
    animation: videoGlow 3s infinite alternate;
}

@keyframes videoGlow {
    0% { box-shadow: 0 0 10px #ff00ff; }
    100% { box-shadow: 0 0 25px #ff66ff; }
}

/* --- Audio Preview --- */
#previewAudio {
    margin-top: 1rem;
    margin-bottom: 1rem;
    height: 2.1rem;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 15px #00ffff;
    outline: none;
}

/* --- Status --- */
#status {
    margin-top: 1rem;
    font-weight: bold;
    font-size: 1.5rem;
    color: #00ffff;
    text-shadow: 1px 1px 10px #00ffff, 1px 1px 20px #00ffff;
    text-align: center;
}

/* --- Labels & spans --- */
label {
    display: block;
    font-weight: bold;
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    margin-bottom: 0.3rem;
}

span {
font-style: italic;
    color: #fafafa;
}

#volumeValue {
  position: absolute;
  top: 50%;
  right: 2%;
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
  pointer-events: none; /* so you can still slide */
  text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

#reverbValue {
  position: absolute;
  top: 50%;
  right: 2%;
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
  pointer-events: none; /* so you can still slide */
  text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

#reverbLengthValue {
  position: absolute;
  top: 50%;
  right: 2%;
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
  pointer-events: none; /* so you can still slide */
  text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

/* --- Responsive --- */
@media (max-width: 700px) {
    #controlsGrid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    input[type="range"] {
        width: 100%;
    }
}