/* ============================================================
   STYLE.CSS — визуальные стили.
   Цвета берутся из js/config.js (theme) и подставляются в
   переменные ниже через script.js — здесь редактировать не нужно.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg-base:     #05070d;
  --glow-blue:   #1e5bff;
  --glow-cyan:   #33d6ff;
  --glow-pink:   #ff5fb0;
  --card-bg:     rgba(12, 16, 28, 0.62);
  --card-border: rgba(120, 170, 255, 0.25);
  --text-primary:#eaf2ff;
  --text-muted:  #8fa3c8;
  --accent:      #5fb8ff;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
}

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

html,body{
  height:100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x:hidden;
}

body{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
}

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------------- фон / аврора ---------------- */
.bg{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  background: var(--bg-base);
}
.orb{
  position:absolute;
  border-radius:50%;
  filter: blur(90px);
  opacity:0.55;
  will-change: transform;
}
.orb-blue{
  width:52vmax; height:52vmax;
  left:-18vmax; top:-16vmax;
  background: radial-gradient(circle at 30% 30%, var(--glow-blue), transparent 70%);
  animation: drift1 22s ease-in-out infinite alternate;
}
.orb-cyan{
  width:42vmax; height:42vmax;
  right:-14vmax; bottom:-12vmax;
  background: radial-gradient(circle at 60% 60%, var(--glow-cyan), transparent 70%);
  animation: drift2 26s ease-in-out infinite alternate;
}
.orb-pink{
  width:26vmax; height:26vmax;
  right:8vmax; top:-6vmax;
  background: radial-gradient(circle at 50% 50%, var(--glow-pink), transparent 72%);
  opacity:0.28;
  animation: drift3 30s ease-in-out infinite alternate;
}
@keyframes drift1{ from{ transform:translate(0,0);} to{ transform:translate(6vmax,4vmax);} }
@keyframes drift2{ from{ transform:translate(0,0);} to{ transform:translate(-5vmax,-6vmax);} }
@keyframes drift3{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-3vmax,5vmax) scale(1.15);} }

.grain{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity:0.5;
}

/* ---------------- gate (стартовый экран) ---------------- */
#gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-base);
  cursor:pointer;
  transition: opacity .6s ease, visibility .6s ease;
}
#gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.gate-inner{ text-align:center; }
.gate-ring{
  width:88px; height:88px; margin:0 auto 18px;
  border-radius:50%;
  padding:3px;
  background: conic-gradient(from 0deg, var(--glow-blue), var(--glow-pink), var(--glow-cyan), var(--glow-blue));
  animation: spin 3s linear infinite;
}
.gate-avatar{
  width:100%; height:100%; border-radius:50%;
  background: var(--bg-base) center/cover no-repeat;
}
#gateText{
  color: var(--text-muted);
  font-size:0.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes pulse{ 0%,100%{opacity:.5;} 50%{opacity:1;} }

/* ---------------- карточка профиля ---------------- */
.stage{
  position:relative; z-index:1;
  width:100%;
  display:flex; justify-content:center;
  padding: 6vh 16px;
}

.card{
  position:relative;
  width:100%;
  max-width:400px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius:22px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0,10,40,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 28px 26px 22px;
  display:flex; flex-direction:column; align-items:center;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

.card-banner{
  position:absolute; top:0; left:0; right:0; height:96px;
  border-radius:22px 22px 0 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--glow-blue) 35%, transparent), color-mix(in srgb, var(--glow-pink) 20%, transparent));
  opacity:0.6;
}

.avatar-wrap{ position:relative; margin-top:20px; margin-bottom:14px; z-index:1; }
.avatar-ring{
  width:104px; height:104px;
  border-radius:50%;
  padding:3px;
  background: conic-gradient(from 0deg, var(--glow-blue), var(--glow-cyan), var(--glow-pink), var(--glow-blue));
  animation: spin 6s linear infinite paused;
}
.avatar-ring.playing{ animation-play-state: running; }
.avatar{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  background: #10151f center/cover;
  border: 3px solid var(--bg-base);
}
.status-dot{
  position:absolute; right:4px; bottom:4px;
  width:20px; height:20px; border-radius:50%;
  border:3px solid var(--bg-base);
  background:#3ba55d;
}
.status-dot[data-status="idle"]{ background:#f0b232; }
.status-dot[data-status="dnd"]{ background:#ed4245; }
.status-dot[data-status="offline"]{ background:#6b7280; }

.username{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.65rem);
  font-weight:700;
  letter-spacing:-0.01em;
  text-align:center;
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
}
.usertag{
  color: var(--text-muted);
  font-size:0.88rem;
  margin-top:2px;
}
.status-line{
  margin-top:8px;
  font-size:0.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--text-muted);
  padding:4px 12px;
  border:1px solid var(--card-border);
  border-radius:999px;
}

.badges{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; justify-content:center; }
.badges img{ width:22px; height:22px; }

.about{
  margin-top:16px;
  text-align:center;
  color: var(--text-muted);
  font-size:0.87rem;
  line-height:1.55;
  max-width:32ch;
}
.about p + p{ margin-top:6px; }

/* ---------------- ссылки ---------------- */
.links{
  width:100%;
  display:flex; flex-direction:column; gap:10px;
  margin-top:20px;
}
.link-btn{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:12px 16px;
  border-radius:14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.link-btn:hover, .link-btn:focus-visible{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--card-border));
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent);
  outline: none;
}
.link-icon{
  width:22px; height:22px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color: var(--accent);
}
.link-icon svg{ width:100%; height:100%; fill: currentColor; }
.link-icon img{ width:100%; height:100%; object-fit:contain; border-radius:6px; }
.link-label{ font-size:0.92rem; font-weight:500; }

/* ---------------- плеер ---------------- */
.player{
  width:100%;
  margin-top:20px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  display:flex; align-items:center; gap:10px;
}
.player-cover{
  width:42px; height:42px; border-radius:10px;
  background: #10151f center/cover no-repeat;
  flex:0 0 auto;
}
.player-info{ flex:1 1 auto; min-width:0; }
.player-title{ font-size:0.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-artist{ font-size:0.72rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.player-bars{
  display:flex; align-items:flex-end; gap:2px;
  height:12px; margin-top:4px;
}
.player-bars span{
  width:3px; border-radius:2px;
  background: linear-gradient(180deg, var(--glow-cyan), var(--glow-pink));
  height:20%;
  animation: bar 900ms ease-in-out infinite;
  animation-play-state: paused;
  opacity:0.85;
}
.player-bars.playing span{ animation-play-state: running; }
.player-bars span:nth-child(1){ animation-duration: 620ms; animation-delay: 0ms; }
.player-bars span:nth-child(2){ animation-duration: 780ms; animation-delay: 60ms; }
.player-bars span:nth-child(3){ animation-duration: 540ms; animation-delay: 120ms; }
.player-bars span:nth-child(4){ animation-duration: 900ms; animation-delay: 40ms; }
.player-bars span:nth-child(5){ animation-duration: 660ms; animation-delay: 160ms; }
.player-bars span:nth-child(6){ animation-duration: 720ms; animation-delay: 20ms; }
.player-bars span:nth-child(7){ animation-duration: 860ms; animation-delay: 100ms; }
.player-bars span:nth-child(8){ animation-duration: 600ms; animation-delay: 140ms; }
.player-bars span:nth-child(9){ animation-duration: 740ms; animation-delay: 80ms; }
.player-bars span:nth-child(10){ animation-duration: 820ms; animation-delay: 10ms; }
@keyframes bar{ 0%,100%{ height:20%; } 50%{ height:100%; } }

.player-controls{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.pctl{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--text-primary); }
.pctl svg{ width:16px; height:16px; fill:currentColor; }
.pctl:hover{ background: rgba(255,255,255,0.08); }
.pctl-main{ width:34px; height:34px; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.pctl-main svg{ width:17px; height:17px; }
.pctl-mute{ flex:0 0 auto; }

.footer{
  margin-top:20px;
  font-size:0.72rem;
  color: var(--text-muted);
  opacity:0.7;
  text-align:center;
}

/* ---------------- фокус для доступности ---------------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------- responsive ---------------- */
@media (max-width:480px){
  .card{ max-width:100%; padding:24px 18px 18px; border-radius:20px; }
  .stage{ padding: 4vh 12px; }
  .avatar-ring{ width:92px; height:92px; }
}

@media (max-height:700px){
  .stage{ padding: 3vh 16px; }
}

@media (prefers-reduced-motion: reduce){
  .orb, .avatar-ring, .gate-ring, .player-bars span, .card{
    animation: none !important;
  }
}