/* ============================================================
   zom-bio · engine — цвета через CSS-переменные, темы — классы
   theme-* на <html> (amber = дефолт :root)
   ============================================================ */

:root {
  --bg: #141110;             /* тёплый графит */
  --ink: #f0e9df;            /* основной текст, тёплый белый */
  --ink-soft: #9c9184;       /* приглушённый текст */
  --card: rgba(28, 23, 19, 0.55);
  --card-border: rgba(255, 255, 255, 0.09);
  --accent: #ff8a2a;         /* янтарно-оранжевый */
  --accent-2: #ffb454;       /* светлый янтарь */
  --accent-soft: rgba(255, 138, 42, 0.35);
  --on-accent: #1a1208;      /* текст на акцентных кнопках */
  /* bokeh-пятна фона */
  --blob1: rgba(255, 122, 26, 0.5);
  --blob2: rgba(214, 64, 0, 0.45);
  --blob3: rgba(255, 180, 84, 0.35);
  --blob4: rgba(255, 94, 0, 0.3);
  /* поверхности и рамки */
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --track: rgba(255, 255, 255, 0.12); /* фон прогресс-бара */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* лёгкий отскок для появления */
  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Темы (класс на <html>) ---------- */

/* Полночь: глубокий navy + электрический синий */
html.theme-midnight {
  --bg: #0a111e;
  --ink: #e8eef8;
  --ink-soft: #8b98ad;
  --card: rgba(18, 26, 42, 0.55);
  --accent: #4d9fff;
  --accent-2: #7ab8ff;
  --accent-soft: rgba(77, 159, 255, 0.35);
  --on-accent: #081120;
  --blob1: rgba(77, 159, 255, 0.5);
  --blob2: rgba(59, 91, 255, 0.42);
  --blob3: rgba(122, 184, 255, 0.35);
  --blob4: rgba(43, 92, 230, 0.3);
}

/* Фиолет: чистый насыщенный фиолет, один оттенок во всём */
html.theme-violet {
  --bg: #110a1c;
  --ink: #f0eafa;
  --ink-soft: #9c8fb5;
  --card: rgba(26, 18, 40, 0.55);
  --accent: #b06ef9;
  --accent-2: #c084fc;
  --accent-soft: rgba(176, 110, 249, 0.35);
  --on-accent: #1a0a2e;
  --blob1: rgba(168, 85, 247, 0.5);
  --blob2: rgba(126, 34, 206, 0.45);
  --blob3: rgba(192, 132, 252, 0.35);
  --blob4: rgba(139, 92, 246, 0.3);
}

/* Багровый: красный бархат, алый rose + светло-коралловое свечение */
html.theme-crimson {
  --bg: #160708;
  --ink: #f7ebec;
  --ink-soft: #a88f92;
  --card: rgba(34, 16, 18, 0.58);
  --card-border: rgba(255, 90, 90, 0.12);
  --accent: #f43f5e;
  --accent-2: #fb7185;
  --accent-soft: rgba(244, 63, 94, 0.35);
  --on-accent: #2a0508;
  --blob1: rgba(244, 63, 94, 0.5);
  --blob2: rgba(190, 18, 60, 0.45);
  --blob3: rgba(251, 113, 133, 0.35);
  --blob4: rgba(217, 38, 56, 0.3);
}

/* Лес: сосновая чаща, живой зелёный (не мята) */
html.theme-forest {
  --bg: #0a140f;
  --ink: #e9f4ec;
  --ink-soft: #8ea996;
  --card: rgba(14, 28, 20, 0.55);
  --accent: #4ade80;
  --accent-2: #86efac;
  --accent-soft: rgba(74, 222, 128, 0.35);
  --on-accent: #06210f;
  --blob1: rgba(74, 222, 128, 0.5);
  --blob2: rgba(22, 163, 74, 0.45);
  --blob3: rgba(134, 239, 172, 0.32);
  --blob4: rgba(34, 197, 94, 0.3);
}

/* Светлая: тёплая бумага + жжёный оранжевый */
html.theme-light {
  --bg: #f5f1e9;
  --ink: #2b251f;
  --ink-soft: #6f6353;
  --card: rgba(255, 255, 255, 0.6);
  --card-border: rgba(60, 40, 20, 0.1);
  --accent: #b45804;
  --accent-2: #f2a24a;
  --accent-soft: rgba(180, 88, 4, 0.32);
  --on-accent: #ffffff;
  --blob1: rgba(217, 107, 8, 0.3);
  --blob2: rgba(242, 162, 74, 0.35);
  --blob3: rgba(250, 204, 140, 0.4);
  --blob4: rgba(217, 107, 8, 0.18);
  --surface: rgba(60, 40, 20, 0.04);
  --surface-2: rgba(60, 40, 20, 0.06);
  --line: rgba(60, 40, 20, 0.08);
  --line-2: rgba(60, 40, 20, 0.11);
  --line-soft: rgba(60, 40, 20, 0.05);
  --track: rgba(60, 40, 20, 0.1);
}

/* Радужная: тёмный фон, акценты — отправная точка; hue циклически
   вращает движок (JS) через --rainbow-hue */
html.theme-rainbow {
  --bg: #100e14;
  --ink: #f2edf5;
  --ink-soft: #9d94a8;
  --card: rgba(24, 20, 30, 0.55);
  --accent: hsl(var(--rainbow-hue, 0), 85%, 62%);
  --accent-2: hsl(calc(var(--rainbow-hue, 0) + 60), 90%, 70%);
  --accent-soft: hsla(var(--rainbow-hue, 0), 85%, 62%, 0.35);
  --on-accent: #14101a;
  --blob1: hsla(var(--rainbow-hue, 0), 85%, 60%, 0.5);
  --blob2: hsla(calc(var(--rainbow-hue, 0) + 120), 80%, 55%, 0.45);
  --blob3: hsla(calc(var(--rainbow-hue, 0) + 240), 85%, 65%, 0.35);
  --blob4: hsla(calc(var(--rainbow-hue, 0) + 60), 85%, 60%, 0.3);
}

/* Astolfo: молочно-розовый, нежный */
html.theme-astolfo {
  --bg: #fdf3f6;
  --ink: #432833;
  --ink-soft: #7f5c6e;
  --card: rgba(255, 255, 255, 0.6);
  --card-border: rgba(190, 90, 130, 0.14);
  --accent: #f75c9e;
  --accent-2: #ff9ec7;
  --accent-soft: rgba(247, 92, 158, 0.35);
  --on-accent: #4f1229;
  --blob1: rgba(247, 92, 158, 0.4);
  --blob2: rgba(255, 158, 199, 0.35);
  --blob3: rgba(255, 200, 222, 0.45);
  --blob4: rgba(240, 120, 170, 0.3);
  --surface: rgba(190, 90, 130, 0.06);
  --surface-2: rgba(190, 90, 130, 0.08);
  --line: rgba(190, 90, 130, 0.14);
  --line-2: rgba(190, 90, 130, 0.18);
  --line-soft: rgba(190, 90, 130, 0.1);
  --track: rgba(190, 90, 130, 0.16);
}

/* Сакура: тёплая тёмно-сливовая + розовые лепестки */
html.theme-sakura {
  --bg: #1b1016;
  --ink: #f8ecf2;
  --ink-soft: #b595a5;
  --card: rgba(36, 22, 30, 0.55);
  --accent: #f9a8d4;
  --accent-2: #fecdd3;
  --accent-soft: rgba(249, 168, 212, 0.35);
  --on-accent: #33101f;
  --blob1: rgba(249, 168, 212, 0.5);
  --blob2: rgba(224, 99, 154, 0.45);
  --blob3: rgba(254, 205, 211, 0.32);
  --blob4: rgba(201, 79, 131, 0.3);
}

/* Океан: глубокий синий (вертикальный градиент) + небесный/индиго */
html.theme-ocean {
  --bg: #060d18;
  --ink: #e4f3fa;
  --ink-soft: #82a3b2;
  --card: rgba(12, 24, 44, 0.55);
  --accent: #38bdf8;
  --accent-2: #818cf8;
  --accent-soft: rgba(56, 189, 248, 0.35);
  --on-accent: #04101e;
  --blob1: rgba(56, 189, 248, 0.48);
  --blob2: rgba(129, 140, 248, 0.45);
  --blob3: rgba(96, 165, 250, 0.32);
  --blob4: rgba(56, 189, 248, 0.3);
}
html.theme-ocean body {
  background: linear-gradient(180deg, #0a1c33 0%, #060d18 55%, #02060d 100%);
}

/* Закат: тёплый оранж + фиолет, градиент неба (пурпур верх → жар низ) */
html.theme-sunset {
  --bg: #160c12;
  --ink: #f9ede6;
  --ink-soft: #b3948a;
  --card: rgba(32, 20, 26, 0.55);
  --accent: #fb923c;
  --accent-2: #c084fc;
  --accent-soft: rgba(251, 146, 60, 0.35);
  --on-accent: #2a1503;
  --blob1: rgba(251, 146, 60, 0.5);
  --blob2: rgba(192, 132, 252, 0.45);
  --blob3: rgba(255, 107, 154, 0.4);
  --blob4: rgba(251, 146, 60, 0.3);
}
html.theme-sunset body {
  background: linear-gradient(180deg, #22102a 0%, #160c12 45%, #241008 100%);
}

/* Кибер: чёрный + матричный неоново-зелёный, моно-шрифт имени */
html.theme-cyber {
  --bg: #040a05;
  --ink: #e6fce8;
  --ink-soft: #87b18c;
  --card: rgba(10, 22, 12, 0.6);
  --card-border: rgba(77, 255, 106, 0.14);
  --accent: #3dff6e;
  --accent-2: #c6ff4d;
  --accent-soft: rgba(61, 255, 110, 0.35);
  --on-accent: #031505;
  --blob1: rgba(61, 255, 110, 0.5);
  --blob2: rgba(31, 174, 84, 0.45);
  --blob3: rgba(198, 255, 77, 0.32);
  --blob4: rgba(43, 212, 101, 0.3);
  --font-display: var(--font-mono);
}

/* Матча: приглушённый оливковый чай */
html.theme-matcha {
  --bg: #10130b;
  --ink: #eef3e2;
  --ink-soft: #a3ad8f;
  --card: rgba(24, 28, 16, 0.55);
  --accent: #aac96e;
  --accent-2: #e3d99c;
  --accent-soft: rgba(170, 201, 110, 0.35);
  --on-accent: #161c09;
  --blob1: rgba(170, 201, 110, 0.48);
  --blob2: rgba(110, 140, 60, 0.45);
  --blob3: rgba(227, 217, 156, 0.32);
  --blob4: rgba(140, 170, 80, 0.3);
}

/* Кэнди: яркая маджента + фиолетовые пятна на чернично-чёрном */
html.theme-candy {
  --bg: #190a1a;
  --ink: #fbe9f9;
  --ink-soft: #b795bd;
  --card: rgba(34, 16, 36, 0.55);
  --accent: #ff4fc3;
  --accent-2: #9a6bff;
  --accent-soft: rgba(255, 79, 195, 0.35);
  --on-accent: #2b0621;
  --blob1: rgba(255, 79, 195, 0.5);
  --blob2: rgba(154, 107, 255, 0.55);
  --blob3: rgba(255, 154, 226, 0.35);
  --blob4: rgba(200, 79, 240, 0.3);
}

/* Бездна: почти чистый чёрный, пятна едва заметны, ледяной голубой */
html.theme-abyss {
  --bg: #020507;
  --ink: #e3f0f9;
  --ink-soft: #7a93a6;
  --card: rgba(6, 12, 18, 0.5);
  --card-border: rgba(255, 255, 255, 0.06);
  --accent: #7fd8ff;
  --accent-2: #3d6bff;
  --accent-soft: rgba(127, 216, 255, 0.35);
  --on-accent: #020d18;
  --blob1: rgba(127, 216, 255, 0.3);
  --blob2: rgba(61, 107, 255, 0.28);
  --blob3: rgba(150, 225, 255, 0.2);
  --blob4: rgba(70, 130, 255, 0.18);
}

/* Моно: нейтральный серый монохром, моно-шрифт имени */
html.theme-mono {
  --bg: #0e0e0e;
  --ink: #f2f2f2;
  --ink-soft: #9a9a9a;
  --card: rgba(24, 24, 24, 0.55);
  --accent: #ededed;
  --accent-2: #8a8a8a;
  --accent-soft: rgba(237, 237, 237, 0.3);
  --on-accent: #101010;
  --blob1: rgba(232, 232, 232, 0.3);
  --blob2: rgba(138, 138, 138, 0.3);
  --blob3: rgba(200, 200, 200, 0.24);
  --blob4: rgba(110, 110, 110, 0.24);
  --font-display: var(--font-mono);
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Фон: bokeh-пятна ---------- */

.bokeh {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  opacity: 0.55;
}

.blob-1 {
  width: 46vmax; height: 46vmax;
  top: -14%; left: -10%;
  background: radial-gradient(circle, var(--blob1) 0%, transparent 68%);
  animation: drift-1 32s ease-in-out infinite alternate;
}
.blob-2 {
  width: 40vmax; height: 40vmax;
  bottom: -16%; right: -8%;
  background: radial-gradient(circle, var(--blob2) 0%, transparent 68%);
  animation: drift-2 38s ease-in-out infinite alternate;
}
.blob-3 {
  width: 34vmax; height: 34vmax;
  top: 30%; right: 6%;
  background: radial-gradient(circle, var(--blob3) 0%, transparent 68%);
  animation: drift-3 26s ease-in-out infinite alternate;
}
.blob-4 {
  width: 26vmax; height: 26vmax;
  bottom: 8%; left: 8%;
  background: radial-gradient(circle, var(--blob4) 0%, transparent 68%);
  animation: drift-1 44s ease-in-out infinite alternate-reverse;
}

@keyframes drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vw, 6vh) scale(1.12); }
}
@keyframes drift-2 {
  from { transform: translate(0, 0) scale(1.05); }
  to   { transform: translate(-8vw, -7vh) scale(0.95); }
}
@keyframes drift-3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6vw, 8vh) scale(1.15); }
}

/* ---------- Фоновое фото страницы (bgImage) ---------- */

/* Фото — отдельным фиксированным слоем (ставит applyBgImage), ниже
   .bokeh (z-index 0). GPU-композитинг: без background-attachment:fixed
   на <body> — ноль перерисовок фона при скролле */
#bgImg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

/* Пятна приглушаем, чтобы не спорили с фото */
body.has-bg-image .bokeh {
  opacity: 0.25;
  transition: opacity 0.4s ease;
}

/* Тёмный оверлей поверх фото/видео — читаемость карточки.
   Сила — из --bg-dim (слайдер «затемнение фона», ставит движок;
   дефолт 0.28). z-index 0 и в DOM сразу после .bokeh:
   выше пятен, ниже #fxSparks (1), .scene (2), .grain (3) */
#bgOverlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(10, 8, 7, var(--bg-dim, 0.28));
}

/* ---------- Зернистость ---------- */

.grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(3) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Сцена и карточка ---------- */

.scene {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  /* одна колонка до 420px, сжимаемая до нуля — карточка никогда
     не вылезает за правый край на узких экранах (<452px) */
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
  perspective: 1100px;
}

.card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 44px 28px 32px;
  border-radius: 28px;
  /* cardOpacity: прозрачность только у поверхности (фон+рамка), контент
     не трогаем. --card-opacity ставит applyCardSurface() на #card. */
  background-color: color-mix(in srgb, var(--card) calc(var(--card-opacity, 1) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) calc(var(--card-opacity, 1) * 100%), transparent);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 18px 45px rgba(0, 0, 0, 0.45),
    0 40px 90px rgba(0, 0, 0, 0.4),
    0 0 80px color-mix(in srgb, var(--accent) 7%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform;
  /* transform сюда НЕ добавлять — им владеет Tilt; только поверхность */
  transition: box-shadow .6s var(--ease-out), border-color .6s var(--ease-out),
              background-color .6s var(--ease-out);
  animation: card-in 1.1s var(--ease-out);
}

/* classic: hover — лёгкое усиление тени/свечения (~20%), без transform.
   Специфичность (0,2,0) ниже любого body.card-X .card — стилевые карточки
   (neon/brutal/…) свою тень при hover не теряют. */
.card:hover {
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.34),
    0 22px 54px rgba(0, 0, 0, 0.5),
    0 46px 104px rgba(0, 0, 0, 0.46),
    0 0 100px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

/* classic: тонкая градиентная каёмка поверх рамки — светлая кромка
   сверху-слева, тёплый акцентный отблеск снизу-справа. z-index 2 —
   рисуется поверх .card-banner, край остаётся чистым при баннере. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--ink) 30%, transparent) 0%,
    color-mix(in srgb, var(--ink) 8%, transparent) 32%,
    color-mix(in srgb, var(--accent) 20%, transparent) 68%,
    color-mix(in srgb, var(--ink) 10%, transparent) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--card-opacity, 1);
  pointer-events: none;
  z-index: 2;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(34px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Блёстки на фоне карточки */
.sparkle {
  position: absolute;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: sparkle-float 6s ease-in-out infinite;
}
.s-a { top: 18px; left: 26px; font-size: 14px; animation-delay: 0.8s; }
.s-b { top: 34px; right: 30px; font-size: 11px; animation-delay: 2.6s; }
.s-c { bottom: 26px; right: 24px; font-size: 13px; animation-delay: 4.2s; }

@keyframes sparkle-float {
  0%, 100% { opacity: 0.15; transform: translateY(0) rotate(0deg) scale(1); }
  50%      { opacity: 0.6;  transform: translateY(-6px) rotate(12deg) scale(1.15); }
}

/* ---------- Аватарка ---------- */

.avatar-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}

.avatar {
  position: relative; /* поверх canvas-визуализатора */
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent);
  animation: avatar-breathe 4.5s ease-in-out infinite;
}

/* Дышащее кольцо-свечение */
.avatar-wrap::before {
  content: "";
  position: absolute;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  box-shadow: 0 0 24px 6px var(--accent-soft), 0 0 60px 14px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: glow-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes avatar-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* Орбита парящих частиц */
.orbit { position: absolute; inset: 0; pointer-events: none; }

.particle {
  position: absolute;
  font-size: 13px;
  color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 80%, transparent);
  animation: particle-float 5s ease-in-out infinite;
}
.p-1 { top: -4px;  left: 50%;  animation-delay: 0s;    animation-duration: 4.6s; }
.p-2 { top: 22%;   right: -6px; animation-delay: 0.9s; animation-duration: 5.4s; font-size: 11px; color: var(--accent-2); }
.p-3 { bottom: 12%; right: 2px; animation-delay: 1.7s; animation-duration: 4.9s; font-size: 15px; color: var(--accent); }
.p-4 { bottom: -2px; left: 30%; animation-delay: 2.4s; animation-duration: 5.8s; font-size: 12px; }
.p-5 { top: 26%;   left: -8px; animation-delay: 3.1s;  animation-duration: 4.4s; font-size: 10px; color: var(--accent-2); }
.p-6 { top: 55%;   left: -2px; animation-delay: 3.8s;  animation-duration: 5.2s; font-size: 12px; color: var(--accent); }

@keyframes particle-float {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); opacity: 0.55; }
  50%      { transform: translate(3px, -9px) rotate(10deg); opacity: 1; }
}

/* ---------- Имя и био ---------- */

.name {
  position: relative; /* якорь для glitch-псевдоэлементов */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 7.5vw, 2.7rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}

.handle {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.handle[hidden] { display: none; }

.bio {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

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

.socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 24px;
}

.social-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              background 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.social-btn svg { width: 19px; height: 19px; }

.social-btn:hover,
.social-btn:focus-visible {
  transform: translateY(-4px);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px var(--accent-soft);
}

/* ---------- Кнопки-ссылки ---------- */

.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              background 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.link-btn .link-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: transform 0.45s var(--ease-out);
}
.link-btn .link-ic svg { width: 18px; height: 18px; }

.link-btn .link-title {
  flex: 1;
  text-align: center;
  /* длинные названия (до 80 символов) — максимум 2 строки с эллипсисом,
     иначе пилюля раздувается и ломает ритм списка */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-btn .link-arrow {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  opacity: 0.45;
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}

/* Пробегающий блик */
.link-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--accent-2) 22%, transparent) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-12deg);
  transition: transform 0.9s var(--ease-out);
  pointer-events: none;
}

.link-btn:hover,
.link-btn:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 20px var(--accent-soft);
}
.link-btn:hover::after,
.link-btn:focus-visible::after { transform: translateX(320%) skewX(-12deg); }
.link-btn:hover .link-ic { transform: scale(1.15) rotate(-8deg); }
.link-btn:hover .link-arrow { transform: translateX(3px); opacity: 0.9; }

/* ---------- Плеер ---------- */

.player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.player[hidden] { display: none; }

.player-cover {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  animation: cover-spin 9s linear infinite;
  animation-play-state: paused;
}
.player.is-playing .player-cover { animation-play-state: running; }

@keyframes cover-spin {
  to { transform: rotate(360deg); }
}

.player-info { flex: 1; min-width: 0; }

.player-titles {
  display: flex;
  flex-direction: column;
  margin-bottom: 7px;
}
.player-titlerow {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.player-titlerow .player-title { flex: 1 1 auto; }
/* Счётчик «2/5» рядом с названием — только при нескольких треках */
.player-count {
  flex: 0 0 auto;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.player-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-artist {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--track);
  cursor: pointer;
  overflow: hidden;
}
.player-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 0.15s linear;
}

.player-times {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.player-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pbtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.pbtn svg { width: 16px; height: 16px; }

.pbtn:hover { transform: scale(1.12); color: var(--accent); }
.pbtn:active { transform: scale(0.95); }

/* Заглушка плеера, пока нет mp3 */
.player.is-empty { opacity: 0.6; }
.player.is-empty .player-cover { animation: none; }
.pbtn:disabled { opacity: 0.4; pointer-events: none; }
.pbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pbtn-play {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--on-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.pbtn-play svg { width: 19px; height: 19px; }
.pbtn-play:hover { color: var(--on-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 65%, transparent); }

/* ---------- Каскадное появление ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(0.92);
  transition: opacity 0.55s var(--ease-out), transform 0.85s var(--spring);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Адаптив ---------- */

@media (max-width: 380px) {
  .card { padding: 36px 20px 26px; }
  .player-controls { gap: 0; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .blob { animation: none; }
  .grain { animation: none; }
  .particle, .sparkle { display: none; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .card { transform: none !important; }
}

/* ============================================================
   ЭФФЕКТЫ
   ============================================================ */

/* ---------- Enter-скрин ---------- */

body.is-locked { overflow: hidden; }
body.is-locked .card { animation: none; opacity: 0; }

.enter-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: radial-gradient(120% 120% at 50% 38%, color-mix(in srgb, var(--accent) 8%, var(--bg)) 0%, var(--bg) 62%);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.enter-screen:focus { outline: none; }
.enter-screen:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -8px;
}
.enter-screen.is-leaving {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

.enter-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.2rem, 13vw, 9rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.enter-hint {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
  animation: hint-blink 1.4s ease-in-out infinite;
}
@keyframes hint-blink {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* ---------- Аудио-визуализатор вокруг аватарки ---------- */

.viz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 260px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* мягкие края обводок: лёгкое размытие растворяет чёткие границы */
  filter: blur(0.6px) saturate(1.08);
}

/* ---------- Typewriter в био ---------- */

.bio { min-height: 1.2em; }

.tw-caret {
  color: var(--accent);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---------- Spotlight на карточке ---------- */

.spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 70%);
}
.card:hover .spotlight { opacity: 1; }

/* ---------- Кастомный курсор + trail ---------- */

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  display: none;
  will-change: transform;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
}
.cursor-ring {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

body.has-custom-cursor .cursor-dot,
body.has-custom-cursor .cursor-ring { display: block; }
body.has-custom-cursor,
body.has-custom-cursor * { cursor: none !important; }

/* Светлячок: точка — тёплый светящийся шарик, кольцо скрыто */
body.cursor-fx-firefly .cursor-ring { display: none; }
body.cursor-fx-firefly .cursor-dot {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: radial-gradient(circle, #fff8d8 0%, #ffe98c 45%, rgba(255, 217, 90, 0) 72%);
  box-shadow: 0 0 12px 3px rgba(255, 224, 130, 0.55);
  animation: firefly-flicker 1.7s ease-in-out infinite;
}
@keyframes firefly-flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.55; }
  62% { opacity: 0.9; }
}

#fxTrail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: screen;
  display: none;
}
body.has-cursor-trail #fxTrail { display: block; }

/* ---------- Падающие искры ---------- */

#fxSparks {
  position: fixed;
  inset: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Glitch на нике при hover (класс .has-glitch ставит JS) ---------- */

.name.has-glitch::before,
.name.has-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .name.has-glitch:hover::before {
    color: var(--accent);
    animation: glitch-a 0.4s steps(1, end) both;
  }
  .name.has-glitch:hover::after {
    color: var(--accent-2);
    animation: glitch-b 0.4s steps(1, end) both;
  }
}

@keyframes glitch-a {
  0%   { opacity: 0.9; clip-path: inset(8% 0 76% 0);  transform: translate(-4px, -2px); }
  20%  { opacity: 0.9; clip-path: inset(52% 0 28% 0); transform: translate(3px, 1px); }
  40%  { opacity: 0.9; clip-path: inset(28% 0 54% 0); transform: translate(-3px, 2px); }
  60%  { opacity: 0.9; clip-path: inset(68% 0 10% 0); transform: translate(4px, -1px); }
  80%  { opacity: 0.9; clip-path: inset(38% 0 42% 0); transform: translate(-2px, 1px); }
  100% { opacity: 0;   clip-path: inset(45% 0 40% 0); transform: translate(0, 0); }
}
@keyframes glitch-b {
  0%   { opacity: 0.9; clip-path: inset(62% 0 18% 0); transform: translate(4px, 2px); }
  20%  { opacity: 0.9; clip-path: inset(14% 0 70% 0); transform: translate(-3px, -1px); }
  40%  { opacity: 0.9; clip-path: inset(46% 0 34% 0); transform: translate(3px, -2px); }
  60%  { opacity: 0.9; clip-path: inset(6% 0 82% 0);  transform: translate(-4px, 1px); }
  80%  { opacity: 0.9; clip-path: inset(58% 0 24% 0); transform: translate(2px, -1px); }
  100% { opacity: 0;   clip-path: inset(30% 0 55% 0); transform: translate(0, 0); }
}

/* ---------- Эффекты имени (класс name-fx-* ставит JS из CONFIG.nameEffect) ---------- */

/* Неон: многослойное свечение акцентом */
.name-fx-neon {
  color: var(--accent-2);
  text-shadow:
    0 0 4px color-mix(in srgb, var(--accent) 80%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 52px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Пульс: дышащее свечение */
.name-fx-pulse {
  color: var(--accent-2);
  animation: name-pulse 2.6s ease-in-out infinite;
}
@keyframes name-pulse {
  0%, 100% {
    text-shadow:
      0 0 5px color-mix(in srgb, var(--accent) 45%, transparent),
      0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  50% {
    text-shadow:
      0 0 10px color-mix(in srgb, var(--accent) 85%, transparent),
      0 0 30px color-mix(in srgb, var(--accent) 55%, transparent),
      0 0 62px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

/* Мерцание: резкие провалы яркости */
.name-fx-flicker {
  color: var(--accent-2);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 38%, transparent);
  animation: name-flicker 3.4s steps(1, end) infinite;
}
@keyframes name-flicker {
  0%, 100% { opacity: 1; }
  4%  { opacity: 0.55; }
  7%  { opacity: 1; }
  26% { opacity: 0.72; }
  29% { opacity: 1; }
  51% { opacity: 0.45; }
  53% { opacity: 0.92; }
  55% { opacity: 0.6; }
  58% { opacity: 1; }
  80% { opacity: 0.78; }
  83% { opacity: 1; }
}

/* Градиент: заливка accent → accent-2 */
.name-fx-gradient,
.name-fx-animated-gradient {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 45%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Живой градиент: бесконечный сдвиг позиции */
.name-fx-animated-gradient { animation: name-gradient 6s linear infinite; }
@keyframes name-gradient {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* Огонь: рваный градиент снизу + оранжево-красное свечение */
.name-fx-fire {
  background: linear-gradient(180deg,
    var(--ink) 0%, var(--ink) 34%,
    var(--accent-2) 52%, var(--accent) 61%,
    #ff7a1a 68%, #ff3d00 82%, #e01f00 89%, #ff5a00 94%, #c21300 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 5px 12px rgba(255, 61, 0, 0.38))
    drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 50%, transparent));
}

/* Электро: тонкие «искры» у краёв букв (двойная тень + дрожание) */
.name-fx-electric {
  text-shadow:
    0 0 7px color-mix(in srgb, var(--accent-2) 70%, transparent),
    2px 0 1px color-mix(in srgb, var(--accent) 70%, transparent),
    -2px 0 1px color-mix(in srgb, var(--accent-2) 70%, transparent);
  animation: name-electric 2.2s steps(1, end) infinite;
}
@keyframes name-electric {
  0%, 100% {
    text-shadow:
      0 0 7px color-mix(in srgb, var(--accent-2) 70%, transparent),
      2px 0 1px color-mix(in srgb, var(--accent) 70%, transparent),
      -2px 0 1px color-mix(in srgb, var(--accent-2) 70%, transparent);
  }
  25% {
    text-shadow:
      0 0 9px color-mix(in srgb, var(--accent-2) 80%, transparent),
      -2px 1px 1px color-mix(in srgb, var(--accent) 75%, transparent),
      2px -1px 1px color-mix(in srgb, var(--accent-2) 75%, transparent);
  }
  50% {
    text-shadow:
      0 0 6px color-mix(in srgb, var(--accent-2) 60%, transparent),
      1px -1px 1px color-mix(in srgb, var(--accent) 65%, transparent),
      -1px 1px 1px color-mix(in srgb, var(--accent-2) 65%, transparent);
  }
  75% {
    text-shadow:
      0 0 10px color-mix(in srgb, var(--accent-2) 85%, transparent),
      -1px -1px 1px color-mix(in srgb, var(--accent) 80%, transparent),
      1px 1px 1px color-mix(in srgb, var(--accent-2) 80%, transparent);
  }
}

/* Хром: серебристый градиент с бликом */
.name-fx-chrome {
  background: linear-gradient(180deg,
    #f8fafc 0%, #d4d8e0 22%, #9aa0ab 40%,
    #f2f5f9 48%, #6e747f 55%,
    #c9ced8 72%, #878d99 86%, #dfe3ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.12));
}

/* Гравировка: вдавленный вид — светлая кромка снизу, тёмная сверху */
.name-fx-engraved {
  color: color-mix(in srgb, var(--ink) 42%, var(--bg));
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 20%, transparent),
    0 -1px 1px rgba(0, 0, 0, 0.55);
}

/* Волна: буквы подпрыгивают (JS разбивает имя на span.name-w) */
.name-fx-wave .name-w {
  display: inline-block;
  animation: name-wave 1.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes name-wave {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-0.2em); }
  70%      { transform: translateY(0.04em); }
}

/* Тряска при hover */
@media (hover: hover) {
  .name-fx-shake:hover { animation: name-shake 0.4s linear infinite; }
}
@keyframes name-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%      { transform: translate(-1.5px, 1px) rotate(-0.5deg); }
  40%      { transform: translate(1.5px, -1px) rotate(0.5deg); }
  60%      { transform: translate(-1px, -1px) rotate(-0.3deg); }
  80%      { transform: translate(1px, 1px) rotate(0.3deg); }
}

/* ---------- Marquee-лента ---------- */

.marquee {
  margin-top: 22px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  user-select: none;
}
.marquee-track {
  display: inline-flex;
  will-change: transform;
  animation: marquee-scroll 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-half { display: inline-flex; }
.mq-sep { color: var(--accent); margin: 0 0.55em; }
.marquee.is-static { text-align: center; }
.marquee.is-static .marquee-track { animation: none; }

/* Виды бегущей строки (marqueeStyle) */
.marquee.mq-style-reverse .marquee-track { animation-direction: reverse; }
.marquee.mq-style-outline .marquee-track {
  color: transparent;
  -webkit-text-stroke: 0.8px var(--ink-soft);
}
.marquee.mq-style-outline .mq-sep {
  color: var(--accent);
  -webkit-text-stroke: 0;
}
.marquee.mq-style-neon .marquee-track {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent), 0 0 22px var(--accent);
  font-weight: 700;
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- Футер карточки ---------- */

.card-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cf-views { display: inline-flex; align-items: center; gap: 6px; }
.cf-views svg { width: 15px; height: 15px; color: var(--accent); }

/* ---------- Магнитные кнопки ---------- */
/* Специфичность выше [data-reveal], применяется только после появления */

.link-btn.revealed {
  transform: translate(var(--mgx, 0px), var(--mgy, 0px));
  /* во время каскада — те же 0.85s spring, что у [data-reveal], и opacity тоже анимируем */
  transition: opacity 0.55s var(--ease-out), transform 0.85s var(--spring),
              box-shadow 0.45s var(--ease-out), background 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out);
}
/* после окончания каскада (JS вешает .mg-on) — быстрый transform для hover и магнита */
.link-btn.revealed.mg-on {
  transition: transform 0.2s var(--ease-out), box-shadow 0.35s var(--ease-out),
              background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.link-btn.revealed:hover,
.link-btn.revealed:focus-visible {
  transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) - 2px));
}

/* ---------- Скрытая вкладка: пауза CSS-анимаций ----------
   Класс is-hidden на <body> ставит движок по visibilitychange
   (rAF-цикл FxLoop глушится отдельно). Marquee, орбита частиц,
   блёстки, glow-пульс и прочие infinite-анимации замирают. */
body.is-hidden *,
body.is-hidden *::before,
body.is-hidden *::after {
  animation-play-state: paused !important;
}

/* ---------- Reduced motion: эффекты ---------- */

@media (prefers-reduced-motion: reduce) {
  .enter-screen { transition: opacity 150ms linear !important; transform: none !important; }
  .spotlight, #fxSparks, #fxTrail, .cursor-dot, .cursor-ring { display: none !important; }
  .marquee-track { animation: none !important; }
  .name::before, .name::after { display: none !important; }
  /* эффекты имени: анимированные → статичное свечение */
  .name-fx-pulse, .name-fx-flicker, .name-fx-electric,
  .name-fx-wave, .name-fx-shake {
    animation: none !important;
    text-shadow: 0 0 10px var(--accent-soft),
                 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .name-fx-animated-gradient { animation: none !important; }
  .name-fx-wave .name-w { animation: none !important; transform: none !important; }
}

/* ============================================================
   ЛОКАЦИЯ / ЗНАЧКИ / КОМПАНЬОН
   ============================================================ */

/* ---------- Локация под @хендлом ---------- */

.location {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.location[hidden] { display: none; }
.loc-pin { flex: 0 0 auto; width: 13px; height: 13px; color: var(--accent); }
.loc-flag {
  flex: 0 0 auto;
  width: 18px; /* src — w80: 2x для retina */
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.loc-flag[hidden] { display: none; }

/* ---------- Значки-пилюли ---------- */

.badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.badges[hidden] { display: none; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.badge-ic { display: grid; place-items: center; width: 13px; height: 13px; color: var(--accent); }
.badge-ic svg { width: 12px; height: 12px; }

/* ---------- Компаньон ---------- */

.companion {
  position: absolute;
  z-index: 6; /* над карточкой */
  max-height: 130px;
  width: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
.companion[hidden] { display: none; }

/* сидит на верхнем краю карточки: низ картинки перекрывает край на ~15% */
.companion-sitRight,
.companion-sitLeft {
  top: 0;
  transform: translateY(-85%);
  animation: companion-bob 4s ease-in-out infinite;
}
.companion-sitRight { right: 14px; }
.companion-sitLeft  { left: 14px; }

@keyframes companion-bob {
  0%, 100% { transform: translateY(calc(-85% - 3px)); }
  50%      { transform: translateY(calc(-85% + 3px)); }
}

/* «обнимает» аватарку: сбоку от неё, наклон ~8° к ней (внутри .avatar-wrap) */
.companion-hug {
  right: -30px;
  bottom: -6px;
  max-height: 105px;
  transform: rotate(-8deg);
  animation: companion-hug-bob 4s ease-in-out infinite;
}
@keyframes companion-hug-bob {
  0%, 100% { transform: rotate(-8deg) translateY(-2px); }
  50%      { transform: rotate(-8deg) translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .companion { animation: none !important; }
  .companion-sitRight, .companion-sitLeft { transform: translateY(-85%); }
  .companion-hug { transform: rotate(-8deg); }
}

/* ============================================================
   СТИЛИ КАРТОЧКИ (CONFIG.cardStyle → класс на <body>)
   classic = дефолт выше, здесь glass / terminal / minimal
   ============================================================ */

/* ---------- glass: жидкое стекло ---------- */

body.card-glass .card {
  /* cardOpacity множит долю ink (поверхность стекла), контент не трогаем */
  background-color: color-mix(in srgb, var(--ink) calc(15% * var(--card-opacity, 1)), transparent);
  border-color: transparent; /* кромку рисует ::before */
  /* «стеклянная плита»: максимальный блюр — отграничение от liquid (18px) */
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.3),
    0 32px 72px rgba(0, 0, 0, 0.32),
    0 0 100px color-mix(in srgb, var(--accent) 9%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 0 -18px 36px rgba(255, 255, 255, 0.04);
}
body.card-glass .card:hover {
  box-shadow:
    0 14px 42px rgba(0, 0, 0, 0.34),
    0 36px 84px rgba(0, 0, 0, 0.38),
    0 0 120px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 0 -18px 36px rgba(255, 255, 255, 0.05);
}

/* Градиентная кромка: кольцо через mask (content-box вычитается из полного).
   z-index 2 — кромка поверх .card-banner, стеклянный контур не прерывается. */
body.card-glass .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.16) 26%,
    color-mix(in srgb, var(--accent) 50%, transparent) 52%,
    color-mix(in srgb, var(--accent-2) 26%, transparent) 72%,
    rgba(255, 255, 255, 0.1) 84%,
    rgba(255, 255, 255, 0.42) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: var(--card-opacity, 1); /* cardOpacity действует и на кромку */
  z-index: 2;
}

/* Яркая верхняя рефрактивная кромка (1px white .5→0) + спекулярный блик
   сверху-слева + медленно дрейфующий акцентный отблеск */
body.card-glass .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 2.5%),
    radial-gradient(64% 42% at 18% 0%, rgba(255, 255, 255, 0.3), transparent 70%),
    radial-gradient(30% 18% at 70% -4%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(46% 32% at 80% 106%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  background-repeat: no-repeat;
  animation: glass-drift 8s ease-in-out infinite alternate;
}
@keyframes glass-drift {
  from { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;   opacity: 0.85; }
  to   { background-position: 0% 0%, 5% 6%, -7% -8%, 4% -5%; opacity: 1; }
}

/* Элементы внутри — тоже стеклянные: лёгкий блюр + насыщенность + hairline */
body.card-glass .link-btn,
body.card-glass .player,
body.card-glass .social-btn,
body.card-glass .badge {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
}
body.card-glass .link-btn {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  body.card-glass .card::after { animation: none !important; }
}

/* ---------- terminal: хакерский терминал ---------- */

body.card-terminal .card {
  /* cardOpacity: вложенный color-mix множит альфу поверхности */
  background-color: color-mix(in srgb, color-mix(in srgb, var(--bg) 84%, #000) calc(var(--card-opacity, 1) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--accent) calc(62% * var(--card-opacity, 1)), transparent);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 18px 45px rgba(0, 0, 0, 0.5),
    0 0 28px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 0 60px color-mix(in srgb, var(--accent) 5%, transparent);
  text-align: left;
  font-family: var(--font-mono);
}
body.card-terminal .sparkle { display: none; }
/* баннер внутри рамки терминала: внутренняя дуга = radius 6px - border 1px */
body.card-terminal .card-banner { top: 0; left: 0; right: 0; border-radius: 5px 5px 0 0; }

/* CRT-сканлайны поверх всей карточки (тёмная строка каждые 3px,
   суммарная плотность ~5% — тексту не мешает) */
body.card-terminal .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.42) 0 1px,
    transparent 1px 3px);
  opacity: 0.12;
  pointer-events: none;
}

/* «титул-бар» окна терминала: три точки сверху.
   Сброс каёмки classic (::before базовой карточки): бар — в потоке,
   без абсолютного позиционирования и mask-кольца */
body.card-terminal .card::before {
  content: "";
  display: block;
  position: static;
  inset: auto;
  height: 26px;
  margin: -26px -14px 16px;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: none;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  z-index: auto;
}

body.card-terminal .name {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  letter-spacing: 0;
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* `$ whoami` перед именем (переопределяет glitch-псевдоэлементы) */
body.card-terminal .name::before,
body.card-terminal .name.has-glitch::before,
body.card-terminal .name.has-glitch:hover::before {
  content: "$ whoami";
  position: static;
  display: block;
  opacity: 1;
  inset: auto;
  margin-bottom: 3px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-shadow: none;
  animation: none;
  clip-path: none;
  transform: none;
}
/* мигающий block-cursor после имени */
body.card-terminal .name::after,
body.card-terminal .name.has-glitch::after,
body.card-terminal .name.has-glitch:hover::after {
  content: "▌";
  position: static;
  display: inline;
  opacity: 1;
  inset: auto;
  margin-left: 3px;
  color: var(--accent);
  text-shadow: none;
  clip-path: none;
  transform: none;
  animation: term-blink 1.1s steps(1) infinite;
}
@keyframes term-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

body.card-terminal .handle { letter-spacing: 0.02em; }
body.card-terminal .location,
body.card-terminal .badges { justify-content: flex-start; }

/* био — вывод команды cat */
body.card-terminal .bio {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}
body.card-terminal .bio::before {
  content: "$ cat bio.txt";
  display: block;
  margin-bottom: 3px;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
}
body.card-terminal .bio:empty::before { content: none; }

body.card-terminal .socials { justify-content: flex-start; margin: 16px 0 18px; }
body.card-terminal .social-btn {
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
}
body.card-terminal .social-btn:hover,
body.card-terminal .social-btn:focus-visible {
  transform: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ссылки — строки терминала `> icon title`, hover подсвечивает строку */
body.card-terminal .links { gap: 2px; margin-top: 14px; }
body.card-terminal .link-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  padding: 9px 12px;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--accent) 88%, var(--ink));
}
body.card-terminal .link-btn::before {
  content: ">";
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent);
}
body.card-terminal .link-btn::after { display: none; } /* без пробегающего блика */
body.card-terminal .link-btn .link-ic { color: color-mix(in srgb, var(--accent) 75%, transparent); }
body.card-terminal .link-btn .link-title {
  text-align: left;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
body.card-terminal .link-btn .link-arrow { display: none; }
body.card-terminal .link-btn.revealed,
body.card-terminal .link-btn.revealed:hover,
body.card-terminal .link-btn.revealed:focus-visible,
body.card-terminal .link-btn:hover,
body.card-terminal .link-btn:focus-visible {
  transform: none; /* ни магнита, ни подъёма — строки не прыгают */
}
body.card-terminal .link-btn:hover,
body.card-terminal .link-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: none;
}
body.card-terminal .link-btn:hover .link-ic { transform: none; color: var(--accent); }

body.card-terminal .player {
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: none;
  font-family: var(--font-mono);
}
body.card-terminal .marquee { letter-spacing: 0.14em; }
body.card-terminal .card-footer {
  border-top-color: color-mix(in srgb, var(--accent) 22%, transparent);
  font-family: var(--font-mono);
}

/* reduced motion: глушим глобальное отключение псевдоэлементов имени —
   в терминале это контент ($ whoami + курсор), а не эффект */
@media (prefers-reduced-motion: reduce) {
  body.card-terminal .name::before { display: block !important; }
  body.card-terminal .name::after {
    display: inline !important;
    animation: none !important;
  }
}

/* ---------- minimal: без карточки ---------- */

body.card-minimal .card {
  background: transparent;
  background-image: none; /* и текстуры поверхности не показываем */
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.card-minimal .card::before,
body.card-minimal .card::after { content: none; } /* без каёмки classic — карточки нет */
body.card-minimal .sparkle,
body.card-minimal .spotlight { display: none; }

/* ссылки — текстовые строки-список: без пилюль, тонкий разделитель,
   при hover подчёркивается заголовок */
body.card-minimal .links { gap: 0; margin-top: 18px; }
body.card-minimal .link-btn {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none;
  border-radius: 0;
  padding: 13px 2px;
}
body.card-minimal .link-btn::after { display: none; } /* без блика — чистый текст */
body.card-minimal .link-btn .link-ic { color: var(--ink-soft); }
body.card-minimal .link-btn .link-arrow { opacity: 0.3; }
body.card-minimal .link-btn.revealed,
body.card-minimal .link-btn.revealed:hover,
body.card-minimal .link-btn.revealed:focus-visible,
body.card-minimal .link-btn:hover,
body.card-minimal .link-btn:focus-visible {
  transform: none; /* строки не прыгают */
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: none;
}
body.card-minimal .link-btn:hover .link-title,
body.card-minimal .link-btn:focus-visible .link-title {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
body.card-minimal .link-btn:hover .link-ic { transform: none; color: var(--accent); }
body.card-minimal .player,
body.card-minimal .social-btn {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
body.card-minimal .social-btn:hover,
body.card-minimal .social-btn:focus-visible {
  transform: none;
  background: transparent;
  color: var(--accent);
  border-color: transparent;
  box-shadow: none;
}
body.card-minimal .badge {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- neon: светящаяся неоновая рамка ---------- */

body.card-neon .card {
  background-color: color-mix(in srgb, color-mix(in srgb, var(--bg) 90%, #000) calc(var(--card-opacity, 1) * 100%), transparent);
  border: 2px solid color-mix(in srgb, var(--accent) calc(var(--card-opacity, 1) * 100%), transparent);
  border-radius: 18px;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 55px color-mix(in srgb, var(--accent) 30%, transparent),
    0 18px 45px rgba(0, 0, 0, 0.45),
    inset 0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
  /* статичное свечение по умолчанию (glowMode: static);
     пульс/блик — только с классами glow-blink/glow-run (applyGlowMode) */
  animation: card-in 1.1s var(--ease-out);
}
/* glowMode: blink — прежнее «дыхание» неоновой трубки поверх входной анимации */
body.card-neon.glow-blink .card {
  animation: card-in 1.1s var(--ease-out), neon-pulse 3.4s ease-in-out 1.3s infinite;
}
/* glowMode: run — чуть сильнее внешнее свечение под бегущий блик */
body.card-neon.glow-run .card {
  box-shadow:
    0 0 24px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 70px color-mix(in srgb, var(--accent) 36%, transparent),
    0 18px 45px rgba(0, 0, 0, 0.45),
    inset 0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
}
@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 18px color-mix(in srgb, var(--accent) 60%, transparent),
      0 0 55px color-mix(in srgb, var(--accent) 30%, transparent),
      0 18px 45px rgba(0, 0, 0, 0.45),
      inset 0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  50% {
    box-shadow:
      0 0 26px color-mix(in srgb, var(--accent) 75%, transparent),
      0 0 75px color-mix(in srgb, var(--accent) 40%, transparent),
      0 18px 45px rgba(0, 0, 0, 0.45),
      inset 0 0 40px color-mix(in srgb, var(--accent) 16%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.card-neon .card { animation: card-in 1.1s var(--ease-out) !important; }
  body.card-neon.glow-run .card::before { animation: none !important; }
}
/* Горячее ядро неоновой трубки: бело-акцентный градиент по контуру,
   z-index 2 — поверх баннера, трубка не прерывается сверху */
body.card-neon .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent-2) 80%, #fff) 0%,
    var(--accent) 42%,
    color-mix(in srgb, var(--accent) 72%, #000) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--card-opacity, 1);
  pointer-events: none;
  z-index: 2;
}
/* glowMode: run — бегущий блик по периметру рамки: conic-градиент,
   вращаемый @property-углом --neon-ang (кольцо-маска как у базовой трубки) */
body.card-neon.glow-run .card::before {
  background: conic-gradient(from var(--neon-ang),
    transparent 0turn 0.62turn,
    var(--accent) 0.8turn,
    #fff 0.9turn,
    var(--accent) 0.94turn,
    transparent 1turn);
  animation: neon-rot 2.6s linear infinite;
}
@keyframes neon-rot { to { --neon-ang: 1turn; } }
/* баннер от самого края карточки: инсет давал видимую границу-рамку;
   дуга = radius 18px - border 2px, углы совпадают с трубкой */
body.card-neon .card-banner { top: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; }
body.card-neon .name {
  text-shadow:
    0 0 12px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 36px color-mix(in srgb, var(--accent) 30%, transparent);
}
body.card-neon .avatar {
  border-color: var(--accent);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 0 16px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}
body.card-neon .link-btn,
body.card-neon .player,
body.card-neon .social-btn,
body.card-neon .badge {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px;
}
body.card-neon .social-btn { color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 15%, transparent); }
body.card-neon .social-btn:hover,
body.card-neon .social-btn:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
body.card-neon .link-btn:hover,
body.card-neon .link-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ---------- frost: лёд — холодное сине-белое стекло ---------- */

body.card-frost .card {
  /* ледяная подложка: холодный сине-белый тинт rgb(190,215,255) на --bg */
  background-color: color-mix(in srgb, color-mix(in srgb, rgb(190, 215, 255) 26%, var(--bg)) calc(var(--card-opacity, 1) * 100%), transparent);
  border: 1px solid color-mix(in srgb, rgb(190, 215, 255) calc(55% * var(--card-opacity, 1)), transparent);
  border-radius: 20px;
  backdrop-filter: blur(28px) saturate(1.25) brightness(1.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.25) brightness(1.08);
  /* вся гамма холодная: тени синеватые, кромки — ледяные */
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.35),
    0 2px 10px rgba(10, 30, 60, 0.28),
    0 0 70px rgba(150, 190, 255, 0.14),
    inset 0 1px 1px rgba(220, 238, 255, 0.55),
    inset 0 -1px 1px rgba(80, 120, 180, 0.12),
    inset 0 0 0 1px rgba(190, 215, 255, 0.18);
}
body.card-frost .card:hover {
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.4),
    0 3px 12px rgba(10, 30, 60, 0.32),
    0 0 90px rgba(150, 190, 255, 0.18),
    inset 0 1px 1px rgba(220, 238, 255, 0.6),
    inset 0 -1px 1px rgba(80, 120, 180, 0.12),
    inset 0 0 0 1px rgba(190, 215, 255, 0.22);
}
/* ледяная кромка: ослепительный сине-белый верх, холодный низ;
   z-index 2 — контур поверх баннера */
body.card-frost .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(230, 243, 255, 0.95) 0%,
    rgba(190, 215, 255, 0.28) 34%,
    rgba(150, 190, 255, 0.4) 68%,
    rgba(210, 230, 255, 0.42) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--card-opacity, 1);
  pointer-events: none;
  z-index: 2;
}
/* иней по углам (усилен) + ледяная кромка-полоса сверху */
body.card-frost .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(220, 238, 255, 0.3) 0%, transparent 16%),
    radial-gradient(58% 42% at 0% 0%, rgba(190, 215, 255, 0.28), transparent 65%),
    radial-gradient(48% 36% at 100% 0%, rgba(190, 215, 255, 0.22), transparent 65%),
    radial-gradient(62% 46% at 100% 100%, rgba(170, 205, 255, 0.18), transparent 65%),
    radial-gradient(52% 42% at 0% 100%, rgba(190, 215, 255, 0.15), transparent 65%);
  background-repeat: no-repeat;
}
/* аватарка — круг с ледяным ободком */
body.card-frost .avatar {
  border-color: rgba(215, 235, 255, 0.85);
  box-shadow:
    0 6px 18px rgba(5, 20, 40, 0.5),
    0 0 0 4px rgba(190, 215, 255, 0.22),
    0 0 22px rgba(150, 195, 255, 0.45);
}
/* кнопки морозные: холодный tint + hairline rgba(190,215,255,.25) */
body.card-frost .link-btn,
body.card-frost .player,
body.card-frost .social-btn,
body.card-frost .badge {
  background: rgba(190, 215, 255, 0.1);
  border-color: rgba(190, 215, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
body.card-frost .link-btn:hover,
body.card-frost .link-btn:focus-visible {
  background: rgba(190, 215, 255, 0.16);
  border-color: rgba(190, 215, 255, 0.45);
}
/* frost — эталонный чёткий баннер: маска-фейд не нужна;
   дуга = radius 20px - border 1px */
body.card-frost .card-banner {
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 19px 19px 0 0;
}

/* ---------- retro: Windows 95 — серая карточка с bevel-рамкой ---------- */

/* Классический win95-bevel: белые верх/лево, тёмные низ/право, два слоя.
   pressed — инверсия (тёмные верх/лево). */
body.card-retro .card {
  /* светло-серая поверхность #c3c7cb, ТЁМНЫЙ текст (паттерн paper:
     переопределяем --ink/--ink-soft/--line на .card) */
  --ink: #141414;
  --ink-soft: #454545;
  --line: rgba(0, 0, 0, 0.28);
  --line-soft: rgba(0, 0, 0, 0.16);
  --track: rgba(0, 0, 0, 0.18);
  background-color: #c3c7cb;
  background-image: none;
  border: none;
  border-radius: 2px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #0a0a0a,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080,
    0 18px 45px rgba(0, 0, 0, 0.45);
}
body.card-retro .card::before { content: none; } /* плоская панель — без глянцевой каёмки classic */
/* баннер внутри bevel-рамки: отступ 2px, чтобы кромка оставалась видна */
body.card-retro .card-banner { top: 2px; left: 2px; right: 2px; border-radius: 0; }
/* шрифт не трогаем; акцентные ТЕКСТЫ темнее — контраст на сером */
body.card-retro .handle,
body.card-retro .link-btn .link-ic,
body.card-retro .badge-ic,
body.card-retro .loc-pin,
body.card-retro .cf-views svg,
body.card-retro .mq-sep {
  color: color-mix(in srgb, var(--accent) 45%, #141414);
}
/* аватарка — квадрат с bevel-рамкой (светлые верх/лево, тёмные низ/право) */
body.card-retro .avatar {
  border-radius: 4px;
  border: 3px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow:
    0 0 0 1px #0a0a0a,
    2px 2px 0 rgba(0, 0, 0, 0.4);
}
/* кнопки — серые bevel-кнопки: при hover не двигаются, при active — pressed */
body.card-retro .link-btn {
  border: none;
  border-radius: 0;
  background: #c3c7cb;
  color: var(--ink);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #0a0a0a,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}
body.card-retro .link-btn::after { display: none; } /* без блика — плоская панель */
/* win95-кнопки не ездят: глушим магнит/hover-подъём каскада */
body.card-retro .link-btn.revealed,
body.card-retro .link-btn.revealed:hover,
body.card-retro .link-btn.revealed:focus-visible,
body.card-retro .link-btn:hover,
body.card-retro .link-btn:focus-visible {
  transform: none;
}
body.card-retro .link-btn:hover,
body.card-retro .link-btn:focus-visible {
  background: #ced2d6;
  border-color: transparent;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #0a0a0a,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}
body.card-retro .link-btn.revealed:active,
body.card-retro .link-btn:active {
  /* pressed-bevel: инверсия кромок, кнопка «вдавлена» */
  background: #bcc0c4;
  box-shadow:
    inset 1px 1px 0 #0a0a0a,
    inset -1px -1px 0 #ffffff,
    inset 2px 2px 0 #808080,
    inset -2px -2px 0 #dfdfdf;
}
body.card-retro .link-btn:hover .link-ic { transform: none; }
body.card-retro .player {
  border: none;
  border-radius: 0;
  background: #c3c7cb;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #ffffff,
    inset 2px 2px 0 #0a0a0a,
    inset -2px -2px 0 #dfdfdf; /* плеер «утоплен» (sunken), как поле в win95 */
}
body.card-retro .social-btn {
  border: none;
  border-radius: 0;
  background: #c3c7cb;
  color: var(--ink);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #0a0a0a,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}
body.card-retro .social-btn:hover,
body.card-retro .social-btn:focus-visible {
  transform: none;
  background: #ced2d6;
  color: color-mix(in srgb, var(--accent) 45%, #141414);
  border-color: transparent;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #0a0a0a,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}
body.card-retro .social-btn:active {
  background: #bcc0c4;
  box-shadow:
    inset 1px 1px 0 #0a0a0a,
    inset -1px -1px 0 #ffffff,
    inset 2px 2px 0 #808080,
    inset -2px -2px 0 #dfdfdf;
}
body.card-retro .badge {
  border: none;
  border-radius: 0;
  background: #c3c7cb;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #808080;
}

/* ---------- soft: пастельная мягкая СВЕТЛАЯ карточка ---------- */

body.card-soft .card {
  /* светлый пастельный градиент лаванда→розовый→персик (низкая
     насыщенность), ТЁМНЫЙ текст — паттерн paper: --ink на .card */
  --ink: #38304a;
  --ink-soft: #6e6377;
  --line: rgba(80, 55, 90, 0.16);
  --line-soft: rgba(80, 55, 90, 0.1);
  --track: rgba(80, 55, 90, 0.14);
  background-color: #f6ecf4;
  background-image: linear-gradient(160deg,
    #efe6f8 0%,
    #f8e6f0 46%,
    #fbeadd 100%);
  border: none;
  border-radius: 32px;
  padding: 52px 34px 40px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* глубокая мягкая ЦВЕТНАЯ тень (сливовая), без рамки */
  box-shadow:
    0 30px 70px rgba(120, 80, 130, 0.3),
    0 10px 26px rgba(120, 80, 130, 0.18),
    0 2px 6px rgba(120, 80, 130, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
body.card-soft .card:hover {
  box-shadow:
    0 36px 84px rgba(120, 80, 130, 0.34),
    0 12px 30px rgba(120, 80, 130, 0.2),
    0 2px 6px rgba(120, 80, 130, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* soft — «без рамки»: глянцевой каёмки classic не даём проступать */
body.card-soft .card::before { content: none; }
/* soft задаёт background-image (пастельный градиент) — перекрывает текстуры
   из секции ниже; возвращаем их вторым слоем поверх градиента */
body.card-soft .card.card-tex-noise {
  background-image:
    linear-gradient(160deg, #efe6f8 0%, #f8e6f0 46%, #fbeadd 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: auto, 180px 180px;
  background-blend-mode: normal, overlay;
}
body.card-soft .card.card-tex-frost {
  background-image:
    linear-gradient(160deg, #efe6f8 0%, #f8e6f0 46%, #fbeadd 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.3'/%3E%3C/svg%3E"),
    repeating-linear-gradient(115deg, rgba(120, 80, 130, 0.03) 0 1px, transparent 1px 6px),
    radial-gradient(130% 90% at 50% -12%, rgba(255, 255, 255, 0.35), transparent 58%);
  background-size: auto, 200px 200px, auto, auto;
  background-blend-mode: normal, soft-light, normal, normal;
}
/* акцентные ТЕКСТЫ темнее — контраст ≥4.5 на светлой пастели */
body.card-soft .handle,
body.card-soft .link-btn .link-ic,
body.card-soft .badge-ic,
body.card-soft .loc-pin,
body.card-soft .cf-views svg,
body.card-soft .mq-sep {
  color: color-mix(in srgb, var(--accent) 48%, #3a3048);
}
/* аватарка — squircle 30% */
body.card-soft .avatar {
  border-radius: 30%;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 8px 20px rgba(120, 80, 130, 0.3),
    0 0 0 5px rgba(255, 255, 255, 0.4);
}
/* кнопки — белые полупрозрачные пилюли */
body.card-soft .link-btn {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 17px 24px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 20px rgba(120, 80, 130, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.card-soft .link-btn:hover,
body.card-soft .link-btn:focus-visible {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 12px 28px rgba(120, 80, 130, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body.card-soft .player,
body.card-soft .social-btn,
body.card-soft .badge {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 16px rgba(120, 80, 130, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.card-soft .player { border-radius: 22px; }
body.card-soft .badge { border-radius: 999px; }
/* мелкий текст виджетов — без opacity-просадки (контраст на светлом) */
body.card-soft .widget-sub,
body.card-soft .widget-note-sub { color: var(--ink-soft); opacity: 1; }

/* ---------- v5: brutal / holo / paper / window ---------- */

/* brutal: брутализм — толстая чернильная рамка, жёсткая офсетная тень,
   заметный наклон всей карточки */
body.card-brutal .card {
  background-color: color-mix(in srgb, var(--bg) 88%, #000);
  border: 4px solid var(--ink);
  border-radius: 6px;
  transform: rotate(-1.2deg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* двойная жёсткая тень: акцентный оттиск 12px + чёрная подложка 18px */
  box-shadow:
    12px 12px 0 color-mix(in srgb, var(--accent) 85%, #000),
    18px 18px 0 rgba(0, 0, 0, 0.28);
}
/* брутальной чернильной рамке глянцевая каёмка classic не нужна */
body.card-brutal .card::before { content: none; }
body.card-brutal .link-btn,
body.card-brutal .player,
body.card-brutal .social-btn,
body.card-brutal .badge {
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 70%, #fff 4%);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
/* hover: кнопка приподнимается, тень растёт; active — вдавлена */
body.card-brutal .link-btn.revealed:hover,
body.card-brutal .link-btn.revealed:focus-visible,
body.card-brutal .link-btn:hover,
body.card-brutal .link-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55);
}
body.card-brutal .link-btn.revealed:active,
body.card-brutal .link-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
body.card-brutal .name {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* баннер внутри 4px-рамки: внутренняя дуга = radius 6px - border 4px */
body.card-brutal .card-banner { top: 0; left: 0; right: 0; border-radius: 2px 2px 0 0; }
/* аватарка — квадрат 8px с чернильной рамкой 3px */
body.card-brutal .avatar {
  border-radius: 8px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

/* holo: голографическая радужная кромка, вращающийся конический градиент */
@property --holo-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
/* вращающиеся conic-градиенты рамок: бегущий блик neon (glowMode: run)
   и аврора-кромка card-aurora */
@property --neon-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --aurora-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
body.card-holo .card {
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--bg) 90%, #000), color-mix(in srgb, var(--bg) 90%, #000)) padding-box,
    conic-gradient(from var(--holo-ang), #ff8a2a, #ff5ea8, #845ec2, #2ee6ff, #4ade80, #ffd34d, #ff8a2a) border-box;
  animation: holo-spin 7s linear infinite;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 40px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* стеклянная внутренняя каёмка сразу за радужным бордюром: блик сверху,
   спокойный низ — кромка читается «лакированной», а не плоской лентой */
body.card-holo .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.08) 32%,
    rgba(255, 255, 255, 0.05) 62%,
    rgba(255, 255, 255, 0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--card-opacity, 1);
  pointer-events: none;
  z-index: 2;
}
/* баннер внутри радужного бордюра: дуга = radius 18px - border 2px */
body.card-holo .card-banner { top: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; }
/* периодический holographic shimmer: тонкая радужная полоса-блик проходит
   по карточке раз в ~6с (screen-blend, пиковая альфа ≤ .22 ≈ opacity .25) */
body.card-holo .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255, 138, 224, 0.16) 46.5%,
    rgba(107, 232, 255, 0.22) 50%,
    rgba(255, 214, 102, 0.16) 53.5%,
    transparent 60%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 120% 0;
  mix-blend-mode: screen;
  opacity: 0;
  animation: holo-shimmer 6s ease-in-out infinite;
}
@keyframes holo-shimmer {
  0%   { background-position: 120% 0; opacity: 0; }
  8%   { opacity: 1; }
  42%  { background-position: -80% 0; opacity: 1; }
  50%, 100% { background-position: -80% 0; opacity: 0; }
}
@keyframes holo-spin { to { --holo-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  body.card-holo .card { animation: none; }
  body.card-holo .card::after { animation: none !important; opacity: 0 !important; }
}
body.card-holo .link-btn,
body.card-holo .player,
body.card-holo .social-btn,
body.card-holo .badge {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* paper: бумага — светлая карточка со скотчем сверху и лёгким наклоном */
body.card-paper .card {
  --ink: #2a2420;
  --ink-soft: #7c7264;
  --line: rgba(60, 45, 25, 0.14);
  background: #f3ede1;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    repeating-linear-gradient(0deg, rgba(60, 45, 25, 0.025) 0 2px, transparent 2px 5px);
  border: none;
  border-radius: 5px;
  transform: rotate(0.5deg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* тонкий срез бумаги по контуру + мягкая глубокая тень */
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.08),
    0 22px 50px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(60, 45, 25, 0.1);
}
body.card-paper .card::before {
  content: "";
  position: absolute;
  inset: auto; /* сброс каёмки classic: скотч — не кольцо */
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 108px;
  height: 24px;
  padding: 0;
  border-radius: 1px;
  background: rgba(255, 250, 220, 0.6);
  border-left: 1px dashed rgba(0, 0, 0, 0.12);
  border-right: 1px dashed rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  z-index: 3;
}
/* загнутый уголок листа снизу справа: изнанка + тонкая тень сгиба */
body.card-paper .card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg,
    #f6efdd 0%,
    #ddd0b3 46%,
    rgba(60, 45, 25, 0.26) 50%,
    rgba(60, 45, 25, 0) 76%);
  border-radius: 0 0 5px 0;
  pointer-events: none;
  z-index: 2;
}
body.card-paper .link-btn,
body.card-paper .player,
body.card-paper .social-btn,
body.card-paper .badge {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(60, 45, 25, 0.16);
  box-shadow: 0 2px 6px rgba(60, 45, 25, 0.1);
}
body.card-paper .card-banner { top: 0; left: 0; right: 0; border-radius: 5px 5px 0 0; }
body.card-paper .name { text-shadow: none; }

/* window: окно ОС — титульная полоса с тремя точками */
body.card-window .card {
  padding-top: 50px;
  border-radius: 12px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ink) calc(16% * var(--card-opacity, 1)), transparent);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 48px 100px rgba(0, 0, 0, 0.35),
    0 0 80px color-mix(in srgb, var(--accent) 6%, transparent);
}
/* титул-бар: градиент «как у ОС» + светлая кромка сверху.
   Сброс каёмки classic (::before базовой карточки): без mask-кольца */
body.card-window .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  padding: 0;
  border-radius: 0; /* обрезает overflow:hidden карточки */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 11%, transparent),
    color-mix(in srgb, var(--ink) 6%, transparent));
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  z-index: 2;
}
body.card-window .card::after {
  content: "";
  position: absolute;
  top: 11.5px;
  left: 13px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
  z-index: 2;
}
/* баннер ниже титул-бара: верхние углы прямые — это середина окна */
body.card-window .card-banner { top: 34px; left: 0; right: 0; border-radius: 0; }

/* ============================================================
   v7: liquid / aurora / pixel
   ============================================================ */

/* ---------- liquid: жидкое стекло-пузырь с «водной линзой» ---------- */

body.card-liquid .card {
  border-radius: 34px;
  background-color: color-mix(in srgb, var(--card) calc(var(--card-opacity, 1) * 45%), transparent);
  background-image: linear-gradient(135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(18px) saturate(1.6) brightness(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.38);
  /* overflow: hidden — каустики ::before не вылезают за пузырь;
     баннер внутри карточки (как у frost): клип по радиусу не страдает */
  overflow: hidden;
  /* мягкая глубокая тень + лёгкое свечение акцента снизу */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 6px 18px rgba(0, 0, 0, 0.28),
    0 -14px 44px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
/* Дрейфующие каустики: размытые радиальные блики (кромка classic заменена) */
body.card-liquid .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0;
  background:
    radial-gradient(38% 30% at 24% 20%, rgba(255, 255, 255, 0.14), transparent 70%),
    radial-gradient(30% 26% at 76% 30%, rgba(255, 255, 255, 0.1), transparent 70%),
    radial-gradient(42% 34% at 55% 85%, rgba(255, 255, 255, 0.1), transparent 72%);
  background-repeat: no-repeat;
  -webkit-mask: none;
  mask: none;
  filter: blur(6px);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  animation: liquid-caustic 14s ease-in-out infinite alternate;
}
@keyframes liquid-caustic {
  from { transform: translate(-2.5%, -1.5%) scale(1); }
  to   { transform: translate(2.5%, 2%) scale(1.06); }
}
/* Спекулярная полоска-блик сверху-слева */
body.card-liquid .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(128deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.12) 12%,
    transparent 30%);
  opacity: 0.5;
}
/* Внутренние элементы — лёгкая стеклянность (паттерн card-glass) */
body.card-liquid .link-btn,
body.card-liquid .player,
body.card-liquid .social-btn,
body.card-liquid .badge {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
}
body.card-liquid .link-btn {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* баннер внутри пузыря: дуга = radius 34px - border 1px (подход frost) */
body.card-liquid .card-banner { top: 0; left: 0; right: 0; border-radius: 33px 33px 0 0; }

@media (prefers-reduced-motion: reduce) {
  body.card-liquid .card::before { animation: none !important; }
}

/* ---------- aurora: тёмное стекло + северное сияние по рамке ---------- */

body.card-aurora .card {
  background-color: color-mix(in srgb, var(--bg) calc(80% * var(--card-opacity, 1)), transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  /* чуть сильнее внутреннее свечение (inset teal) */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(103, 232, 249, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 46px rgba(103, 232, 249, 0.07);
}
/* Рамка-аврора: вращающийся conic-градиент по периметру
   (mask-кольцо как у neon/holo), чуть размыт и приглушён */
body.card-aurora .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--aurora-ang),
    #67e8f9, #a78bfa, #f472b6, #34d399, #67e8f9);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.9;
  filter: blur(0.6px) saturate(1.3);
  pointer-events: none;
  z-index: 2;
  animation: aurora-rot 9s linear infinite;
}
@keyframes aurora-rot { to { --aurora-ang: 1turn; } }
/* Верхние «шторы» авроры: 3 наклонных мягких луча teal/violet/pink
   (10–13% opacity, только верхняя половина карточки) + северные блики.
   Медленный дрейф — aurora-drift двигает позиции слоёв */
body.card-aurora .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(104deg, transparent 16%, rgba(94, 234, 212, 0.14) 36%, transparent 52%),
    linear-gradient(78deg, transparent 40%, rgba(167, 139, 250, 0.13) 58%, transparent 74%),
    linear-gradient(126deg, transparent 58%, rgba(244, 114, 182, 0.12) 76%, transparent 90%),
    radial-gradient(46% 34% at 18% 8%, rgba(103, 232, 249, 0.16), transparent 70%),
    radial-gradient(42% 32% at 84% 90%, rgba(167, 139, 250, 0.12), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 55%, 100% 55%, 100% 55%, auto, auto;
  filter: blur(3px);
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;    opacity: 0.85; }
  to   { background-position: 3% 0%, -3% 0%, 2% 0%, 6% 7%, -6% -7%; opacity: 1; }
}
/* баннер внутри рамки: дуга = radius 24px - border 1px */
body.card-aurora .card-banner { top: 0; left: 0; right: 0; border-radius: 23px 23px 0 0; }
@media (prefers-reduced-motion: reduce) {
  body.card-aurora .card::before,
  body.card-aurora .card::after { animation: none !important; }
}

/* ---------- pixel: 8-bit карточка со срубленными углами ---------- */

body.card-pixel .card {
  border-radius: 6px;
  border: 3px solid var(--ink);
  /* плотный фон: bg с лёгкой примесью ink (непрозрачный «картридж») */
  background-color: color-mix(in srgb, var(--bg) 92%, var(--ink));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* срубленные 8-bit углы по 10px; clip-path режет и box-shadow —
     поэтому внешняя тень уходит в filter: drop-shadow на .scene (ниже) */
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%,
    0 calc(100% - 10px), 0 10px
  );
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, 0.28),
    inset 4px 4px 0 rgba(255, 255, 255, 0.07);
}
/* жёсткая внешняя тень 0 6px 0 — на родителе (clip-path карточки
   отрезал бы drop-shadow, повешенный на саму .card) */
body.card-pixel .scene {
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5));
}
/* плоский пиксель — без глянцевой каёмки classic */
body.card-pixel .card::before { content: none; }
/* баннер клипается срубленными углами карточки, своя дуга не нужна */
body.card-pixel .card-banner { top: 0; left: 0; right: 0; border-radius: 3px 3px 0 0; }
body.card-pixel .avatar {
  image-rendering: pixelated;
  border-radius: 4px;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
body.card-pixel .link-btn {
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.12s steps(2) end; /* ретро-ступенчатость */
}
/* после каскада (.mg-on) оставляем ту же steps-механику — иначе быстрый
   0.2s transition магнита перекрыл бы ретро-ступенчатость */
body.card-pixel .link-btn.revealed.mg-on { transition: all 0.12s steps(2) end; }
body.card-pixel .link-btn::after { display: none; } /* без глянцевого блика */
/* hover = полунажатие: сдвиг вниз, тень схлопывается */
body.card-pixel .link-btn.revealed:hover,
body.card-pixel .link-btn.revealed:focus-visible,
body.card-pixel .link-btn:hover,
body.card-pixel .link-btn:focus-visible {
  transform: translate(0, 2px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
body.card-pixel .link-btn.revealed:active,
body.card-pixel .link-btn:active {
  transform: translate(0, 4px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
body.card-pixel .link-btn:hover .link-ic { transform: none; }
body.card-pixel .player,
body.card-pixel .social-btn,
body.card-pixel .badge {
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
body.card-pixel .social-btn { transition: all 0.12s steps(2) end; }
body.card-pixel .social-btn:hover,
body.card-pixel .social-btn:focus-visible {
  transform: translate(0, 2px);
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ============================================================
   ТЕКСТУРА ПОВЕРХНОСТИ КАРТОЧКИ (CONFIG.cardTexture → класс на #card)
   Слои — background-image поверх background-color карточки: всегда
   ПОД контентом, border-radius наследуется (клип по умолчанию),
   событий не перехватывают. Работают поверх classic и glass
   (terminal тоже); minimal сбрасывает background-image выше.
   ============================================================ */

/* noise: плёночное зерно (SVG feTurbulence), overlay-наложение */
.card.card-tex-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-blend-mode: overlay;
}

/* frost: плотная матовость — облачная турбулентность + тонкие полосы
   + внутренний световой ореол сверху */
.card.card-tex-frost {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.3'/%3E%3C/svg%3E"),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 6px),
    radial-gradient(130% 90% at 50% -12%, rgba(255, 255, 255, 0.09), transparent 58%);
  background-size: 200px 200px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
}

/* На glass фон карточки почти прозрачный — blend не с чем, слои идут
   в полную силу и выбеливают стекло. Ослабляем текстуры для glass. */
body.card-glass .card.card-tex-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

body.card-glass .card.card-tex-frost {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.18'/%3E%3C/svg%3E"),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 6px),
    radial-gradient(130% 90% at 50% -12%, rgba(255, 255, 255, 0.045), transparent 58%);
}

/* ============================================================
   РАМКА АВАТАРКИ (CONFIG.avatarFrame → класс no-avatar-frame на <body>)
   false → у .avatar убираем border и внешнее кольцо-тень 0 0 0 6px
   (drop-shadow остаётся), дышащее кольцо .avatar-wrap::before скрыто.
   Обводка #viz и косметика на канвасе не затрагиваются.
   ============================================================ */

body.no-avatar-frame .avatar {
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

body.no-avatar-frame .avatar-wrap::before {
  display: none;
}

/* ---------- Темы: второй набор (класс на <html>) ---------- */

/* Дракула: фирменный серо-фиолетовый #282a36 (светлее других тёмных) */
html.theme-dracula {
  --bg: #282a36;
  --ink: #f8f8f2;
  --ink-soft: #a9b2d6;
  --card: rgba(68, 71, 90, 0.5);
  --card-border: rgba(255, 255, 255, 0.1);
  --accent: #bd93f9;
  --accent-2: #ff79c6;
  --accent-soft: rgba(189, 147, 249, 0.35);
  --on-accent: #282a36;
  --blob1: rgba(189, 147, 249, 0.4);
  --blob2: rgba(255, 121, 198, 0.32);
  --blob3: rgba(139, 233, 253, 0.28);
  --blob4: rgba(98, 114, 164, 0.35);
}

/* Норд: полярная ночь — заметно светлее других тёмных, морозный */
html.theme-nord {
  --bg: #2e3440;
  --ink: #eceff4;
  --ink-soft: #a3adc2;
  --card: rgba(59, 66, 82, 0.55);
  --card-border: rgba(216, 222, 233, 0.12);
  --accent: #88c0d0;
  --accent-2: #81a1c1;
  --accent-soft: rgba(136, 192, 208, 0.35);
  --on-accent: #2e3440;
  --blob1: rgba(136, 192, 208, 0.38);
  --blob2: rgba(129, 161, 193, 0.32);
  --blob3: rgba(143, 188, 187, 0.28);
  --blob4: rgba(94, 129, 172, 0.3);
}

/* Кофе: тёмный шоколад + карамель и сливки */
html.theme-coffee {
  --bg: #150e07;
  --ink: #f4ead9;
  --ink-soft: #b09b80;
  --card: rgba(36, 26, 16, 0.55);
  --accent: #d9a86c;
  --accent-2: #eed3ae;
  --accent-soft: rgba(217, 168, 108, 0.35);
  --on-accent: #2a1a08;
  --blob1: rgba(217, 168, 108, 0.48);
  --blob2: rgba(160, 106, 53, 0.42);
  --blob3: rgba(238, 211, 174, 0.3);
  --blob4: rgba(184, 127, 69, 0.3);
}

/* Розвайн: глубокий бордо + тёмно-винный красный */
html.theme-rosewine {
  --bg: #1b0912;
  --ink: #f9edf1;
  --ink-soft: #b795a0;
  --card: rgba(40, 18, 28, 0.55);
  --accent: #ec5a78;
  --accent-2: #f2a1b8;
  --accent-soft: rgba(236, 90, 120, 0.35);
  --on-accent: #2e0812;
  --blob1: rgba(214, 58, 94, 0.5);
  --blob2: rgba(161, 37, 72, 0.45);
  --blob3: rgba(242, 161, 184, 0.32);
  --blob4: rgba(192, 58, 94, 0.3);
}

/* Лаванда: СВЕТЛАЯ, лавандовое поле + фиолетовый */
html.theme-lavender {
  --bg: #f0edfa;
  --ink: #3a3350;
  --ink-soft: #6f6587;
  --card: rgba(255, 255, 255, 0.6);
  --card-border: rgba(90, 70, 150, 0.12);
  --accent: #7c63d8;
  --accent-2: #a78bfa;
  --accent-soft: rgba(124, 99, 216, 0.3);
  --on-accent: #ffffff;
  --blob1: rgba(167, 139, 250, 0.4);
  --blob2: rgba(124, 99, 216, 0.28);
  --blob3: rgba(211, 201, 247, 0.5);
  --blob4: rgba(139, 118, 224, 0.22);
  --surface: rgba(90, 70, 150, 0.05);
  --surface-2: rgba(90, 70, 150, 0.07);
  --line: rgba(90, 70, 150, 0.1);
  --line-2: rgba(90, 70, 150, 0.14);
  --line-soft: rgba(90, 70, 150, 0.07);
  --track: rgba(90, 70, 150, 0.12);
}

/* Инферно: жар углей снизу (радиальный градиент), огненно-красный */
html.theme-inferno {
  --bg: #100503;
  --ink: #faece3;
  --ink-soft: #b59885;
  --card: rgba(32, 16, 10, 0.55);
  --accent: #ff3d1e;
  --accent-2: #ffb74d;
  --accent-soft: rgba(255, 61, 30, 0.35);
  --on-accent: #2a0c02;
  --blob1: rgba(255, 61, 30, 0.5);
  --blob2: rgba(211, 47, 15, 0.45);
  --blob3: rgba(255, 183, 77, 0.38);
  --blob4: rgba(255, 122, 46, 0.3);
}
html.theme-inferno body {
  background: radial-gradient(130% 100% at 50% 120%, #3d1408 0%, #1c0805 45%, #0c0403 100%);
}

/* Арктика: СВЕТЛАЯ, ледяной синий на бело-голубом */
html.theme-arctic {
  --bg: #eef4f8;
  --ink: #1c2733;
  --ink-soft: #5c6b7a;
  --card: rgba(255, 255, 255, 0.55);
  --card-border: rgba(20, 45, 70, 0.1);
  --accent: #2273b8;
  --accent-2: #7ab8e0;
  --accent-soft: rgba(34, 115, 184, 0.35);
  --on-accent: #ffffff;
  --blob1: rgba(34, 115, 184, 0.32);
  --blob2: rgba(74, 144, 200, 0.28);
  --blob3: rgba(122, 184, 224, 0.3);
  --blob4: rgba(34, 115, 184, 0.2);
  --surface: rgba(20, 45, 70, 0.04);
  --surface-2: rgba(20, 45, 70, 0.06);
  --line: rgba(20, 45, 70, 0.09);
  --line-2: rgba(20, 45, 70, 0.12);
  --line-soft: rgba(20, 45, 70, 0.06);
  --track: rgba(20, 45, 70, 0.12);
}

/* Неон-сити: киберпанк, циан + маджента */
html.theme-neoncity {
  --bg: #0a0618;
  --ink: #ecf4ff;
  --ink-soft: #9d9ac8;
  --card: rgba(20, 14, 40, 0.55);
  --accent: #00e5ff;
  --accent-2: #ff2ea6;
  --accent-soft: rgba(0, 229, 255, 0.35);
  --on-accent: #02181d;
  --blob1: rgba(0, 229, 255, 0.5);
  --blob2: rgba(255, 46, 166, 0.45);
  --blob3: rgba(128, 92, 255, 0.35);
  --blob4: rgba(255, 46, 166, 0.3);
}


/* ============================================================
   v3: terminal-точки (box-shadow — без артефактов зума),
   баннер, стикеры, виджеты, perimeter-компаньон, новые темы
   ============================================================ */

/* Три точки терминала — box-shadow-копии одного круга: чёткие на любом zoom */
body.card-terminal .card { position: relative; }
body.card-terminal .card::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  box-shadow:
    18px 0 0 color-mix(in srgb, var(--accent) 60%, transparent),
    36px 0 0 color-mix(in srgb, var(--accent) 32%, transparent);
  pointer-events: none;
}

/* ---------- Видео-фон ---------- */
#bgVideo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Баннер за аватаркой ---------- */
.card-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--banner-h, 130px);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden; /* блюр медиа не вылезает за края баннера */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); /* светлая верхняя кромка */
  /* мягкий низ: плавная многоступенчатая растворка в карточке.
     Исключение — frost (сброс ниже); выключается классом no-banner-fade */
  -webkit-mask-image: linear-gradient(180deg, #000 38%, rgba(0, 0, 0, 0.65) 62%, rgba(0, 0, 0, 0.28) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 38%, rgba(0, 0, 0, 0.65) 62%, rgba(0, 0, 0, 0.28) 82%, transparent 100%);
}
/* картинка-баннер — отдельным слоем (блюрим медиа, а не контейнер) */
.card-banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.card-banner-img,
.card-banner video {
  filter: blur(var(--banner-blur, 0px)) saturate(1.07);
  transform: scale(var(--banner-blur-scale, 1));
}
.card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  /* слой 1 — лёгкая тень сверху + градиент к низу (читаемость аватарки/имени),
     слой 2 — равномерное затемнение (настройка) */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 22%, transparent 52%, var(--bg, rgba(0,0,0,.55)) 100%),
    rgba(0, 0, 0, var(--banner-dim, 0));
}
/* видео-баннер (mp4/webm) — то же окно, object-fit cover */
.card-banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.has-banner .card { position: relative; }
body.has-banner .avatar-wrap { margin-top: calc(var(--banner-h, 130px) - var(--banner-overlap, 72px)); }
/* выключатель мягкого низа (настройка «мягкие края» в редакторе) */
body.no-banner-fade .card-banner { -webkit-mask-image: none; mask-image: none; }
/* смягчение углов баннера (--banner-radius, 0 = углы карточки) */
body.banner-radius-on .card-banner {
  border-radius: var(--banner-radius, 0px) var(--banner-radius, 0px) 0 0;
}
/* размытие снизу баннера: прогрессивный backdrop-blur по градиентной маске */
.card-banner-bblur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--banner-bblur, 0px));
  backdrop-filter: blur(var(--banner-bblur, 0px));
  -webkit-mask-image: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.35) 52%, rgba(0, 0, 0, 0.7) 76%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.35) 52%, rgba(0, 0, 0, 0.7) 76%, #000 100%);
}
body.banner-bblur-off .card-banner-bblur { display: none; }
/* в minimal-стиле карточки нет — баннер не показываем */
body.card-minimal .card-banner { display: none; }

/* ---------- Стикеры ---------- */
.stickers {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.card { position: relative; }
.sticker {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  animation: sticker-float 5.2s ease-in-out infinite alternate;
  pointer-events: none;
  user-select: none;
}
@keyframes sticker-float {
  from { margin-top: 0; }
  to { margin-top: -7px; }
}
body.edit-mode .sticker {
  pointer-events: auto;
  cursor: grab;
  animation-play-state: paused;
}
.sticker.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
  scale: 1.1;
}

/* drag косметики: канвас аватарки активен */
body.edit-mode #viz { cursor: grab; }
body.cos-drag #viz { cursor: grabbing; }

/* ---------- Виджеты ---------- */
.widgets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}
.widget-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); /* отрыв от фона */
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.widget-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
}
.widget-ic {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.widget-ic svg { width: 20px; height: 20px; }
.widget-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.widget-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin: 28px 0 0 30px;
}
.widget-dot-online { background: #3ba55d; }
.widget-dot-idle { background: #faa81a; }
.widget-dot-dnd { background: #ed4245; }
.widget-dot-offline { background: #747f8d; }
.widget-meta { flex: 1 1 auto; min-width: 0; text-align: left; }
.widget-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-sub {
  font-size: 12px;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-elo { font-weight: 700; opacity: 1; }
.widget-sub .widget-elo { opacity: 1; }
.widget-btn {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--on-accent);
  background: var(--accent);
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.widget-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.widget-embed {
  width: 100%;
  border: 0;
  border-radius: 12px;
  display: block;
  background: transparent;
}
/* Discord-сервер: аватарка гильдии — скруглённый квадрат, не круг */
.widget-discordGuild .widget-ava { border-radius: 10px; }
/* компактный виджет (variant=row): одна низкая pill-строка */
.widget-row-compact {
  padding: 6px 10px;
  gap: 9px;
  border-radius: 999px;
}
.widget-row-compact .widget-title { font-size: 12.5px; font-weight: 500; }
.widget-row-compact .widget-ava-sm { width: 24px; height: 24px; border-radius: 7px; }
.widget-row-compact .widget-ic-sm { width: 26px; height: 26px; border-radius: 8px; }
.widget-row-compact .widget-ic-sm svg { width: 15px; height: 15px; }
.widget-btn-sm { padding: 4px 11px; font-size: 11px; }
/* стек аватарок участников сервера (из widget.json) */
.widget-avastack {
  display: flex;
  margin-top: 7px;
}
.widget-avastack-item {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-right: -7px;
  background: var(--bg);
  object-fit: cover;
}
/* заметка: текстовый блок с акцентной кромкой */
.widget-note {
  width: 100%;
  padding: 12px 14px 12px 15px;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  text-align: left;
}
.widget-note-text {
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.widget-note-sub {
  font-size: 11.5px;
  opacity: 0.65;
  margin-top: 5px;
}
/* Minecraft/иконки: квадратная аватарка */
.widget-ava-square { border-radius: 10px; }
/* онлайн-точка справа (minecraft) */
.widget-dot-inline {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.widget-dot-inline.widget-dot-online { background: #3ba55d; box-shadow: 0 0 8px rgba(59, 165, 93, 0.8); }
.widget-dot-inline.widget-dot-offline { background: #747f8d; }
/* крипта: рост/падение */
.widget-sub.widget-up { color: #3ba55d; opacity: 1; }
.widget-sub.widget-down { color: #ed4245; opacity: 1; }
/* локальное время: табличные цифры */
.widget-time { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* компакт-варианты добивки */
.widget-note.widget-row-compact { padding: 8px 12px 8px 13px; }
.widget-row-compact .widget-time { font-size: 13.5px; }
.widget-dot-sm { width: 9px; height: 9px; margin: 18px 0 0 -10px; }
.widget-row-compact .widget-sub { font-size: 11px; }
/* терминал-стиль: виджеты моноширинные */
body.card-terminal .widget-card,
body.card-terminal .widget-note { font-family: var(--font-mono); border-radius: 8px; }

/* Виджеты под стили карточки: те же материалы, что у ссылок и плеера */
body.card-glass .widget-card,
body.card-glass .widget-note {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
}
body.card-frost .widget-card,
body.card-frost .widget-note {
  /* холодный ледяной tint */
  background: rgba(190, 215, 255, 0.1);
  border-color: rgba(190, 215, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
body.card-neon .widget-card {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px;
}
body.card-neon .widget-note {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 12px;
}
body.card-retro .widget-card,
body.card-retro .widget-note {
  /* win95: серая панель с bevel; color явно — на светлой карточке
     унаследованный от body светлый --ink был бы белым на сером */
  color: var(--ink);
  border: none;
  border-radius: 0;
  background: #c3c7cb;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #0a0a0a,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}
body.card-retro .widget-sub,
body.card-retro .widget-note-sub { color: var(--ink-soft); opacity: 1; }
body.card-soft .widget-card,
body.card-soft .widget-note {
  /* белые полупрозрачные на светлой пастели; color явно (паттерн paper) */
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 16px rgba(120, 80, 130, 0.14);
}
body.card-brutal .widget-card,
body.card-brutal .widget-note {
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 70%, #fff 4%);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
/* у заметки — утолщённый чернильный левый край вместо акцентного */
body.card-brutal .widget-note { border-left: 3px solid var(--ink); }
body.card-holo .widget-card,
body.card-holo .widget-note {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
body.card-paper .widget-card,
body.card-paper .widget-note {
  /* color: paper переопределяет --ink на .card, но color у body уже
     вычислен со старым --ink — виджетам задаём явно, иначе белый на белом */
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(60, 45, 25, 0.16);
  box-shadow: 0 2px 6px rgba(60, 45, 25, 0.1);
}
body.card-liquid .widget-card,
body.card-liquid .widget-note {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
}
body.card-aurora .widget-card,
body.card-aurora .widget-note {
  /* лёгкая подсветка границ aurora-цветами */
  border-color: rgba(103, 232, 249, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 14px rgba(167, 139, 250, 0.1);
}
body.card-pixel .widget-card,
body.card-pixel .widget-note {
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}

/* ---------- Компаньон: бег по периметру ---------- */
.companion-perimeter {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: auto;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* ---------- Новые темы (v3) ---------- */

/* Глетчер: ледяная пещера — светло-голубой + белый на холодном тёмно-синем */
html.theme-glacier {
  --bg: #0a1624;
  --ink: #e9f4fb;
  --ink-soft: #8aa8bd;
  --card: rgba(16, 34, 52, 0.5);
  --accent: #a5d8ff;
  --accent-2: #ffffff;
  --accent-soft: rgba(165, 216, 255, 0.35);
  --on-accent: #06202c;
  --blob1: rgba(165, 216, 255, 0.45);
  --blob2: rgba(120, 180, 230, 0.4);
  --blob3: rgba(230, 244, 255, 0.3);
  --blob4: rgba(165, 216, 255, 0.28);
}
html.theme-glacier body {
  background: linear-gradient(180deg, #0e2233 0%, #071120 100%);
}

/* Токсик: кислотный лайм на жёлто-чёрном, моно-шрифт имени */
html.theme-toxic {
  --bg: #0b0f06;
  --ink: #eff8df;
  --ink-soft: #a7bf8a;
  --card: rgba(20, 26, 10, 0.62);
  --card-border: rgba(163, 230, 53, 0.16);
  --accent: #a3e635;
  --accent-2: #6ee7a8;
  --accent-soft: rgba(163, 230, 53, 0.32);
  --on-accent: #16200a;
  --blob1: rgba(163, 230, 53, 0.4);
  --blob2: rgba(110, 231, 168, 0.34);
  --blob3: rgba(190, 242, 100, 0.28);
  --blob4: rgba(134, 239, 172, 0.26);
  --font-display: var(--font-mono);
}

/* Роял: царское золото + фиолет на фиолетово-чёрном */
html.theme-royal {
  --bg: #100a18;
  --ink: #f4edfb;
  --ink-soft: #a294bd;
  --card: rgba(28, 20, 42, 0.55);
  --accent: #ffd257;
  --accent-2: #a06bff;
  --accent-soft: rgba(255, 210, 87, 0.35);
  --on-accent: #241a02;
  --blob1: rgba(255, 210, 87, 0.45);
  --blob2: rgba(160, 107, 255, 0.52);
  --blob3: rgba(160, 107, 255, 0.32);
  --blob4: rgba(255, 210, 87, 0.28);
}

/* Баблгам: жвачка — розовый + голубой на тёмно-сливовом */
html.theme-bubblegum {
  --bg: #160b14;
  --ink: #faebf6;
  --ink-soft: #b294b4;
  --card: rgba(34, 20, 32, 0.55);
  --accent: #ff7ad9;
  --accent-2: #5ce0ff;
  --accent-soft: rgba(255, 122, 217, 0.35);
  --on-accent: #2b0a22;
  --blob1: rgba(255, 122, 217, 0.48);
  --blob2: rgba(92, 224, 255, 0.55);
  --blob3: rgba(92, 224, 255, 0.32);
  --blob4: rgba(255, 122, 217, 0.3);
}

/* Ночной дождь: приглушённый slate-blue, пятна едва слышны */
html.theme-midnightrain {
  --bg: #0b0f16;
  --ink: #dce6f2;
  --ink-soft: #7f8ea3;
  --card: rgba(20, 26, 36, 0.55);
  --accent: #6d87b8;
  --accent-2: #8ab4d9;
  --accent-soft: rgba(109, 135, 184, 0.32);
  --on-accent: #0a1626;
  --blob1: rgba(109, 135, 184, 0.35);
  --blob2: rgba(138, 180, 217, 0.25);
  --blob3: rgba(74, 95, 138, 0.3);
  --blob4: rgba(109, 135, 184, 0.22);
}

/* Изумруд: глубокий самоцвет — мятно-бирюзовый + лайм */
html.theme-emerald {
  --bg: #061109;
  --ink: #e8f6ec;
  --ink-soft: #8aab94;
  --card: rgba(10, 28, 18, 0.58);
  --accent: #2ee6a8;
  --accent-2: #a8e05e;
  --accent-soft: rgba(46, 230, 168, 0.35);
  --on-accent: #032117;
  --blob1: rgba(46, 230, 168, 0.48);
  --blob2: rgba(14, 167, 122, 0.45);
  --blob3: rgba(168, 224, 94, 0.45);
  --blob4: rgba(46, 230, 168, 0.28);
}

/* Многоцветные: blob1 = accent, blob2 = accent-2, blob3 = третий цвет */

/* Аврора: северное сияние — teal + фиолет на глубоком тёмном */
html.theme-aurora {
  --bg: #07100f;
  --ink: #e6f7f1;
  --ink-soft: #8bb0a4;
  --card: rgba(12, 30, 26, 0.55);
  --accent: #5eead4;
  --accent-2: #a78bfa;
  --accent-soft: rgba(94, 234, 212, 0.35);
  --on-accent: #03211a;
  --blob1: rgba(94, 234, 212, 0.5);
  --blob2: rgba(167, 139, 250, 0.5);
  --blob3: rgba(52, 211, 153, 0.4);
  --blob4: rgba(167, 139, 250, 0.3);
}

/* Вейпорвейв: пастельный ретро-сон на индиго (градиент) */
html.theme-vaporwave {
  --bg: #180e2e;
  --ink: #f5e9fb;
  --ink-soft: #a794c4;
  --card: rgba(38, 24, 62, 0.5);
  --accent: #ff8ae0;
  --accent-2: #6be8ff;
  --accent-soft: rgba(255, 138, 224, 0.35);
  --on-accent: #2a0a26;
  --blob1: rgba(255, 138, 224, 0.45);
  --blob2: rgba(107, 232, 255, 0.4);
  --blob3: rgba(177, 140, 255, 0.38);
  --blob4: rgba(255, 179, 236, 0.3);
}
html.theme-vaporwave body {
  background: linear-gradient(180deg, #1d1136 0%, #150b26 100%);
}

/* Ягода: малина + слива + черника */
html.theme-berry {
  --bg: #130811;
  --ink: #fae9ef;
  --ink-soft: #b28fa0;
  --card: rgba(32, 16, 26, 0.55);
  --accent: #ff5e8a;
  --accent-2: #b06bff;
  --accent-soft: rgba(255, 94, 138, 0.35);
  --on-accent: #2b0714;
  --blob1: rgba(255, 94, 138, 0.5);
  --blob2: rgba(176, 107, 255, 0.55);
  --blob3: rgba(94, 140, 224, 0.45);
  --blob4: rgba(176, 107, 255, 0.3);
}

/* Тропики: солнце (жёлтое кольцо) + зелень джунглей + бирюза моря */
html.theme-tropic {
  --bg: #07120c;
  --ink: #e8f7ee;
  --ink-soft: #8bab9a;
  --card: rgba(12, 30, 22, 0.55);
  --accent: #ffd257;
  --accent-2: #3ee08a;
  --accent-soft: rgba(255, 210, 87, 0.35);
  --on-accent: #241a02;
  --blob1: rgba(255, 210, 87, 0.5);
  --blob2: rgba(45, 212, 255, 0.5);
  --blob3: rgba(62, 224, 138, 0.45);
  --blob4: rgba(255, 210, 87, 0.3);
}

/* Галактика: самый глубокий индиго-космос + розовая туманность */
html.theme-galaxy {
  --bg: #06040f;
  --ink: #e9e6fb;
  --ink-soft: #918db8;
  --card: rgba(16, 12, 34, 0.55);
  --accent: #8b7eff;
  --accent-2: #ff6bd6;
  --accent-soft: rgba(139, 126, 255, 0.35);
  --on-accent: #0d0722;
  --blob1: rgba(122, 107, 255, 0.5);
  --blob2: rgba(255, 107, 214, 0.42);
  --blob3: rgba(77, 224, 255, 0.35);
  --blob4: rgba(160, 107, 255, 0.3);
}

/* Лёд и пламя: холодный голубой + огненный оранж */
html.theme-icefire {
  --bg: #0c0a08;
  --ink: #f2ede8;
  --ink-soft: #a39a90;
  --card: rgba(24, 20, 16, 0.55);
  --accent: #5ec8ff;
  --accent-2: #ff8a4d;
  --accent-soft: rgba(94, 200, 255, 0.35);
  --on-accent: #0a1a26;
  --blob1: rgba(94, 200, 255, 0.5);
  --blob2: rgba(255, 138, 77, 0.45);
  --blob3: rgba(255, 210, 87, 0.4);
  --blob4: rgba(255, 138, 77, 0.3);
}

/* ---------- v9: mint / cyberpunk ---------- */

/* Мята: свежая мятная зелень на глубоком хвойно-чёрном */
html.theme-mint {
  --bg: #071410;
  --ink: #e9faf2;
  --ink-soft: #8fb3a3;
  --card: rgba(14, 32, 24, 0.55);
  --card-border: rgba(110, 231, 183, 0.12);
  --accent: #6ee7b7;
  --accent-2: #34d399;
  --accent-soft: rgba(110, 231, 183, 0.35);
  --on-accent: #03231a;
  --blob1: rgba(110, 231, 183, 0.48);
  --blob2: rgba(52, 211, 153, 0.45);
  --blob3: rgba(167, 243, 208, 0.3);
  --blob4: rgba(52, 211, 153, 0.28);
}

/* Киберпанк: жёлтый + циан на почти чёрном */
html.theme-cyberpunk {
  --bg: #050508;
  --ink: #f4f6fb;
  --ink-soft: #9aa0b5;
  --card: rgba(14, 14, 22, 0.6);
  --card-border: rgba(250, 204, 21, 0.14);
  --accent: #facc15;
  --accent-2: #22d3ee;
  --accent-soft: rgba(250, 204, 21, 0.35);
  --on-accent: #221a02;
  --blob1: rgba(250, 204, 21, 0.42);
  --blob2: rgba(34, 211, 238, 0.45);
  --blob3: rgba(34, 211, 238, 0.3);
  --blob4: rgba(250, 204, 21, 0.26);
}

/* ---------- v10: noir / paper / cherry / storm / jade / sunrise / lagoon / icepop ----------
   Светлые темы (paper/cherry/jade/sunrise/lagoon/icepop) переопределяют и
   поверхности/линии (--surface/--line/--track) тёмными rgba — паттерн
   theme-light/theme-arctic. Акценты светлых тем чуть затемнены от свотча
   ради контраста текста (прецедент: minty #0da88a → #07816b);
   blob-пятна держат яркие свотч-цвета.
   v10.1: у jade/lagoon/icepop затемнён и --accent-2 — его читает canvas
   аватарки (Palette.ring2): жемчужины particles, нимб halo, перелив neon
   на белой карточке были ~1.7–2.1:1 (невидимки); теперь ≥3:1. */

/* v10: Нуар — чистый чёрный + белый, жёсткий монохром, высокий контраст */
html.theme-noir {
  --bg: #000000;
  --ink: #f5f5f5;
  --ink-soft: #8a8a8a;
  --card: rgba(18, 18, 18, 0.62);
  --card-border: rgba(255, 255, 255, 0.18);
  --accent: #ffffff;
  --accent-2: #8a8a8a;
  --accent-soft: rgba(255, 255, 255, 0.35);
  --on-accent: #000000;
  --blob1: rgba(255, 255, 255, 0.34);
  --blob2: rgba(138, 138, 138, 0.3);
  --blob3: rgba(210, 210, 210, 0.3);
  --blob4: rgba(110, 110, 110, 0.28);
}

/* v10: Бумага — СВЕТЛАЯ кремовая, чернильный текст, терракота + тёмно-коричневый */
html.theme-paper {
  --bg: #f7f2e7;
  --ink: #2f2a24;
  --ink-soft: #6f6151;
  --card: rgba(255, 253, 247, 0.62);
  --card-border: rgba(47, 42, 36, 0.12);
  --accent: #b3541e;
  --accent-2: #2f2a24;
  --accent-soft: rgba(179, 84, 30, 0.32);
  --on-accent: #fff6ec;
  --blob1: rgba(179, 84, 30, 0.3);
  --blob2: rgba(214, 158, 94, 0.42);
  --blob3: rgba(236, 214, 170, 0.48);
  --blob4: rgba(179, 84, 30, 0.24);
  --surface: rgba(47, 42, 36, 0.04);
  --surface-2: rgba(47, 42, 36, 0.06);
  --line: rgba(47, 42, 36, 0.09);
  --line-2: rgba(47, 42, 36, 0.12);
  --line-soft: rgba(47, 42, 36, 0.06);
  --track: rgba(47, 42, 36, 0.1);
}

/* v10: Вишня — СВЕТЛАЯ розовато-белая, вишнёвый акцент */
html.theme-cherry {
  --bg: #fdf0f0;
  --ink: #3d1a22;
  --ink-soft: #7d5560;
  --card: rgba(255, 255, 255, 0.6);
  --card-border: rgba(150, 30, 60, 0.12);
  --accent: #d4264a;
  --accent-2: #ff7a94;
  --accent-soft: rgba(212, 38, 74, 0.32);
  --on-accent: #ffffff;
  --blob1: rgba(255, 122, 148, 0.42);
  --blob2: rgba(212, 38, 74, 0.3);
  --blob3: rgba(255, 183, 197, 0.48);
  --blob4: rgba(212, 38, 74, 0.26);
  --surface: rgba(150, 30, 60, 0.05);
  --surface-2: rgba(150, 30, 60, 0.07);
  --line: rgba(150, 30, 60, 0.1);
  --line-2: rgba(150, 30, 60, 0.14);
  --line-soft: rgba(150, 30, 60, 0.07);
  --track: rgba(150, 30, 60, 0.12);
}

/* v10: Гроза — тёмно-синий, электро-жёлтый + синий */
html.theme-storm {
  --bg: #0a0e1a;
  --ink: #e9eef8;
  --ink-soft: #8b96ad;
  --card: rgba(16, 22, 40, 0.55);
  --card-border: rgba(255, 214, 10, 0.12);
  --accent: #ffd60a;
  --accent-2: #4d9fff;
  --accent-soft: rgba(255, 214, 10, 0.35);
  --on-accent: #1a1402;
  --blob1: rgba(255, 214, 10, 0.4);
  --blob2: rgba(77, 159, 255, 0.45);
  --blob3: rgba(122, 184, 255, 0.32);
  --blob4: rgba(255, 214, 10, 0.28);
}

/* v10: Нефрит — СВЕТЛЫЙ мятно-зелёный (акцент темнее свотча #0e9f6e ради текста) */
html.theme-jade {
  --bg: #e8f5ee;
  --ink: #12362a;
  --ink-soft: #4a7263;
  --card: rgba(255, 255, 255, 0.62);
  --card-border: rgba(12, 88, 58, 0.12);
  --accent: #0a7d56;
  --accent-2: #2aa676;
  --accent-soft: rgba(10, 125, 86, 0.3);
  --on-accent: #ffffff;
  --blob1: rgba(87, 201, 143, 0.45);
  --blob2: rgba(14, 159, 110, 0.3);
  --blob3: rgba(178, 235, 205, 0.48);
  --blob4: rgba(14, 159, 110, 0.24);
  --surface: rgba(12, 88, 58, 0.05);
  --surface-2: rgba(12, 88, 58, 0.07);
  --line: rgba(12, 88, 58, 0.1);
  --line-2: rgba(12, 88, 58, 0.14);
  --line-soft: rgba(12, 88, 58, 0.07);
  --track: rgba(12, 88, 58, 0.12);
}

/* v10: Рассвет — СВЕТЛЫЙ тёплый, коралл + оранж (акцент темнее свотча #f0563c) */
html.theme-sunrise {
  --bg: #fff1e6;
  --ink: #45231a;
  --ink-soft: #8a5a44;
  --card: rgba(255, 255, 255, 0.6);
  --card-border: rgba(170, 70, 30, 0.12);
  --accent: #d6492f;
  --accent-2: #f5a623;
  --accent-soft: rgba(214, 73, 47, 0.32);
  --on-accent: #ffffff;
  --blob1: rgba(240, 86, 60, 0.38);
  --blob2: rgba(245, 166, 35, 0.45);
  --blob3: rgba(255, 200, 150, 0.48);
  --blob4: rgba(240, 86, 60, 0.26);
  --surface: rgba(170, 70, 30, 0.05);
  --surface-2: rgba(170, 70, 30, 0.07);
  --line: rgba(170, 70, 30, 0.1);
  --line-2: rgba(170, 70, 30, 0.14);
  --line-soft: rgba(170, 70, 30, 0.07);
  --track: rgba(170, 70, 30, 0.12);
}

/* v10: Лагуна — СВЕТЛАЯ бирюзовая (акцент темнее свотча #0a94b8 ради текста) */
html.theme-lagoon {
  --bg: #e0f7f7;
  --ink: #0e3542;
  --ink-soft: #4a6f78;
  --card: rgba(255, 255, 255, 0.62);
  --card-border: rgba(8, 90, 112, 0.12);
  --accent: #0878a0;
  --accent-2: #14a398;
  --accent-soft: rgba(8, 120, 160, 0.3);
  --on-accent: #ffffff;
  --blob1: rgba(70, 212, 196, 0.45);
  --blob2: rgba(10, 148, 184, 0.3);
  --blob3: rgba(170, 235, 230, 0.48);
  --blob4: rgba(10, 148, 184, 0.24);
  --surface: rgba(8, 90, 112, 0.05);
  --surface-2: rgba(8, 90, 112, 0.07);
  --line: rgba(8, 90, 112, 0.1);
  --line-2: rgba(8, 90, 112, 0.14);
  --line-soft: rgba(8, 90, 112, 0.07);
  --track: rgba(8, 90, 112, 0.12);
}

/* v10: Айспоп — СВЕТЛЫЙ ледяной бело-голубой, розовый + циан
   (акцент темнее свотча #ff5e9c; on-accent тёмный: белый на циане нечитаем) */
html.theme-icepop {
  --bg: #eafcff;
  --ink: #17333d;
  --ink-soft: #55707c;
  --card: rgba(255, 255, 255, 0.62);
  --card-border: rgba(20, 90, 120, 0.12);
  --accent: #dd2d7d;
  --accent-2: #0d9cbd;
  --accent-soft: rgba(221, 45, 125, 0.32);
  --on-accent: #3a0b26;
  --blob1: rgba(255, 94, 156, 0.4);
  --blob2: rgba(56, 217, 245, 0.45);
  --blob3: rgba(150, 230, 250, 0.48);
  --blob4: rgba(255, 94, 156, 0.28);
  --surface: rgba(20, 90, 120, 0.05);
  --surface-2: rgba(20, 90, 120, 0.07);
  --line: rgba(20, 90, 120, 0.1);
  --line-2: rgba(20, 90, 120, 0.14);
  --line-soft: rgba(20, 90, 120, 0.07);
  --track: rgba(20, 90, 120, 0.12);
}

/* ---------- v11: тёмные — gold / frostbite / ember / midnightcity / sakura-night / venom
   (vaporwave/toxic уже есть выше — v4/v3). Акценты светлые — --accent-2
   читается на тёмном фоне (его забирает canvas обводки, Palette.ring2). ---------- */

/* v11: Голд — премиум: почти чёрный + золото, тёплый жёлтый */
html.theme-gold {
  --bg: #0b0903;
  --ink: #f7f0dd;
  --ink-soft: #a89e83;
  --card: rgba(24, 20, 10, 0.58);
  --card-border: rgba(240, 184, 58, 0.14);
  --accent: #f0b83a;
  --accent-2: #ffd97a;
  --accent-soft: rgba(240, 184, 58, 0.35);
  --on-accent: #221a04;
  --blob1: rgba(240, 184, 58, 0.42);
  --blob2: rgba(212, 160, 32, 0.4);
  --blob3: rgba(255, 217, 122, 0.3);
  --blob4: rgba(240, 184, 58, 0.26);
}

/* v11: Фростбайт — лёд: очень тёмный синий + ледяной/бело-голубой
   (вертикальный градиент морозной глубины) */
html.theme-frostbite {
  --bg: #040b14;
  --ink: #e8f4fc;
  --ink-soft: #7e9db5;
  --card: rgba(10, 22, 36, 0.55);
  --card-border: rgba(111, 216, 255, 0.12);
  --accent: #6fd8ff;
  --accent-2: #dcf4ff;
  --accent-soft: rgba(111, 216, 255, 0.35);
  --on-accent: #03202e;
  --blob1: rgba(111, 216, 255, 0.4);
  --blob2: rgba(94, 158, 255, 0.38);
  --blob3: rgba(220, 244, 255, 0.28);
  --blob4: rgba(111, 216, 255, 0.26);
}
html.theme-frostbite body {
  background: linear-gradient(180deg, #071526 0%, #040b14 60%, #02070e 100%);
}

/* v11: Угли — тлеющие угли: коричнево-чёрный + оранжево-красный/янтарь
   (градиент: жар снизу, остывший верх) */
html.theme-ember {
  --bg: #0d0705;
  --ink: #f7ece2;
  --ink-soft: #b09a8a;
  --card: rgba(26, 15, 10, 0.58);
  --card-border: rgba(255, 107, 53, 0.14);
  --accent: #ff6b35;
  --accent-2: #ffb347;
  --accent-soft: rgba(255, 107, 53, 0.35);
  --on-accent: #2a0d02;
  --blob1: rgba(255, 107, 53, 0.45);
  --blob2: rgba(214, 40, 40, 0.4);
  --blob3: rgba(255, 179, 71, 0.32);
  --blob4: rgba(255, 107, 53, 0.28);
}
html.theme-ember body {
  background: linear-gradient(180deg, #080503 0%, #0d0705 50%, #180b04 100%);
}

/* v11: Ночной город — глубокий синий + розовый неон/фиолет
   (градиент неба мегаполиса; blob3 — холодный синий городской свет) */
html.theme-midnightcity {
  --bg: #070b1c;
  --ink: #e9edf8;
  --ink-soft: #8b93b8;
  --card: rgba(14, 18, 40, 0.58);
  --card-border: rgba(255, 94, 196, 0.12);
  --accent: #ff5ec4;
  --accent-2: #a78bfa;
  --accent-soft: rgba(255, 94, 196, 0.35);
  --on-accent: #2a0518;
  --blob1: rgba(255, 94, 196, 0.42);
  --blob2: rgba(167, 139, 250, 0.45);
  --blob3: rgba(94, 158, 255, 0.3);
  --blob4: rgba(255, 94, 196, 0.28);
}
html.theme-midnightcity body {
  background: linear-gradient(180deg, #0a1030 0%, #070b1c 55%, #04060f 100%);
}

/* v11: Сакура ночью — чёрно-сливовый + розовый/светло-розовый */
html.theme-sakura-night {
  --bg: #100a12;
  --ink: #f8ecf3;
  --ink-soft: #b194a8;
  --card: rgba(30, 18, 28, 0.55);
  --card-border: rgba(244, 114, 182, 0.12);
  --accent: #f472b6;
  --accent-2: #fbcfe8;
  --accent-soft: rgba(244, 114, 182, 0.35);
  --on-accent: #330a1e;
  --blob1: rgba(244, 114, 182, 0.45);
  --blob2: rgba(190, 80, 150, 0.4);
  --blob3: rgba(251, 207, 232, 0.3);
  --blob4: rgba(244, 114, 182, 0.28);
}

/* v11: Веном — яд: чёрно-фиолетовый + неон-фиолет/кислотный лайм */
html.theme-venom {
  --bg: #0d0714;
  --ink: #f1eafc;
  --ink-soft: #9a8cb8;
  --card: rgba(22, 14, 34, 0.58);
  --card-border: rgba(177, 74, 255, 0.14);
  --accent: #b14aff;
  --accent-2: #a3e635;
  --accent-soft: rgba(177, 74, 255, 0.35);
  --on-accent: #1e0533;
  --blob1: rgba(177, 74, 255, 0.48);
  --blob2: rgba(163, 230, 53, 0.4);
  --blob3: rgba(177, 74, 255, 0.3);
  --blob4: rgba(120, 200, 30, 0.28);
}

/* ---------- v13: тёмные — amethyst / caramel / abyssal / noirred / solar / ultraviolet ---------- */

/* v13: Аметист — глубокий фиолетовый + лаванда */
html.theme-amethyst {
  --bg: #120a1e;
  --ink: #f2ecfc;
  --ink-soft: #9c8fc0;
  --card: rgba(18, 10, 30, 0.58);
  --card-border: rgba(167, 139, 250, 0.15);
  --accent: #a78bfa;
  --accent-2: #e9d5ff;
  --accent-soft: rgba(167, 139, 250, 0.32);
  --on-accent: #1e0f3d;
  --blob1: rgba(167, 139, 250, 0.42);
  --blob2: rgba(124, 92, 220, 0.4);
  --blob3: rgba(233, 213, 255, 0.3);
  --blob4: rgba(167, 139, 250, 0.26);
}

/* v13: Карамель — тёмно-коричневый + тёплый карамельно-сливочный */
html.theme-caramel {
  --bg: #140d06;
  --ink: #faf1e3;
  --ink-soft: #b39f84;
  --card: rgba(20, 13, 6, 0.58);
  --card-border: rgba(232, 163, 76, 0.15);
  --accent: #e8a34c;
  --accent-2: #f7dba7;
  --accent-soft: rgba(232, 163, 76, 0.32);
  --on-accent: #2e1b05;
  --blob1: rgba(232, 163, 76, 0.42);
  --blob2: rgba(196, 124, 44, 0.4);
  --blob3: rgba(247, 219, 167, 0.3);
  --blob4: rgba(232, 163, 76, 0.26);
}

/* v13: Бездна — почти чёрный синий + биолюминесцентная бирюза */
html.theme-abyssal {
  --bg: #04070f;
  --ink: #e6f6fa;
  --ink-soft: #7596a8;
  --card: rgba(4, 7, 15, 0.6);
  --card-border: rgba(34, 211, 238, 0.15);
  --accent: #22d3ee;
  --accent-2: #a5f3fc;
  --accent-soft: rgba(34, 211, 238, 0.32);
  --on-accent: #032830;
  --blob1: rgba(34, 211, 238, 0.4);
  --blob2: rgba(30, 120, 200, 0.38);
  --blob3: rgba(165, 243, 252, 0.28);
  --blob4: rgba(34, 211, 238, 0.25);
}

/* v13: Нуар-ред — sin city: чёрно-белый + красный акцент */
html.theme-noirred {
  --bg: #0a0a0a;
  --ink: #f5f5f5;
  --ink-soft: #8f8f8f;
  --card: rgba(16, 16, 16, 0.6);
  --card-border: rgba(239, 47, 60, 0.15);
  --accent: #ef2f3c;
  --accent-2: #f5f5f5;
  --accent-soft: rgba(239, 47, 60, 0.32);
  --on-accent: #ffffff;
  --blob1: rgba(239, 47, 60, 0.4);
  --blob2: rgba(245, 245, 245, 0.25);
  --blob3: rgba(239, 47, 60, 0.28);
  --blob4: rgba(160, 20, 30, 0.32);
}

/* v13: Солярис — солнечная тёмная: коричнево-чёрный + янтарно-золотой */
html.theme-solar {
  --bg: #140c04;
  --ink: #fdf4e0;
  --ink-soft: #b3a17e;
  --card: rgba(20, 12, 4, 0.58);
  --card-border: rgba(251, 191, 36, 0.15);
  --accent: #fbbf24;
  --accent-2: #fde68a;
  --accent-soft: rgba(251, 191, 36, 0.32);
  --on-accent: #2f1e02;
  --blob1: rgba(251, 191, 36, 0.42);
  --blob2: rgba(217, 150, 20, 0.4);
  --blob3: rgba(253, 230, 138, 0.3);
  --blob4: rgba(251, 191, 36, 0.26);
}

/* v13: Ультрафиолет — почти чёрный + неон-фиолет/лаванда */
html.theme-ultraviolet {
  --bg: #0b0614;
  --ink: #f4edfd;
  --ink-soft: #9885b8;
  --card: rgba(11, 6, 20, 0.58);
  --card-border: rgba(192, 132, 252, 0.15);
  --accent: #c084fc;
  --accent-2: #f0abfc;
  --accent-soft: rgba(192, 132, 252, 0.32);
  --on-accent: #23073d;
  --blob1: rgba(192, 132, 252, 0.45);
  --blob2: rgba(240, 171, 252, 0.35);
  --blob3: rgba(240, 171, 252, 0.28);
  --blob4: rgba(192, 132, 252, 0.26);
}

/* ---------- v14: copper / camo (тёмные) + cotton / porcelain / citrus (светлые) ---------- */

/* v14: Медь — тёмный шоколад + медный металлик, тёплая «премиальная» */
html.theme-copper {
  --bg: #150d07;
  --ink: #f7ecdd;
  --ink-soft: #b3a28c;
  --card: rgba(21, 13, 7, 0.58);
  --card-border: rgba(221, 139, 77, 0.15);
  --accent: #dd8b4d;
  --accent-2: #f2c89a;
  --accent-soft: rgba(221, 139, 77, 0.32);
  --on-accent: #2a1608;
  --blob1: rgba(221, 139, 77, 0.42);
  --blob2: rgba(176, 106, 52, 0.4);
  --blob3: rgba(242, 200, 154, 0.3);
  --blob4: rgba(221, 139, 77, 0.26);
}

/* v14: Камуфляж — тёмный оливковый + хаки/песочный */
html.theme-camo {
  --bg: #12140c;
  --ink: #edf0dd;
  --ink-soft: #a3a88c;
  --card: rgba(18, 20, 12, 0.58);
  --card-border: rgba(163, 184, 107, 0.15);
  --accent: #a3b86b;
  --accent-2: #d6c99a;
  --accent-soft: rgba(163, 184, 107, 0.32);
  --on-accent: #171b0a;
  --blob1: rgba(163, 184, 107, 0.4);
  --blob2: rgba(110, 124, 66, 0.4);
  --blob3: rgba(214, 201, 154, 0.3);
  --blob4: rgba(163, 184, 107, 0.26);
}

/* v14: Зефир — СВЕТЛАЯ розово-голубая пастель, сливовый текст */
html.theme-cotton {
  --bg: #fdf2f7;
  --ink: #4a2438;
  --ink-soft: #8a5f76;
  --card: rgba(255, 255, 255, 0.6);
  --card-border: rgba(240, 111, 174, 0.15);
  --accent: #f06fae;
  --accent-2: #7cc8f0;
  --accent-soft: rgba(240, 111, 174, 0.32);
  --on-accent: #ffffff;
  --blob1: rgba(240, 111, 174, 0.3);
  --blob2: rgba(124, 200, 240, 0.35);
  --blob3: rgba(255, 190, 220, 0.4);
  --blob4: rgba(240, 111, 174, 0.2);
  /* светлые темы переопределяют поверхности/линии тёмными rgba
     (паттерн theme-light/theme-arctic) — иначе белые пилюли на белом */
  --surface: rgba(190, 70, 130, 0.05);
  --surface-2: rgba(190, 70, 130, 0.07);
  --line: rgba(190, 70, 130, 0.1);
  --line-2: rgba(190, 70, 130, 0.14);
  --line-soft: rgba(190, 70, 130, 0.07);
  --track: rgba(190, 70, 130, 0.12);
}

/* v14: Фарфор — СВЕТЛАЯ бело-голубая, тёмно-синий текст */
html.theme-porcelain {
  --bg: #f4f7fa;
  --ink: #1c2f45;
  --ink-soft: #5d7089;
  --card: rgba(255, 255, 255, 0.65);
  --card-border: rgba(77, 124, 184, 0.16);
  --accent: #4d7cb8;
  --accent-2: #9fc4e8;
  --accent-soft: rgba(77, 124, 184, 0.32);
  --on-accent: #ffffff;
  --blob1: rgba(77, 124, 184, 0.28);
  --blob2: rgba(159, 196, 232, 0.4);
  --blob3: rgba(200, 224, 245, 0.48);
  --blob4: rgba(77, 124, 184, 0.18);
  --surface: rgba(30, 70, 120, 0.04);
  --surface-2: rgba(30, 70, 120, 0.06);
  --line: rgba(30, 70, 120, 0.09);
  --line-2: rgba(30, 70, 120, 0.12);
  --line-soft: rgba(30, 70, 120, 0.06);
  --track: rgba(30, 70, 120, 0.12);
}

/* v14: Цитрус — СВЕТЛАЯ кремовая, лайм + апельсин (на лайме — тёмный текст) */
html.theme-citrus {
  --bg: #fbf7ea;
  --ink: #3a3418;
  --ink-soft: #7a7150;
  --card: rgba(255, 255, 255, 0.62);
  --card-border: rgba(120, 140, 20, 0.16);
  --accent: #8fc31f;
  --accent-2: #f59e0b;
  --accent-soft: rgba(143, 195, 31, 0.32);
  --on-accent: #2a3308;
  --blob1: rgba(143, 195, 31, 0.32);
  --blob2: rgba(245, 158, 11, 0.32);
  --blob3: rgba(250, 220, 130, 0.42);
  --blob4: rgba(143, 195, 31, 0.2);
  --surface: rgba(110, 120, 20, 0.05);
  --surface-2: rgba(110, 120, 20, 0.07);
  --line: rgba(110, 120, 20, 0.1);
  --line-2: rgba(110, 120, 20, 0.14);
  --line-soft: rgba(110, 120, 20, 0.07);
  --track: rgba(110, 120, 20, 0.12);
}

/* ---------- Стили плеера (CONFIG.playerStyle) ---------- */

/* compact — одна тонкая строка */
body.player-compact .player {
  gap: 8px;
  padding: 8px 12px;
}
body.player-compact .player-cover { display: none; }
body.player-compact .player-times { display: none; }
body.player-compact .player-title { font-size: 13px; }
body.player-compact .player-artist { font-size: 11px; }
body.player-compact .pbtn { width: 30px; height: 30px; }
body.player-compact .pbtn-play { width: 34px; height: 34px; }

/* vinyl — обложка как крутящаяся пластинка */
body.player-vinyl .player-cover {
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 0 0 6px rgba(0, 0, 0, 0.35);
}
body.player-vinyl .player.is-playing .player-cover {
  animation: vinyl-spin 3.2s linear infinite;
}
@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

/* big — крупная обложка и кнопки */
body.player-big .player {
  padding: 16px;
  gap: 14px;
}
body.player-big .player-cover {
  width: 72px;
  height: 72px;
  border-radius: 14px;
}
body.player-big .player-title { font-size: 16px; }
body.player-big .player-artist { font-size: 13px; }
body.player-big .pbtn { width: 40px; height: 40px; }
body.player-big .pbtn-play { width: 48px; height: 48px; }

/* ---------- Пиксельные шрифтовые пресеты (pressstart / pixelify) ----------
   Класс font-pixel на <html> ставит applyFontPreset (script.js):
   минимальная читабельная адаптация трекинга под 8-bit сетку */
html.font-pixel { letter-spacing: 0.02em; }
html.font-pixel .name { letter-spacing: 0.01em; line-height: 1.25; }
html.font-pixel body,
html.font-pixel .link-btn { letter-spacing: 0.03em; }

/* ============================================================
   ---------- Стили карточек v14: cyber / chroma / stripe ----------
   ============================================================ */

/* cyber: срезанные углы + уголки-скобки + scanline сверху */
body.card-cyber .card {
  border: none;
  border-radius: 0;
  /* срезы ~20px: правый верхний и левый нижний, остальные углы прямые */
  clip-path: polygon(
    0 0, calc(100% - 20px) 0, 100% 20px,
    100% 100%, 20px 100%, 0 calc(100% - 20px)
  );
  /* box-shadow clip-path обрезал бы — свечение через drop-shadow,
     он следует форме срезов */
  box-shadow: none;
  filter: drop-shadow(0 0 22px var(--accent-soft));
}
/* scanline: тонкая полоса accent→transparent по верхней кромке
   (заменяет каёмку classic — сброс mask/padding как у card-window) */
body.card-cyber .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 80%);
  -webkit-mask: none;
  mask: none;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}
/* 4 L-образные скобки по углам: по 2 полоски 22px на угол,
   отступ 10px от краёв внутрь (углы срезаны clip-path) */
body.card-cyber .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0);
  background-size:
    22px 2px, 2px 22px,
    22px 2px, 2px 22px,
    22px 2px, 2px 22px,
    22px 2px, 2px 22px;
  background-position:
    left 10px top 10px, left 10px top 10px,
    right 10px top 10px, right 10px top 10px,
    right 10px bottom 10px, right 10px bottom 10px,
    left 10px bottom 10px, left 10px bottom 10px;
  background-repeat: no-repeat;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}
/* баннер клипается срезами карточки (подход pixel), своя дуга не нужна */
body.card-cyber .card-banner { top: 0; left: 0; right: 0; border-radius: 0; }

/* chroma: живая переливающаяся карточка — медленный дрейф акцентных
   бликов (14s, низкие альфы — текст читаем в любой теме) */
body.card-chroma .card {
  background-color: var(--card);
  background-image: linear-gradient(115deg,
    var(--accent-soft) 0%,
    transparent 35%,
    color-mix(in srgb, var(--accent-2) 22%, transparent) 65%,
    transparent 100%);
  background-size: 280% 280%;
  animation: cardChroma 14s ease-in-out infinite alternate;
  border: 1px solid var(--accent-soft);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.3),
    0 0 42px var(--accent-soft);
}
@keyframes cardChroma {
  from { background-position: 0% 20%; }
  to   { background-position: 100% 80%; }
}
/* баннер: дуга = базовый radius 28px - border 1px (паттерн aurora) */
body.card-chroma .card-banner { top: 0; left: 0; right: 0; border-radius: 27px 27px 0 0; }
@media (prefers-reduced-motion: reduce) {
  body.card-chroma .card { animation: none !important; }
}

/* stripe: «афиша» — акцентная полоса слева */
body.card-stripe .card {
  overflow: hidden; /* полосы и баннер клипаются по радиусу карточки */
  padding-left: 42px; /* базовые 28px + 14px под полосы */
}
/* основная полоса 6px: accent → accent-2 с мягким свечением
   (заменяет каёмку classic — сброс mask/padding как у card-window) */
body.card-stripe .card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px var(--accent-soft);
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}
/* вторая тонкая полоса 2px — accent-2 с альфой ~0.4 */
body.card-stripe .card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: color-mix(in srgb, var(--accent-2) 40%, transparent);
  pointer-events: none;
  z-index: 2;
}
/* баннер: дуга = базовый radius 28px - border 1px (паттерн aurora) */
body.card-stripe .card-banner { top: 0; left: 0; right: 0; border-radius: 27px 27px 0 0; }

/* ---------- Стили карточек v15: ticket / stack / neumorph / manga ---------- */

/* ticket: концертный билет — полукруглые вырезы по бокам + перфорация
   отрывного талона. Маска срезает и box-shadow, поэтому тень —
   filter: drop-shadow (повторяет форму с вырезами). Лёгкий тёплый
   оттенок поверхности — «картон» билета */
body.card-ticket .card {
  border-radius: 14px;
  box-shadow: none;
  background:
    linear-gradient(160deg, rgba(216, 185, 138, 0.07), rgba(0, 0, 0, 0.05) 70%),
    color-mix(in srgb, var(--card) calc(var(--card-opacity, 1) * 100%), transparent);
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.45));
  -webkit-mask:
    radial-gradient(circle 15px at 0 58%, transparent 14.5px, black 15.5px) left / 51% 100% no-repeat,
    radial-gradient(circle 15px at 100% 58%, transparent 14.5px, black 15.5px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 15px at 0 58%, transparent 14.5px, black 15.5px) left / 51% 100% no-repeat,
    radial-gradient(circle 15px at 100% 58%, transparent 14.5px, black 15.5px) right / 51% 100% no-repeat;
}
/* перфорация талона (сброс каёмки classic — паттерн stripe) */
body.card-ticket .card::before {
  content: "";
  position: absolute;
  inset: auto;
  top: 16px;
  bottom: 16px;
  left: 24%;
  width: 0;
  padding: 0;
  border: none;
  border-left: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}
body.card-ticket .card-banner { top: 0; left: 0; right: 0; border-radius: 13px 13px 0 0; }

/* stack: колода — два листа под карточкой, слегка вывернуты наружу.
   Подложки без backdrop-filter (дёшево): плоский цвет поверхности */
body.card-stack .card {
  border-radius: 22px;
}
body.card-stack .card::before,
body.card-stack .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  background: color-mix(in srgb, var(--card) 88%, black);
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  pointer-events: none;
}
body.card-stack .card::before {
  transform: translate(9px, 11px) rotate(1.6deg);
  z-index: -1;
  filter: brightness(0.82);
}
body.card-stack .card::after {
  transform: translate(-9px, 22px) rotate(-1.3deg);
  z-index: -2;
  filter: brightness(0.66);
}
body.card-stack .card-banner { top: 0; left: 0; right: 0; border-radius: 21px 21px 0 0; }

/* neumorph: мягкий объём без рамки — карточка «вылеплена» из поверхности.
   Свечение — парой встречных теней (тёмная ↘ + светлая ↖) + лёгкий
   градиентный блик поверхности, без блюра */
body.card-neumorph .card {
  border: none;
  border-radius: 26px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.18) 72%),
    color-mix(in srgb, var(--card) calc(var(--card-opacity, 1) * 100%), transparent);
  box-shadow:
    18px 18px 42px rgba(0, 0, 0, 0.55),
    -10px -10px 30px rgba(255, 255, 255, 0.1),
    inset 1px 1px 0 rgba(255, 255, 255, 0.08),
    inset -1px -1px 0 rgba(0, 0, 0, 0.3);
}
body.card-neumorph .card::before {
  content: none; /* каёмку classic гасим: neumorph без рамок */
}
body.card-neumorph .link-btn,
body.card-neumorph .player,
body.card-neumorph .social-btn,
body.card-neumorph .badge {
  border: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.14) 75%);
  box-shadow:
    7px 7px 16px rgba(0, 0, 0, 0.4),
    -5px -5px 12px rgba(255, 255, 255, 0.07),
    inset 1px 1px 0 rgba(255, 255, 255, 0.06);
}
body.card-neumorph .card-banner { top: 0; left: 0; right: 0; border-radius: 25px 25px 0 0; }

/* manga: чернильный контур + халфтон-точки + жёсткая офсетная тень.
   Светлая заливка — переопределяем --ink (паттерн paper) */
body.card-manga .card {
  --ink: #1b1613;
  --ink-soft: #57503f;
  --line: rgba(27, 22, 19, 0.22);
  background: #f6f1e7;
  border: 3px solid #14100d;
  border-radius: 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 8px 8px 0 #14100d;
}
/* халфтон-точки в правом верхнем углу (сброс каёмки classic) */
body.card-manga .card::before {
  content: "";
  position: absolute;
  inset: auto;
  top: 0;
  right: 0;
  width: 132px;
  height: 132px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: radial-gradient(#14100d 1.3px, transparent 1.4px);
  background-size: 9px 9px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  -webkit-mask: none;
  mask: none;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
/* скоростные линии снизу слева */
body.card-manga .card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
  height: 64px;
  background: repeating-linear-gradient(-55deg, #14100d 0 3px, transparent 3px 11px);
  clip-path: polygon(0 100%, 0 30%, 100% 100%);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
body.card-manga .link-btn,
body.card-manga .player,
body.card-manga .social-btn,
body.card-manga .badge {
  background: #fffdf7;
  border: 2px solid #14100d;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #14100d;
}
body.card-manga .widget-card,
body.card-manga .widget-note {
  color: var(--ink); /* как у paper: color у body вычислен со старым --ink */
  background: #fffdf7;
  border: 2px solid #14100d;
  box-shadow: 3px 3px 0 #14100d;
}
body.card-manga .name { text-shadow: 2px 2px 0 rgba(20, 16, 13, 0.18); }
body.card-manga .card-banner { top: 0; left: 0; right: 0; border-radius: 3px 3px 0 0; }

/* ---------- Редактор карточки (body.layout-edit) ---------- */

/* элементы карточки — хватательные, с аутлайном при наведении */
body.layout-edit .avatar-wrap,
body.layout-edit #name,
body.layout-edit #bio,
body.layout-edit #location,
body.layout-edit .badges,
body.layout-edit #socials,
body.layout-edit #links,
body.layout-edit #widgets,
body.layout-edit #player,
body.layout-edit #marquee,
body.layout-edit .card-footer {
  cursor: grab;
  outline: 1px dashed transparent;
  outline-offset: 4px;
  transition: outline-color 0.15s ease;
}
body.layout-edit .avatar-wrap:hover,
body.layout-edit #name:hover,
body.layout-edit #bio:hover,
body.layout-edit #location:hover,
body.layout-edit .badges:hover,
body.layout-edit #socials:hover,
body.layout-edit #links:hover,
body.layout-edit #widgets:hover,
body.layout-edit #player:hover,
body.layout-edit #marquee:hover,
body.layout-edit .card-footer:hover {
  outline-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
body.layout-edit .layout-dragging {
  cursor: grabbing !important;
  outline: 1.5px dashed var(--accent) !important;
  outline-offset: 4px;
}
/* выбранный элемент (ЛКМ) — под плавающую панель настроек */
body.layout-edit .layout-selected {
  outline: 1.5px dashed var(--accent-2, var(--accent)) !important;
  outline-offset: 4px;
}
/* canvas-оверлей направляющих (центр, snap-линии, бейджи отступов) */
#layoutGuides {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

/* ---------- Лендинг-embed: пауза и lite-режим (LiveBioCard → zombio:lp) ---------- */

/* iframe вне экрана — стопим ВСЕ css-анимации (canvas-цикл глушит JS) */
body.lp-paused * {
  animation-play-state: paused !important;
}

/* lite на слабом железе: bokeh-пятна статичны (blur(70px)×4 слоя с
   анимацией — самое дорогое в кадре), зерно стоит, карточка без
   backdrop-blur (при cardOpacity 1 визуально почти неотличимо) */
body.embed-lite .blob { animation: none; }
body.embed-lite .grain { animation: none; }
body.embed-lite .card,
body.embed-lite .link-btn,
body.embed-lite .player,
body.embed-lite .social-btn {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}