/* ==========================================================================
   lc rating cards - блок рейтинга казино.
   Отдельный файл, а не правка main.css (290 KB темы ztc): так обновление темы
   не затрёт карточки, а карточки не заденут остальную вёрстку.
   Префикс .lc-* . Палитра и шрифты взяты из переменных темы (--ztc-*),
   с явными значениями как фолбэк.
   ========================================================================== */

.lc-rating{
  --lc-bg:#03060A;
  --lc-panel:#0B1015;
  --lc-panel-2:#0F151B;
  --lc-line:rgba(255,255,255,.10);
  --lc-line-soft:rgba(255,255,255,.06);
  --lc-acid:var(--ztc-bg-bg-7,#CEF12B);
  --lc-olive:var(--ztc-bg-bg-2,#9FBD17);
  --lc-txt:#fff;
  --lc-txt-2:rgba(255,255,255,.72);
  --lc-txt-3:rgba(255,255,255,.44);
  --lc-f1:var(--ztc-family-font1,'Space Grotesk',sans-serif);
  --lc-f2:var(--ztc-family-font2,'Figtree',sans-serif);

  margin:30px 0 4px;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:left;
  font-family:var(--lc-f2);
}

.lc-card{
  position:relative;
  background:
    /* мелкое зерно поверх панели - убирает «пластиковую» плоскость тёмного фона */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#0C1116 0%,var(--lc-panel) 46%);
  border:1px solid var(--lc-line-soft);
  border-radius:16px;
  overflow:hidden;
  color:var(--lc-txt-2);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lc-card:hover{
  border-color:rgba(206,241,43,.34);
  transform:translateY(-2px);
  box-shadow:0 18px 44px -26px rgba(206,241,43,.35);
}

/* Крупная «призрачная» цифра позиции контуром - фирменный акцент вместо
   пустого правого поля. Только контур, очень низкая непрозрачность. */
.lc-card::after{
  content:attr(data-rank);
  position:absolute;right:-6px;bottom:-30px;
  font-family:var(--lc-f1);font-size:132px;font-weight:700;line-height:1;
  letter-spacing:-6px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.055);
  pointer-events:none;
  z-index:0;
}
.lc-card--top::after{-webkit-text-stroke-color:rgba(206,241,43,.14)}
.lc-card > *{position:relative;z-index:1}

/* тонкая акцентная линия сверху у первых трёх */
.lc-card--podium::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--lc-acid),rgba(206,241,43,0) 62%);
  z-index:2;
}
.lc-card--top{
  border-color:rgba(206,241,43,.24);
  box-shadow:0 0 44px -18px rgba(206,241,43,.22);
}

/* Появление карточек со сдвигом по очереди при прокрутке.
   Стартовое состояние задаётся только там, где браузер понимает
   animation-timeline, поэтому без поддержки карточка просто стоит на месте. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes lc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
    .lc-card{
      animation:lc-in .5s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();
      animation-range:entry 0% cover 18%;
    }
  }
}

/* бейдж из badgePrimary / badgeSecondary */
.lc-card .lc-badge{
  position:absolute;top:0;left:56px;
  background:var(--lc-acid);color:var(--lc-bg);
  font-family:var(--lc-f1);font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;padding:5px 12px 6px;border-radius:0 0 8px 8px;line-height:1;
}
.lc-card .lc-badge--alt{background:rgba(255,255,255,.12);color:#fff}

/* --- верхняя строка: номер | бренд | оффер | CTA --- */
.lc-top{
  display:grid;
  grid-template-columns:56px 200px minmax(0,1fr) 210px;
  align-items:center;
  gap:0 28px;
  padding:22px 26px 20px;
}
.lc-card--badged .lc-top{padding-top:32px}

.lc-rank{
  font-family:var(--lc-f1);font-size:28px;font-weight:700;line-height:1;
  color:rgba(255,255,255,.22);text-align:center;font-variant-numeric:tabular-nums;
}
.lc-card--podium .lc-rank{color:rgba(206,241,43,.55)}
.lc-card--top .lc-rank{color:var(--lc-acid)}

/* --- бренд: логотип, под ним оценка --- */
.lc-brand{text-align:center}
.lc-logo{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid var(--lc-line-soft);
  border-radius:10px;
  padding:12px 14px;
  display:flex;align-items:center;justify-content:center;
  min-height:70px;
  overflow:hidden;
  transition:border-color .25s ease;
}
.lc-card:hover .lc-logo{border-color:rgba(206,241,43,.28)}

/* Блик, пробегающий по плитке логотипа на ховере. Один псевдоэлемент,
   без JS и без библиотек. */
.lc-logo::after{
  content:'';
  position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(206,241,43,.13),transparent);
  transform:skewX(-18deg);
  opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .lc-card:hover .lc-logo::after{opacity:1;animation:lc-sheen .75s ease forwards}
}
@keyframes lc-sheen{from{left:-60%}to{left:120%}}
.lc-logo img{max-width:150px;max-height:46px;width:auto;height:auto;object-fit:contain;display:block}

.lc-score{margin-top:11px;display:flex;align-items:baseline;justify-content:center;gap:6px}
.lc-score b{
  font-family:var(--lc-f1);font-weight:700;font-size:24px;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1;
}
.lc-card .lc-score i{font-style:normal;font-size:11.5px;color:var(--lc-txt-3)}

/* оценка полосой, а не звёздами */
.lc-meter{margin-top:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.lc-card .lc-meter span{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--lc-olive),var(--lc-acid));
  box-shadow:0 0 10px rgba(206,241,43,.45);
  transform-origin:left center;
}
/* Полоса набирается при попадании карточки в экран. Без поддержки
   animation-timeline полоса просто сразу нужной длины. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes lc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .lc-card .lc-meter span{
      animation:lc-fill .7s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
  }
}

.lc-avis{margin-top:7px;font-size:11.5px;color:var(--lc-txt-3);letter-spacing:.2px}
.lc-card .lc-avis a{color:var(--lc-txt-3)!important;text-decoration:underline!important;text-underline-offset:2px}

/* --- оффер: бонус, преимущества, промокод --- */
.lc-offer{min-width:0}
.lc-card .lc-offer .bonus-main,
.lc-card .lc-offer .bonus-main *{
  font-family:var(--lc-f1);
  font-weight:600!important;
  font-size:21px;
  line-height:1.28;
  color:#fff!important;
}
.lc-offer .bonus-main p{margin:0}

.lc-feats{margin-top:11px}
.lc-card .lc-feats,
.lc-card .lc-feats *{color:var(--lc-txt-2)!important}
.lc-feats .bonus-features{display:flex;flex-direction:column;gap:6px}
.lc-feats .feature-item{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14.5px;line-height:1.35;
}
.lc-feats .feature-item::before{
  content:'';flex:0 0 3px;width:3px;height:15px;margin-top:3px;
  border-radius:2px;background:var(--lc-olive);opacity:.8;
}
.lc-feats p{margin:0}

.lc-promo{margin-top:12px;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--lc-txt-3)}
.lc-promo code{
  font-family:var(--lc-f1);font-size:13px;font-weight:600;letter-spacing:1.4px;color:var(--lc-acid);
  border:1px dashed rgba(206,241,43,.4);padding:4px 10px;border-radius:6px;
}

/* --- CTA и ответственная игра --- */
.lc-act{text-align:center}
.lc-card .lc-cta{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--lc-acid);color:var(--lc-bg)!important;
  font-family:var(--lc-f1);font-size:16px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  text-decoration:none!important;padding:16px 12px;border-radius:9px;
  overflow:hidden;
  transition:background .2s ease,box-shadow .2s ease;
}
/* Стрелка выезжает на ховере - вместо статичной иконки в кнопке. */
.lc-card .lc-cta::after{
  content:'';
  width:0;height:9px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg) translateX(-4px);
  opacity:0;
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.7,.3,1), width .25s ease;
}
.lc-card .lc-cta:hover{background:#DBFB4B;box-shadow:0 0 0 4px rgba(206,241,43,.14)}
.lc-card .lc-cta:hover::after{width:9px;opacity:1;transform:rotate(45deg) translateX(0)}
.lc-rg{margin-top:10px;font-size:11px;line-height:1.4}
.lc-card .lc-rg,
.lc-card .lc-rg *{color:var(--lc-txt-3)!important;font-size:11px;line-height:1.4;margin:0}

/* --- плашки преимуществ --- */
.lc-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--lc-line-soft);background:var(--lc-panel-2);
}
.lc-facts--1{grid-template-columns:1fr}
.lc-facts--2{grid-template-columns:repeat(2,1fr)}
.lc-facts--4{grid-template-columns:repeat(4,1fr)}
.lc-facts--5{grid-template-columns:repeat(5,1fr)}
.lc-facts--6{grid-template-columns:repeat(3,1fr)}

.lc-fact{
  position:relative;
  padding:14px 22px;
  display:flex;align-items:center;gap:12px;
  transition:background .2s ease;
}
/* Разделители градиентными волосками, а не сплошной линией - мягче на тёмном. */
.lc-fact::before{
  content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent);
}
.lc-fact:first-child::before{display:none}
.lc-card:hover .lc-fact{background:rgba(206,241,43,.03)}
.lc-fact svg{width:18px;height:18px;flex:0 0 18px;color:var(--lc-acid);opacity:.9}
.lc-fact-t{min-width:0}
.lc-card .lc-fact-l{
  display:block;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--lc-txt-3);line-height:1;
}
.lc-card .lc-fact-v{
  display:block;margin-top:5px;font-family:var(--lc-f1);font-size:15.5px;font-weight:500;
  color:#fff;line-height:1.15;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- платёжные методы --- */
.lc-pay{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 18px;
  padding:12px 26px;border-top:1px solid var(--lc-line-soft);background:var(--lc-panel-2);
}
.lc-card .lc-pay-l{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--lc-txt-3)}
.lc-card .lc-pay-i{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--lc-txt-2)}
.lc-pay-i svg{width:16px;height:16px;color:var(--lc-txt-3);flex:0 0 16px}

/* --- extra / special html --- */
.lc-extra{padding:13px 26px;border-top:1px solid var(--lc-line-soft);font-size:13.5px;line-height:1.45}
.lc-card .lc-extra,
.lc-card .lc-extra *{color:var(--lc-txt-2)!important;font-size:13.5px;line-height:1.45;margin:0}

/* --- кнопка раскрытия (только мобильный) --- */
.lc-more-t{position:absolute;opacity:0;width:0;height:0;pointer-events:none;margin:0}
.lc-more-b{display:none}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width:991px){
  .lc-top{grid-template-columns:44px 168px minmax(0,1fr);gap:0 20px;row-gap:16px}
  .lc-card .lc-badge{left:44px}
  .lc-act{grid-column:2 / span 2;display:flex;align-items:center;gap:18px;text-align:left}
  .lc-card .lc-cta{flex:0 0 200px;text-align:center}
  .lc-rg{margin-top:0;flex:1 1 auto}
  .lc-facts,.lc-facts--4,.lc-facts--5,.lc-facts--6{grid-template-columns:repeat(2,1fr)}
  .lc-fact:nth-child(odd)::before{display:none}
  .lc-fact:nth-child(n+3){border-top:1px solid var(--lc-line-soft)}
}

@media (max-width:640px){
  .lc-rating{margin-top:16px;gap:10px}
  /* призрачная цифра мельче, чтобы не спорила с текстом на узком экране */
  .lc-card::after{font-size:88px;right:-4px;bottom:-20px;letter-spacing:-4px}

  .lc-top{grid-template-columns:34px minmax(0,1fr);padding:14px 14px 12px;row-gap:12px}
  .lc-card--badged .lc-top{padding-top:28px}
  .lc-card .lc-badge{left:14px}
  .lc-rank{font-size:22px;text-align:left}

  .lc-brand{display:flex;align-items:center;gap:14px;text-align:left}
  .lc-logo{flex:0 0 128px;min-height:56px;padding:9px 10px}
  .lc-logo img{max-width:106px;max-height:38px}
  .lc-brand-meta{flex:1 1 auto;min-width:0}
  .lc-score{margin-top:0;justify-content:flex-start}
  .lc-meter{margin-top:6px}
  .lc-avis{margin-top:5px}

  .lc-offer{grid-column:1 / -1}
  .lc-card .lc-offer .bonus-main,
  .lc-card .lc-offer .bonus-main *{font-size:18px}
  .lc-feats .feature-item{font-size:13.5px}

  .lc-act{grid-column:1 / -1;display:block}
  .lc-card .lc-cta{padding:14px 12px}
  .lc-rg{margin-top:9px;text-align:center}

  .lc-fact{padding:11px 14px;gap:10px}
  .lc-card .lc-fact-v{font-size:14.5px}
  .lc-pay{padding:11px 14px;gap:6px 14px}
  .lc-extra{padding:12px 14px}

  /* доп. данные под кнопку, базовое предложение видно всегда */
  .lc-more-t:not(:checked) ~ .lc-facts,
  .lc-more-t:not(:checked) ~ .lc-pay,
  .lc-more-t:not(:checked) ~ .lc-extra{display:none}

  .lc-more-b{
    display:block;padding:12px 14px 13px;border-top:1px solid var(--lc-line-soft);
    background:var(--lc-panel-2);text-align:center;
    font-family:var(--lc-f1);font-size:12.5px;font-weight:500;letter-spacing:.6px;
    color:var(--lc-txt-2);cursor:pointer;user-select:none;
  }
  .lc-more-b::before{content:'En savoir plus'}
  .lc-more-b::after{content:'+';margin-left:9px;color:var(--lc-acid);font-weight:700}
  .lc-more-t:checked ~ .lc-more-b::before{content:'Masquer les détails'}
  .lc-more-t:checked ~ .lc-more-b::after{content:'\2212'}
  .lc-more-t:focus-visible ~ .lc-more-b{outline:2px solid var(--lc-acid);outline-offset:-2px}
}

/* ==========================================================================
   Мобильное уплотнение первого экрана:
   первая карточка видна целиком, вторая - частично, без пустот.
   ========================================================================== */
@media only screen and (max-width:767px){
  .hero1-section-area{padding-top:18px!important;padding-bottom:26px!important}
  .hero-header-area h1{font-size:clamp(26px,7.4vw,34px)!important;line-height:1.1!important;margin-bottom:10px!important}
  .hero-header-area h1 .elements1{display:none}
  .hero-header-area p{font-size:14.5px!important;line-height:1.42!important}
  .ranking-update{margin-top:10px!important}
}