/* ============================================================
   GOTHIC BLACK THEME
   Тёмная готическая тема: чёрный камень, кость, кровь и золото.
   Подключается после style.css и перекрывает палитру и шрифты.
   ============================================================ */

@font-face {
  font-family: "Pirata One";
  src: url("../fonts/PirataOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "UnifrakturMaguntia";
  src: url("../fonts/UnifrakturMaguntia-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ruslan Display";
  src: url("../fonts/RuslanDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #050505;
  --bg-soft: #0a0908;
  --text: #ece5d8;
  --muted: #a39a8c;
  --muted-2: #6f685e;
  --line: rgba(205, 190, 168, 0.12);
  --line-strong: rgba(205, 190, 168, 0.24);
  --glass: rgba(255, 255, 255, 0.025);
  --violet: #9e2b25;
  --cyan: #c9a86a;
  --pink: #7a1f1f;
  --lime: #8f9a6a;
  --radius: 18px;
  --font: "Pirata One", "Ruslan Display", "Times New Roman", serif;
  --font-display: "UnifrakturMaguntia", "Ruslan Display", "Times New Roman", serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  letter-spacing: 0.012em;
}

h1,
h2,
h3,
.brand,
.player-label,
.section h2,
.lp-title,
.player-empty-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.012em;
}

::selection {
  background: rgba(158, 43, 37, 0.55);
  color: #f6efe2;
}

html {
  scrollbar-color: #3a1512 var(--bg);
}

::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #3a1512;
  border-color: var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #55201b;
}

:focus-visible {
  outline-color: #b33a3a;
}

/* ---------- фон ---------- */

.bg {
  background:
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(100, 15, 15, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 45% at 85% 108%, rgba(110, 85, 40, 0.06), transparent 70%),
    var(--bg);
}

.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 70% at 50% 38%, transparent 38%, rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
}

.bg-blob-1 {
  background: radial-gradient(circle, rgba(110, 15, 15, 0.42), transparent 68%);
  opacity: 0.28;
}
.bg-blob-2 {
  background: radial-gradient(circle, rgba(160, 120, 60, 0.12), transparent 68%);
  opacity: 0.2;
}
.bg-blob-3 {
  background: radial-gradient(circle, rgba(80, 70, 62, 0.26), transparent 68%);
  opacity: 0.22;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(205, 190, 168, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205, 190, 168, 0.028) 1px, transparent 1px);
  opacity: 0.4;
}

.bg-noise {
  opacity: 0.07;
}

.cursor-glow {
  background: radial-gradient(circle, rgba(140, 25, 25, 0.14), rgba(180, 140, 70, 0.05) 38%, transparent 68%);
}

/* ---------- шапка ---------- */

.topbar {
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.5) 70%, transparent);
  border-bottom: 1px solid rgba(205, 190, 168, 0.06);
}

.brand {
  font-size: 18px;
  letter-spacing: 0.02em;
}

.brand-mark {
  border-radius: 7px;
  color: #f1e8d8;
  background: linear-gradient(145deg, #6d1a1a, #2a0d0d);
  box-shadow: 0 6px 20px -8px rgba(140, 20, 20, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.brand-text span {
  color: #b33a3a;
}

.online-pill {
  border-color: rgba(143, 154, 106, 0.24);
  background: rgba(143, 154, 106, 0.08);
  color: #c3cda6;
  font-size: 11px;
}

.online-pill i {
  background: #8f9a6a;
  box-shadow: 0 0 0 0 rgba(143, 154, 106, 0.5);
}

@keyframes online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(143, 154, 106, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(143, 154, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 154, 106, 0); }
}

.icon-btn {
  background: rgba(255, 255, 255, 0.02);
}

.icon-btn:hover {
  background: rgba(120, 20, 20, 0.16);
  border-color: rgba(179, 58, 58, 0.45);
}

/* ---------- профиль ---------- */

.profile-card {
  border-radius: 22px;
  background:
    linear-gradient(165deg, rgba(16, 15, 14, 0.95), rgba(6, 6, 6, 0.97) 55%, rgba(12, 11, 10, 0.95)) padding-box,
    linear-gradient(145deg, rgba(201, 168, 106, 0.5), rgba(110, 18, 18, 0.45) 45%, rgba(60, 52, 42, 0.6)) border-box;
  box-shadow:
    0 40px 100px -30px #000,
    0 0 80px -48px rgba(120, 15, 15, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(105%);
  -webkit-backdrop-filter: blur(24px) saturate(105%);
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 1px solid rgba(205, 190, 168, 0.09);
  border-radius: 15px;
  pointer-events: none;
}

.profile-card::after {
  background: radial-gradient(ellipse 70% 45% at 50% -8%, rgba(120, 15, 15, 0.14), transparent 70%);
}

.profile-halo {
  background: radial-gradient(circle, rgba(120, 15, 15, 0.2), rgba(180, 140, 70, 0.04) 45%, transparent 70%);
}

.avatar-ring {
  background: conic-gradient(from 0deg, #d8cbb2, #7c1d1d, #3a2a1a, #d8cbb2);
  animation-duration: 14s;
  filter: saturate(95%);
}
.avatar-ring::after {
  background: #080707;
}

.avatar {
  border-color: #080707;
  background: #0a0908;
}

.avatar-online {
  background: #8f9a6a;
  border-color: #080707;
  box-shadow: 0 0 14px rgba(143, 154, 106, 0.6);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #9a9080;
}
.eyebrow span {
  background: #9e2b25;
  box-shadow: 0 0 10px #9e2b25;
}

h1,
.brand {
  font-family: "Pirata One", "Ruslan Display", "Times New Roman", serif;
}

h1 {
  font-size: clamp(58px, 9vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, #f6efe2 8%, #cfc2ac 46%, #8f3a34 82%, #f6efe2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 34px rgba(120, 20, 20, 0.35));
}

.handle {
  color: #9a9080;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.bio {
  color: #b9b0a2;
  font-size: 16.5px;
  line-height: 1.95;
}

.bio a {
  color: #c9a86a;
  text-decoration-color: rgba(201, 168, 106, 0.45);
}
.bio a:hover {
  color: #d9574f;
  text-decoration-color: rgba(217, 87, 79, 0.6);
}

.status-line {
  border-color: rgba(205, 190, 168, 0.14);
  background: rgba(255, 255, 255, 0.02);
  color: #ded4c2;
  font-size: 13.5px;
  border-radius: 8px;
}

.equalizer i {
  background: linear-gradient(to top, #9e2b25, #c9a86a);
}

/* ---------- соцсети ---------- */

.social {
  --brand: #c9a86a !important;
  border-radius: 9px;
  border-color: rgba(205, 190, 168, 0.14);
  background: rgba(255, 255, 255, 0.02);
}

.social:hover {
  --brand: #b33a3a !important;
  border-color: rgba(179, 58, 58, 0.55);
  background: rgba(120, 20, 20, 0.13);
  box-shadow: 0 12px 30px -16px rgba(140, 20, 20, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.social-icon {
  border-radius: 7px;
}

.s-label {
  font-size: 13.5px;
  letter-spacing: 0.03em;
}

.s-handle {
  font-size: 11.5px;
  color: #8a8275;
}

/* ---------- кнопки ---------- */

.btn {
  border-radius: 8px;
  font-size: 14.5px;
  letter-spacing: 0.035em;
}

.btn-primary {
  background: linear-gradient(180deg, #7c1d1d, #3d0d0d);
  color: #f6efe2;
  border-color: rgba(201, 168, 106, 0.3);
  box-shadow: 0 10px 30px -14px rgba(140, 20, 20, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #932525, #4a1010);
  box-shadow: 0 16px 36px -14px rgba(160, 30, 30, 0.95);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(205, 190, 168, 0.2);
  color: #ded4c2;
}
.btn-ghost:hover {
  background: rgba(120, 20, 20, 0.14);
  border-color: rgba(179, 58, 58, 0.45);
}

.scroll-hint {
  color: #6f685e;
  font-size: 10.5px;
}

.scroll-line {
  background: linear-gradient(to bottom, transparent, rgba(179, 58, 58, 0.85), transparent);
}

/* ---------- секции ---------- */

.section-title-row {
  border-bottom: 1px solid rgba(205, 190, 168, 0.09);
  padding-bottom: 14px;
}

.section h2 {
  font-size: clamp(42px, 5.6vw, 64px);
  letter-spacing: 0.015em;
  color: #f1e8d8;
  text-shadow: 0 0 34px rgba(140, 20, 20, 0.28);
}

.section-link {
  font-size: 13px;
  border-bottom-color: rgba(205, 190, 168, 0.18);
}
.section-link:hover {
  color: #c9a86a;
  border-color: #9e2b25;
}

.section-count {
  border-radius: 6px;
  font-size: 11.5px;
  color: #b9b0a2;
}

.section-sub {
  color: #9a9080;
  font-size: 15.5px;
}

.section-sub-link {
  color: #c9a86a;
  text-decoration-color: rgba(201, 168, 106, 0.45);
}
.section-sub-link:hover {
  color: #d9574f;
  text-decoration-color: rgba(217, 87, 79, 0.6);
}

/* ---------- плеер ---------- */

.player-card {
  border-radius: 18px;
  border-color: rgba(205, 190, 168, 0.14);
  background: linear-gradient(165deg, rgba(14, 13, 12, 0.96), rgba(5, 5, 5, 0.98));
  box-shadow: 0 30px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.player-top {
  border-bottom-color: rgba(205, 190, 168, 0.1);
  color: #9a9080;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.player-dots i {
  background: #7a1f1f;
}
.player-dots i:nth-child(2) {
  background: #8a6a2a;
}
.player-dots i:nth-child(3) {
  background: #4f5c3a;
}

.player-live {
  color: #c3cda6;
}

.player-live i {
  background: #8f9a6a;
  box-shadow: 0 0 10px rgba(143, 154, 106, 0.7);
}

.local-player {
  background:
    radial-gradient(ellipse 80% 80% at 12% 0%, rgba(120, 20, 20, 0.17), transparent 65%),
    radial-gradient(ellipse 70% 70% at 100% 100%, rgba(180, 140, 70, 0.07), transparent 65%);
}

.lp-now {
  border-right-color: rgba(205, 190, 168, 0.1);
}

.lp-cover-wrap::before {
  background: linear-gradient(135deg, rgba(140, 20, 20, 0.55), rgba(180, 140, 70, 0.22));
}

.lp-cover {
  border-radius: 12px;
  border-color: rgba(205, 190, 168, 0.2);
  background: #0a0908;
}

.lp-kicker {
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

.lp-title {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
}

.lp-artist {
  font-size: 14px;
}

.lp-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #9e2b25 var(--value), rgba(205, 190, 168, 0.15) var(--value));
}

.lp-range::-webkit-slider-thumb {
  background: #f1e8d8;
  box-shadow: 0 0 0 4px rgba(158, 43, 37, 0.18), 0 0 16px rgba(158, 43, 37, 0.7);
}

.lp-range::-moz-range-progress {
  background: linear-gradient(90deg, #9e2b25, #c9a86a);
}

.lp-range::-moz-range-thumb {
  background: #f1e8d8;
  box-shadow: 0 0 0 4px rgba(158, 43, 37, 0.18), 0 0 16px rgba(158, 43, 37, 0.7);
}

.lp-play {
  border-radius: 50%;
  background: linear-gradient(135deg, #9e2b25, #5a1212);
  color: #f6efe2;
  box-shadow: 0 12px 30px -12px rgba(158, 43, 37, 0.9);
}
.lp-play:hover,
.lp-play:focus-visible {
  box-shadow: 0 16px 38px -12px rgba(179, 58, 58, 1);
}

.lp-btn,
.lp-btn-small {
  border-radius: 50%;
}

.lp-btn-small.is-on {
  border-color: rgba(158, 43, 37, 0.4);
  background: rgba(158, 43, 37, 0.16);
  color: #d98a8a;
}

.lp-list-wrap {
  background: rgba(0, 0, 0, 0.18);
}

.lp-list-head {
  border-bottom-color: rgba(205, 190, 168, 0.1);
  font-size: 10.5px;
}

.lp-list {
  scrollbar-color: #3a1512 transparent;
}

.lp-list::-webkit-scrollbar-thumb {
  background: #3a1512;
}

.lp-track {
  border-radius: 8px;
}

.lp-track:hover,
.lp-track:focus-visible {
  background: rgba(255, 255, 255, 0.04);
}

.lp-track.is-active {
  border-color: rgba(158, 43, 37, 0.35);
  background: rgba(120, 20, 20, 0.16);
  box-shadow: inset 2px 0 0 #9e2b25;
}

.lp-num {
  font-size: 11px;
}

.lp-thumb {
  border-radius: 6px;
  border-color: rgba(205, 190, 168, 0.12);
  background: #0a0908;
}

.lp-track-title {
  font-size: 13.5px;
  letter-spacing: 0.015em;
}

.lp-track-artist {
  font-size: 11.5px;
}

.lp-track-time {
  font-size: 11px;
}

.lp-bars i {
  background: linear-gradient(to top, #9e2b25, #c9a86a);
}

.player-foot {
  font-size: 11.5px;
}

/* ---------- галерея ---------- */

.shot {
  border-radius: 10px;
  border-color: rgba(205, 190, 168, 0.16);
  background: #0a0908;
}

.shot:hover {
  border-color: rgba(179, 58, 58, 0.5);
}

.shot-shade {
  background: linear-gradient(to top, rgba(3, 3, 3, 0.9) 0%, rgba(3, 3, 3, 0.2) 38%, transparent 62%);
}

.shot-caption {
  font-size: 14px;
  color: #f1e8d8;
}

.shot-source {
  font-size: 10.5px;
  color: rgba(201, 168, 106, 0.75);
}

.shot-num {
  font-size: 11px;
  color: rgba(205, 190, 168, 0.55);
}

.shot-zoom {
  border-color: rgba(205, 190, 168, 0.35);
  background: rgba(5, 5, 5, 0.6);
  color: #f1e8d8;
}

/* ---------- футер ---------- */

.footer {
  border-top-color: rgba(205, 190, 168, 0.1);
  font-size: 12px;
}

.footer-credit {
  font-size: 13px;
  color: #8a8275;
}

.footer-offer {
  font-size: 14px;
  color: #a39a8c;
}

.footer-offer a {
  color: #c9a86a;
  text-decoration-color: rgba(201, 168, 106, 0.45);
}
.footer-offer a:hover {
  color: #d9574f;
  text-decoration-color: rgba(217, 87, 79, 0.6);
}

/* ---------- лайтбокс ---------- */

.lightbox::backdrop {
  background: rgba(2, 2, 2, 0.94);
}

.lb-figure img {
  border-radius: 8px;
  background: #0a0908;
  box-shadow: 0 40px 100px -20px #000;
}

.lb-caption {
  color: #b9b0a2;
  font-size: 14px;
}

.lb-source {
  color: #c9a86a;
  font-size: 12px;
}
.lb-source:hover {
  color: #d9574f;
}

#lbCounter {
  font-size: 11.5px;
}

.lb-close,
.lb-nav {
  border-color: rgba(205, 190, 168, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #f1e8d8;
}
.lb-close:hover,
.lb-nav:hover {
  background: rgba(120, 20, 20, 0.3);
  border-color: rgba(179, 58, 58, 0.5);
}

/* ---------- мелочи ---------- */

.toast {
  border-radius: 8px;
}

.skip-link {
  background: #f1e8d8;
  color: #0a0908;
  border-radius: 6px;
}

@media (max-width: 720px) {
  body {
    font-size: 16.5px;
  }
  .bio {
    font-size: 15.5px;
  }
  .section h2 {
    font-size: clamp(36px, 9vw, 48px);
  }
}