/* --- 1. FONTS & CORE --- */
@font-face { font-family: brush; src: url('BRUSHSCI.TTF'); }
@font-face { font-family: digital; src: url('digital.ttf'); }

html, body { margin: 0; height: 100%; overflow: hidden; background: black; transition: opacity 0.55s ease; }
html.fade-transition { opacity: 0; }

body {
  font-size: 12px;
  font-family: "Georgia","serif","Garamond","Bitstream Charter","Charter",serif;
  color: #fff;
}
body::after {
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(circle,transparent 50%,rgba(0,0,0,0.6) 100%);
}

/* --- 2. BACKGROUND & LAYOUT --- */
#bg-base,#bg-slide { position:fixed; inset:0; background:center/cover no-repeat; }
#bg-base { z-index:0; }
#bg-slide { z-index:1; transform:translateX(100%); transition:transform 5s ease; }

#content {
  position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  pointer-events:none;
  font-family:"Georgia","serif","Garamond","Bitstream Charter","Charter",serif;
}

.base {
  position:relative; margin:40px auto 0; width:460px; min-height:150px; padding:20px;
  border-radius:11px; backdrop-filter:blur(1px); text-align:center;
  border-left:1px solid rgba(255,255,255,0.1);
  border-top:1px solid rgba(255,255,255,0.2);
  border-bottom:1px solid rgba(0,0,0,0.35);
  border-right:0 solid rgba(0,0,0,0.35);
  box-shadow:inset 0 0 0 rgba(255,255,255,0.94);
  transition:backdrop-filter 2s ease,border-color 2s ease;
  animation:baseFadeIn 2s ease forwards,auraPulse 10s ease-in-out infinite;
  pointer-events:auto !important; opacity:0;
}
.base.is-blurred { backdrop-filter:blur(18px); border-color:rgba(255,255,255,0.6); }
@keyframes baseFadeIn { to { opacity:1; } }

/* --- 3. UI --- */
.text-gradient {
  display:inline-block; font-family:brush,sans-serif; font-size:36px; color:#56A5F5;
  background-image:linear-gradient(90deg,#5BCEFA,#ff80bf 30%,#fff 50%,#ff80bf 70%,#5BCEFA);
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

button,#trackid,.temp-box {
  width:446px; border-radius:7px; background:rgba(5,5,5,0.5);
  backdrop-filter:blur(2.5px); margin:15px auto 0;
  border:1px solid rgba(0,0,0,0.2);
}
button {
  color:#fff; height:34px; cursor:pointer; transition:all .3s ease;
}
button:hover {
  background:rgba(0,0,0,0.6)!important;
  border-color:rgba(255,255,255,0.5);
  box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
}

.audio-controls { display:flex; align-items:center; justify-content:center; gap:8px; }
#audioToggle { display:flex; align-items:center; justify-content:center; gap:6px; height:64px; margin-left:8px; }

#statusLight {
  width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(0,0,0,0.4);
  background:radial-gradient(circle at 35% 35%,#ff6666,#990000);
  box-shadow:inset -2px -2px 4px rgba(0,0,0,0.5),inset 2px 2px 4px rgba(255,255,255,0.4),0 0 5px rgba(153,0,0,0.5);
}
.playing #statusLight {
  background:radial-gradient(circle at 35% 35%,#b2ffb2,#008800);
  animation:pulse-glow 10s ease-in-out infinite;
}

#nexttrack { height:40px; overflow:hidden; }
.track-text { display:flex; align-items:center; justify-content:center; height:100%; font-size:110%; }
.track-text span {
  animation:etherealFade 6s ease-in-out infinite;
  text-shadow:0 1px 2px rgba(255,255,255,0.3);
  font-weight:300; max-width:100%; text-align:center;
}

.btn-half { width:210px; font-size:110%; padding:3px; margin-top:0; }
.btn-half-left { margin-right:10px; }
.btn-half-right { margin-left:15px; }

/* --- 4. MODALS --- */
.modal {
  display:none; position:fixed; inset:0; z-index:200; margin-top:50px;
  background:rgba(0,0,0,0);
}
.modal-wide { height:600px; }

.modal-content {
  float:left; padding:40px 10px 10px; border:1px solid #888;
  height:calc(100% - 220px); overflow:auto; width:400px;
  backdrop-filter:blur(25px); border-radius:15px; margin-left:50px;
}
.modal-centered { float:right; margin-right:50px; text-align:center; }
.close { position:absolute; top:10px; right:12px; font-size:28px; cursor:pointer; color:#fff; }

/* --- 5. VOLUME MODAL --- */
.modalv {
  position:fixed; top:40%; left:50%; transform:translate(-50%,-45%);
  z-index:10; width:400px; padding:26px 20px;
  background:
    radial-gradient(circle at 30% 20%,rgba(120,0,255,0.15),transparent 60%),
    radial-gradient(circle at 80% 70%,rgba(255,0,120,0.12),transparent 60%),
    rgba(15,15,20,0.85);
  border:1px solid rgba(160,120,255,0.25);
  border-radius:16px;
  box-shadow:0 0 25px rgba(120,0,255,0.15),inset 0 0 30px rgba(255,0,120,0.05);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .6s ease,transform .6s ease;
}
.modalv.show { opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.modalv.fade-out { animation:modalFadeOut .3s ease-out forwards; }

.vol-modal-content {
  display:flex; flex-direction:column; align-items:center;
  width:100%; padding:0 20px; box-sizing:border-box; font-size:120%;
}

#volSlider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; border-radius:6px;
  background:transparent; outline:none; margin-bottom:10px;
}

#volValue { display:block; width:100%; text-align:center; font-size:1.1em; color:#fff; user-select:none; }

/* Thumb */
#volSlider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff 0%,#c77dff 40%,#7a00ff 70%,#3a004f 100%);
  border:1px solid rgba(255,255,255,0.4);
  cursor:pointer;
  box-shadow:0 0 10px rgba(199,125,255,0.5),0 0 20px rgba(255,0,110,0.25);
  transition:transform .15s ease,box-shadow .3s ease;
}
#volSlider::-webkit-slider-thumb:hover {
  transform:scale(1.12);
  box-shadow:0 0 18px rgba(199,125,255,0.8),0 0 28px rgba(255,0,110,0.45);
}

/* --- 6. ANIMATIONS --- */
@keyframes etherealFade {
  0%,100% { opacity:0; transform:scale(.95); filter:blur(2px); }
  30%,70% { opacity:1; transform:scale(1); filter:blur(0); }
}
@keyframes pulse-glow {
  0%,100% { box-shadow:0 0 3px #00ff00,inset -2px -2px 4px rgba(0,0,0,0.4); }
  50% { box-shadow:0 0 10px #00ff00,inset -2px -2px 4px rgba(0,0,0,0.4); }
}
@keyframes modalFadeOut {
  from { opacity:1; transform:translate(-50%,-50%); }
  to { opacity:0; transform:translate(-50%,-45%); }
}

/* --- 7. RESPONSIVE --- */
@media (orientation:portrait) {
  .base { width:90%; margin:20px auto 0; }
  button,#trackid,.temp-box { width:90%; }
  .btn-half { width:calc(90%/2 - 10px); height:48px; padding:10px; box-sizing:border-box; }
  .text-gradient { font-size:40px; }
  .hide,.vol-button { display:none; }
  .foot { height:48px; }
}