:root{
  --bg0:#1a1a2e; --bg1:#16213e; --bg2:#0f3460;
  --panel0:#4a5568; --panel1:#2d3748;
  --inner0:#2d3748; --inner1:#1a202c;
  --inset0:#4a5568; --inset1:#2d3748;
  --text0:#e2e8f0; --text1:#a0aec0;
  --accent0:#667eea; --accent1:#5568d3; --accent2:#7a8aee;
  --shadow: rgba(0,0,0,0.5);
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:'MS Sans Serif','MS UI Gothic',Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg0) 0%,var(--bg1) 50%,var(--bg2) 100%);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px;
}
@media (max-width:480px){ body{ padding:5px; } }

.container{
  background:linear-gradient(180deg,var(--panel0) 0%,var(--panel1) 100%);
  border:3px outset #5a6578;
  padding:8px;
  max-width:500px;
  width:100%;
  text-align:center;
  box-shadow:4px 4px 12px var(--shadow);
}
.inner-container{
  background:linear-gradient(180deg,var(--inner0) 0%,var(--inner1) 100%);
  border:2px inset var(--inset0);
  padding:12px;
}

h1{
  color:var(--accent0);
  margin-bottom:2px;
  font-size:1.5em;
  font-weight:bold;
  text-shadow:0 0 10px rgba(102,126,234,0.8),0 0 20px rgba(118,75,162,0.6),2px 2px 4px rgba(0,0,0,0.8);
}
.subtitle{
  color:var(--text1);
  margin-bottom:8px;
  font-size:0.8em;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}
@media (max-width:480px){
  h1{ font-size:1.3em; margin-bottom:1px; }
  .subtitle{ margin-bottom:6px; font-size:0.75em; }
  .inner-container{ padding:8px; }
}

#visualizerWrapper{
  width:100%;
  height:220px;
  margin-bottom:12px;
  border:2px inset var(--inset0);
  background:radial-gradient(circle at bottom,#2a1a1a 0%,#0f1419 60%);
  position:relative;
  overflow:hidden;
  transition: opacity 0.5s ease-in-out;
}

.player-container{
  margin:12px 0;
  background:linear-gradient(180deg,#1a202c 0%,#0f1419 100%);
  border:2px inset var(--inset0);
  padding:6px;
  box-shadow:inset 0 2px 4px var(--shadow);
}
audio{ display:none; }
.custom-player{
  display:flex;
  align-items:center;
  gap:6px;
  background:#1a202c;
  padding:3px;
}
.player-buttons{ display:flex; gap:3px; align-items:center; }

.player-btn{
  width:24px; height:24px;
  background:linear-gradient(180deg,var(--panel0) 0%,var(--panel1) 100%);
  border:2px outset #5a6578;
  color:var(--text0);
  font-size:11px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'MS Sans Serif',Arial,sans-serif;
  user-select:none;
  padding:0;
}
.player-btn:hover{ background:linear-gradient(180deg,#5a6578 0%,#3d4758 100%); }
.player-btn:active{ border:2px inset #5a6578; background:linear-gradient(180deg,#2d3748 0%,#1a202c 100%); }

.player-btn--primary{
  width:28px; height:28px; font-size:13px;
  background:linear-gradient(180deg,var(--accent0) 0%,var(--accent1) 100%);
  border:2px outset var(--accent2);
}
.player-btn--primary:hover{ background:linear-gradient(180deg,var(--accent2) 0%,var(--accent0) 100%); }
.player-btn--primary:active{ border:2px inset var(--accent2); background:linear-gradient(180deg,var(--accent1) 0%,#4455c2 100%); }

.player-btn.play-pause{ width:28px; height:28px; font-size:13px; }
.player-btn.viz-toggle.disabled{
  background:linear-gradient(180deg,var(--panel0) 0%,var(--panel1) 100%);
  border:2px outset #5a6578;
  opacity:0.6;
}
.player-btn.auto-cycle-viz.active{
  background:linear-gradient(180deg,var(--accent2) 0%,var(--accent0) 100%);
  border:2px inset var(--accent2);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.3);
}

.volume-control{ display:flex; align-items:center; gap:4px; }
.volume-slider-container{
  display:flex;
  align-items:center;
  gap:3px;
  background:#0f1419;
  border:2px inset var(--inset1);
  padding:2px 6px;
  height:24px;
}
.volume-slider{
  width:50px;
  height:3px;
  background:var(--inset1);
  border:1px inset var(--inset0);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px; height:10px;
  background:linear-gradient(180deg,var(--accent0) 0%,var(--accent1) 100%);
  border:1px outset var(--accent2);
  cursor:pointer;
}
.volume-slider::-moz-range-thumb{
  width:10px; height:10px;
  background:linear-gradient(180deg,var(--accent0) 0%,var(--accent1) 100%);
  border:1px outset var(--accent2);
  cursor:pointer;
}
.volume-icon{ color:var(--text1); font-size:11px; user-select:none; }

.time-container{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0f1419;
  border:2px inset var(--inset1);
  padding:3px 10px;
  height:28px;
}
.time-display{
  color:var(--text1);
  font-size:10px;
  font-family:'MS Sans Serif',Arial,monospace;
  text-align:center;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

.status{
  margin-top:8px;
  padding:6px 10px;
  background:linear-gradient(180deg,var(--inner0) 0%,var(--inner1) 100%);
  border:2px inset var(--inset0);
  font-size:0.8em;
  color:var(--text1);
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}
.status.error{
  background:linear-gradient(180deg,#742a2a 0%,#4a1a1a 100%);
  color:#ff6b6b;
  border:2px inset #8b3a3a;
  text-shadow:0 0 4px rgba(255,107,107,0.5);
}
.status.hidden{ display:none; }

.stream-status-indicator{
  margin-top:8px;
  padding:4px 10px;
  background:linear-gradient(180deg,var(--inner0) 0%,var(--inner1) 100%);
  border:2px inset var(--inset0);
  font-size:0.8em;
  font-weight:bold;
  min-height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5);
  letter-spacing:0.5px;
}
.stream-status-indicator.online{
  background:linear-gradient(180deg,#2d5a2d 0%,#1a3a1a 100%);
  color:#7fff7f;
  border:2px inset #3d7a3d;
  text-shadow:0 0 6px rgba(127,255,127,0.6);
}
.stream-status-indicator.offline{
  background:linear-gradient(180deg,#4a2d2d 0%,#2a1a1a 100%);
  color:#ff7f7f;
  border:2px inset #6a3d3d;
  text-shadow:0 0 6px rgba(255,127,127,0.6);
}
.stream-status-indicator.connecting{
  background:linear-gradient(180deg,#4a4a2d 0%,#2a2a1a 100%);
  color:#ffff7f;
  border:2px inset #6a6a3d;
  text-shadow:0 0 6px rgba(255,255,127,0.6);
}

/* Now Playing */
.song-info{
  margin-top:16px;
  padding:10px;
  background:linear-gradient(180deg,var(--inner0) 0%,var(--inner1) 100%);
  border:2px inset var(--inset0);
  min-height:56px;
  text-align:left;
  box-shadow:inset 0 2px 4px var(--shadow);
}
.nowplaying-row{ display:flex; align-items:center; gap:10px; }
.song-info-label{
  font-size:0.70em;
  color:var(--accent0);
  margin-bottom:4px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:0.6px;
  text-shadow:0 0 4px rgba(102,126,234,0.6);
}
.song-title{
  font-size:0.95em;
  color:var(--text0);
  font-weight:bold;
  word-wrap:break-word;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5);
  line-height:1.2;
}
.nowplaying-meta{ flex:1; min-width:0; }

@keyframes vinylSpin { from{ transform:rotate(0deg) translateZ(0); } to{ transform:rotate(360deg) translateZ(0); } }

.vinyl-wrap{
  width:76px;
  aspect-ratio:1/1;
  flex:0 0 76px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#1a202c 0%,#0f1419 100%);
  border:2px inset var(--inset0);
  box-shadow:inset 0 2px 4px var(--shadow);
  padding:4px;
}
.vinyl{
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.00) 38%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 72%, rgba(0,0,0,0.85) 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, rgba(255,255,255,0.00) 2px, rgba(255,255,255,0.00) 4px),
    radial-gradient(circle at 35% 25%, rgba(102,126,234,0.20), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 50%, #0b0f14 0%, #05070a 100%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 0 10px rgba(0,0,0,0.45), inset 0 0 14px rgba(0,0,0,0.65);
}
.vinyl::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.35);
  pointer-events:none;
}
.vinyl.spinning{ animation:vinylSpin 3.6s linear infinite; transform-origin:50% 50%; }

.vinyl-label{
  position:absolute;
  left:50%; top:50%;
  width:44%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.55), 0 0 6px rgba(102,126,234,0.18);
}
.vinyl-hole{
  position:absolute;
  left:50%; top:50%;
  width:9%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,0.9) 0%, rgba(0,0,0,1) 70%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 0 4px rgba(0,0,0,0.8);
  pointer-events:none;
}
.album-art{ display:none; }

/* Debug */
.debug-box{
  margin-top:20px;
  padding:12px;
  background:linear-gradient(180deg,#1a202c 0%,#0f1419 100%);
  border:2px inset var(--inset0);
  text-align:left;
  box-shadow:inset 0 2px 4px var(--shadow);
  font-size:0.85em;
  max-height:400px;
  overflow-y:auto;
  display:none;
}
.debug-box.visible{ display:block; }
.debug-toggle-btn{
  margin-top:12px;
  padding:4px 10px;
  background:linear-gradient(180deg,var(--panel0) 0%,var(--panel1) 100%);
  border:2px outset #5a6578;
  color:var(--text0);
  font-size:14px;
  cursor:pointer;
  font-family:'MS Sans Serif',Arial,sans-serif;
  user-select:none;
}
.debug-toggle-btn:hover{ background:linear-gradient(180deg,#5a6578 0%,#3d4758 100%); }
.debug-toggle-btn:active{ border:2px inset #5a6578; background:linear-gradient(180deg,#2d3748 0%,#1a202c 100%); }
.debug-box-label{
  font-size:0.75em;
  color:var(--accent0);
  margin-bottom:8px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:0.5px;
  text-shadow:0 0 4px rgba(102,126,234,0.6);
}
.debug-section{ margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--inset1); }
.debug-section:last-child{ border-bottom:none; }
.debug-section-title{ color:var(--text1); font-weight:bold; margin-bottom:4px; font-size:0.9em; }
.debug-item{ color:var(--text0); margin:2px 0; padding-left:8px; font-size:0.85em; word-wrap:break-word; }
.debug-item.current{ color:#7fff7f; font-weight:bold; }

/* Fullscreen overlay + VHS text */
#fullscreenOverlay{
  position:absolute;
  top:40px;
  left:40px;
  z-index:1000;
  display:none;
  pointer-events:none;
  font-family:'VCR OSD Mono',monospace;
  text-align:left;
}
.fullscreen-mode #fullscreenOverlay{ display:block; }

@keyframes textGlitch{
  0%,10%,13%,50%,70%,72%,100%{ text-shadow:2px 0 #ff0000,-2px 0 #0000ff; transform:skewX(0deg); opacity:1; }
  11%{ text-shadow:4px 0 #ff0000,-4px 0 #0000ff; transform:skewX(10deg); }
  12%{ text-shadow:-4px 0 #ff0000,4px 0 #0000ff; transform:skewX(-10deg); }
  51%{ opacity:0.8; }
  52%{ opacity:1; }
  71%{ text-shadow:3px 0 #ff0000,-3px 0 #0000ff; transform:skewX(5deg); }
}
.vhs-text-effect{
  color:#e0e0e0;
  font-size:32px;
  line-height:1.4;
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:2px;
  animation:textGlitch 4s infinite linear alternate-reverse;
  filter:blur(0.5px);
  mix-blend-mode:screen;
}
.vhs-label{
  font-size:18px;
  color:var(--accent2);
  margin-bottom:-5px;
  opacity:0.8;
  text-shadow:1px 0 #ff0000;
}
.vhs-content{
  margin-bottom:20px;
  text-shadow:2px 0 rgba(255,0,0,0.7),-2px 0 rgba(0,0,255,0.7);
}