/* ===========================================================
   SKILZ — Design tokens
=========================================================== */
:root{
  --bg-void:#05060a;
  --bg-elev-2:#11141d;
  --glass-fill: rgba(255,255,255,0.045);
  --glass-border: rgba(255,255,255,0.09);
  --text-hi:#f2f4fb;
  --text-md:#c3c8d9;
  --text-lo:#7d84a0;

  --cyan:#6fe3ff;
  --violet:#b48bff;
  --magenta:#ff7fd8;

  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;

  --ease: cubic-bezier(.22,.9,.32,1);
  --radius-lg: 22px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--bg-void);
  color: var(--text-md);
  font-family: var(--font-body);
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2{ font-family:var(--font-display); color:var(--text-hi); margin:0; }
p{ margin:0; line-height:1.7; }
svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

::selection{ background: var(--violet); color:#05060a; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--cyan), var(--violet)); border-radius:10px; }

/* Background / grain / cursor glow */
#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:0;
  background: radial-gradient(ellipse 90% 60% at 50% -10%, #131a2c 0%, var(--bg-void) 60%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(180,139,255,0.10) 0%, rgba(111,227,255,0.05) 40%, transparent 70%);
  transform:translate(-50%,-50%); pointer-events:none; z-index:2; will-change: transform;
}

/* Preloader */
#preloader{
  position:fixed; inset:0; z-index:1000; background:var(--bg-void);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .7s var(--ease), visibility .7s;
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-mark{ position:relative; display:flex; align-items:center; justify-content:center; width:140px; height:140px; }
.pre-ring{ position:absolute; inset:0; width:100%; height:100%; }
.pre-ring circle{ fill:none; stroke:var(--cyan); stroke-width:2; stroke-dasharray:264; stroke-dashoffset:264; transform-origin:50% 50%; animation: preSpin 1.4s var(--ease) infinite, preDraw 1.8s var(--ease) infinite; opacity:0.8; }
.pre-word{ font-family:var(--font-display); letter-spacing:0.35em; font-size:14px; color:var(--text-hi); }
@keyframes preSpin{ to{ transform:rotate(360deg);} }
@keyframes preDraw{ 0%{ stroke-dashoffset:264;} 50%{ stroke-dashoffset:40;} 100%{ stroke-dashoffset:264;} }

/* Dock */
.dock{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:100; display:flex; gap:6px; padding:10px;
  background: rgba(15,17,24,0.55); backdrop-filter: blur(18px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.dock-item{
  position:relative; width:42px; height:42px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-lo); transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.dock-item svg{ width:19px; height:19px; }
.dock-item:hover{ color:var(--bg-void); background: linear-gradient(135deg, var(--cyan), var(--violet)); transform:translateY(-6px); }
.dock-item::after{
  content: attr(data-label); position:absolute; bottom:52px; left:50%; transform:translateX(-50%) translateY(4px);
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.05em; color:var(--text-hi);
  background: rgba(15,17,24,0.9); padding:4px 8px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity .2s var(--ease), transform .2s var(--ease);
  border:1px solid var(--glass-border);
}
.dock-item:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Layout */
main{ position:relative; z-index:5; }
.section{ max-width:820px; margin:0 auto; padding: 130px 24px 60px; }
.section-head{ text-align:center; margin-bottom:52px; }
.tag-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.15em; color:var(--cyan); text-transform:uppercase; }
.section-head h2{ font-size:clamp(28px,4vw,42px); margin-top:10px; }
.section-sub{ display:block; margin-top:10px; color:var(--text-lo); }

.glass-card{
  background: var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 60px -25px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color .4s var(--ease);
}
.glass-card:hover{ border-color: rgba(180,139,255,0.35); }

.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:14px 28px; border-radius:100px; font-weight:600; font-size:14.5px;
  border:1px solid var(--glass-border); cursor:pointer; transition: all .3s var(--ease); white-space:nowrap;
}
.btn-ghost{ color:var(--text-hi); background: rgba(255,255,255,0.03); }
.btn-outline{ color:var(--text-hi); background:transparent; }
.btn-outline:hover{ border-color:var(--violet); color:var(--violet); }
.btn-spotify{ background:#1ed760; color:#04150a; border:none; box-shadow:0 10px 30px -10px rgba(30,215,96,0.5); }
.btn-spotify:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(30,215,96,0.7); }
.spotify-logo{ width:18px; height:18px; }

.reveal{ opacity:0; transform: translateY(26px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

/* Hero */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 40px 24px; }
.hero-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }

.avatar-wrap{ position:relative; width:180px; height:180px; margin-bottom:4px; animation: floaty 6s ease-in-out infinite; }
.avatar-halo{
  position:absolute; inset:-14px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--cyan), var(--violet), var(--magenta), var(--cyan));
  filter: blur(2px); animation: spin 6s linear infinite;
}
.avatar-halo::after{ content:''; position:absolute; inset:6px; border-radius:50%; background: var(--bg-void); }
.avatar-img{
  position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px);
  border-radius:50%; object-fit:cover; z-index:2; transition: transform .5s var(--ease);
  box-shadow: 0 0 40px rgba(180,139,255,0.35);
}
.avatar-wrap:hover .avatar-img{ transform: scale(1.06); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.hero-name{ font-size:clamp(52px,11vw,120px); line-height:0.95; letter-spacing:-0.02em; }
.name-line{
  background: linear-gradient(135deg, #ffffff 10%, var(--cyan) 45%, var(--violet) 75%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 40px rgba(111,227,255,0.25));
}

.discord-badge{
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px 10px 14px; border-radius:100px;
  background: var(--glass-fill); border:1px solid var(--glass-border); cursor:pointer;
  transition: all .3s var(--ease);
}
.discord-badge:hover{ border-color:#8b93ff; transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(139,147,255,0.5); }
.discord-badge svg{ width:22px; height:22px; color:#8b93ff; }
.discord-badge span{ font-family:var(--font-display); font-size:15px; color:var(--text-hi); }

.scroll-hint{ position:absolute; bottom:100px; left:50%; transform:translateX(-50%); width:22px; height:36px; border:1.5px solid var(--glass-border); border-radius:14px; }
.scroll-hint span{ position:absolute; top:6px; left:50%; width:3px; height:8px; background:var(--cyan); border-radius:4px; transform:translateX(-50%); animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:20px;} 100%{ opacity:0; top:6px;} }

/* Music player */
.player-card{ display:flex; gap:40px; padding:38px; align-items:center; }
.player-visual{ display:flex; flex-direction:column; align-items:center; gap:20px; flex-shrink:0; }
.vinyl{ position:relative; width:150px; height:150px; border-radius:50%; box-shadow:0 20px 50px -20px rgba(0,0,0,0.7), 0 0 0 6px #0d0f16, 0 0 40px rgba(111,227,255,0.15); }
.vinyl-art{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.vinyl-hole{ position:absolute; top:50%; left:50%; width:16px; height:16px; border-radius:50%; background:var(--bg-void); transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(255,255,255,0.08); }
.vinyl.spinning{ animation: spin 8s linear infinite; }

.equalizer{ display:flex; align-items:flex-end; gap:4px; height:34px; }
.equalizer span{ width:4px; height:6px; border-radius:3px; background: linear-gradient(var(--cyan), var(--violet)); transition: height .15s ease; }
.equalizer.playing span{ animation: eqBounce 1.1s ease-in-out infinite; }
.equalizer span:nth-child(1){ animation-delay:-1.1s; } .equalizer span:nth-child(2){ animation-delay:-0.9s; } .equalizer span:nth-child(3){ animation-delay:-0.7s; } .equalizer span:nth-child(4){ animation-delay:-0.5s; } .equalizer span:nth-child(5){ animation-delay:-0.3s; } .equalizer span:nth-child(6){ animation-delay:-0.6s; } .equalizer span:nth-child(7){ animation-delay:-0.2s; }
@keyframes eqBounce{ 0%,100%{ height:6px;} 50%{ height:30px;} }

.player-controls{ flex:1; min-width:0; }
.track-info{ display:flex; flex-direction:column; margin-bottom:16px; }
.track-title{ font-family:var(--font-display); font-size:20px; color:var(--text-hi); }
.track-artist{ font-size:13px; color:var(--text-lo); }

.progress-row{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.time{ font-family:var(--font-mono); font-size:11px; color:var(--text-lo); width:36px; }
.progress-track{ position:relative; flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,0.08); cursor:pointer; }
.progress-fill{ position:absolute; inset:0; width:0%; border-radius:6px; background:linear-gradient(90deg, var(--cyan), var(--violet)); }
.progress-scrubber{ position:absolute; top:50%; left:0%; width:12px; height:12px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 8px rgba(111,227,255,0.7); }

.controls-row{ display:flex; align-items:center; gap:12px; }
.ctrl-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--glass-border); background:rgba(255,255,255,0.03); color:var(--text-hi); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .25s var(--ease); flex-shrink:0; }
.ctrl-btn svg{ width:17px; height:17px; }
.ctrl-btn:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.play-btn{ width:52px; height:52px; background:linear-gradient(135deg, var(--cyan), var(--violet)); color:var(--bg-void); border:none; }
.play-btn svg{ width:19px; height:19px; }
.volume-track{ flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,0.08); cursor:pointer; position:relative; }
.volume-fill{ position:absolute; inset:0; width:70%; border-radius:6px; background:linear-gradient(90deg, var(--violet), var(--magenta)); }

@media (max-width:760px){
  .player-card{ flex-direction:column; padding:26px; }
}

/* Toast */
.toast{
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--bg-elev-2); border:1px solid var(--glass-border); padding:10px 20px; border-radius:100px;
  font-size:13px; color:var(--text-hi); opacity:0; pointer-events:none; transition: all .3s var(--ease); z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Game */
.game-card{ padding:26px; }
.game-hud{ display:flex; align-items:center; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.hud-item{ font-family:var(--font-mono); font-size:13px; color:var(--text-lo); }
.hud-item span{ color:var(--cyan); font-weight:600; margin-left:6px; }
.game-hud .btn{ margin-left:auto; padding:9px 18px; font-size:12.5px; }
.game-stage{ position:relative; width:100%; aspect-ratio: 16/9; border-radius:16px; overflow:hidden; background: #0a0c13; border:1px solid var(--glass-border); }
#gameCanvas{ width:100%; height:100%; display:block; touch-action:none; }
.game-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background: rgba(5,6,10,0.72); backdrop-filter:blur(6px); text-align:center; padding:20px; transition: opacity .4s var(--ease);
}
.game-overlay h3{ font-family:var(--font-display); color:var(--text-hi); font-size:26px; }
.game-overlay p{ color:var(--text-lo); font-size:14px; max-width:280px; }
.game-overlay.hidden{ opacity:0; pointer-events:none; }

.site-footer{ text-align:center; margin-top:50px; padding-bottom:20px; font-size:12px; color:var(--text-lo); font-family:var(--font-mono); }