/* =============================================================================
   BONUSNO — STYLES
   Не редактируй для смены казино — всё в js/config.js
============================================================================= */

:root{
  --gold:        #f2c14e;
  --gold-bright: #ffd86b;
  --gold-deep:   #b8862b;
  --purple:      #8b5cf6;
  --purple-deep: #5b21b6;
  --violet-glow: #7c4dff;
  --ink:         #04060f;
  --ink-2:       #070a18;
  --card-bg:     rgba(14, 18, 38, 0.55);
  --card-border: rgba(150, 130, 220, 0.34);
  --txt:         #eef0fb;
  --txt-dim:     #9aa0c4;
  --font-display:'Orbitron', 'Exo 2', sans-serif;   /* латиница: лого, цифры */
  --font-body:   'Exo 2', system-ui, sans-serif;    /* кириллица и текст */
}

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

html,body{ height:100%; }

body{
  font-family:var(--font-body);
  background:#04060f;
  color:var(--txt);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- ФОН ---- */
/* ОСНОВНОЙ ФОН — новый спокойный космос nebula.png на весь экран */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden;
  background-color:#04030c;
  background-image:url("../assets/backgrounds/nebula.png");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover; }
/* старые цветовые/туманные слои-оверлеи полностью отключены */
.bg::before, .bg::after{ content:none; display:none; }
.bg-neb{ display:none; }
.bg-stars{ display:none; position:absolute; inset:-50%;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, #cdbaff, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 85% 20%, #fff, transparent),
    radial-gradient(1px 1px at 55% 15%, #b9a8ff, transparent),
    radial-gradient(1.2px 1.2px at 10% 55%, #fff, transparent),
    radial-gradient(1px 1px at 90% 75%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 30% 50%, #d9ccff, transparent);
  background-size:280px 280px, 320px 320px, 200px 200px, 360px 360px, 240px 240px, 300px 300px, 260px 260px, 220px 220px;
  opacity:.55;
  animation:drift 160s linear infinite;
}
@keyframes drift{ to{ transform:translate3d(-60px,-40px,0); } }

/* звёздное поле с индивидуальным мерцанием (создаётся в app.js) */
.bg-starfield{ position:absolute; inset:0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.bg-starfield span{ position:absolute; border-radius:50%;
  animation-name:starTwinkle; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; will-change:opacity, transform; }
@keyframes starTwinkle{
  0%,100%{ opacity:.18; transform:scale(.7); }
  50%    { opacity:1;   transform:scale(1.12); }
}

/* CSS-туманности отключены (фон берётся из nebula.png) */
.bg-nebula{ display:none; position:absolute; border-radius:50%; filter:blur(80px); opacity:.72;
  will-change:transform, opacity; mix-blend-mode:screen; }
.bg-nebula--1{ width:660px; height:660px; top:6%; right:1%;             /* фиолетовая, за спиралью */
  background:radial-gradient(circle, rgba(170,110,255,.72) 0%, rgba(115,70,225,.34) 40%, rgba(70,45,180,.12) 62%, transparent 74%);
  animation:nebulaA 28s ease-in-out infinite; }
.bg-nebula--2{ width:720px; height:720px; bottom:-2%; right:8%;          /* сине-фиолетовая */
  background:radial-gradient(circle, rgba(85,115,245,.52) 0%, rgba(60,75,210,.2) 48%, transparent 72%);
  animation:nebulaB 36s ease-in-out infinite; }
.bg-nebula--3{ width:500px; height:500px; top:34%; right:-3%;            /* розово-магента акцент */
  background:radial-gradient(circle, rgba(245,110,185,.42) 0%, rgba(175,80,205,.16) 50%, transparent 72%);
  animation:nebulaA 32s ease-in-out infinite reverse; }
@keyframes nebulaA{
  0%,100%{ transform:translate(0,0) scale(1);      opacity:.62; }
  50%    { transform:translate(44px,-32px) scale(1.22); opacity:.9; }
}
@keyframes nebulaB{
  0%,100%{ transform:translate(0,0) scale(1.05);   opacity:.5; }
  50%    { transform:translate(-54px,22px) scale(1.3); opacity:.78; }
}

/* ОБЪЁМНЫЕ ОБЛАКА ТУМАННОСТИ / ГЛУБИНА (создаются в app.js, слой за всем) */
.bg-clouds{ position:absolute; inset:0; overflow:hidden; }
.bg-clouds span{ position:absolute; border-radius:50%; filter:blur(60px);
  mix-blend-mode:screen; will-change:transform, opacity;
  animation-name:cloudFloat; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; }
@keyframes cloudFloat{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.35; }
  50%    { transform:translate(var(--dx,22px), var(--dy,-18px)) scale(1.16); opacity:.6; }
}

/* FLOATING PARTICLES: золотая энергетическая пыль (создаётся в app.js) */
.bg-pollen{ position:absolute; inset:0; overflow:hidden;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.bg-pollen span{ position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(185,145,255,1), rgba(124,77,255,0) 70%);
  box-shadow:0 0 5px rgba(160,110,255,.5);
  filter:blur(.4px);
  animation-name:pollen; animation-timing-function:linear;
  animation-iteration-count:infinite; }
.bg-pollen span.is-gold{
  background:radial-gradient(circle, rgba(255,226,140,1), rgba(255,200,90,0) 70%);
  box-shadow:0 0 7px rgba(255,205,110,.75), 0 0 14px rgba(255,190,80,.4); }
@keyframes pollen{
  0%   { transform:translate(0,0); }
  25%  { transform:translate(18px,-40px); }
  50%  { transform:translate(-12px,-90px); }
  75%  { transform:translate(14px,-140px); }
  100% { transform:translate(0,-190px); }
}

/* ------------------------------------------------------------- ПОСТЕР ---- */
.poster{
  position:relative; z-index:1;
  width:90%; max-width:1760px; margin:0 auto;   /* контент ~90% ширины монитора */
  padding:16px clamp(16px,2vw,48px) 16px;
  display:flex; flex-direction:column;
  height:100vh; max-height:100vh; overflow:hidden;   /* первый экран без скролла */
}

/* -------------------------------------------------------------- ШАПКА ---- */
/* шапка: распорка | ЛОГО ПО ЦЕНТРУ | соц.иконки справа (выравнивание по верху) */
.topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:flex-start;
  gap:16px; padding:10px 8px;
}
.brand{ position:relative; grid-column:2; justify-self:center; display:flex; align-items:flex-start; }
/* официальный PNG-логотип BONUSNO — обрезка прозрачных полей обёрткой (адаптивно).
   значения вычислены из PNG: контент 81.6% шир., поля сверху ~30% / снизу ~34% */
.brand__logo{ position:relative; overflow:hidden;
  width:440px; max-width:90vw; aspect-ratio:3.377; }
.brand__logo img{ position:absolute; display:block; height:auto;
  width:122.55%; left:-8.82%; top:-82.60%;
  -webkit-user-drag:none; user-select:none; }
/* группа соц.иконок прижата к верху-правому углу, не зависит от размера логотипа */
.topbar__right{ grid-column:3; justify-self:end; align-self:flex-start; }
/* ЭКСКЛЮЗИВНЫЕ БОНУСЫ: Montserrat Medium, крупнее, шире трекинг, золото, без лишнего свечения */
.brand__tag{ font-family:'Montserrat',sans-serif; margin-top:9px; font-size:13px; letter-spacing:13px;
  color:#e9cf94; font-weight:500; text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.5); opacity:1; }

/* правая часть шапки: группа соц.иконок + отдельный бейдж 18+ */
.topbar__right{ display:inline-flex; align-items:center; gap:12px; }

/* ============ ЕДИНЫЙ КОМПОНЕНТ СОЦ.ИКОНКИ (шапка + футер) ============ */
.social{ display:inline-flex; align-items:center; gap:10px; }
.social-icon{ width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center;
  border-radius:14px; text-decoration:none; color:#fff;
  background:linear-gradient(180deg, rgba(40,30,74,.72), rgba(14,10,30,.72));
  border:1px solid rgba(160,130,255,.28);
  backdrop-filter:blur(10px) saturate(130%); -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 8px 22px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.10),
             0 0 16px rgba(124,77,255,.28);                 /* мягкое свечение */
  transition:transform .2s, box-shadow .2s; }
.social-icon:hover{ transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.14),
             0 0 26px rgba(124,77,255,.55); }
.social-icon svg{ display:block; filter:drop-shadow(0 0 6px currentColor); }
/* бокс одинаковый, цвет несёт только глиф (бренд) */
.social-icon[data-net="telegram"]{ color:#3ec1f3; }
.social-icon[data-net="instagram"]{ color:#ff5fa6; }
.social-icon[data-net="kick"]{ color:#53fc18; }

/* бейдж 18+ — отдельный элемент, НЕ соц.иконка (круг, другой стиль) */
.age-badge{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:.5px;
  color:#ffe49a; text-decoration:none;
  background:radial-gradient(circle at 30% 30%, #2a1f55, #120c2c);
  border:2px solid rgba(139,92,246,.5); box-shadow:0 0 18px rgba(124,77,255,.4); }

/* --------------------------------------------------------- КОНТЕНТ ------- */
.content{
  flex:1; min-height:0;
  /* левый текст ~38%, карточки ~60% (главный элемент, смещены вправо) */
  display:grid; grid-template-columns:minmax(320px,0.66fr) 1fr;
  align-items:center; gap:clamp(20px,2.5vw,56px);
  padding:6px 0;
}

/* левый текст */
.hero{ max-width:528px; }

/* ============ ГОТОВЫЕ PNG-АССЕТЫ (авто-обрезка прозрачных полей) ============
   Обёртка клипает картинку строго по её контенту (значения вычислены из PNG):
   --ar = пропорции контента, --iw/--il/--it = масштаб и сдвиг картинки. */
.ui-asset{ position:relative; overflow:hidden; max-width:100%;
  width:var(--w,100%); aspect-ratio:var(--ar); }
.ui-asset img{ position:absolute; display:block; height:auto;
  width:var(--iw); left:var(--il); top:var(--it);
  -webkit-user-drag:none; user-select:none; }

/* левый блок (hero шире -> описание ~+10%, иконки преимуществ ~+18%; заголовок ~прежний) */
.ui-asset--title   { --w:91%;  --ar:3.563; --iw:151.98%; --il:-17.02%; --it:-105.42%; }
.ui-asset--desc    { --w:100%; --ar:3.268; --iw:126.42%; --il:-6.70%;  --it:-69.97%;  margin-top:18px; }
.ui-asset--benefits{ --w:97%;  --ar:2.722; --iw:123.00%; --il:-13.04%; --it:-52.00%;  margin-top:24px; }
/* нижние панели — ЕДИНАЯ система: одинаковая ширина, по центру (одна ось), крупнее */
.ui-asset--stats   { --ar:4.957; --iw:112.49%; --il:-7.09%;  --it:-116.70%;
  width:clamp(520px, 46vw, 640px); height:auto; max-width:94%; margin:1.6vh auto 0; }
.ui-asset--footer  { --ar:4.187; --iw:113.38%; --il:-6.92%;  --it:-94.94%;
  width:clamp(520px, 46vw, 640px); height:auto; max-width:94%; margin:1vh auto 0; }

/* кликабельные зоны поверх иконок footer-ui.png (масштабируются вместе с PNG, % от враппера) */
.footer-ui-wrap{ position:relative; }
.footer-hotspot{ position:absolute; display:block; z-index:5; background:transparent; cursor:pointer; }
.footer-telegram { left:52%; top:18%; width:11%; height:60%; }
.footer-instagram{ left:66%; top:18%; width:11%; height:60%; }
.footer-kick     { left:80%; top:18%; width:11%; height:60%; }
/* строго заданные параметры заголовка (спокойнее и дороже, без glow/stroke) */
.hero__title{ font-family:'Montserrat','Inter',sans-serif;
  font-weight:800; font-size:clamp(48px,5.2vw,84px);
  line-height:0.92; letter-spacing:-0.04em; text-transform:uppercase; }
/* белые строки */
.hero__title .ln{ display:block; white-space:nowrap;
  color:#f4f1e8;
  text-shadow:0 2px 0 rgba(0,0,0,0.35),
              0 8px 24px rgba(0,0,0,0.45); }
/* золотые строки */
.hero__title .ln--gold{
  background:linear-gradient(180deg, #ffe28a 0%, #d89b22 55%, #9f6511 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,0.45),
              0 10px 26px rgba(0,0,0,0.55); }
/* больше воздуха: расстояние заголовок -> описание увеличено */
.hero__divider{ color:var(--gold); margin:34px 0; letter-spacing:6px; font-size:12px;
  position:relative; }
.hero__divider::before,.hero__divider::after{ content:""; position:absolute; top:50%;
  width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.hero__divider::before{ left:0; transform:translateX(-70px); }
.hero__divider::after{ left:24px; background:linear-gradient(90deg,var(--gold),transparent); }
.hero__text{ font-family:'Inter',sans-serif; font-weight:400; color:#c6cae1;
  font-size:15.4px; line-height:1.9; max-width:380px; }
.hero__features{ list-style:none; display:flex; gap:26px; margin-top:40px; }
.hero__features li{ width:90px; text-align:center; font-size:11px; color:var(--txt-dim);
  line-height:1.3; }
.feat-ic{ width:54px; height:54px; margin:0 auto 10px; display:grid; place-items:center;
  border-radius:50%; color:var(--gold);
  background:radial-gradient(circle at 30% 25%, #221646, #0d0922);
  border:1px solid rgba(242,193,78,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 12px rgba(242,193,78,.12); }

/* ---------------------------------------------------------- СПИРАЛЬ ------ */
.spiral{ position:relative; width:100%; max-width:1000px;
  height:clamp(400px, 58vh, 620px);   /* орбита ниже -> помещается в 100vh */
  margin:0 auto; justify-self:center; }
.spiral__rings{ position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none; transform:perspective(900px) rotateX(8deg); }
/* насыщенное золотое свечение вокруг орбиты (за карточками) */
.spiral__rings::before{ content:""; position:absolute; left:50%; top:50%;
  width:82%; height:58%; transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(245,188,60,.32), transparent 72%),
    radial-gradient(closest-side, rgba(255,210,95,.20), transparent 58%);
  filter:blur(24px); border-radius:50%; }
/* золотое энергетическое ядро в центре орбиты (пульсирует, за центральной картой) */
.spiral__rings::after{ content:""; position:absolute; left:50%; top:50%;
  width:42%; height:42%; transform:translate(-50%,-50%); border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(255,222,130,.50), rgba(245,185,55,.28) 44%, transparent 72%);
  filter:blur(15px); animation:corePulse 4.5s ease-in-out infinite; }
@keyframes corePulse{
  0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;  transform:translate(-50%,-50%) scale(1.14); }
}
/* ЗОЛОТЫЕ светящиеся орбитальные кольца — насыщенные */
.spiral__rings span{ position:absolute; border-radius:50%;
  border:1.6px solid rgba(245,188,60,.6);
  box-shadow:0 0 20px rgba(245,185,55,.38), inset 0 0 30px rgba(245,190,70,.16); }
.spiral__rings span:nth-child(1){ width:54%; height:40%; transform:rotate(-7deg);
  border:1.8px solid rgba(255,208,90,.9);
  box-shadow:0 0 26px rgba(255,195,60,.7), 0 0 50px rgba(255,185,50,.3), inset 0 0 26px rgba(255,205,85,.28); }
.spiral__rings span:nth-child(2){ width:78%; height:58%; transform:rotate(-7deg);
  border-color:rgba(245,190,60,.7);
  box-shadow:0 0 22px rgba(245,185,55,.5), inset 0 0 30px rgba(245,190,70,.2); }
.spiral__rings span:nth-child(3){ width:100%; height:76%; transform:rotate(-7deg);
  border-color:rgba(242,186,62,.55);
  box-shadow:0 0 22px rgba(245,185,55,.38); }

/* золотые СВЕТЯЩИЕСЯ звёзды вдоль орбиты (создаются в app.js) */
.orbit-dust{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.orbit-dust span{ position:absolute; border-radius:50%;
  background:#fff4c8;
  box-shadow:0 0 8px 1.5px rgba(255,214,100,1), 0 0 18px rgba(255,196,70,.8), 0 0 30px rgba(255,185,55,.45);
  animation-name:starTwinkle; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; }

.spiral__stage{ position:absolute; inset:0; touch-action:none; cursor:grab; }
.spiral__stage.is-grabbing{ cursor:grabbing; }

/* карточка — премиальное стекло */
.card{
  position:absolute; left:0; top:0;
  width:120px; min-height:144px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:16px 12px;
  border-radius:22px; text-decoration:none; color:var(--txt);
  /* индивидуальные параметры стекла (переопределяются по :nth-child) */
  --goldb:.46;       /* золотой контур */
  --purpc:.30;       /* фиолетовый контур (снаружи) */
  --glow:.22;        /* золотое свечение */
  --pglow:.16;       /* фиолетовое свечение */
  --top:.24;         /* верхняя стеклянная кромка */
  --inner:.07;       /* фиол. преломление у краёв */
  --depth:.26;       /* глубина стекла снизу */
  --blur:18px;       /* толщина стекла (размытие) */
  --cosmic:.10;      /* отражения/преломления внутри */
  /* ПРОЗРАЧНОЕ стекло: фон ~6-8%, без фиолетовых заливок (фон виден сквозь) */
  background:
    linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.02) 46%, rgba(255,255,255,.05));
  /* внутренняя кромка стекла (золото) */
  border:1px solid rgba(242,193,78,var(--goldb));
  backdrop-filter:blur(var(--blur)) saturate(125%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(125%);
  /* ДВОЙНОЙ СВЕТЯЩИЙСЯ КОНТУР (золото у края + фиолетовый снаружи) + толщина стекла */
  box-shadow:
    0 0 0 1px rgba(242,193,78,var(--goldb)),          /* золотой контур */
    0 0 0 2.5px rgba(150,95,240,var(--purpc)),        /* фиолетовый контур снаружи */
    0 0 14px rgba(242,193,78,var(--glow)),            /* золотое свечение */
    0 0 24px rgba(140,80,235,var(--pglow)),           /* фиолетовое свечение */
    0 22px 46px rgba(0,0,0,.5),                       /* глубокая тень (объём) */
    0 6px 14px rgba(0,0,0,.32),
    inset 0 1.5px 1px rgba(255,255,255,var(--top)),   /* верхняя стеклянная кромка (толщина) */
    inset 0 0 18px rgba(150,110,235,var(--inner)),    /* фиол. преломление у краёв */
    inset 0 -16px 28px rgba(0,0,0,var(--depth));      /* нижняя глубина стекла */
  will-change:transform, opacity, filter;
  user-select:none; -webkit-user-drag:none;
  isolation:isolate;
}
/* СЛОЙ ОТРАЖЕНИЙ: диагональный глянцевый блик в верхней части + лёгкий космический отблеск */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:
    /* крупный диагональный верхний блик (как в референсе) */
    linear-gradient(125deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 13%, transparent 33%),
    /* световой ореол в верхнем углу */
    radial-gradient(46% 28% at 22% 2%, rgba(255,255,255,.24), transparent 72%),
    /* преломление/отражение по правому краю */
    linear-gradient(255deg, rgba(170,110,255,var(--cosmic)) 0%, transparent 20%),
    /* мягкий световой перелив */
    radial-gradient(22% 16% at 78% 22%, rgba(150,180,255,var(--cosmic)), transparent 74%);
  mix-blend-mode:screen;
}
/* очень тонкий стеклянный рим (не неон, вдвое слабее) */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  padding:1px;
  background:linear-gradient(140deg,
    rgba(255,255,255,.32) 0%, rgba(242,193,78,.16) 50%, rgba(255,255,255,.26) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5;
}
.card__logo{ height:36px; display:grid; place-items:center; position:relative; z-index:4; }
.card__bonus, .card__sub, .card__cta{ position:relative; z-index:4; }
/* логотипы — крупнее, резкие и яркие */
.card__logo img{ max-height:36px; max-width:106px; object-fit:contain;
  -webkit-user-drag:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.7)) brightness(1.1) contrast(1.05); }
.card__logo-txt{ font-family:var(--font-display); font-weight:700; font-size:16px;
  letter-spacing:.5px; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6), 0 0 10px rgba(160,150,255,.35); white-space:nowrap; }
/* БОНУС — главный визуальный элемент: золотой металлик с объёмом */
.card__bonus{ font-family:var(--font-display); font-size:26px; font-weight:800;
  line-height:1; letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff4c2 0%,#ffd86b 30%,#f3bd3d 58%,#a9751f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(120,80,10,.5))
         drop-shadow(0 2px 5px rgba(0,0,0,.45))
         drop-shadow(0 0 12px rgba(242,193,78,.4)); }
.card__sub{ font-family:var(--font-body); font-size:10px; font-weight:500;
  color:#dde0f2; text-align:center; line-height:1.25; letter-spacing:.3px;
  text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* --- УНИКАЛЬНОСТЬ КАРТОЧЕК ---
   каждая карта получает свой набор: толщина стекла, свечение, фаска, отражения.
   (специфичность совпадает с .card.is-active, но эти правила ВЫШЕ -> флагман выигрывает) */
.card:nth-child(6n+1){ --goldb:.50; --purpc:.34; --glow:.24; --pglow:.18; --top:.26; --inner:.08; --depth:.27; --blur:20px; --cosmic:.11; }
.card:nth-child(6n+2){ --goldb:.42; --purpc:.26; --glow:.18; --pglow:.13; --top:.20; --inner:.05; --depth:.23; --blur:16px; --cosmic:.08; }
.card:nth-child(6n+3){ --goldb:.46; --purpc:.30; --glow:.22; --pglow:.16; --top:.24; --inner:.07; --depth:.26; --blur:18px; --cosmic:.10; }
.card:nth-child(6n+4){ --goldb:.44; --purpc:.28; --glow:.20; --pglow:.14; --top:.22; --inner:.06; --depth:.24; --blur:17px; --cosmic:.09; }
.card:nth-child(6n+5){ --goldb:.52; --purpc:.36; --glow:.26; --pglow:.19; --top:.28; --inner:.09; --depth:.28; --blur:21px; --cosmic:.12; }
.card:nth-child(6n+6){ --goldb:.41; --purpc:.25; --glow:.17; --pglow:.12; --top:.19; --inner:.05; --depth:.22; --blur:16px; --cosmic:.07; }
/* у части карт — чуть сильнее диагональный глянец */
.card:nth-child(3n+1)::before{ background-image:
    linear-gradient(130deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.09) 17%, transparent 38%),
    radial-gradient(60% 32% at 26% 2%, rgba(255,255,255,.20), transparent 72%),
    radial-gradient(24% 16% at 74% 18%, rgba(150,180,255,var(--cosmic)), transparent 74%); }

/* =====================================================================
   ЦЕНТРАЛЬНАЯ КАРТА VAVADA — по эталонному референсу
   - тёмное стекло с видимым космосом
   - ВНЕШНЯЯ светящаяся рамка ЗОЛОТО→ФИОЛЕТ с зазором (::before)
   - тонкая золотая внутренняя кромка
   - диагональный блик сверху-слева
   - красный логотип VAVADA, золотой 3D-бонус, золотая капсула-кнопка
   (базовый .card и остальные карты НЕ затрагиваются — ждём подтверждения)
===================================================================== */
.card.is-active{
  width:160px; min-height:226px; border-radius:26px;     /* портретная пропорция референса */
  padding:18px 15px 16px; gap:7px;
  overflow:visible;
  /* ОСНОВА: тёмное прозрачное стекло + видимый космос + слабый шум-точки */
  background-image:
    radial-gradient(circle at 24% 14%, rgba(255,255,255,.16), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(150,90,235,.20), transparent 26%),
    radial-gradient(circle at 60% 88%, rgba(120,55,235,.22), transparent 40%),
    radial-gradient(rgba(255,255,255,.09) .6px, transparent .8px),               /* шум-точки */
    linear-gradient(150deg, rgba(20,16,40,.30) 0%, rgba(10,8,24,.5) 46%, rgba(4,3,12,.7) 100%);
  background-size:auto,auto,auto,7px 7px,auto;
  border:1px solid rgba(255,214,122,.55);                /* тонкая внутренняя золотая кромка */
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  /* объём + внутреннее золото/фиолет. свечение + глубина */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 0 42px rgba(120,55,230,.14),
    0 30px 80px rgba(0,0,0,.7);
  cursor:pointer;
}
/* ВНЕШНЯЯ СВЕТЯЩАЯСЯ РАМКА (золото слева/сверху -> фиолет справа), с зазором */
.card.is-active::before{
  content:""; position:absolute; inset:-10px; border-radius:36px; padding:3px;
  background:linear-gradient(115deg,
    #ffd784 0%, #f6ad3e 26%, #cf8a36 46%, #7a3ff0 80%, #b06bff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 9px rgba(255,184,74,.55)) drop-shadow(0 0 16px rgba(150,70,240,.5));
  pointer-events:none; z-index:5; mix-blend-mode:normal;
}
/* ВЕРХНИЙ СТЕКЛЯННЫЙ БЛИК — диагональ сверху-слева */
.card.is-active::after{
  inset:0; padding:0; border-radius:inherit; z-index:3;
  -webkit-mask:none; mask:none;
  background:linear-gradient(118deg,
    rgba(255,255,255,.26) 0%, rgba(255,255,255,.09) 13%, transparent 34%);
  opacity:.6; mix-blend-mode:screen;
}
/* ЛОГОТИП — крупный VAVADA, фирменный красный */
.card.is-active .card__logo{ height:34px; margin-bottom:2px; }
.card.is-active .card__logo img{ max-height:34px; max-width:128px;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.18)) drop-shadow(0 0 18px rgba(255,60,90,.22)); }
.card.is-active .card__logo-txt{ font-size:27px; font-weight:900; letter-spacing:1px;
  background:linear-gradient(180deg,#ff5a73 0%,#ec1f43 55%,#c00f30 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 0 14px rgba(255,40,80,.45)); }
/* БОНУС — главный элемент: золотой 3D с фаской и обводкой */
.card.is-active .card__bonus{
  font-size:42px; font-weight:800; line-height:.95;
  background:linear-gradient(180deg,#fff7d2 0%,#ffe388 24%,#f4ba3c 52%,#c9871f 76%,#7c4a12 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:.8px rgba(70,38,6,.45);
  filter:drop-shadow(0 1px 0 rgba(60,30,4,.6))
         drop-shadow(0 2px 3px rgba(0,0,0,.5))
         drop-shadow(0 0 16px rgba(255,200,90,.5)); }
/* SUBTITLE — с золотыми ромбиками по бокам */
.card.is-active .card__sub{ font-size:11px; color:rgba(255,255,255,.78);
  letter-spacing:.12em; text-transform:uppercase; text-shadow:0 1px 4px rgba(0,0,0,.7);
  display:flex; align-items:center; gap:8px; }
.card.is-active .card__sub::before,
.card.is-active .card__sub::after{ content:"◆"; font-size:6px; color:rgba(255,200,110,.8); }
/* КНОПКА — золотая капсула, светлый текст, шеврон */
.card.is-active .card__cta{
  margin-top:4px; padding:9px 16px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#ffe796 0%,#ffc452 50%,#f0a02e 100%);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  font-weight:800; letter-spacing:.3px;
  text-shadow:0 1px 1px rgba(120,70,10,.6);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 0 18px rgba(255,193,74,.45),
             inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -2px 4px rgba(150,90,10,.4); }
.card.is-active .card__cta::after{ content:"›"; font-size:15px; font-weight:900;
  color:#fff; line-height:1; }

/* кнопка "Забрать бонус" — тёмное стекло с золотой светящейся рамкой (как в референсе) */
.card__cta{
  display:none; margin-top:10px; max-width:100%;
  padding:8px 16px; border-radius:11px;
  font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  text-align:center; line-height:1.2;
  text-decoration:none; color:#ffe49a;
  background:linear-gradient(180deg, rgba(50,38,16,.42), rgba(20,16,8,.5));
  border:1px solid rgba(255,215,120,.6);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  box-shadow:0 0 14px rgba(242,193,78,.32), 0 6px 16px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 12px rgba(242,193,78,.12);
  text-shadow:0 0 8px rgba(242,193,78,.45), 0 1px 1px rgba(0,0,0,.55);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.card.is-active .card__cta{ display:inline-block; animation:ctaIn .35s ease both; }
.card__cta:hover{ transform:translateY(-1px); filter:brightness(1.1);
  box-shadow:0 0 20px rgba(242,193,78,.6), 0 9px 22px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 14px rgba(242,193,78,.2); }
.card__cta:active{ transform:translateY(0); }
@keyframes ctaIn{ from{ opacity:0; transform:translateY(6px) scale(.9); }
  to{ opacity:1; transform:none; } }

/* =====================================================================
   PNG-КАРТА (напр. VAVADA) — визуал берётся из готового изображения.
   Снимаем всё CSS-стекло; спираль/масштаб/hover/активная позиция остаются.
===================================================================== */
.card.card--image,
.card.is-active.card--image{
  width:auto; min-height:0; padding:0; gap:0; border:0; border-radius:0;
  background:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; overflow:visible;
}
.card.card--image::before, .card.card--image::after,
.card.is-active.card--image::before, .card.is-active.card--image::after{
  content:none; display:none;
}
/* изображение карты — оригинальный PNG, размер по ВЫСОТЕ (не растягиваем) */
.card--image .card__img{
  display:block; height:174px; width:auto; max-height:174px; object-fit:contain;
  image-rendering:auto; pointer-events:none; user-select:none;
  filter:none;   /* без blur/тени на самой картинке -> чётко */
}
/* hover — лёгкий подъём, как у остальных интерактивных элементов */
.card--image:hover{ filter:brightness(1.05); }
/* прозрачная кликабельная зона поверх кнопки «ЗАБРАТЬ» (только на активной карте) */
.card--image .card__cta{ display:none; }
.card.is-active.card--image .card__cta{
  display:block; position:absolute; inset:auto; margin:0; padding:0;
  left:16%; top:64%; width:68%; height:23%;   /* широкая зона: «ЗАБРАТЬ» надёжно кликабельна */
  background:transparent; border:0; box-shadow:none; cursor:pointer;
  backdrop-filter:none; -webkit-backdrop-filter:none; animation:none;
  font-size:0; border-radius:0;
}
.card.is-active.card--image .card__cta::after{ content:none; }
.card.is-active.card--image .card__cta:hover{ transform:none; filter:none; box-shadow:none; }

/* ------------------------------------------------------ НИЖНЯЯ ПАНЕЛЬ ---- */
.statbar{
  display:flex; flex-wrap:wrap; justify-content:space-around; gap:14px;
  padding:18px 24px; margin-top:6px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(24,16,52,.7), rgba(10,7,26,.7));
  border:1px solid rgba(242,193,78,.22);
  box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.stat{ display:inline-flex; align-items:center; gap:12px; font-size:13px;
  font-family:'Inter',sans-serif; font-weight:400; }
.stat__ic{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  color:var(--gold);
  background:radial-gradient(circle at 30% 25%, #211543, #0c0820);
  border:1px solid rgba(242,193,78,.3); }

/* ---------------------------------------------------------- ФУТЕР -------- */
.footer{ display:grid; grid-template-columns:auto auto 1fr; align-items:center;
  gap:26px; padding:22px 6px 6px; margin-top:14px; }
.footer__left{ display:inline-flex; align-items:center; gap:10px; }
.footer__age{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  font-weight:800; font-size:13px; color:#fff;
  background:radial-gradient(circle at 30% 30%, #2a1f55, #120c2c);
  border:2px solid rgba(139,92,246,.5); }
.footer__agetxt{ font-size:11px; letter-spacing:2px; color:var(--txt-dim); font-weight:700;
  max-width:90px; line-height:1.3; }
/* иконки в футере используют тот же компонент .social / .social-icon, что и шапка */
.footer__disclaimer{ justify-self:end; text-align:right; font-size:10px; color:#6a6390;
  line-height:1.5; white-space:pre-line; max-width:300px; }

/* ------------------------------------------------------ АДАПТИВ ---------- */
@media (max-width:880px){
  .content{ grid-template-columns:1fr; gap:24px; }
  .hero{ max-width:none; text-align:center; margin:0 auto; }
  .hero__text{ margin:0 auto; }
  .hero__features{ justify-content:center; }
  .hero__divider::before{ display:none; } .hero__divider::after{ display:none; }
  .spiral{ max-width:440px; }
  .footer{ grid-template-columns:1fr 1fr; gap:18px; text-align:center; }
  .footer__disclaimer{ grid-column:1/-1; justify-self:center; text-align:center; }
}
@media (max-width:520px){
  .topbar{ grid-template-columns:1fr; justify-items:center; gap:12px; }
  .brand{ grid-column:1; justify-self:center; }
  .topbar__right{ grid-column:1; justify-self:center; }
  .spiral{ max-width:330px; }
  .card{ width:96px; min-height:118px; }
  .footer{ grid-template-columns:1fr; }
}