/* ===== GLOBAL RESET / BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000; 
}

html {
  font-size: 16px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}


button,
input,
select {
  font-family: inherit;
}


html, body {
  -webkit-user-select: none;  /* Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE/Edge older */
  user-select: none;          /* Standard */
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button:focus {
  outline: none;       /* removes the focus ring */
  box-shadow: none;    /* remove any shadow-based focus indicators */
}


@font-face {
  font-family: 'Cinzel';
  src: url('/assets/fonts/cinzel/Cinzel-Variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}


.enter-player {
  display: flex;
  justify-content: center;  /* horizontally center the box */
  align-items: center;      /* vertically center the box */
  height: 100%;  
}


.enter-player .box {
  background: #000;
  color: #fff;
  padding: 30px;
  border-radius:11px;
  box-shadow:0 0 20px rgba(0,0,0,1)  ,
             0 0 30px rgba(255,255,255,.4);
  border: 0px solid #fff;
  max-width:350px;    /* prevents the box from growing too wide */
  width: 90%;          /* scales nicely on smaller screens */
  text-align: center;  /* ensures text inside is centered */
}


.enter-player .title {
  font-family: 'Cinzel';
  font-size:30px;
  text-shadow:
    0 0 10px rgba(255, 245, 0, 0.5),
    0 0 12px rgba(255, 215, 0, 0.3);
}


.enter-player .box .text {
  display: block;    
  font-family: 'Times New Roman';
  width: 100%;    
  word-wrap: break-word;   
  white-space: normal;     
  text-align: center;
  margin-bottom: 13px;
  font-size: 14px;
  line-height: 1.8;
}


.enter-player .box form {
  display: flex;
  flex-direction: column;   /* stack children vertically */
  gap: 15px;                /* space between input and button */
}


.enter-player .box input,
.enter-player .box button {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  text-align:center;
  color:#fff;
  font-family: 'Times New Roman';
  background:#000;
  border: 1px solid #fff;
}


.enter-player .box input {margin-top: 12px;}


.enter-player .box button {
  margin-bottom:30px;
  font-family: 'Cinzel';
  cursor:pointer;
}


.enter-player .box button:hover {
  background:#111;
}






body { font-family: sans-serif; 
      color:#eee; 
      padding:1rem; }
.release { 
  margin-top:40px; 
}
.release h2 { margin:0.5rem 0; }
.release img { 
  width:200px; 
  height:auto; 
  display:block; 
  margin-bottom:0.5rem; }
#playlist button { 
  display:block; 
  padding:0.9rem; 
  width:100%; 
  background:#000; 
  border: none; /* remove other borders */
  border-bottom: 1px solid #333;
  color:#eee; 
  cursor:pointer; 
  text-align:left; }
#playlist button:hover { background:rgba(255,255,255,0.13); }
#playlist button.active { 
  background:rgba(255,255,255,0.13); 
  font-weight: bold; 
}
audio { width:100%; margin-bottom:1rem; }

.track-button {
    position: relative;   /* makes the button a positioning context */
    width: 100%;
    padding: 0.3rem 0.5rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.track-name {
    display: inline-block;
}

.track-duration {
    position: absolute;
    right: 20px;             /* pin to the absolute right */
    top: 50%;
    transform: translateY(-50%); /* vertically center */
    font-size: 0.8rem;
    color: #666;
}

#now-playing {
  position: fixed;       /* or absolute if inside a container */
  bottom: 100px;          /* just above the audio bar */
  right: 1rem;
  font-size: 0.9rem;
  color: #fff;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
  background: #333;
  padding: 10px;
}

#audio-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height:90px;
  display: grid;
  grid-template-rows: auto auto; /* progress | controls */
  grid-template-columns: auto 1fr auto;
  background: #111;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.6);
  z-index: 9999;
}

#audio-bar audio {
  display: none;
}

#left-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  padding-left: 1rem; 
}

#player-inner {
  grid-row: 2;
  grid-column: 1 / -1; /* span full width */
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;
  position: absolute;      /* detach from normal grid flow */
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.5rem; /* align vertically inside audio bar */
  z-index: 10;
  margin-bottom:9px;
}
#progress-container {
  grid-row: 1;
  grid-column: 1 / -1;
  width: 100%;
  height: 14px;
  cursor: pointer;
  position: relative;
}

#progress-container::before {
  content: "";
  position: absolute;
  top: 3px;              /* centers 4px bar inside 10px area */
  left: 0;
  right: 0;
  height: 4px;
  background: #333;
}

#progress {
  position: absolute;
  top: 3px;
  left: 0;
  height: 4px;
  width: 0%;
  background: #fff;
  pointer-events: none;  /* clicks go to container */
}


#play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


#play-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

.player-spacer {
  justify-self: end;
}



#time-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 400px;
  margin-bottom:22px;
}

.time-sep {
  opacity: 0.5;
}

#current-time,
#duration {
  font-size: 0.75rem;
  opacity: 0.75;
  white-space: nowrap;
}


#volume-wrap {
  grid-column: 3;
  padding-right: 1rem;
  border: none;
  display: flex;
  align-items: center;
  margin-bottom:26px;
  z-index:100;
}


#volume-slider {
  width: 90px;
  margin-left: 0.5rem;
  opacity: 1;
  pointer-events: auto;
}

#volume-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
}
#volume-btn svg {
  pointer-events: none;
}


/* slider style (clean + minimal) */
#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #444;
  border-radius: 2px;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

#volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 520px) {
  #volume-wrap {
    position: relative;
    display: flex;
    flex-direction: column-reverse; /* button under slider */
    align-items: center;
    gap: 0.25rem;
    margin-right:-50px;
    margin-bottom:41px;
  }
  #volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    height: 4px;
    background: #444;
    margin-bottom:10px;
    border-radius: 2px;
    box-shadow: 0 0 0 13px rgba(30,30,30,1);
    opacity:0;
    transform: translateY(-60px) rotate(-90deg);
    pointer-events: none;
  }
  #volume-slider::before {
    content: "";
    position: absolute;
    top: -10px;             /* expand hit area above */
    left: 0;
    right: 0;
    height: 24px;           /* bigger clickable area */
    background: transparent;
    cursor: pointer;
    z-index: 2;
  }
  
  #volume-wrap:hover #volume-slider {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (pointer: coarse) {
  #volume-wrap {
    display: none !important;
  }
}


#now-playing {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-left: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forward-btn, 
.backward-btn {
  background:none;
  border:none;  
  padding: 0 3.5em;
  cursor: pointer;
}

@media (max-width: 420px) {
  .forward-btn, 
  .backward-btn {
    padding: 0 7vw;
  }
}

@media (max-width: 370px) {
  .forward-btn, 
  .backward-btn {
    padding: 0 5vw;
  }
}

@media (max-width: 300px) {
  .forward-btn, 
  .backward-btn {
    padding: 7px 2vw 0 2vw;
  }
  #play-btn {
    height:39px;
    width:39px;
    margin:10px 0 8px 0;
  }
  #current-time,
  #duration,
  .time-sep {
    font-size: 0.6rem;
  }
}