*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #060608;
  --surface: rgba(255,255,255,0.035);
  --border: rgba(255,255,255,0.07);
  --border-lit: rgba(255,255,255,0.16);
  --text: #ececec;
  --text-muted: #555;
  --text-dim: #2e2e2e;
  --accent: #8b74ff;
  --accent2: #b48eff;
  --accent-glow: rgba(139,116,255,0.25);
  --green: #3ba55c;
  --yellow: #faa61a;
  --red: #ed4245;
  --spotify: #1db954;
  --radius: 14px;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── BG ─────────────────────────────────────────────────── */
.bg-glow {
  position: fixed; top: -20vh; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(100,80,200,0.11) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  animation: bgPulse 8s ease-in-out infinite;
}
@keyframes bgPulse {
  0%,100% { opacity:.6; transform:translateX(-50%) scale(1); }
  50%      { opacity:1;  transform:translateX(-50%) scale(1.08); }
}

#stars {
  position: fixed; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes spinRing { to{transform:rotate(360deg)} }
@keyframes statPop {
  0%   { color:var(--accent2); transform:scale(1.12); }
  100% { color:var(--text-muted); transform:scale(1); }
}
@keyframes glowPulse { 0%,100%{opacity:.6}50%{opacity:1} }
@keyframes karaokeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.anim-load { opacity:0; transform:translateY(22px); }
.anim-in   { animation:fadeUp .7s cubic-bezier(.22,1,.36,1) forwards; }

.reveal {
  opacity:0; transform:translateY(28px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.revealed { opacity:1; transform:translateY(0); }

.stat-updated { animation:statPop .6s ease-out forwards; }

/* ─── NAV ────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  background:rgba(6,6,8,.78); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  animation:fadeIn .5s ease both;
}
.nav-brand { font-size:17px; font-weight:700; letter-spacing:-.5px; color:var(--text); }
.nav-links { display:flex; gap:30px; }
.nav-link {
  color:var(--text-muted); text-decoration:none;
  font-size:13px; font-family:var(--font-mono); letter-spacing:.5px;
  position:relative; transition:color .2s;
}
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-3px;
  width:0; height:1px; background:var(--accent); transition:width .25s ease;
}
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-link:hover,.nav-link.active { color:var(--text); }
.accent { color:var(--accent); }

/* ─── LAYOUT ─────────────────────────────────────────────── */
main {
  position:relative; z-index:1;
  max-width:860px; margin:0 auto;
  padding:118px 24px 60px;
}
.section { margin-bottom:96px; }
.section-header { margin-bottom:32px; }
.section-label {
  font-size:10px; font-family:var(--font-mono); color:var(--accent);
  letter-spacing:3px; text-transform:uppercase; display:block; margin-bottom:6px;
}
.section-title {
  font-size:clamp(26px,5vw,42px); font-weight:700;
  font-family:var(--font-mono); color:var(--text); line-height:1;
}

/* ─── HERO ───────────────────────────────────────────────── */
.hero-section { display:flex; flex-direction:column; gap:22px; }
.hero-desc { display:flex; align-items:center; gap:16px; }
.btn-outline {
  display:inline-block; padding:8px 18px;
  border:1px solid var(--border-lit); border-radius:7px;
  color:var(--text); text-decoration:none;
  font-size:12px; font-family:var(--font-mono); letter-spacing:.5px;
  transition:all .22s;
}
.btn-outline:hover {
  border-color:var(--accent); color:var(--accent);
  box-shadow:0 0 18px var(--accent-glow);
}

/* ─── DISCORD CARD ───────────────────────────────────────── */
.discord-card {
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 22px 20px;
  max-width:500px; overflow:hidden;
  transition:border-color .4s, box-shadow .4s;
  --accent-r:139; --accent-g:116; --accent-b:255;
}
.discord-card:hover { border-color:var(--border-lit); box-shadow:0 6px 40px rgba(0,0,0,.4); }

.spotify-active-card {
  border-color:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.4) !important;
  box-shadow:
    0 0 0 1px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12),
    0 8px 48px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.18) !important;
}

.card-bg-glow {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 0% 0%, rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08) 0%, transparent 65%);
  transition:background 1.2s ease;
}

.card-header {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
}

/* Avatar */
.avatar-wrap { position:relative; flex-shrink:0; }
.avatar-ring {
  position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--accent),var(--accent2),transparent,var(--accent));
  animation:spinRing 4s linear infinite; opacity:0; transition:opacity .5s;
}
.spotify-active-card .avatar-ring { opacity:1; }
.avatar {
  position:relative; z-index:1;
  width:58px; height:58px; border-radius:50%;
  display:block; object-fit:cover; border:2px solid var(--bg);
  transition:transform .3s;
}
.discord-card:hover .avatar { transform:scale(1.04); }
.status-dot {
  position:absolute; bottom:2px; right:2px; z-index:2;
  width:13px; height:13px; border-radius:50%;
  background:#444; border:2.5px solid var(--bg); transition:background .4s;
}
.status-dot.online { background:var(--green); }
.status-dot.idle   { background:var(--yellow); }
.status-dot.dnd    { background:var(--red); }

.user-info { position:relative; z-index:1; }
.display-name {
  font-size:18px; font-weight:700; font-family:var(--font-sans);
  color:var(--text); line-height:1.2;
}
.username { font-size:12px; color:var(--text-muted); font-family:var(--font-mono); margin-top:3px; }

/* ─── PRESENCE ROW ───────────────────────────────────────── */
.presence-row {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  padding-top:13px; border-top:1px solid var(--border);
  font-size:13px; font-family:var(--font-sans); color:var(--text-muted);
  animation:fadeIn .3s ease;
}
.presence-dot {
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0; background:#444; transition:background .4s;
}
.presence-label { font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── SPOTIFY WIDGET ─────────────────────────────────────── */
.spotify-widget {
  position:relative; z-index:1;
  padding-top:14px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:12px;
  animation:fadeIn .35s ease;
}

.spotify-top { display:flex; gap:12px; align-items:flex-start; }

/* Album art + play button */
.spotify-art-wrap {
  position:relative; flex-shrink:0;
  width:72px; height:72px;
}
.album-art {
  width:72px; height:72px; border-radius:8px;
  object-fit:cover; display:block;
  box-shadow:0 4px 20px rgba(0,0,0,.7);
  transition:transform .3s, filter .3s;
}
.spotify-active-card .album-art { transform:scale(1.03); }

.preview-btn {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); border-radius:8px; border:none; cursor:pointer;
  opacity:0; transition:opacity .2s; backdrop-filter:blur(2px);
}
.preview-btn svg { width:22px; height:22px; color:#fff; }
.spotify-art-wrap:hover .preview-btn { opacity:1; }
.preview-btn.playing { opacity:1; background:rgba(0,0,0,.7); }

/* Track info */
.track-info { flex:1; overflow:hidden; min-width:0; display:flex; flex-direction:column; gap:2px; }

.spotify-badge {
  display:flex; align-items:center; gap:5px; margin-bottom:4px;
}
.spotify-badge svg { width:12px; height:12px; color:var(--spotify); flex-shrink:0; animation:glowPulse 2s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(29,185,84,.5)); }
.spotify-badge span { font-size:10px; font-family:var(--font-mono); color:var(--spotify); letter-spacing:1.5px; text-transform:uppercase; }

.track-name {
  font-size:14px; font-weight:700; color:var(--text); font-family:var(--font-sans);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;
}
.track-artist {
  font-size:12px; color:var(--text-muted); font-family:var(--font-sans);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track-album {
  font-size:11px; color:rgba(255,255,255,.22); font-family:var(--font-sans);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.progress-wrap {
  display:flex; align-items:center; gap:7px; margin-top:8px;
}
.time-label { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); flex-shrink:0; }
.progress-bar {
  flex:1; height:3px; background:rgba(255,255,255,.08);
  border-radius:3px; overflow:hidden; cursor:pointer;
}
.progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--spotify),#4ade80);
  border-radius:3px; transition:width 1s linear;
}

/* ─── SPOTIFY EMBED ──────────────────────────────────────── */
.spotify-embed-wrap {
  border-radius:8px; overflow:hidden;
  animation:fadeIn .4s ease;
}
.spotify-embed-wrap iframe { display:block; }

/* ─── KARAOKE LYRICS ─────────────────────────────────────── */
.karaoke-wrap {
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px; overflow:hidden;
  position:relative;
}

/* fade mask top/bottom */
.karaoke-wrap::before, .karaoke-wrap::after {
  content:''; position:absolute; left:0; right:0; z-index:2; pointer-events:none;
}
.karaoke-wrap::before {
  top:0; height:40px;
  background:linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
}
.karaoke-wrap::after {
  bottom:0; height:40px;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
}

.karaoke-scroll {
  height:168px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start;
  padding:20px 16px;
  position:relative;
  gap:0;
}

.karaoke-line {
  width:100%; text-align:center;
  font-size:13px; font-family:var(--font-sans); font-weight:500;
  line-height:1.6; padding:3px 0;
  transition: opacity .4s ease, transform .4s ease, font-size .3s ease, color .3s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:0;
}

.karaoke-line.kl-past-3  { opacity:.08; transform:scale(.88); color:#aaa; }
.karaoke-line.kl-past-2  { opacity:.15; transform:scale(.9);  color:#bbb; }
.karaoke-line.kl-past-1  { opacity:.32; transform:scale(.93); color:#ccc; }
.karaoke-line.kl-current {
  opacity:1; transform:scale(1.02);
  font-size:14px; font-weight:700;
  color:#fff;
  text-shadow:0 0 16px rgba(var(--accent-r,139),var(--accent-g,116),var(--accent-b,255),.8),
              0 0 32px rgba(var(--accent-r,139),var(--accent-g,116),var(--accent-b,255),.4);
  animation:karaokeIn .3s ease;
}
.karaoke-line.kl-next-1  { opacity:.32; transform:scale(.93); color:#ccc; }
.karaoke-line.kl-next-2  { opacity:.15; transform:scale(.9);  color:#bbb; }
.karaoke-line.kl-next-3  { opacity:.08; transform:scale(.88); color:#aaa; }

/* ─── GAMES GRID ─────────────────────────────────────────── */
.games-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px;
}
.game-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  text-decoration:none; color:inherit; display:block;
  transition:border-color .25s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  will-change:transform;
}
.game-card:hover {
  border-color:var(--accent);
  transform:translateY(-5px) scale(1.015);
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 32px var(--accent-glow);
}
.game-thumb-wrap { position:relative; overflow:hidden; }
.game-thumb {
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#0e0e0e;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.game-card:hover .game-thumb { transform:scale(1.07); }
.game-thumb-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,8,.7) 0%, transparent 55%);
  pointer-events:none;
}
.game-info { padding:12px 14px 14px; }
.game-name {
  font-size:14px; font-weight:600; color:var(--text); font-family:var(--font-sans);
  margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.game-stats { display:flex; gap:13px; margin-bottom:10px; }
.stat {
  display:flex; align-items:center; gap:5px;
  font-size:12px; color:var(--text-muted); font-family:var(--font-mono);
}
.stat-val { transition:color .3s, transform .3s; }
.stat-label { opacity:.7; }
.stat-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.stat-dot.green { background:var(--green); box-shadow:0 0 5px rgba(59,165,92,.5); }
.stat-dot.blue  { background:#5865f2; box-shadow:0 0 5px rgba(88,101,242,.4); }
.game-visit-btn {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--accent); font-family:var(--font-mono);
  letter-spacing:.5px; text-transform:uppercase;
  opacity:.65; transition:opacity .2s, letter-spacing .2s, filter .2s;
}
.game-card:hover .game-visit-btn { opacity:1; letter-spacing:.9px; filter:drop-shadow(0 0 6px var(--accent-glow)); }
.game-visit-btn svg { width:10px; height:10px; }

/* ─── ABOUT ──────────────────────────────────────────────── */
.about-card {
  display:flex; gap:24px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px 26px; align-items:flex-start;
  transition:border-color .3s, box-shadow .3s;
}
.about-card:hover { border-color:var(--border-lit); box-shadow:0 4px 30px rgba(0,0,0,.3); }
.about-avatar img {
  width:66px; height:66px; border-radius:50%; object-fit:cover; display:block; flex-shrink:0;
  transition:transform .3s, box-shadow .3s;
}
.about-card:hover .about-avatar img { transform:scale(1.05); box-shadow:0 0 20px var(--accent-glow); }
.about-text { flex:1; display:flex; flex-direction:column; gap:12px; }
.about-text p { font-size:14px; font-family:var(--font-sans); color:var(--text-muted); line-height:1.75; }
.about-text strong { color:var(--text); }
.tags { display:flex; flex-wrap:wrap; gap:7px; }
.tag {
  padding:4px 10px; background:rgba(139,116,255,.09); border:1px solid rgba(139,116,255,.2);
  border-radius:5px; font-size:11px; font-family:var(--font-mono); color:var(--accent);
  letter-spacing:.5px; transition:background .2s, border-color .2s, box-shadow .2s;
}
.tag:hover { background:rgba(139,116,255,.17); border-color:rgba(139,116,255,.45); box-shadow:0 0 10px rgba(139,116,255,.2); }
.social-row { display:flex; gap:10px; margin-top:4px; }
.social-btn {
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border-radius:6px; font-size:12px; font-family:var(--font-mono); font-weight:500;
  text-decoration:none; transition:all .2s; letter-spacing:.5px;
}
.social-btn svg { width:14px; height:14px; }
.social-btn.discord { background:rgba(88,101,242,.1); border:1px solid rgba(88,101,242,.25); color:#7289da; }
.social-btn.discord:hover { background:rgba(88,101,242,.22); border-color:#5865f2; color:#fff; box-shadow:0 0 16px rgba(88,101,242,.3); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  position:relative; z-index:1; text-align:center; padding:28px 24px;
  border-top:1px solid var(--border); font-size:12px; color:var(--text-dim); font-family:var(--font-mono);
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(139,116,255,.3); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(139,116,255,.5); }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:600px) {
  .nav { padding:15px 18px; } .nav-links { gap:18px; }
  main { padding:86px 14px 36px; }
  .games-grid { grid-template-columns:1fr 1fr; }
  .about-card { flex-direction:column; }
  .spotify-top { flex-direction:row; }
}
@media (max-width:400px) { .games-grid { grid-template-columns:1fr; } }