/* elabets.it — редизайн v2, 25.08.2026. Тёмный + зелёный неон.
   v1 (травертин) отклонён владельцем: «совсем не похоже на сайт казино».
   Грузится ПОСЛЕ style.css. Разметка не менялась. */

@font-face{font-family:'RD Archivo';src:url(/fonts/rd-archivo.woff2) format('woff2-variations');
  font-weight:400 900;font-stretch:62% 125%;font-display:swap;font-style:normal}

:root{
  /* чёрный с зелёным подмесом, а не синий #0e101f оригинала */
  --nx-void:#070B08; --nx-deep:#0C120D; --nx-panel:#121A14; --nx-line:rgba(47,224,92,.18);
  --nx-neon:#2FE05C; --nx-neon-soft:rgba(47,224,92,.55);
  --nx-txt:#E8F2E9; --nx-txt-soft:rgba(232,242,233,.72); --nx-txt-mute:rgba(232,242,233,.46);

  --elabe-primary:#1a8e18; --elabe-primary-light:var(--nx-neon); --elabe-primary-dark:#12690f;
  --elabe-primary-alpha-20:rgba(47,224,92,.16); --elabe-accent:#e10808;
  --elabe-bg-dark:var(--nx-void); --elabe-bg-light:var(--nx-deep);
  --elabe-bg-card:var(--nx-panel); --elabe-bg-card-hover:#18231A;
  --elabe-bg-page:var(--nx-void); --elabe-bg-surface:var(--nx-panel);
  --elabe-bg-surface-hover:#18231A;
  --elabe-text-primary:var(--nx-txt); --elabe-text-secondary:var(--nx-txt-soft);
  --elabe-text-muted:var(--nx-txt-mute);
  --elabe-gradient-primary:#1a8e18; --elabe-gradient-dark:var(--nx-void);
  --elabe-radius-sm:3px; --elabe-radius:3px; --elabe-radius-lg:3px;
  --elabe-font-heading:'RD Archivo',system-ui,sans-serif;
  --elabe-font-body:'RD Archivo',system-ui,sans-serif;
}

/* ── подложка: чёрный + неоновое свечение сверху ───────────────────────── */
body{
  background-color:var(--nx-void); color:var(--nx-txt);
  font-family:var(--elabe-font-body); font-variation-settings:'wdth' 100;
  font-size:1.0625rem; line-height:1.6;
  background-image:
    radial-gradient(1100px 520px at 50% -140px, rgba(47,224,92,.13), transparent 70%),
    repeating-linear-gradient(90deg, rgba(47,224,92,.035) 0 1px, transparent 1px 104px);
  background-repeat:no-repeat, repeat;
}
p,li,td{color:var(--nx-txt-soft);font-size:1.0625rem;line-height:1.6}
strong{color:var(--nx-txt);font-weight:650}

/* ── одна гарнитура, контраст держится шириной, весом и регистром ──────── */
h1,h1.elabe-head-title,[class*="-head-title"],main h1:first-child,
main [class*="-head-title"]:first-child{
  font-size:clamp(1.75rem,4.8vw,4.3rem)!important;
  font-family:var(--elabe-font-heading); font-variation-settings:'wdth' 125;
  font-weight:850; line-height:.95; letter-spacing:-.035em;
  text-transform:uppercase; color:var(--nx-txt); margin:.15em 0 .45em; text-wrap:balance;
}
h2,h3,.games-section-title{font-family:var(--elabe-font-heading);
  font-variation-settings:'wdth' 118; text-transform:uppercase; letter-spacing:-.02em;
  color:var(--nx-txt); font-weight:750}
h2{font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.04}
h3{font-size:clamp(1rem,1.3vw,1.15rem)}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.elabe-header{background:rgba(7,11,8,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--nx-line)}
.header-nav{gap:16px;flex-wrap:nowrap}
.header-nav div,.header-nav a.js-redirect,.header-nav a{
  font-family:var(--elabe-font-heading); font-variation-settings:'wdth' 106;
  letter-spacing:.05em; font-size:11.5px; font-weight:600; white-space:nowrap;
  color:var(--nx-txt-soft)}
.header-nav div:hover,.header-nav a.js-redirect:hover{color:var(--nx-neon)}
.header-nav a.active{color:var(--nx-neon);border-bottom:2px solid var(--nx-neon);padding-bottom:6px}
.logo-img{height:46px;width:auto}

/* ── hero: полоса во всю ширину со свечением ───────────────────────────── */
.elabe-lead-gradient{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border-block:1px solid var(--nx-line); border-radius:0;
  padding-block:clamp(28px,5vw,72px);
}
/* background НЕ трогаем: там background-image с баннером и тёмным скримом,
   шорткат его затирал — это была причина «баннер наполовину не виден» */
.elabe-lead-gradient h1,.elabe-lead-gradient h2{color:#fff}
.elabe-lead,.elabe-lead-gradient p{color:var(--nx-txt-soft)}

/* ── боковой рельс (структурная ось 1) ─────────────────────────────────── */
@media(min-width:1000px){
  .elabe-content-block>.elabe-inner{display:grid;
    grid-template-columns:minmax(180px,232px) minmax(0,1fr);
    column-gap:clamp(32px,4.5vw,76px);align-items:start}
  .elabe-content-block>.elabe-inner>h2{grid-column:1;position:sticky;top:96px;margin:0;
    padding-top:.15em;border-top:2px solid var(--nx-neon)}
  .elabe-content-block>.elabe-inner>*:not(h2){grid-column:2}
  .elabe-content-block>.elabe-inner>.elabe-supplier-grid{grid-column:1/-1}
}
.elabe-content-block{padding-block:clamp(30px,4.5vw,72px);border-top:1px solid rgba(232,242,233,.07)}
.elabe-content-block:nth-of-type(even){background:rgba(18,26,20,.5)}

/* ── число вместо карточки (структурная ось 2) ─────────────────────────── */
.elabe-metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;border-top:1px solid var(--nx-neon);margin:22px 0 30px}
.elabe-num-card{background:none;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid rgba(232,242,233,.12);border-right:1px solid rgba(232,242,233,.12);
  padding:22px 18px 18px;text-align:left}
.elabe-num-card:hover{background:transparent;transform:none}
.elabe-fig-ico{display:none}
.elabe-fig-val{font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 118;
  font-size:clamp(38px,4.6vw,74px);font-weight:800;line-height:.9;letter-spacing:-.045em;
  color:var(--nx-neon);text-shadow:0 0 26px rgba(47,224,92,.35)}
.elabe-fig-cap,.elabe-kpi-lab{font-family:var(--elabe-font-heading);
  font-variation-settings:'wdth' 100;text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--nx-txt-mute);margin-top:8px}

/* ── bento (структурная ось 3) ─────────────────────────────────────────── */
.elabe-play-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.elabe-play-grid>*:nth-child(12n+1){grid-column:span 2;grid-row:span 2}
.elabe-play-grid>*:nth-child(12n+8){grid-column:span 2}
.elabe-game-box{border-radius:3px;border:1px solid rgba(232,242,233,.1);background:var(--nx-panel);
  overflow:hidden;transition:border-color .2s,box-shadow .2s}
.elabe-game-box:hover{border-color:var(--nx-neon);box-shadow:0 0 0 1px var(--nx-neon-soft),0 12px 34px rgba(47,224,92,.14)}
.elabe-game-box img{display:block;width:100%;height:100%;object-fit:cover}

/* ── SIGNATURE: неоновый фриз провайдеров во всю ширину (ось 4) ────────── */
.elabe-supplier-grid{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:var(--nx-deep);border-block:1px solid var(--nx-neon);
  box-shadow:inset 0 0 60px rgba(47,224,92,.1);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;
  padding:24px clamp(12px,4vw,44px);margin-block:clamp(26px,4vw,54px)}
.elabe-vendor-chip{position:relative;background:none;border:0;border-radius:0;
  font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 125;
  text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:650;
  color:var(--nx-txt);padding:9px clamp(12px,1.8vw,24px)}
.elabe-vendor-chip+.elabe-vendor-chip::before{content:'';position:absolute;left:0;top:50%;
  width:1px;height:12px;transform:translateY(-50%);background:var(--nx-neon);opacity:.5}

/* ── контролы ──────────────────────────────────────────────────────────── */
.elabe-btn,.btn-register,.elabe-start-btn,.mobile-menu-btn{
  border-radius:999px;background:var(--elabe-primary);color:#fff;border:0;
  font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 108;
  text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;font-weight:700;
  box-shadow:0 0 0 1px rgba(47,224,92,.35),0 8px 26px rgba(47,224,92,.18)}
.elabe-btn:hover,.btn-register:hover{background:var(--nx-neon);color:#04120A}
a.btn-login,.elabe-header .btn-login{background:transparent;color:var(--nx-txt);
  border:1px solid rgba(232,242,233,.28);border-radius:999px}
a.btn-login:hover{border-color:var(--nx-neon);color:var(--nx-neon)}

/* ── таблицы, FAQ, шаги ────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%}
th{font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 100;
  text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--nx-txt-mute);
  text-align:left;border-bottom:1px solid var(--nx-neon);padding:9px 11px}
td{border-bottom:1px solid rgba(232,242,233,.1);padding:11px}
.elabe-fq-entry{border:0;border-bottom:1px solid rgba(232,242,233,.1);border-radius:0;background:none}
.elabe-ask-head{font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 108;
  text-transform:none;letter-spacing:-.005em;font-size:1rem;color:var(--nx-txt);padding:16px 0}
.elabe-step-num{font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 125;
  font-size:30px;font-weight:800;color:var(--nx-neon);background:none;border:0;letter-spacing:-.04em}
.elabe-section-image{border:1px solid rgba(232,242,233,.12);border-radius:3px}

/* ── подвал: компактный, с видимыми бейджами ───────────────────────────── */
.elabe-footer{background:var(--nx-deep);color:var(--nx-txt-soft);border-top:1px solid var(--nx-line);
  padding:34px 0 0}
.elabe-footer h3,.footer-col strong{color:var(--nx-txt);font-family:var(--elabe-font-heading);
  font-variation-settings:'wdth' 110;text-transform:uppercase;letter-spacing:.11em;font-size:10.5px}
.footer-col li div,.footer-col li a.js-redirect{display:block;color:var(--nx-txt-soft);font-size:14px}
.footer-col li div:hover,.footer-col li a.js-redirect:hover{color:var(--nx-neon)}
/* v1 красил эти узлы тёмным по тёмному — «SSL Security» пропадал */
.elabe-secure-stamp,.elabe-sec-stamp,.elabe-footer-badges,.footer-badges{
  color:var(--nx-txt-soft)}
.elabe-secure-stamp,.elabe-sec-stamp{border:1px solid var(--nx-line);border-radius:999px;
  padding:6px 14px;font-size:11.5px;letter-spacing:.06em}
.elabe-secure-stamp i,.elabe-sec-stamp i{color:var(--nx-neon)}
.elabe-footer-disclaimer,.footer-disclaimer,.footer-bottom{color:var(--nx-txt-mute);font-size:12.5px}

/* ── МОБИЛЬНОЕ: бургер, компактный заголовок, подвал без пустот ────────── */
@media(max-width:999px){
  .header-nav{display:none!important}
  .hamburger{display:flex!important;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid rgba(232,242,233,.22);border-radius:8px}
  .hamburger span{background:var(--nx-txt)}
  .logo-img{height:34px}
  h1,h1.elabe-head-title,[class*="-head-title"],main h1:first-child{
    font-size:clamp(1.5rem,6.2vw,2rem)!important;line-height:1.02;margin:.1em 0 .4em}
  .elabe-content-block{padding-block:26px}
  .elabe-play-grid{grid-template-columns:repeat(2,1fr)}
  .elabe-play-grid>*:nth-child(12n+1){grid-column:span 2;grid-row:span 1}
  .elabe-play-grid>*:nth-child(12n+8){grid-column:span 1}
  .elabe-metric-grid{grid-template-columns:repeat(2,1fr)}
  .elabe-fig-val{font-size:34px}
  /* подвал: убираем гигантские пустоты */
  .elabe-footer{padding:22px 0 0}
  .elabe-footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 14px}
  .footer-col{margin:0}
  .elabe-footer-top,.elabe-footer-bottom{padding-block:14px}
  .elabe-footer-badges,.footer-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
}

/* ── мобильное меню в духе офсайтов: полноэкранная тёмная панель ───────── */
.mobile-menu-overlay{background:rgba(4,8,5,.72);backdrop-filter:blur(3px)}
.mobile-menu{background:var(--nx-deep);border-left:1px solid var(--nx-line)}
.mobile-menu-header{border-bottom:1px solid var(--nx-line);padding:14px 16px}
.mobile-menu-item{font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 110;
  text-transform:uppercase;letter-spacing:.07em;font-size:13px;font-weight:650;
  color:var(--nx-txt);border-bottom:1px solid rgba(232,242,233,.08);padding:15px 16px}
.mobile-menu-item:hover{color:var(--nx-neon);background:rgba(47,224,92,.06)}
.mobile-menu-auth{display:grid;gap:10px;padding:16px}
.mobile-menu-close{color:var(--nx-txt)}

/* ── доступность и движение ────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--nx-neon);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── липкая нижняя строка: непрозрачный фон явно, а не через токен ─────── */
#elabe-pin-bar{
  background:rgba(12,18,13,.97)!important; backdrop-filter:blur(10px);
  border-top:1px solid var(--nx-neon); box-shadow:0 -10px 34px rgba(0,0,0,.55);
}
.elabe-float-bonus{color:var(--nx-txt);font-family:var(--elabe-font-heading);
  font-variation-settings:'wdth' 104;font-size:13px;letter-spacing:.01em}
.elabe-fixed-cta-x{color:var(--nx-txt-mute)}
.elabe-fixed-cta-x:hover{color:var(--nx-neon);background:rgba(47,224,92,.12)}

/* ── бургер: рисуем полоски сами, если исходные не видны ──────────────── */
@media(max-width:999px){
  .hamburger{background:rgba(47,224,92,.08);border-color:var(--nx-neon)!important;
    flex-direction:column;gap:4px}
  .hamburger span{display:block;width:20px;height:2px;background:var(--nx-neon);border-radius:2px}
  .mobile-menu{background:var(--nx-deep)!important;opacity:1!important}
  .mobile-menu-overlay{background:rgba(4,8,5,.8)}
  /* баннер на мобильном обязан быть виден целиком */
  .elabe-lead-gradient{padding-block:22px;background-position:center right!important;
    min-height:auto}
  .elabe-lead{padding:16px 0 22px}
}

/* ══ мобильные исправления по замерам 25.08.2026 ═══════════════════════ */
@media(max-width:999px){
  /* 1. Полосы во всю ширину на телефоне НЕ нужны: контейнер и так почти во
        весь экран, а calc(50% - 50vw) верен только когда родитель отцентрован.
        Именно это уводило баннер за левый край. */
  .elabe-lead-gradient,.elabe-supplier-grid{
    width:auto!important;margin-left:0!important;margin-right:0!important;
    /* финализ ставил пару margin-left:50% + translate:-50% для полноширинного
       баннера. Обнулив только маргин, я оставлял translate — и блок уезжал
       ровно на половину своей ширины влево. Снимаю обе половины. */
    translate:none!important;transform:none!important;left:auto!important;right:auto!important}
  .elabe-supplier-grid{padding:18px 14px;margin-block:20px}

  /* 2. Логотип: у картинки нет класса .logo-img — бью по узлу, иначе он давится */
  .elabe-header .logo-link img,.elabe-header img,.logo-img{height:30px!important;width:auto!important;max-width:none!important}
  .elabe-header .logo-link,.elabe-header picture{flex:0 0 auto;min-width:0}

  /* 3. Таблицы шире экрана — прокрутка внутри своей обёртки, а не обрезка */
  .table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid rgba(232,242,233,.12);border-radius:3px}
  .table-wrapper table{min-width:520px}
  table,.elabe-overview-table{max-width:none}

  /* 4. Заголовок: длинные итальянские слова не должны резаться краем */
  h1,h1.elabe-head-title,[class*="-head-title"],main h1:first-child{
    font-size:clamp(1.35rem,5.6vw,1.85rem)!important;
    /* hyphens:auto рвал слова посреди — «RE-GISTRAZIO-NE». Вместо переносов
       сужаю начертание: у переменного Archivo есть ось ширины. */
    font-variation-settings:'wdth' 96!important;letter-spacing:-.015em;
    overflow-wrap:normal;word-break:normal;hyphens:none}

  /* 5. Баннер выше: декоративная строка-клейм на телефоне не нужна */
  .elabe-claim{display:none}
  .elabe-inner>p:first-of-type{margin-top:.35em}
  .elabe-lead{padding:10px 0 18px}
  .elabe-lead-gradient{padding:20px 16px}
}

/* ══ БАННЕР: ярче и выше (правка по замечанию владельца 25.08) ══════════ */

/* Затемнение было почти непрозрачным (.90→.05 на десктопе, .82/.55/.88 на
   мобильном) и синеватым — картинка не читалась. Делаю его легче и с зелёным
   подмесом, чтобы арт проступил и попал в регистр сайта. */
.elabe-lead-gradient{
  background-image:
    linear-gradient(100deg, rgba(4,12,7,.88) 0%, rgba(4,12,7,.60) 36%,
                            rgba(4,12,7,.14) 66%, rgba(47,224,92,.10) 100%),
    image-set(url('/images/banner.avif') type('image/avif'),
              url('/images/banner.webp') type('image/webp'),
              url('/images/banner.png')  type('image/png'))!important;
  border-block:1px solid var(--nx-neon);
  box-shadow:inset 0 0 90px rgba(47,224,92,.12);
}

/* плашка «Bonus di benvenuto» — из полупрозрачной белой в неоновую */
.elabe-banner-label{
  background:var(--nx-neon)!important;color:#04120A!important;
  font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 104;
  letter-spacing:.1em;box-shadow:0 0 20px rgba(47,224,92,.45);border-radius:999px}

.elabe-banner-title{
  font-family:var(--elabe-font-heading);font-variation-settings:'wdth' 120;
  text-transform:uppercase;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.65)}
.elabe-banner-text{color:rgba(255,255,255,.94)}

/* кнопка в баннере: была белая, стала неоновая — главный акцент экрана */
.elabe-banner-content .elabe-btn{
  background:var(--nx-neon)!important;color:#04120A!important;
  box-shadow:0 0 0 1px rgba(47,224,92,.65),0 12px 34px rgba(47,224,92,.38)}
.elabe-banner-content .elabe-btn:hover{background:#3BFF6C!important}

@media(max-width:999px){
  /* 1. Баннер выше текста. order меняет только ПОРЯДОК ОТРИСОВКИ —
        в DOM h1 остаётся на месте, для индексации ничего не сдвигается. */
  main.elabe-post{display:flex;flex-direction:column}
  main.elabe-post>section.elabe-lead{order:-1;margin-top:0}
  main.elabe-post>*{order:0}

  /* 2. Вертикальное затемнение тоже осветляю */
  .elabe-lead-gradient{
    background-image:
      linear-gradient(180deg, rgba(4,12,7,.70) 0%, rgba(4,12,7,.26) 48%,
                              rgba(4,12,7,.80) 100%),
      image-set(url('/images/banner.avif') type('image/avif'),
                url('/images/banner.webp') type('image/webp'),
                url('/images/banner.png')  type('image/png'))!important;
    padding:22px 16px}
  .elabe-banner-title{font-size:clamp(20px,6.4vw,28px)}
}

@media(max-width:999px){
  /* шапка: логотип не должен съедать место у бургера и кнопки */
  .elabe-header .logo-link img,.elabe-header img,.logo-img{height:24px!important}
  .elabe-header{padding-inline:12px;gap:8px}
  .elabe-header .btn-register,.elabe-header .elabe-btn{font-size:11px;padding:9px 14px}

  /* липкая строка: текст в две строки, а не в шесть */
  #elabe-pin-bar{padding:8px 40px 8px 12px;gap:10px}
  #elabe-pin-bar .elabe-float-bonus{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:12px;line-height:1.25;flex:1 1 auto;min-width:0}
  #elabe-pin-bar .elabe-btn{flex:0 0 auto;font-size:11.5px;padding:9px 16px}
}

/* очень узкие экраны: кнопка в шапке дублирует липкую строку внизу —
   убираю её, чтобы логотип и бургер точно поместились */
@media(max-width:379px){
  .elabe-header .btn-register,.elabe-header .header-actions .elabe-btn{display:none}
  .elabe-header .logo-link img,.elabe-header img,.logo-img{height:22px!important}
}

/* ══ каталог на десктопе: убрать пустоты ═══════════════════════════════
   Причина: aspect-ratio 3/4 висел на ВСЕХ плитках. Широкая (span 2 колонки)
   становилась 548×731 — вдвое выше соседей по строке, и рядом с ними
   оставалось ~370px пустого места. Особым плиткам пропорция не нужна:
   они тянутся по строке, а картинка внутри и так object-fit: cover. */
@media(min-width:1000px){
  .elabe-play-grid{align-items:stretch}
  /* height:100% от строки авто-высоты замыкается сам на себя и раздувает ряд.
     В гриде растяжение и так по умолчанию — достаточно снять пропорцию. */
  /* Крупной 3:4 подходит точно: при ширине 2 колонок её высота равна двум
     обычным строкам плюс зазор. Широкой нужна своя пропорция — при auto
     высоту диктовала картинка (3:4 от двойной ширины = вдвое выше строки). */
  .elabe-play-grid>*:nth-child(12n+8){aspect-ratio:3/2!important}
  .elabe-play-grid>*:nth-child(12n+8) img{height:100%;object-fit:cover}
}