/* ============================================================
   godeless.xyz — biolink page
   ВСЕ настройки цвета — в переменных ниже.
   ============================================================ */
:root {
  --accent: #e11d2a;        /* основной неоновый цвет (красный). Поменяй на свой */
  --accent-glow: rgba(225, 29, 42, 0.55);
  --card-bg: rgba(15, 15, 17, 0.55);
  --card-border: rgba(255, 255, 255, 0.08);
  --text: #f2f2f4;
  --text-dim: #b9b9c0;
  --blur: 14px;
}

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

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: #000;
  overflow-x: hidden;
}

/* ===================== ФОН ===================== */
.bg {
  position: fixed; inset: 0;
  /* ЗАМЕНИ на свой фон: assets/background.jpg или .gif/.mp4 (см. README) */
  /* верхний слой — твоя картинка; нижний — градиент-заглушка, если картинки нет */
  background:
    url('assets/background.jpg') center/cover no-repeat,
    radial-gradient(circle at 30% 20%, #1a1a22 0%, #050507 60%);
  background-color: #050507;
  filter: brightness(0.55) saturate(1.05);
  transform: scale(1.05);
  z-index: -2;
}
.bg-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 0%, rgba(0,0,0,0.65) 80%);
  z-index: -1;
}

/* ===================== ЭКРАН ВХОДА ===================== */
.enter-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.enter-screen.hide { opacity: 0; visibility: hidden; }
/* шрифт Almanac Zitole */
@font-face {
  font-family: 'AlmanacZitole';
  src: url('assets/almanaczitole.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}
.enter-inner { text-align: center; }
.enter-text {
  font-family: 'AlmanacZitole', 'Jokerman', 'Marker Felt', cursive;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 10vw, 7rem);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 18px var(--accent-glow);
}
/* быстрый глитч: кровь дёргается короче + смещение (специфичность выше .blood) */
.enter-screen .enter-text.glitch {
  text-shadow: 0 1px red, 0 2px red, 0 3px red, 0 4px red, 0 5px red, 0 6px red, 0 7px red, 0 8px red, 0 9px red, 0 10px red, 0 11px red, 0 12px red, 0 13px red, 0 14px red, 0 15px red, 0 16px red, 0 17px red, 0 18px red, 0 19px red, 0 20px red, 0 21px red, 0 22px red, 0 23px red, 0 24px red, 0 25px red, 0 26px red, 0 27px red, 0 28px red, 0 29px red, 0 30px red, 0 31px red, 0 32px red, 0 33px red, 0 34px red, 0 35px red, 0 36px red, 0 37px red, 0 38px red, 0 39px red, 0 40px red, 0 41px red, 0 42px red, 0 43px red, 0 44px red, 0 45px red, 0 46px red, 0 47px red, 0 48px red, 0 49px red, 0 50px red, 0 51px red, 0 52px red, 0 53px red, 0 54px red, 0 55px red, 0 56px red, 0 57px red, 0 58px red, 0 59px red, 0 60px red, 0 61px red, 0 62px red, 0 63px red, 0 64px red, 0 65px red, 0 66px red, 0 67px red, 0 68px red, 0 69px red, 0 70px red;
  transform: translateX(-3px) skewX(-1deg);
}
/* полная кровь (навешивается из JS) */
.enter-text.blood {
  text-shadow: 0 1px red, 0 2px red, 0 3px red, 0 4px red, 0 5px red, 0 6px red, 0 7px red, 0 8px red, 0 9px red, 0 10px red, 0 11px red, 0 12px red, 0 13px red, 0 14px red, 0 15px red, 0 16px red, 0 17px red, 0 18px red, 0 19px red, 0 20px red, 0 21px red, 0 22px red, 0 23px red, 0 24px red, 0 25px red, 0 26px red, 0 27px red, 0 28px red, 0 29px red, 0 30px red, 0 31px red, 0 32px red, 0 33px red, 0 34px red, 0 35px red, 0 36px red, 0 37px red, 0 38px red, 0 39px red, 0 40px red, 0 41px red, 0 42px red, 0 43px red, 0 44px red, 0 45px red, 0 46px red, 0 47px red, 0 48px red, 0 49px red, 0 50px red, 0 51px red, 0 52px red, 0 53px red, 0 54px red, 0 55px red, 0 56px red, 0 57px red, 0 58px red, 0 59px red, 0 60px red, 0 61px red, 0 62px red, 0 63px red, 0 64px red, 0 65px red, 0 66px red, 0 67px red, 0 68px red, 0 69px red, 0 70px red, 0 71px red, 0 72px red, 0 73px red, 0 74px red, 0 75px red, 0 76px red, 0 77px red, 0 78px red, 0 79px red, 0 80px red, 0 81px red, 0 82px red, 0 83px red, 0 84px red, 0 85px red, 0 86px red, 0 87px red, 0 88px red, 0 89px red, 0 90px red, 0 91px red, 0 92px red, 0 93px red, 0 94px red, 0 95px red, 0 96px red, 0 97px red, 0 98px red, 0 99px red, 0 100px red, 0 101px red, 0 102px red, 0 103px red, 0 104px red, 0 105px red, 0 106px red, 0 107px red, 0 108px red, 0 109px red, 0 110px red, 0 111px red, 0 112px red, 0 113px red, 0 114px red, 0 115px red, 0 116px red, 0 117px red, 0 118px red, 0 119px red, 0 120px red, 0 121px red, 0 122px red, 0 123px red, 0 124px red, 0 125px red, 0 126px red, 0 127px red, 0 128px red, 0 129px red, 0 130px red, 0 131px red, 0 132px red, 0 133px red, 0 134px red, 0 135px red, 0 136px red, 0 137px red, 0 138px red, 0 139px red, 0 140px red, 0 141px red, 0 142px red, 0 143px red, 0 144px red, 0 145px red, 0 146px red, 0 147px red, 0 148px red, 0 149px red, 0 150px red, 0 151px red, 0 152px red, 0 153px red, 0 154px red, 0 155px red, 0 156px red, 0 157px red, 0 158px red, 0 159px red, 0 160px red, 0 161px red, 0 162px red, 0 163px red, 0 164px red, 0 165px red, 0 166px red, 0 167px red, 0 168px red, 0 169px red, 0 170px red, 0 171px red, 0 172px red, 0 173px red, 0 174px red, 0 175px red, 0 176px red, 0 177px red, 0 178px red, 0 179px red, 0 180px red;
}

/* ===================== КОНТЕНТ ===================== */
.content {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 40px 16px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}
.content.show { opacity: 1; transform: translateY(0); }

/* ===================== КАРТОЧКИ ===================== */
.card {
  width: 100%; max-width: 460px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* ---------- профиль ---------- */
.profile-card {
  padding: 56px 28px 28px;
  text-align: center;
  transition: transform 0.15s ease-out;
}
.avatar-wrap { position: relative; width: 104px; margin: 0 auto 14px; }
.avatar-ring {
  width: 104px; height: 104px; border-radius: 50%;
  overflow: hidden;                 /* обрезает картинку по кругу */
  border: 2px solid var(--accent);
  box-shadow: 0 0 22px var(--accent-glow);
}
.avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);              /* зум авы (1 = без приближения) */
}
.avatar-badge {
  position: absolute; bottom: 2px; right: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; border: 3px solid #0a0a0c;
}
.username {
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  animation: nameGlow 2.6s ease-in-out infinite;
}
@keyframes nameGlow {
  0%,100% { text-shadow: 0 0 14px rgba(255,255,255,0.6), 0 0 28px var(--accent), 0 0 48px var(--accent-glow); }
  50%     { text-shadow: 0 0 22px rgba(255,255,255,0.95), 0 0 44px var(--accent), 0 0 70px var(--accent), 0 0 100px var(--accent-glow); }
}
.uname { position: relative; display: inline-block; }
.badges {
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  display: inline-flex; gap: 5px; font-size: 0.85rem;
  text-shadow: none;            /* glow не распространяется на галочку */
  animation: none;
}
.badge { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.badge.fa-crown { color: #f5c518; filter: drop-shadow(0 0 6px rgba(245,197,24,0.5)); }

.separator { color: var(--text-dim); opacity: 0.5; font-size: 0.7rem; margin: 16px 0; user-select: none; }
.bio { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; }
.location { margin-top: 6px; color: var(--text-dim); font-size: 0.85rem; }
.location i { color: var(--accent); margin-right: 4px; }

.socials { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; font-size: 1.3rem; }
.socials a, .social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em;
  color: var(--text-dim);
  text-decoration: none;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; line-height: 1;
  -webkit-appearance: none; appearance: none;
  transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}
.socials a:hover, .social-btn:hover { color: var(--accent); transform: translateY(-3px); text-shadow: 0 0 12px var(--accent-glow); }

/* анимация клика по дискорду */
.social-btn.copied { animation: pop 0.5s ease; color: var(--accent); text-shadow: 0 0 16px var(--accent-glow); }
@keyframes pop {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.5) rotate(-12deg); }
  60%  { transform: scale(0.92) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* всплывашка «скопировано» */
.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 24px);
  background: rgba(15,15,17,0.92); border: 1px solid var(--accent);
  color: var(--text); padding: 10px 18px; border-radius: 12px;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em;
  box-shadow: 0 0 22px var(--accent-glow);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast i { color: var(--accent); margin-right: 4px; }

/* ---------- Discord ---------- */
.discord-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.discord-icon { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.discord-info { flex: 1; text-align: left; }
.discord-name { font-weight: 600; font-size: 0.98rem; }
.discord-stats { color: var(--text-dim); font-size: 0.78rem; margin-top: 3px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 2px; vertical-align: middle; }
.dot.online { background: #3ba55d; box-shadow: 0 0 6px #3ba55d; }
.dot.members { background: #b9b9c0; }
.join-btn {
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 8px 22px; border-radius: 10px; font-weight: 600; font-size: 0.88rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.join-btn:hover { transform: translateY(-2px); box-shadow: 0 0 16px var(--accent-glow); }

/* ---------- плеер ---------- */
.player-card { padding: 16px 20px; }
.player-title { font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.18em; text-transform: uppercase; text-align: center; margin-bottom: 12px; }
.player-controls { display: flex; align-items: center; gap: 12px; }
.play-btn {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.play-btn:hover { transform: scale(1.08); box-shadow: 0 0 16px var(--accent-glow); }
.progress-wrap { flex: 1; }
.progress { height: 6px; background: rgba(255,255,255,0.12); border-radius: 4px; cursor: pointer; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.time { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-dim); margin-top: 5px; }
.volume-wrap { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.8rem; }
.volume-wrap input { width: 64px; accent-color: var(--accent); cursor: pointer; }

.footer { color: var(--text-dim); font-size: 0.75rem; opacity: 0.6; margin-top: 4px; letter-spacing: 0.1em; }

/* ===================== МОБИЛКА ===================== */
@media (max-width: 520px) {
  .profile-card { padding: 48px 20px 24px; }
  .volume-wrap { display: none; }
}