/* ===========================
   2000–2005 FUTURE-RETRO THEME
   =========================== */
:root{
  --sky:#9ad4ff;        /* sky blue glow */
  --navy:#0a1b3d;       /* deep navy */
  --neon:#00ffe0;       /* cyan-neon accent */
  --ink:#0d0f14;        /* dark text bg */
  --line:#304b87;       /* line borders */
  --txt:#cfe6ff;
  --txt-dim:#9fb8d6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(0,255,224,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(154,212,255,.18), transparent 60%),
              linear-gradient(180deg, #0a1b3d 0%, #08132b 60%, #050d21 100%);
  overflow-x:hidden;
}

/* Neon grid + scanlines overlay */
.bg::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0, 255, 224, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,212,255,.08) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  box-shadow: inset 0 0 120px 40px rgba(0,0,0,.6);
  pointer-events:none;
}
.fx-scanlines::after{
  content:"";
  position:fixed; inset:0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.04) 2px 4px);
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Header */
.site-header{
  max-width: 980px;
  margin: 32px auto 12px;
  padding: 16px 20px;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, rgba(18,46,105,.85), rgba(8,22,60,.85));
  box-shadow: 0 0 0 2px rgba(0,0,0,.35) inset, 0 15px 40px rgba(0,0,0,.35);
  border-radius: 10px;
  display:flex; align-items:center; gap:16px;
}
.site-header .badge{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, var(--neon), var(--sky) 60%, #1a2f66 100%);
  color:#00172b; font-weight:bold; text-shadow:0 1px 0 #fff8;
  box-shadow:0 0 18px var(--neon), inset 0 0 12px #fff3;
}
.site-header h1{
  margin:0; letter-spacing:.5px; font-size:28px; color:#e9f3ff;
  text-shadow: 0 0 6px rgba(154,212,255,.7), 0 0 18px rgba(0,255,224,.25);
}
.site-header .tag{ margin:0 0 0 auto; color:var(--txt-dim); font-size:12px; }

/* Marquee rail */
.marquee-rail{
  max-width:980px; margin:0 auto 18px; padding:6px 10px;
  border:1px solid #3a5bb0; border-radius:8px;
  background: linear-gradient(180deg, #1c3680, #0e255c);
  box-shadow: inset 0 0 6px #0008, 0 6px 18px #0006;
}
marquee{ color:#e7f3ff; text-shadow:0 0 6px rgba(0,255,224,.35); }

/* Player window */
.wmp{
  max-width:980px; margin: 0 auto 30px; border-radius:10px;
  border:2px solid #2a4b9a;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.04);
  overflow:hidden;
  background: #0b1b3f;
}

/* Titlebar (XP Luna blue) */
.wmp-titlebar{
  height:34px; display:flex; align-items:center; justify-content:space-between;
  padding:0 8px 0 10px;
  background: linear-gradient(180deg, #3a6bce, #1f4da8);
  border-bottom:1px solid #10327c;
}
.wmp-title{
  display:flex; align-items:center; gap:8px; font-weight:bold; color:#f6fbff;
  text-shadow: 0 1px 0 #0b2d88;
}
.wmp-logo{
  width:16px; height:16px; border-radius:3px;
  background: radial-gradient(circle at 30% 30%, #fff, #f7a 40%, #49f 70%, #25d 100%);
  box-shadow: 0 0 0 1px #0006;
}
.wmp-winbtns{ display:flex; gap:6px; }
.winbtn{
  width:16px; height:16px; border:1px solid #0d2666; border-radius:2px;
  background: linear-gradient(180deg, #89a9ea, #3f68c9);
  box-shadow: inset 0 1px 0 #fff8;
  cursor:default;
}
.winbtn-close{ background: linear-gradient(180deg, #ff9a9a, #e04e4e); border-color:#7a0b0b; }

/* INPUT BAR */
.input-bar{
  display:flex; gap:8px; align-items:center;
  padding:10px; border-bottom:1px solid #10327c;
  background: linear-gradient(180deg, #0e2a64, #0b214f);
}
.input-bar input[type="text"]{
  flex:1 1 420px; padding:8px 10px; border-radius:8px; border:1px solid #143a88;
  background:#091a3f; color:#e9f3ff; outline:none;
  box-shadow: inset 0 0 6px #0009;
}
.file-btn{ position:relative; overflow:hidden }
.file-btn input{ position:absolute; inset:0; opacity:0; cursor:pointer }

/* Body layout */
.wmp-body{ display:grid; grid-template-columns: 1fr 300px; gap:0; }
@media (max-width: 900px){ .wmp-body{ grid-template-columns: 1fr; } }

.wmp-left{ padding:18px; }

/* LCD */
.lcd{
  border:1px solid #11306e; border-radius:6px;
  background: linear-gradient(180deg, #04163c, #03102b);
  padding:10px 12px; margin-bottom:14px;
  box-shadow: inset 0 0 18px #000c, inset 0 0 0 2px rgba(0,255,224,.06);
  font-family: "Lucida Console", "Courier New", monospace;
  color:#aef6ff; text-shadow: 0 0 6px rgba(0,255,224,.35);
}
.lcd-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lcd-line.small{ font-size:12px; color:#c7e7ffcc; }

/* Viz (decorative) */
.viz{
  height:80px; display:flex; align-items:flex-end; gap:4px;
  margin-bottom:14px; padding:6px; border-radius:6px;
  border:1px solid #143a88; background: linear-gradient(180deg, #0a2459, #071a41);
  box-shadow: inset 0 0 12px #0009;
}
.viz .bar{
  width:8px; height:20px; background: linear-gradient(180deg, var(--neon), #77d9ff 70%, #2a5bb0);
  box-shadow: 0 0 8px rgba(0,255,224,.55);
  animation: bounce 1.2s infinite ease-in-out;
}
.viz .bar:nth-child(3n){ animation-delay:.2s }
.viz .bar:nth-child(3n+1){ animation-delay:.4s }
.viz .bar:nth-child(4n+2){ animation-delay:.6s }
@keyframes bounce{ 0%,100%{ height:18px } 50%{ height:72px } }

/* Controls */
.controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.btn{
  border:1px solid #1b3f93; border-radius:999px; padding:6px 12px;
  background: linear-gradient(180deg, #9ad4ff, #3f69c9);
  color:#071a41; font-weight:bold; text-shadow:0 1px 0 #fff8;
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px #0006;
  cursor:pointer;
}
.btn.primary{ background: linear-gradient(180deg, #00ffe0, #2fb8ff 70%, #2a5bb0); }
.btn:active{ transform: translateY(1px); }

.slider-wrap{ flex: 1 1 220px; }
input[type="range"]{ width:100%; accent-color:#4bd2ff; background: transparent; }
.volume{ display:flex; align-items:center; gap:8px; color:#cfe6ff; }

/* Playlist */
.wmp-right{
  padding:18px; border-left:1px solid #10327c;
  background: linear-gradient(180deg, #0a1f4a, #071a41);
}
.wmp-right h3{
  margin:0 0 10px; font-size:14px; letter-spacing:.3px; color:#e9f3ff;
  text-shadow:0 0 6px rgba(154,212,255,.4);
}
.playlist{ margin:0; padding:0; list-style: decimal inside; font-size:14px; color:#cfe6ff; }
.playlist li{
  padding:8px 10px; margin-bottom:6px; border-radius:6px;
  background: linear-gradient(180deg, #0c2659, #0a1e49);
  border:1px solid #143a88; cursor:pointer;
}
.playlist li:hover{ box-shadow:0 0 0 2px rgba(0,255,224,.18) inset; }
.playlist li.active{
  background: linear-gradient(180deg, #123a82, #0f2e6b);
  box-shadow: inset 0 0 0 2px rgba(0,255,224,.25), 0 0 16px rgba(0,255,224,.18);
}

/* Footer */
.site-footer{
  max-width:980px; margin:0 auto 40px; text-align:center;
  color:var(--txt-dim); font-size:12px;
  text-shadow:0 0 6px rgba(154,212,255,.2);
}
/* ===== Layout tidy-ups for compact, organized look ===== */

/* Keep playlist tight and scrollable so titles always fit */
.wmp-right {
  max-height: 420px;              /* adjusts with your layout */
  overflow: hidden;               /* hide inner overflow; list will scroll */
  display: flex;
  flex-direction: column;
}
.wmp-right h3 { margin-bottom: 8px; }
.playlist {
  overflow-y: auto;               /* scroll the list only */
  max-height: 360px;              /* prevent overlap with title */
  padding-right: 6px;             /* room for scrollbar */
}
.playlist li {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;        /* long titles show "..." */
  font-size: 13px;                /* slightly smaller for fit */
}

/* Credits panel under the player */
.credits-panel{
  margin-top: 14px;
  border:1px solid #11306e; border-radius:6px;
  background: linear-gradient(180deg, #061a42, #041333);
  box-shadow: inset 0 0 12px #0009;
  padding: 10px 12px;
}
.credits-panel h4{
  margin:0 0 6px; font-size:13px; color:#e9f3ff;
  text-shadow:0 0 6px rgba(154,212,255,.3);
}
.credits-body{
  font-size:12px; color:#cfe6ff;
  line-height:1.4;
}
.credits-body a{ color:#9ad4ff; text-decoration:underline; }