/* ---------- Base ---------- */
:root{
  --bg:#0b0c17;
  --glass: rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.03);
  --accent1:#ff4c6d;
  --accent2:#6a00ff;
  --discord-a:#5865F2;
  --discord-b:#6a00ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  font-family: 'Poppins', sans-serif;
  color: #e6eef8;
  overflow: hidden;
}

/* wrap */
.wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 34px;
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  width: min(920px, 94%);
}

/* Title glitch + RGB hint */
h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
  letter-spacing: 0.6px;
}

/* Glitch */
h1::before, h1::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
h1::before {
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 44%);
  transform: translate(2px,-2px);
  color: var(--accent1);
  mix-blend-mode: screen;
  animation: glitchTop 2.6s infinite;
}
h1::after {
  clip-path: polygon(0 55%,100% 56%,100% 100%,0 100%);
  transform: translate(-2px,2px);
  color: var(--accent2);
  mix-blend-mode: screen;
  animation: glitchBot 3.1s infinite;
}
@keyframes glitchTop {0%{transform:translate(0,0)}10%{transform:translate(6px,-4px)}20%{transform:translate(-4px,2px)}30%{transform:translate(0,0)}100%{transform:translate(0,0)}}
@keyframes glitchBot {0%{transform:translate(0,0)}15%{transform:translate(-6px,4px)}35%{transform:translate(4px,-2px)}100%{transform:translate(0,0)}}

/* paragraph */
p{color:#b0b6c3;margin-top:6px;margin-bottom:18px;font-size:1.05rem}

/* countdown */
.countdown{display:flex;justify-content:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.countdown .cell{min-width:78px;padding:14px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);backdrop-filter:blur(6px)}
.num{font-size:1.6rem;font-weight:700}
.label{font-size:.75rem;color:#b0b6c3;margin-top:6px}

/* control row */
.controls-row{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.notify-btn{padding:12px 24px;font-size:1rem;font-weight:700;color:#0b0c17;background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;border-radius:12px;cursor:pointer;transition:transform .18s ease;margin-bottom:0}
.notify-btn:hover{transform:scale(1.04)}

/* Discord button */
.discord-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  font-size: .98rem;
  font-weight:600;
  color: #fff;
  background: linear-gradient(90deg,var(--discord-a),var(--discord-b));
  border-radius: 12px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .18s ease;
  box-shadow: 0 6px 0 #3b33b5;
}
.discord-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #3b33b5}
.discord-btn .shine{position:absolute;top:0;left:-140%;width:120%;height:100%;background:linear-gradient(75deg,transparent,rgba(255,255,255,0.65),transparent);transform:skewX(-25deg);animation:shimmer 2.6s infinite}
@keyframes shimmer{0%{left:-140%}50%{left:140%}100%{left:140%}}
.discord-btn svg{fill:white;height:18px}

/* player area */
.player-wrap{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* vinyl */
.vinyl{
  width:120px;height:120px;border-radius:50%;background:
   radial-gradient(circle at 50% 35%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 20%, rgba(0,0,0,0.6) 70%),
   linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6));
  display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 8px 30px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  transform-style: preserve-3d;
}
.vinyl::before{content:'';position:absolute;inset:8px;border-radius:50%;background:conic-gradient(#111 0deg,#111 30deg,#222 31deg,#111 60deg);opacity:.25}
.vinyl .label{position:relative;z-index:2;font-size:.72rem;color:#fff;text-transform:uppercase;letter-spacing:1px;pointer-events:none}
.vinyl.spinning{animation:spin 3s linear infinite}
@keyframes spin{from{transform:rotateY(0) rotateZ(0)}to{transform:rotateY(360deg) rotateZ(360deg)}}

/* mp3 player */
.mp3-player{width:320px;max-width:92%;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);backdrop-filter:blur(6px);padding:14px;border-radius:12px}
.player-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.player-btn{background:#121217;color:#fff;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:1rem}
.player-btn:hover{transform:translateY(-2px)}
.time{font-size:.9rem;color:#b0b6c3;margin-left:auto}
.seek{width:100%;margin:8px 0}
.player-bottom{display:flex;align-items:center;gap:10px;justify-content:space-between}
.vol-label{font-size:.8rem;color:#b0b6c3}

/* visualizer */
.visualizer{width:100%;height:72px;display:flex;align-items:flex-end;gap:4px;margin-top:10px}
.visualizer div{flex:1;max-width:10px;background:linear-gradient(180deg,var(--discord-a),var(--discord-b));height:6px;border-radius:4px;transition:height .08s ease}

/* canvas */
canvas{position:absolute;inset:0;z-index:0;pointer-events:none}