:root{
  --bg0:#02040a;
  --bg1:#050b18;
  --neon:#00e5ff;
  --neon2:#b400ff;
  --text:#e8f7ff;
  --muted:#8fb7c6;

  /* Live chroma offsets (driven by JS) */
  --split-x: 0px;
  --split-y: 0px;

  /* Logo independent drift (driven by JS) */
  --logo-x: 0px;
  --logo-y: 0px;
}

html, body { height: 100%; }
body{
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(0,229,255,.12), transparent 60%),
    radial-gradient(900px 500px at 20% 85%, rgba(180,0,255,.10), transparent 65%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--text);
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Scanlines */
.scanlines::before{
  content:"";
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05),
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity:.10;
  pointer-events:none;
  mix-blend-mode: overlay;
  animation: scanMove 7s linear infinite;
}
@keyframes scanMove{
  0%{ transform: translateY(-30px); }
  100%{ transform: translateY(30px); }
}

/* Neon grid floor (perspective) */
.grid-floor{
  position: fixed;
  left: 50%;
  bottom: -8vh;
  width: min(1400px, 160vw);
  height: 55vh;
  transform: translateX(-50%) perspective(900px) rotateX(68deg);
  transform-origin: center top;
  pointer-events: none;
  opacity: .80;
  filter: drop-shadow(0 0 18px rgba(0,229,255,.25));
}
.grid-floor::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,229,255,.25), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.85) 70%),
    repeating-linear-gradient(to right, rgba(0,229,255,.22) 0, rgba(0,229,255,.22) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(to bottom, rgba(0,229,255,.22) 0, rgba(0,229,255,.22) 1px, transparent 1px, transparent 56px);
  border-radius: 24px;
  box-shadow: inset 0 0 90px rgba(0,229,255,.08);
  animation: gridGlow 4.5s ease-in-out infinite;
}
.grid-floor::after{
  content:"";
  position:absolute; inset:-12px;
  background: radial-gradient(circle at 50% 40%, rgba(180,0,255,.11), transparent 60%);
  filter: blur(14px);
  opacity: .65;
}
@keyframes gridGlow{
  0%,100%{ opacity: .85; }
  50%{ opacity: .65; }
}

/* Center panel */
.panel{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 90px rgba(0,0,0,.68);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}

/* Chromatic aberration (mouse-driven) */
.panel::before,
.panel::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity: .70;
  mix-blend-mode: screen;
  border-radius: 22px;
  transition: opacity .2s ease, filter .2s ease;
  filter: blur(.55px);
}

.panel::before{
  transform: translate(var(--split-x), var(--split-y));
  box-shadow:
    0 0 0 1px rgba(0,229,255,.28) inset,
    0 0 26px rgba(0,229,255,.12);
}
.panel::after{
  transform: translate(calc(var(--split-x) * -1), calc(var(--split-y) * -1));
  box-shadow:
    0 0 0 1px rgba(180,0,255,.24) inset,
    0 0 26px rgba(180,0,255,.12);
}

.panel:hover{
  transform: translateY(-2px);
  box-shadow: 0 35px 110px rgba(0,0,0,.72);
}
.panel:hover::before,
.panel:hover::after{
  opacity: .85;
  filter: blur(.65px);
}

/* Corner brackets */
.corner{
  position:absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(0,229,255,.55);
  filter: drop-shadow(0 0 10px rgba(0,229,255,.25));
  opacity:.70;
  z-index: 3;
}
.corner.tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.corner.tr{ top:16px; right:16px; border-left:0; border-bottom:0; }
.corner.bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
.corner.br{ bottom:16px; right:16px; border-left:0; border-top:0; }

/* Logo glow + JS-driven drift */
.logo-wrap{
  position: relative;
  display:inline-block;
  isolation:isolate;
  transform: translate(var(--logo-x), var(--logo-y));
  transition: transform .12s ease;
  will-change: transform;
}
.logo{
  width: min(340px, 70vw);
  height:auto;
  animation: floaty 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 12px rgba(0,229,255,.22))
    drop-shadow(0 0 24px rgba(180,0,255,.14));
}
.logo-wrap::before{
  content:"";
  position:absolute;
  inset:-14px;
  background: radial-gradient(circle at 50% 55%, rgba(0,229,255,.38), transparent 62%),
              radial-gradient(circle at 40% 40%, rgba(180,0,255,.24), transparent 60%);
  filter: blur(10px);
  z-index:-1;
  opacity:.78;
  animation: glowPulse 2.6s ease-in-out infinite;
}
.logo-wrap::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 24px;
  background: conic-gradient(from 180deg, rgba(0,229,255,.0), rgba(0,229,255,.25), rgba(180,0,255,.20), rgba(0,229,255,.0));
  filter: blur(18px);
  z-index:-2;
  opacity:.55;
  animation: spinSlow 8s linear infinite;
}

@keyframes glowPulse{
  0%, 100%{ opacity:.58; transform: scale(.98); }
  50%{ opacity: .98; transform: scale(1.02); }
}
@keyframes floaty{
  0%, 100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}
@keyframes spinSlow{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* Glitch headline */
.glitch{
  position:relative;
  display:inline-block;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(0,229,255,.18),
    0 0 30px rgba(180,0,255,.10);
}
.glitch::before, .glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
  opacity:.70;
  pointer-events:none;
  clip-path: inset(0 0 0 0);
  mix-blend-mode: screen;
}
.glitch::before{
  transform: translate(2px, 0);
  color: var(--neon);
  animation: glitch 2.1s infinite linear alternate-reverse;
}
.glitch::after{
  transform: translate(-2px, 0);
  color: var(--neon2);
  animation: glitch 1.7s infinite linear alternate;
}
@keyframes glitch{
  0%   { clip-path: inset(0 0 92% 0); }
  10%  { clip-path: inset(12% 0 65% 0); }
  20%  { clip-path: inset(35% 0 40% 0); }
  30%  { clip-path: inset(65% 0 18% 0); }
  40%  { clip-path: inset(78% 0 8% 0); }
  50%  { clip-path: inset(45% 0 35% 0); }
  60%  { clip-path: inset(10% 0 75% 0); }
  70%  { clip-path: inset(58% 0 22% 0); }
  80%  { clip-path: inset(22% 0 55% 0); }
  90%  { clip-path: inset(74% 0 12% 0); }
  100% { clip-path: inset(0 0 92% 0); }
}

.sub{
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

.pill{
  border: 1px solid rgba(0,229,255,.22);
  background: linear-gradient(180deg, rgba(0,229,255,.12), rgba(0,0,0,0));
  color: var(--text);
}

.status{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(232,247,255,.88);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,229,255,.16);
  border-radius: 14px;
}
.caret{
  display:inline-block;
  width:10px;
  height: 1em;
  border-left: 2px solid rgba(0,229,255,.85);
  transform: translateY(2px);
  animation: blink 1s steps(1,end) infinite;
}
@keyframes blink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

footer{
  color: rgba(143,183,198,.55);
  font-size: .85rem;
}

/* ===== Minimal neon player ===== */
.player{
  margin-inline:auto;
  max-width: 720px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,229,255,.18);
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(255,255,255,.03));
  box-shadow: inset 0 0 40px rgba(0,229,255,.05);
}

.player-top{
  display:flex;
  gap: 12px;
  align-items:center;
}

.player-btn{
  border-radius: 12px;
  border: 1px solid rgba(0,229,255,.22);
  background: rgba(0,0,0,.28);
  color: rgba(232,247,255,.92);
  padding: 6px 10px;
  line-height: 1;
}
.player-btn:hover{
  border-color: rgba(0,229,255,.38);
  box-shadow: 0 0 18px rgba(0,229,255,.10);
}

.track{
  flex: 1;
  min-width: 0;
}
.track-title{
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .90rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-meta{
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .78rem;
  color: rgba(143,183,198,.75);
}
.track-meta .sep{ opacity:.5; padding: 0 6px; }

.player-select{
  width: 220px;
  border-radius: 12px;
  border: 1px solid rgba(180,0,255,.20);
  background: rgba(0,0,0,.30);
  color: rgba(232,247,255,.90);
}
.player-select:focus{
  box-shadow: none;
  border-color: rgba(180,0,255,.38);
}

/* Subtle spectrum area */
.viz{
  width: 100%;
  display:block;
  margin: 10px 0 6px;
  border-radius: 12px;
  border: 1px solid rgba(0,229,255,.12);
  background:
    radial-gradient(400px 90px at 50% 0%, rgba(0,229,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.15));
  box-shadow: inset 0 0 30px rgba(0,229,255,.05);
  opacity: .95;
}

.player-seek{
  width:100%;
  margin: 6px 0 8px;
  accent-color: rgba(0,229,255,.85);
}

.player-bottom{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:flex-start;
}

.vol{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 180px;
}
.vol-label{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .78rem;
  color: rgba(143,183,198,.75);
  letter-spacing: .12em;
}
.player-vol{
  width: 140px;
  accent-color: rgba(180,0,255,.85);
}

@media (max-width: 576px){
  .player-top{ flex-wrap: wrap; }
  .player-select{ width: 100%; }
  .vol{ min-width: 0; }
  .player-vol{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
  body { overflow:auto; }
}