:root{ --accent:#ff4444; }                         /* neon red */

/* ---- base ---- */
html,body{
  margin:0;height:100%;
  background:#000;
  overflow:hidden;
  filter:contrast(1.1) saturate(1.1);
  font-family:"Courier New",monospace;
}

/* ---- starfield canvas ---- */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ---- CRT scanlines ---- */
#crt-scanlines{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.02) 0px,
    rgba(255,255,255,.02) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* ---- wrapper ---- */
#app-wrapper{
  position:relative;width:100%;height:100vh;z-index:1;
  pointer-events:none;                 /* ← makes wrapper transparent */
}

/* ---- corners ---- */
.corner{
  position:fixed;padding:8px;font-size:18px;color:var(--accent);
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
  pointer-events:auto;                 /* clickable clock area */
}
#corner-top-left  {top:0;left:0;}
#corner-top-right {top:0;right:0;}

/* ---- button ---- */
#changeSkinBtn{
  background:#222;color:var(--accent);
  border:1px solid var(--accent);padding:6px 12px;
  font:18px "Courier New",monospace;cursor:pointer;
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
  pointer-events:auto;                 /* keep button interactive */
}
#changeSkinBtn:hover{background:var(--accent);color:#000;}

/* ---- Webamp ---- */
#winamp{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:50;
  pointer-events:auto;                 /* player fully interactive  */
}

/* ---- glitch text ---- */
#glitch-text{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
  font:18px "Courier New",monospace;color:var(--accent);
  white-space:pre;text-align:center;pointer-events:none;z-index:20;
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
}
#glitch-text .dud{
  color:var(--accent);
  text-shadow:0 0 2px var(--accent),0 0 4px var(--accent);
  pointer-events:none;
}